fix: change back to current and make first release manual

.ddev/config.yaml

@@ -16,7 +16,10 @@ web_environment:
 corepack_enable: false
 nodejs_version: "18"
 
+additional_services:
+  - mailpit
 hooks:
   post-start:
-    - exec: "npm install"
+    - exec-host: |
-    - exec: "npm run dev:css"
+        ddev npm install
+        ddev npm run dev:css -- --watch &

.ddev/docker-compose.override.yaml

@@ -1,9 +0,0 @@
-version: '3.6'
-services:
-  web:
-    # Install needed dependencies and run webpack in watch mode
-    command: /bin/sh -c "npm install && npm run build:css -- --watch"
-    volumes:
-      - ../packages/base:/var/www/html/packages/base
-    environment:
-      - NODE_ENV=development

.gitea/workflows/deploy.yaml

@@ -68,8 +68,8 @@ jobs:
           rm typo3.tar.gz
       - name: Install ssh agent and rsync
         run: |
-          apt update
+          apt-get update
-          apt install -y openssh-client rsync
+          apt-get install -y openssh-client rsync
       - name: Upload release
         uses: deployphp/action@v1
         with:
@@ -93,8 +93,8 @@ jobs:
           rm typo3.tar.gz
       - name: Install ssh agent and rsync
         run: |
-          apt update
+          apt-get update
-          apt install -y openssh-client rsync
+          apt-get install -y openssh-client rsync
       - name: Switch to release
         uses: deployphp/action@v1
         with:
@@ -102,28 +102,28 @@ jobs:
           dep: --file=./build/deploy.php release:switch stage
           private-key: ${{secrets.STAGE_KEY}}
 
-  # deploy-production:
+  deploy-production:
-  #   needs: build
+    needs: build
-  #   runs-on: ubuntu-latest
+    runs-on: ubuntu-latest
-  #   steps:
+    steps:
-  #     - name: Setup PHP
+      - name: Setup PHP
-  #       uses: shivammathur/setup-php@7c0b4c8c8ebed23eca9ec2802474895d105b11bc
+        uses: shivammathur/setup-php@7c0b4c8c8ebed23eca9ec2802474895d105b11bc
-  #       with:
+        with:
-  #         php-version: ${{ env.PHP_VERSION }}
+          php-version: ${{ env.PHP_VERSION }}
-  #     - uses: actions/download-artifact@v3
+      - uses: actions/download-artifact@v3
-  #       with:
+        with:
-  #         name: typo3
+          name: typo3
-  #     - name: Extract artifact
+      - name: Extract artifact
-  #       run: |
+        run: |
-  #         tar xf typo3.tar.gz
+          tar xf typo3.tar.gz
-  #         rm typo3.tar.gz
+          rm typo3.tar.gz
-  #     - name: Install ssh agent and rsync
+      - name: Install ssh agent and rsync
-  #       run: |
+        run: |
-  #         apt update
+          apt-get update
-  #         apt install -y openssh-client rsync
+          apt-get install -y openssh-client rsync
-  #     - name: Deploy
+      - name: Deploy
-  #       uses: deployphp/action@v1
+        uses: deployphp/action@v1
-  #       with:
+        with:
-  #         deployer-binary: "./bin/dep"
+          deployer-binary: "./bin/dep"
-  #         dep: --file=./build/deploy.php release:create production
+          dep: --file=./build/deploy.php release:create production
-  #         private-key: ${{secrets.PROD_KEY}}
+          private-key: ${{secrets.PROD_KEY}}

.gitea/workflows/release.yaml

@@ -26,8 +26,8 @@ jobs:
           composer validate --no-check-publish && composer install --prefer-dist --no-progress --ignore-platform-reqs
       - name: Install ssh agent, rsync
         run: |
-          apt update
+          apt-get update
-          apt install -y openssh-client rsync
+          apt-get install -y openssh-client rsync
       - name: Switch to release
         uses: deployphp/action@v1
         with:

.roo/rules/rules.md

@@ -0,0 +1,163 @@
+# TYPO3 Project Rules for LLM Assistance
+
+## Project Overview
+This project is a TYPO3 installation with a custom site-package extension located in [`packages/base`](packages/base), providing layout, templates, and modular ContentBlocks for pages. The LLM should dynamically determine the TYPO3 version and related dependencies by examining project files.
+
+## Technology Stack
+- PHP (version defined in [`composer.json`](composer.json))
+- TYPO3 (version defined in [`composer.json`](composer.json))
+- Composer ([`composer.json`](composer.json))
+- Deployer ([`build/deploy.php`](build/deploy.php), [`build/servers.yaml`](build/servers.yaml))
+- Webpack ([`webpack.config.js`](webpack.config.js))
+- PostCSS ([`postcss.config.js`](postcss.config.js)) with Tailwind CSS (version defined in [`package.json`](package.json)) and Autoprefixer
+- SCSS (`packages/base/Resources/Public/Scss/`)
+- JavaScript bundling (`packages/base/Resources/Public/JavaScript/`)
+- PHPStan, Rector (`phpstan.neon`, `rector.php`)
+- YAML and TypoScript for configuration
+
+## Project Structure
+- [`config/`](config/): Global TYPO3 config and environment overrides  
+- [`data/`](data/): Database dumps and test fixtures  
+- [`packages/base/`](packages/base/): Site-package extension with design assets, Fluid templates, TypoScript, ContentBlocks  
+- [`public/`](public/): Document root  
+- Build files: [`webpack.config.js`](webpack.config.js), [`postcss.config.js`](postcss.config.js)  
+- Dependency manifests: [`package.json`](package.json), [`composer.json`](composer.json)
+
+## Development Guidelines
+- Use DDEV for local environment management: `ddev start`, `ddev restart`, `ddev stop`, etc.
+- Check versions in [`composer.json`](composer.json) and [`package.json`](package.json) before referencing dependencies; the LLM should examine these files to determine actual versions
+- Manage PHP dependencies via Composer within DDEV: `ddev exec composer install`, `ddev exec composer update`
+- Manage JS/CSS via npm within DDEV: `ddev exec npm install`, `ddev exec npm run dev` / `ddev exec npm run build`
+- Follow TYPO3 extension conventions in [`packages/base`](packages/base): `ext_localconf.php`, `ext_tables.php`, `ext_emconf.php`
+- Organize TypoScript under [`packages/base/Configuration/Sets/SitePackage/TypoScript/`](packages/base/Configuration/Sets/SitePackage/TypoScript/)
+- Enforce static analysis and automated refactoring with PHPStan and Rector
+
+## Default Workflow
+When handling any task, LLMs should follow this structured approach:
+
+1. **Information Gathering**
+   - Read the necessary code from the project using available tools
+   - Examine [`composer.json`](composer.json) and [`package.json`](package.json) to understand current dependencies and versions
+   - Use MCP servers to read documentation about libraries that are used and should be used
+   - Review relevant project files to understand the current implementation
+   - Gather context about the specific area of the codebase that will be affected
+
+2. **Planning**
+   - Analyze the gathered information to understand the task requirements
+   - Plan how the task should be implemented within the existing project structure
+   - Consider potential impacts on other parts of the codebase
+   - Identify which files need to be created, modified, or reviewed
+   - Determine the best approach that follows project conventions and best practices
+
+3. **Implementation**
+   - Execute the planned task using appropriate tools
+   - Follow the project's coding standards and conventions
+   - Test the implementation where possible
+   - Ensure all changes work within the existing project structure
+
+4. **Documentation Updates**
+   - Update project documentation (README files) if the task affects user-facing functionality
+   - Update these rules ([`.roo/rules/rules.md`](.roo/rules/rules.md)) if the task introduces new patterns, conventions, or important information that future LLMs should know
+   - Ensure any new features or changes are properly documented for future reference
+
+This workflow ensures thorough understanding, proper planning, clean implementation, and maintained documentation for all project changes.
+
+## ContentBlocks Usage
+- Defined under [`packages/base/ContentBlocks/ContentElements/`](packages/base/ContentBlocks/ContentElements/)
+- Element folder contains:
+  - `config.yaml` (block definition)
+  - `templates/frontend.html` (frontend rendering)
+  - `templates/backend-preview.html` (backend preview)
+  - `language/labels.xlf` (translations)
+- To add a new block:
+  1. Create a folder under `ContentElements/`
+  2. Define `config.yaml` and labels
+  3. Add Fluid templates in `templates/`
+  4. Clear caches and verify in TYPO3 backend (`ddev exec vendor/bin/typo3cms cache:flush`)
+- Content element restrictions:
+  - ContentBlocks are automatically registered via their YAML config files
+  - Availability is controlled through PageTSconfig using `TCEFORM.tt_content.CType.keepItems`
+  - The `keepItems` list in [`packages/base/Configuration/Sets/SitePackage/page.tsconfig`](packages/base/Configuration/Sets/SitePackage/page.tsconfig) determines which content elements editors can use
+  - To enable a new ContentBlock, add its CType to the `keepItems` list
+- Clear caches after changes
+
+## Styling Guidelines
+- All design work lives in the [`packages/base`](packages/base) extension
+- SCSS structure in `Resources/Public/Scss/`:
+  - `abstracts/` (variables, mixins, functions)
+  - `base/` (resets, global styles)
+  - `components/` (UI modules: buttons, cards, nav, etc.)
+  - `layouts/` (page-specific styles)
+- Include Tailwind directives in `main.scss`:
+  ```scss
+  @tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+  ```
+- Customize Tailwind in [`tailwind.config.js`](tailwind.config.js)
+
+## Build Process
+1. Compile SCSS → PostCSS (Tailwind + Autoprefixer) → CSS in `Resources/Public/Css/` (within DDEV: `ddev exec npm run build:css`)
+2. Bundle JS via Webpack → `Resources/Public/JavaScript/` (within DDEV: `ddev exec npm run build:js`)
+3. Run dev mode: `ddev exec npm run dev`
+4. Run production build: `ddev exec npm run build`
+5. Deploy via Deployer: `ddev exec vendor/bin/dep deploy`
+
+## File Editing Guidelines
+- TypoScript: `packages/base/Configuration/Sets/SitePackage/TypoScript/`
+- YAML: `packages/base/Configuration/**/*.yaml`
+- Fluid templates: `packages/base/Resources/Private/**/*.html`
+- SCSS: `packages/base/Resources/Public/Scss/**/*.scss`
+- JavaScript: `packages/base/Resources/Public/JavaScript/**/*.js`
+- Never read or commit the environment file: [`.env`](.env)
+
+## MCP Server Usage
+- Use `brave_web_search` for general web searches via `use_mcp_tool`
+- Use `resolve-library-id` + `get-library-docs` for official API docs:
+  - `/typo3/docs` for TYPO3 reference
+  - `/tailwindcss` for Tailwind CSS docs
+- For NixOS/Home Manager queries: use `nixos_search`, `home_manager_search`
+
+## Version Management
+- Always inspect [`composer.json`](composer.json) for PHP dependencies and TYPO3 version
+- Always inspect [`package.json`](package.json) for frontend dependencies
+- Use MCP servers (e.g., `resolve-library-id`, `get-library-docs`) to fetch documentation matching the exact versions found
+- Never assume specific dependency versions in code examples; dynamically reference versions as discovered
+
+## Common Tasks
+1. **Initial Setup**
+   ```bash
+   ddev start
+   ddev composer install
+   ddev npm install
+   ```
+2. **Development Build**
+   ```bash
+   ddev npm run dev
+   ```
+3. **Production Build**
+   ```bash
+   ddev npm run build
+   ```
+4. **Clear TYPO3 Cache**
+   ```bash
+   ddev typo3cms cache:flush
+   ```
+5. **Add a ContentBlock**
+   - Create folder, config, templates, translations
+   - Add the new ContentBlock's CType to the `keepItems` list in [`packages/base/Configuration/Sets/SitePackage/page.tsconfig`](packages/base/Configuration/Sets/SitePackage/page.tsconfig)
+   - Clear caches and verify in backend
+6. **DDEV Environment Management**
+   - Restart environment: `ddev restart`
+   - Stop environment: `ddev stop`
+7. **Deploy**
+   ```bash
+   ddev exec vendor/bin/dep deploy production
+   ```
+
+## Troubleshooting
+- **Blank CSS/JS**: confirm build pipeline ran; check [`webpack.config.js`](webpack.config.js)
+- **YAML Syntax Errors**: validate `config.yaml` with a linter
+- **Fluid Rendering Issues**: clear caches; verify template paths
+- **TypoScript Not Loading**: ensure correct path under `Configuration/Sets`
+- **Cache Problems**: always flush caches after changes

ToDo.md

@@ -0,0 +1,6 @@
+[x] hero element needs a possibility to set the anchor link for down arrow
+[x] unordered list design
+[x] check if marker design of ul and ol use em instead of rem for sizing
+[x] navbar should be sticky on mobile
+[ ] disable social media icons
+[ ] footer links zu datenschutz und impressum

build/deploy.php

@@ -55,16 +55,16 @@ set('rsync', [
     'timeout' => 300
 ]);
 
-task('typo3:extension:setup', function () {
-    cd('{{release_path}}');
-    run('{{bin/php}} bin/typo3 extension:setup');
-});
-
 task('typo3:cache:flush', function() {
     cd('current');
     run('{{bin/php}} bin/typo3 cache:flush');
 });
 
+task('typo3:extension:setup', function () {
+    cd('{{release_path}}');
+    run('{{bin/php}} bin/typo3 extension:setup');
+});
+
 task('typo3:cache:warmup', function() {
     cd('current');
     run('{{bin/php}} bin/typo3 cache:warmup');
@@ -94,6 +94,7 @@ task('release:create', [
     'deploy:vendors',
     'deploy:shared',
     'deploy:writable',
+    'typo3:cache:flush',
     'typo3:extension:setup',
     'deploy:unlock',
     'deploy:success'
@@ -117,6 +118,7 @@ task('deploy', [
     'deploy:vendors',
     'deploy:shared',
     'deploy:writable',
+    'typo3:cache:flush',
     'typo3:extension:setup',
     'deploy:symlink',
     'php:reload',
@@ -130,10 +132,10 @@ task('deploy', [
 ]);
 
 host('stage')
-    ->set('cachetool', '/var/run/phpfpm/lena-schilling.cloonar.dev.sock');
+    ->set('cachetool', '/var/run/phpfpm/dialog-relations.cloonar.dev.sock');
 
 host('production')
-    ->set('cachetool', '/var/run/phpfpm/lena-schilling.at.sock');
+    ->set('cachetool', '/var/run/phpfpm/dialog-relations.at.sock');
 
 after('deploy:symlink', 'cachetool:clear:opcache');
 // unlock after failure

config/system/additional.php

@@ -23,6 +23,7 @@ $customChanges = [
       'transport_smtp_encrypt' => $_ENV['TYPO3_MAIL_SMTP_ENCRYPT'],
       'transport_smtp_username' => $_ENV['TYPO3_MAIL_SMTP_USER'],
       'transport_smtp_password' => $_ENV['TYPO3_MAIL_SMTP_PASSWORD'],
+      'transport_sendmail_command' => $_ENV['TYPO3_MAIL_SENDMAIL_COMMAND'],
   ],
   'SYS' => [
     'caching' => [

config/system/settings.php

@@ -112,11 +112,14 @@ return [
         'processor_path' => '/run/current-system/sw/bin/',
     ],
     'MAIL' => [
-        'defaultMailFromAddress' => 'no-reply@example.com',
+        'defaultMailFromAddress' => $_ENV['TYPO3_MAIL_FROM'],
-        'transport_smtp_encrypt' => false,
+        'transport' => $_ENV['TYPO3_MAIL_TRANSPORT'],
-        'transport_smtp_password' => '',
+        'transport_smtp_server' => $_ENV['TYPO3_MAIL_SMTP_SERVER'],
-        'transport_smtp_server' => '',
+        'transport_smtp_encrypt' => $_ENV['TYPO3_MAIL_SMTP_ENCRYPT'],
-        'transport_smtp_username' => '',
+        'transport_smtp_username' => $_ENV['TYPO3_MAIL_SMTP_USER'],
+        'transport_smtp_password' => $_ENV['TYPO3_MAIL_SMTP_PASSWORD'],
+        'transport_sendmail_command' => $_ENV['TYPO3_MAIL_SENDMAIL_COMMAND'],
+        'transport_sendmail_command' => $_ENV['TYPO3_MAIL_SENDMAIL_COMMAND'],
     ],
     'SYS' => [
         'caching' => [

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "scripts": {
     "build:css": "NODE_ENV=production webpack --config webpack.config.js --mode production",
-    "dev:css": "webpack --config webpack.config.js --mode development"
+    "dev:css": "webpack --config webpack.config.js --mode development --watch"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.21",

packages/base/Configuration/Ext/Form/Yaml/Setup.yaml

@@ -13,6 +13,7 @@ TYPO3:
                 -
                   renderingOptions:
                     formNavigation:
+                      navigationClassAttribute: 'form-navigation text-right'
                       btnNextClassAttribute: 'btn btn-primary'
                       btnPreviousClassAttribute: 'btn btn-outline btn-primary'
                       btnSubmitClassAttribute: 'btn btn-primary'
@@ -44,7 +45,7 @@ TYPO3:
                 -
                   properties:
                     containerClassAttribute: 'form-control form-element-checkbox mb-4'
-                    elementClassAttribute: 'checkbox'
+                    elementClassAttribute: 'checkbox border border-primary'
                     labelTextClassAttribute: 'label-text'
                     labelClassAttribute: 'label cursor-pointer justify-start gap-2'
             ContentElement:
@@ -147,7 +148,7 @@ TYPO3:
                   properties:
                     fieldsetClassAttribute: 'mb-4 [&>legend]:label [&>legend]:label-text [&>legend]:justify-start'
                     containerClassAttribute: 'form-control form-element-radio'
-                    elementClassAttribute: 'radio'
+                    elementClassAttribute: 'radio border border-primary'
                     labelTextClassAttribute: 'label-text'
                     labelClassAttribute: 'label cursor-pointer justify-start gap-2'
             Telephone:

packages/base/Configuration/Sets/SitePackage/page.tsconfig

@@ -9,10 +9,11 @@ RTE {
 TCEFORM {
   tt_content {
     CType {
-      keepItems = cloonar_text,cloonar_textimage,cloonar_hero,form_formframework
+      keepItems = cloonar_text,cloonar_textimage,cloonar_hero,cloonar_cards,cloonar_imagegallery,form_formframework
     }
   }
 }
 
 TCEMAIN {
 }
+

packages/base/ContentBlocks/ContentElements/card_container/config.yaml

@@ -0,0 +1,35 @@
+name: cloonar/cards
+typeName: cloonar_cards
+group: default
+prefixFields: true
+prefixType: full
+iconIdentifier: 'content-card-container'
+fields:
+  -
+    identifier: header
+    useExistingField: true
+  -
+    identifier: bodytext
+    type: Textarea
+    enableRichtext: false
+    useExistingField: true
+  -
+    identifier: cards
+    type: Collection
+    labelField: header
+    fields:
+      -
+        identifier: header
+        type: Text
+      -
+        identifier: bodytext
+        type: Textarea
+        enableRichtext: true
+        rows: 15
+      -
+        identifier: images
+        type: File
+        extendedPalette: false
+        minitems: 1
+        maxitems: 1
+        allowed: common-image-types

packages/base/ContentBlocks/ContentElements/card_container/language/labels.xlf

@@ -0,0 +1,14 @@
+<?xml version="1.0"?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+	<file datatype="plaintext" original="labels.xlf" source-language="en" date="2024-12-12T00:46:08+00:00" product-name="cloonar/hero">
+		<header/>
+		<body>
+			<trans-unit id="title">
+				<source>Cards</source>
+			</trans-unit>
+			<trans-unit id="description">
+				<source>Card Element will show a list of cards</source>
+			</trans-unit>
+		</body>
+	</file>
+</xliff>

packages/base/ContentBlocks/ContentElements/card_container/templates/backend-preview.html

@@ -0,0 +1,12 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+
+<f:layout name="Default" />
+
+<f:section name="Main">
+    <strong>Card Container</strong>
+    <f:if condition="{data.header}">
+        <p><strong>Header:</strong> {data.header}</p>
+    </f:if>
+</f:section>
+
+</html>

packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html

@@ -0,0 +1,88 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+
+<f:layout name="Default" />
+
+<f:section name="Header" />
+
+<f:section name="Main">
+    <div class="card-container">
+        <f:if condition="{data.header}">
+            <h2>{data.header}</h2>
+        </f:if>
+        <f:if condition="{data.bodytext}">
+            <f:then>
+                <div class="max-w-3xl prose lg:prose-lg">
+                    <p>{data.bodytext}</p>
+                </div>
+            </f:then>
+        </f:if>
+
+        <f:if condition="{data.cards}">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <f:for each="{data.cards}" as="card">
+                    <div class="card-flip group perspective" tabindex="0">
+                        <div class="card-flip-inner relative w-full h-64 preserve-3d group-hover:rotate-y-180 group-focus:rotate-y-180 duration-500">
+                            <div class="card-front absolute w-full h-full backface-hidden overflow-hidden shadow-lg">
+                                <f:if condition="{card.images}">
+                                    <f:then>
+                                      <picture class="w-full h-full object-cover transition-all duration-500">
+                                        <!-- WEBP source -->
+                                        <source
+                                          type="image/webp"
+                                          srcset="
+                                            {f:uri.image(image:card.images.0, width:'320c', cropVariant:'default', fileExtension:'webp')} 320w,
+                                            {f:uri.image(image:card.images.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w,
+                                            {f:uri.image(image:card.images.0, width:'1024c', cropVariant:'default', fileExtension:'webp')} 1024w"
+                                          sizes="(max-width: 767px) 90vw,
+                                                 {f:if(condition: '{data.imagesize} == 1', then: '(min-width: 768px) 40vw', else: '(min-width: 768px) 50vw')}" />
+                                        <!-- Fallback source -->
+                                        <source
+                                          srcset="
+                                            {f:uri.image(image:card.images.0, width:'320c', cropVariant:'default')} 320w,
+                                            {f:uri.image(image:card.images.0, width:'400c', cropVariant:'default')} 768w,
+                                            {f:uri.image(image:card.images.0, width:'538c', cropVariant:'default')} 1024w"
+                                          sizes="(max-width: 767px) 90vw,
+                                                 {f:if(condition: '{data.imagesize} == 1', then: '(min-width: 768px) 40vw', else: '(min-width: 768px) 50vw')}" />
+                                        <f:image
+                                          image="{card.images.0}"
+                                          treatIdAsReference="1"
+                                          cropVariant="default"
+                                          width="538c"
+                                          alt="{card.images.0.alternative}"
+                                          class="w-full h-full object-cover"
+                                        />
+                                      </picture>
+                                    </f:then>
+                                    <f:else>
+                                        <div class="w-full h-full bg-gray-300 flex items-center justify-center">
+                                            <span class="text-gray-500">No Image</span>
+                                        </div>
+                                    </f:else>
+                                </f:if>
+                                <div class="absolute inset-0 bg-white bg-opacity-80 flex flex-col items-center justify-center">
+                                    <div class="w-full">
+                                        <h3 class="text-black text-xl font-bold text-center px-4">{card.header}</h3>
+                                    </div>
+                                    <div class="w-full text-center">
+                                        <div class="w-6 h-6 bg-primary text-white rounded-full inline-flex items-center justify-center">
+                                            <i class="ci ci-arrow-up-right"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="card-back absolute w-full h-full backface-hidden rotate-y-180 bg-light-grey border border-dark-grey p-6">
+                                <h4 class="text-center">{card.header}</h4>
+                                <div class="text-sm">
+                                    <f:format.html>{card.bodytext}</f:format.html>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </f:for>
+            </div>
+        </f:if>
+    </div>
+</f:section>
+
+</html>

packages/base/ContentBlocks/ContentElements/header/assets/frontend.css

@@ -1 +0,0 @@
-/* CSS for header content element */

packages/base/ContentBlocks/ContentElements/header/config.yaml

@@ -1,10 +0,0 @@
-name: cloonar/header
-typeName: cloonar_header
-group: default
-prefixFields: true
-prefixType: full
-label: LLL:EXT:base/ContentBlocks/ContentElements/header/language/labels.xlf:header.title
-description: LLL:EXT:base/ContentBlocks/ContentElements/header/language/labels.xlf:header.description
-fields:
-  - identifier: header
-    useExistingField: true

packages/base/ContentBlocks/ContentElements/header/language/labels.xlf

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<xliff version="1.0">
-  <file source-language="en" datatype="plaintext" original="messages">
-    <body>
-      <trans-unit id="title">
-        <source>Header</source>
-      </trans-unit>
-      <trans-unit id="description">
-        <source>A simple content element that displays a header as an H1.</source>
-      </trans-unit>
-    </body>
-  </file>
-</xliff>

packages/base/ContentBlocks/ContentElements/header/templates/backend-preview.html

@@ -1,15 +0,0 @@
-<html
-    xmlns:be="http://typo3.org/ns/TYPO3/CMS/Backend/ViewHelpers"
-    data-namespace-typo3-fluid="true"
->
-<f:layout name="Preview"/>
-<f:section name="Header">
-    <be:link.editRecord uid="{data.uid}" table="{data.mainType}">
-        <f:if condition="{data.header}">
-            <f:then><strong>{data.header}</strong></f:then>
-        </f:if>
-    </be:link.editRecord>
-</f:section>
-<f:section name="Content">
-</f:section>
-</html>

packages/base/ContentBlocks/ContentElements/header/templates/frontend.html

@@ -1,6 +0,0 @@
-<f:layout name="Default" />
-<f:section name="Main">
-    <h1 class="font-hajime text-primary font-normal leading-none text-center text-5xl md:text-7xl">
-        <span>{data.header}</span>
-    </h1>
-</f:section>

packages/base/ContentBlocks/ContentElements/hero/assets/scroll-to-next.js

@@ -0,0 +1,32 @@
+document.addEventListener('DOMContentLoaded', () => {
+  document
+    .querySelectorAll('.hero-down-link')
+    .forEach(link => link.addEventListener('click', scrollToNext));
+});
+
+function scrollToNext(e) {
+  e.preventDefault();
+  const refEl = e.currentTarget;
+  const isMobile = window.matchMedia('(max-width: 768px)').matches;
+
+  if (isMobile) {
+    const target = document.getElementById('hero-text');
+    if (!target) {
+      console.warn('scrollToNext: no element with id="hero-text"');
+      return;
+    }
+    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+  } else {
+    const frames = Array.from(document.querySelectorAll('.frame'));
+    const nextFrame = frames.find(frame =>
+      refEl.compareDocumentPosition(frame) & Node.DOCUMENT_POSITION_FOLLOWING
+    );
+
+    if (!nextFrame) {
+      console.warn('scrollToNext: no .frame found after this link');
+      return;
+    }
+    nextFrame.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+}

packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html

@@ -3,12 +3,12 @@
 <f:section name="Header" />
 
 <f:section name="Main">
-  <section class="bg-white md:bg-hero-gradient mb-16">
+  <section class="bg-white md:bg-hero-gradient md:mb-16 -mt-16">
     <div class="container mx-auto px-6 py-12 md:py-24 bg-white md:bg-hero-inner">
       <div class="md:flex md:items-center">
 
         <!-- IMAGE HALF -->
-        <div class="order-2 md:order-1 md:w-1/2 relative">
+        <div class="order-2 py-16 md:order-1 md:w-1/2 relative">
           <f:if condition="{data.image}">
             <f:then>
               <picture class="block w-full object-cover">
@@ -48,9 +48,9 @@
 
           <!-- Down‑arrow, half out on the right edge -->
           <div
-            class="absolute top-1/2 -translate-y-1/2 right-[-2rem] z-20">
+            class="absolute -translate-y-1/2 right-1/2 translate-x-1/2 md:top-2/3 md:-translate-y-1/2 md:right-[-3rem] md:translate-x-0 z-20">
-            <a href="#next-section"
+            <a href="#"
-               class="bg-primary border-4 border-white text-white rounded-full p-5 inline-flex items-center justify-center hover:bg-opacity-90">
+               class="hero-down-link w-24 h-24 text-5xl bg-primary border-8 border-white text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white">
               <span class="sr-only">Scroll down</span>
               <i class="ci ci-arrow-down"></i>
             </a>
@@ -58,12 +58,12 @@
         </div>
 
         <!-- TEXT HALF -->
-        <div class="order-1 md:order-2 md:w-1/2 flex flex-col justify-center space-y-6 md:pl-24">
+        <div id="hero-text" class="order-1 md:order-2 md:w-1/2 flex flex-col justify-center md:pl-24">
 
           <!-- Desktop: line + intro -->
-          <div class="hidden md:flex items-center space-x-3">
+          <div class="flex items-center space-x-3">
             <span class="block h-px w-10 bg-gray-600"></span>
-            <span class="text-sm uppercase tracking-wide text-gray-600">
+            <span class="text-sm uppercase tracking-wide font-bold">
               {data.subheader}
             </span>
           </div>
@@ -74,25 +74,28 @@
           </h1>
 
           <!-- Body copy -->
-          <p class="text-base md:text-lg text-gray-800 max-w-md">
+          <div class="text-base md:text-lg max-w-md">
             <f:format.html>{data.bodytext}</f:format.html>
-          </p>
+          </div>
 
+          <f:comment>
           <!-- Social icons -->
           <div class="space-x-3">
-            <a href="#" class="bg-primary text-white p-1 rounded-full inline-flex items-center justify-center">
+            <a href="#" aria-label="LinkedIn" class="w-6 h-6 md:w-10 md:h-10 bg-primary text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white">
                 <i class="ci ci-linkedin"></i>
             </a>
-            <a href="#" class="bg-primary text-white p-1 rounded-full inline-flex items-center justify-center">
+            <a href="#" aria-label="Instagram" class="w-6 h-6 md:w-10 md:h-10 bg-primary text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white">
                 <i class="ci ci-instagram"></i>
             </a>
-            <a href="#" class="bg-primary text-white p-1 rounded-full inline-flex items-center justify-center">
+            <a href="#" aria-label="Facebook" class="w-6 h-6 md:w-10 md:h-10 bg-primary text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white">
                 <i class="ci ci-facebook"></i>
             </a>
           </div>
+          </f:comment>
 
         </div>
       </div>
     </div>
   </section>
+  <f:asset.script identifier="scroll-to-next" src="{cb:assetPath()}/scroll-to-next.js" nonce="{f:security.nonce()}"/>
 </f:section>

packages/base/ContentBlocks/ContentElements/imagegallery/config.yaml

@@ -0,0 +1,26 @@
+name: cloonar/imagegallery
+typeName: cloonar_imagegallery
+group: default
+prefixFields: false
+fields:
+  - identifier: header
+    useExistingField: true
+  - identifier: image
+    type: File
+    properties:
+      allowed: [jpg, jpeg, png, gif, webp]
+      multiple: true
+    useExistingField: true
+  - identifier: columns
+    type: Select
+    renderType: selectSingle
+    default: 1
+    items:
+      - label: LLL:EXT:base/ContentBlocks/ContentElements/imagegallery/language/labels.xlf:columns.1
+        value: 1
+      - label: LLL:EXT:base/ContentBlocks/ContentElements/imagegallery/language/labels.xlf:columns.2
+        value: 2
+      - label: LLL:EXT:base/ContentBlocks/ContentElements/imagegallery/language/labels.xlf:columns.3
+        value: 3
+      - label: LLL:EXT:base/ContentBlocks/ContentElements/imagegallery/language/labels.xlf:columns.5
+        value: 5

packages/base/ContentBlocks/ContentElements/imagegallery/language/labels.xlf

@@ -0,0 +1,26 @@
+<?xml version="1.0"?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+  <file datatype="plaintext" original="labels.xlf" source-language="en" product-name="cloonar/imagegallery">
+    <header/>
+    <body>
+      <trans-unit id="title">
+        <source>Image Gallery</source>
+      </trans-unit>
+      <trans-unit id="description">
+        <source>A gallery of images with configurable columns</source>
+      </trans-unit>
+      <trans-unit id="columns.1">
+        <source>1 Column</source>
+      </trans-unit>
+      <trans-unit id="columns.2">
+        <source>2 Columns</source>
+      </trans-unit>
+      <trans-unit id="columns.3">
+        <source>3 Columns</source>
+      </trans-unit>
+      <trans-unit id="columns.5">
+        <source>5 Columns</source>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>

packages/base/ContentBlocks/ContentElements/imagegallery/templates/backend-preview.html

@@ -0,0 +1,36 @@
+<html
+    xmlns:be="http://typo3.org/ns/TYPO3/CMS/Backend/ViewHelpers"
+    data-namespace-typo3-fluid="true"
+>
+<f:layout name="Preview"/>
+
+<f:section name="Header">
+    <be:link.editRecord uid="{data.uid}" table="{data.mainType}">
+        <f:if condition="{data.header}">
+            <f:then><strong>{data.header}</strong></f:then>
+        </f:if>
+    </be:link.editRecord>
+</f:section>
+
+<f:section name="Content">
+    <f:if condition="{data.image}">
+        <div class="row">
+            <f:for each="{data.image}" as="image" iteration="iterator">
+                <f:if condition="{iterator.index} < 3">
+                    <div class="col-4">
+                        <f:image image="{image}" width="100" height="auto" treatIdAsReference="1" alt="Preview image" />
+                    </div>
+                </f:if>
+            </f:for>
+        </div>
+        <p>
+            <f:switch expression="{data.columns}">
+                <f:case value="2">2 Columns</f:case>
+                <f:case value="3">3 Columns</f:case>
+                <f:case value="5">5 Columns</f:case>
+                <f:defaultCase>1 Column</f:defaultCase>
+            </f:switch>
+        </p>
+    </f:if>
+</f:section>
+</html>

packages/base/ContentBlocks/ContentElements/imagegallery/templates/frontend.html

@@ -0,0 +1,63 @@
+<f:layout name="Default" />
+<f:section name="Header"></f:section>
+<f:section name="Main">
+  <f:if condition="{data.header}">
+    <h2 class="text-center mb-8">{data.header}</h2>
+  </f:if>
+
+  <f:if condition="{data.image}">
+    <f:variable name="columnClass">
+      <f:switch expression="{data.columns}">
+        <f:case value="2">md:grid-cols-2</f:case>
+        <f:case value="3">md:grid-cols-3</f:case>
+        <f:case value="5">md:grid-cols-5</f:case>
+        <f:defaultCase>md:grid-cols-1</f:defaultCase>
+      </f:switch>
+    </f:variable>
+
+    <div class="grid grid-cols-1 {columnClass} gap-6 md:gap-8">
+      <f:for each="{data.image}" as="image">
+        <div class="relative">
+          <f:if condition="{image.link}">
+            <f:then>
+              <f:link.typolink parameter="{image.link}" class="block w-full h-full">
+                <picture class="block w-full h-full">
+                  <source
+                    type="image/webp"
+                    srcset="{f:uri.image(image:image, width:'320', cropVariant:'default', fileExtension:'webp')} 320w,
+                            {f:uri.image(image:image, width:'768', cropVariant:'default', fileExtension:'webp')} 768w"
+                    sizes="(max-width: 767px) 90vw, 33vw" />
+                  <img
+                    src="{f:uri.image(image:image, width:'768', cropVariant:'default')}"
+                    srcset="{f:uri.image(image:image, width:'320', cropVariant:'default')} 320w,
+                            {f:uri.image(image:image, width:'768', cropVariant:'default')} 768w"
+                    sizes="(max-width: 767px) 90vw, 33vw"
+                    alt="{image.alternative}"
+                    class="w-full h-full object-cover"
+                  />
+                </picture>
+              </f:link.typolink>
+            </f:then>
+            <f:else>
+              <picture class="block w-full h-full">
+                <source
+                  type="image/webp"
+                  srcset="{f:uri.image(image:image, width:'320', cropVariant:'default', fileExtension:'webp')} 320w,
+                        {f:uri.image(image:image, width:'768', cropVariant:'default', fileExtension:'webp')} 768w"
+                  sizes="(max-width: 767px) 90vw, 33vw" />
+                <img
+                  src="{f:uri.image(image:image, width:'768', cropVariant:'default')}"
+                  srcset="{f:uri.image(image:image, width:'320', cropVariant:'default')} 320w,
+                          {f:uri.image(image:image, width:'768', cropVariant:'default')} 768w"
+                  sizes="(max-width: 767px) 90vw, 33vw"
+                  alt="{image.alternative}"
+                  class="w-full h-full object-cover"
+                />
+              </picture>
+            </f:else>
+          </f:if>
+        </div>
+      </f:for>
+    </div>
+  </f:if>
+</f:section>

packages/base/ContentBlocks/ContentElements/stats/config.yaml

@@ -1,10 +0,0 @@
-name: cloonar/stats
-typeName: cloonar_stats
-group: default
-prefixFields: true
-prefixType: full
-fields:
-  - identifier: bodytext
-    type: Textarea
-    enableRichtext: true
-    useExistingField: true

packages/base/ContentBlocks/ContentElements/stats/language/labels.xlf

@@ -1,14 +0,0 @@
-<?xml version="1.0"?>
-<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
-  <file datatype="plaintext" original="labels.xlf" source-language="en" product-name="cloonar/stats">
-    <header/>
-    <body>
-      <trans-unit id="title">
-        <source>Statistics Block</source>
-      </trans-unit>
-      <trans-unit id="description">
-        <source>A responsive statistics content block with four editable columns.</source>
-      </trans-unit>
-    </body>
-  </file>
-</xliff>

packages/base/ContentBlocks/ContentElements/stats/templates/backend-preview.html

@@ -1,13 +0,0 @@
-<html
-    xmlns:be="http://typo3.org/ns/TYPO3/CMS/Backend/ViewHelpers"
-    data-namespace-typo3-fluid="true"
->
-<f:layout name="Preview"/>
-
-<f:section name="Header">
-</f:section>
-
-<f:section name="Content">
-</f:section>
-
-</html>

packages/base/ContentBlocks/ContentElements/stats/templates/frontend.html

@@ -1,14 +0,0 @@
-<f:layout name="Default" />
-
-<f:section name="Header" />
-
-<f:section name="Main">
-  <div class="relative z-10 bg-white p-4 md:py-12 md:px-4 max-w-6xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8">
-    <f:format.html>
-      {data.bodytext -> f:format.raw() -> cb:processRichText(styles: [
-          'p=text-center uppercase text-primary',
-          'span.big-number=block text-6xl font-hajime normal-case'
-      ])}
-    </f:format.html>
-  </div>
-</f:section>

packages/base/ContentBlocks/ContentElements/text/templates/frontend.html

@@ -1,6 +1,6 @@
 <f:layout name="Default" />
 <f:section name="Main">
-    <div class="fade-in-on-scroll py-16">
+    <div class="fade-in-on-scroll">
         <f:if condition="{data.header}">
             <f:then><h2>{data.header}</h2></f:then>
         </f:if>

packages/base/ContentBlocks/ContentElements/textimage/config.yaml

@@ -21,9 +21,11 @@ fields:
   - identifier: imagesize
     type: Select
     renderType: selectSingle
-    default: 2
+    default: 3
     items:
       - label: 25%
         value: 1
+      - label: 33%
+        value: 2
       - label: 50%
-        value: 2
+        value: 3

packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html

@@ -5,17 +5,23 @@
   <f:variable name="textSizeClass" value="md:w-1/2" />
   <f:variable name="gapClass" value="gap-8 md:gap-16" />
 
-  <f:if condition="{data.imagesize} == 1"> <!-- Size 25% -> map to 40% for layout -->
+  <f:if condition="{data.imagesize} == 1"> <!-- Size 25% -->
-    <f:variable name="imageSizeClass" value="md:w-2/5" />
+    <f:variable name="imageSizeClass" value="md:w-1/4" />
-    <f:variable name="textSizeClass" value="md:w-3/5" />
+    <f:variable name="textSizeClass" value="md:w-3/4" />
-    <f:variable name="gapClass" value="gap-8 md:gap-16 lg:gap-32" />
+    <f:variable name="gapClass" value="gap-6 md:gap-12" />
   </f:if>
 
-  <div class="flex flex-col {gapClass} py-16 fade-in-on-scroll {f:if(condition: '{data.imageorient} == 26', then: 'md:flex-row-reverse', else: 'md:flex-row')}">
+  <f:if condition="{data.imagesize} == 2"> <!-- Size 33% -->
+    <f:variable name="imageSizeClass" value="md:w-1/3" />
+    <f:variable name="textSizeClass" value="md:w-2/3" />
+    <f:variable name="gapClass" value="gap-8 md:gap-16" />
+  </f:if>
+
+  <div class="flex flex-col {gapClass} fade-in-on-scroll {f:if(condition: '{data.imageorient} == 26', then: 'md:flex-row-reverse', else: 'md:flex-row')}">
     <div class="flex items-center justify-center {imageSizeClass}">
       <f:if condition="{data.image}">
         <f:then>
-          <figure class="block w-full">
+          <picture class="block w-full">
             <!-- WEBP source -->
             <source
               type="image/webp"
@@ -24,7 +30,11 @@
                 {f:uri.image(image:data.image.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w,
                 {f:uri.image(image:data.image.0, width:'1024c', cropVariant:'default', fileExtension:'webp')} 1024w"
               sizes="(max-width: 767px) 90vw,
-                     {f:if(condition: '{data.imagesize} == 1', then: '(min-width: 768px) 40vw', else: '(min-width: 768px) 50vw')}" />
+                     {f:if(condition: '{data.imagesize} == 1',
+                           then: '(min-width: 768px) 25vw',
+                           else: f:if(condition: '{data.imagesize} == 2',
+                                    then: '(min-width: 768px) 33vw',
+                                    else: '(min-width: 768px) 50vw'))}" />
             <!-- Fallback source -->
             <source
               srcset="
@@ -32,7 +42,11 @@
                 {f:uri.image(image:data.image.0, width:'400c', cropVariant:'default')} 768w,
                 {f:uri.image(image:data.image.0, width:'538c', cropVariant:'default')} 1024w"
               sizes="(max-width: 767px) 90vw,
-                     {f:if(condition: '{data.imagesize} == 1', then: '(min-width: 768px) 40vw', else: '(min-width: 768px) 50vw')}" />
+                     {f:if(condition: '{data.imagesize} == 1',
+                           then: '(min-width: 768px) 25vw',
+                           else: f:if(condition: '{data.imagesize} == 2',
+                                    then: '(min-width: 768px) 33vw',
+                                    else: '(min-width: 768px) 50vw'))}" />
             <f:image
               image="{data.image.0}"
               treatIdAsReference="1"
@@ -41,7 +55,7 @@
               alt="{data.image.0.alternative}"
               class="max-w-full h-auto block"
             />
-          </figure>
+          </picture>
         </f:then>
         <f:else>
           <p>No image available</p>

packages/base/Resources/Private/ContentElements/Layouts/Default.html

@@ -1,5 +1,5 @@
 <div class="frame frame-type-{data.CType}">
-    <div class="container">
+    <div id="c{data.uid}" class="container">
         <f:render section="Header" optional="true" />
         <f:render section="Main" optional="true" />
     </div>

packages/base/Resources/Private/PageView/Layouts/Default.html

@@ -1,4 +1,4 @@
-<header>
+<header class="sticky top-0 left-0 right-0 z-50 bg-primary text-white">
     <!-- Main Navigation -->
     <f:render partial="Navigation/Main" arguments="{_all}"  />
 </header>
@@ -17,45 +17,47 @@
       <!-- Logo -->
       <div class="flex flex-col items-start">
         <!-- Replace the src with your logo SVG / file -->
-        <f:image src="EXT:base/Resources/Public/Images/logo.png" alt="Logo" class="block max-h-[100px] h-auto w-auto" />
+        <f:image src="EXT:base/Resources/Public/Images/logo.svg" alt="Logo" class="block max-h-[100px] h-auto w-auto" />
       </div>
 
       <!-- Kontaktiere uns -->
       <div>
-        <h3 class="font-semibold mb-5">Kontaktiere uns</h3>
+        <h3 class="text-white text-sm">Kontaktiere uns</h3>
         <ul class="space-y-4">
-          <li class="flex items-center">
+          <li class="flex items-center pl-0">
             <!-- mail -->
-            <a href="mailto:inquiry@dialogrelations.com" class="hover:underline text-white">
+            <a href="mailto:office@dialog-relations.at" class="hover:text-white text-white">
-              inquiry@dialogrelations.com
+              office@dialog-relations.at
             </a>
           </li>
-          <li class="flex items-center">
+          <li class="flex items-center pl-0">
             <!-- phone -->
-            <a href="tel:+4312313435" class="hover:underline text-white">
+            <a href="tel:+436763533669" class="hover:text-white text-white">
-              +43 1231 3435
+              +43 676 3533669
             </a>
           </li>
         </ul>
       </div>
 
+      <f:comment>
       <!-- Folge uns -->
       <div class="flex flex-col items-start md:items-end">
-        <h3 class="font-semibold mb-5">Folge uns</h3>
+        <h3 class="text-white text-sm">Folge uns</h3>
         <div class="flex space-x-4">
           <!-- Social buttons -->
 
-          <a href="#" aria-label="LinkedIn" class="text-2xl bg-white text-primary p-3 rounded-full inline-flex items-center justify-center">
+          <a href="#" aria-label="LinkedIn" class="w-10 h-10 text-2xl bg-white text-primary rounded-full inline-flex items-center justify-center hover:bg-white hover:text-primary-dark">
             <i class="ci ci-linkedin"></i>
           </a>
-          <a href="#" aria-label="Instagram" class="text-2xl bg-white text-primary p-3 rounded-full inline-flex items-center justify-center">
+          <a href="#" aria-label="Instagram" class="w-10 h-10 text-2xl bg-white text-primary rounded-full inline-flex items-center justify-center hover:bg-white hover:text-primary-dark">
             <i class="ci ci-instagram"></i>
           </a>
-          <a href="#" aria-label="Facebook" class="text-2xl bg-white text-primary p-3 rounded-full inline-flex items-center justify-center">
+          <a href="#" aria-label="Facebook" class="w-10 h-10 text-2xl bg-white text-primary rounded-full inline-flex items-center justify-center hover:bg-white hover:text-primary-dark">
             <i class="ci ci-facebook"></i>
           </a>
         </div>
       </div>
+      </f:comment>
 
     </div><!-- /Row 1 -->
 
@@ -70,9 +72,9 @@
 
       <!-- Privacy links -->
       <p>
-        <a href="#" class="hover:underline text-white">Privacy Policy</a>
+        <a href="/datenschutz" class="hover:text-white text-white">Datenschutz</a>
         <span class="mx-1">|</span>
-        <a href="#" class="hover:underline text-white">Terms and Conditions</a>
+        <a href="/impressum" class="hover:text-white text-white">Impressum</a>
       </p>
 
     </div><!-- /Row 2 -->

packages/base/Resources/Private/PageView/Partials/Navigation/Main.html

@@ -1,35 +1,24 @@
-<nav class="py-1 main-nav group sticky top-0 z-50 bg-repeat" id="mainNav">
+<nav class="py-1 main-nav group" id="mainNav">
     <div class="container flex items-center h-full mx-auto px-4">
         <a href="/" class="nav-logo">
-            <f:image src="EXT:base/Resources/Public/Images/logo.png" alt="Logo" class="block max-h-[50px] h-auto w-auto" />
+            <f:image src="EXT:base/Resources/Public/Images/logo.svg" alt="Logo" class="block max-h-[50px] h-auto w-auto" />
         </a>
         <button class="nav-toggle group lg:hidden relative w-[30px] h-[30px] cursor-pointer ml-auto bg-none border-none" id="navToggle" aria-label="Toggle Menu">
-            <span class="nav-toggle-icon block relative w-full h-[2px] bg-primary transition-all duration-300
+            <span class="nav-toggle-icon block relative w-full h-[2px] bg-white transition-all duration-300
-                         before:content-[''] before:block before:absolute before:w-full before:h-[2px] before:bg-primary before:left-0 before:-top-[8px] before:transition-all before:duration-300
+                         before:content-[''] before:block before:absolute before:w-full before:h-[2px] before:bg-white before:left-0 before:-top-[8px] before:transition-all before:duration-300
-                         after:content-[''] after:block after:absolute after:w-full after:h-[2px] after:bg-primary after:left-0 after:top-[8px] after:transition-all after:duration-300
+                         after:content-[''] after:block after:absolute after:w-full after:h-[2px] after:bg-white after:left-0 after:top-[8px] after:transition-all after:duration-300
-                         group-[.active]:bg-transparent group-[.active]:before:rotate-45 group-[.active]:before:translate-x-[5px] group-[.active]:before:translate-y-[5px]
+                         group-[.active]:bg-transparent group-[.active]:before:rotate-45 group-[.active]:before:translate-y-[8px]
-                         group-[.active]:after:-rotate-45 group-[.active]:after:translate-x-[5px] group-[.active]:after:-translate-y-[5px]"></span>
+                         group-[.active]:after:-rotate-45 group-[.active]:after:-translate-y-[8px]"></span>
         </button>
 
         <ul class="nav-links flex items-center list-none mx-auto font-hajime text-primary
                    lg:flex lg:relative lg:top-auto lg:left-auto lg:right-auto lg:flex-row lg:max-h-full lg:overflow-visible lg:bg-transparent
                    absolute top-full left-0 right-0 flex-col max-h-0 overflow-hidden bg-white transition-max-height duration-400 ease-in-out group-[.open]:max-h-[500px]" id="navLinks">
             <f:for each="{mainnavigation}" as="mainnavigationItem">
-                <li class="nav-item lg:mx-4 lg:my-0 lg:p-0 lg:border-0 mx-0 my-0 p-4 border-t border-black/10 first:border-t-0 {f:if(condition: mainnavigationItem.active, then:' active')}{f:if(condition: mainnavigationItem.children, then:' has-submenu')}">
+                <li class="nav-item lg:mx-4 lg:my-0 lg:p-0 lg:border-0 mx-0 my-0 p-4 border-t border-black/10 first:border-t-0 {f:if(condition: mainnavigationItem.active, then:' active')}">
-                    <a href="{mainnavigationItem.link}" target="{mainnavigationItem.target}" title="{mainnavigationItem.title}" class="nav-link block lg:inline-block no-underline text-primary font-bold uppercase tracking-[0.05em] text-sm transition-colors duration-300 hover:text-brand">
+                    <a href="{mainnavigationItem.link}" title="{mainnavigationItem.title}" class="nav-link block lg:inline-block no-underline text-primary lg:text-white font-bold uppercase tracking-[0.05em] text-sm md:text-base transition-colors duration-300 hover:text-primary lg:hover:text-white">
                         {mainnavigationItem.title}
                     </a>
-                    <f:if condition="{mainnavigationItem.children}">
-                        <ul class="sub-menu hidden lg:absolute lg:block lg:opacity-0 lg:invisible lg:group-hover:opacity-100 lg:group-hover:visible lg:bg-white lg:shadow-md lg:mt-2 lg:py-2 lg:rounded lg:border lg:border-gray-200">
-                            <f:for each="{mainnavigationItem.children}" as="child">
-                                <li class="{f:if(condition: child.active, then:'active')} lg:px-4 lg:py-2 hover:bg-gray-100">
-                                    <a class="nav-link block text-sm text-primary hover:text-brand" href="{child.link}" target="{child.target}" title="{child.title}">
-                                        {child.title}
-                                    </a>
-                                </li>
-                            </f:for>
-                        </ul>
-                    </f:if>
                 </li>
             </f:for>
         </ul>

packages/base/Resources/Public/Favicons/favicon.svg

@@ -1,3 +1,17 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="137" height="133"><svg id="SvgjsSvg1005" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 137 133"><defs><style>.cls-1{fill:#f4ad07;}.cls-1,.cls-2{stroke-width:0px;}.cls-2{fill:#233600;}</style></defs><circle class="cls-1" cx="68" cy="66" r="60"></circle><path class="cls-2" d="m98.01,102.96c-.33.17-.65.38-.99.52-.33.13-.68.24-1.03.29-.44.06-2,.22-2.35.3-.17.04-.34.1-.52.12-.96.15-1.92.28-2.88.42-.14.02-2.98.14-3.3.17-.96.08-1.92.18-2.88.22-1.48.06-2.97.08-4.46.1-.44,0-3.01.04-3.84.21-.66.14-1.34.09-2.01.1-1.51.02-10,.11-10.29.08-.73-.06-1.46-.08-2.18-.2,0,0-7.46-.25-7.76-.27-.29-.02-.58-.03-.88-.02h-.01s-.07,0-.11,0c-1.02.04-4.35.03-4.39-.03-.59-.04-1.18-.12-1.76-.26-.55-.13-1.12-.21-1.67-.32-.05-.27-.13-.54-.14-.82-.06-1.75-.19-3.49-.14-5.24.1-3.73-.1-7.47.18-11.2.23-3.05.19-6.11.28-9.17.04-1.41.12-2.81.13-4.22.05-4.66-.24-9.31-.3-13.97-.04-2.77.04-5.54.06-8.3,0-.19.03-.39.02-.58-.1-2.67.24-5.32.24-7.99,0-2.66.07-5.33.11-7.99.01-.87.04-1.74.03-2.61-.04-2.37-.2-4.73-.43-7.08-.05-.48-.05-.97-.09-1.45-.05-.73.02-1.41.33-2.02.19-.37.4-.59.47-.66.31-.31.62-.45.77-.52,1.86-.84,4.8-.72,4.8-.72.4.02,1.08.08,2.44.21.72.07,1.45.18,2.17.22,1.09.06,7.85.87,8.23.94.3.18.75.51,1.08,1.06.23.38.31.82.51,1.65.14.56.25,1.14.3,1.71.07.73.22,3.33.3,3.9.04.29.09.57.12.86.14,1.59.28,3.19.42,4.79.02.24.14,4.96.17,5.49.08,1.6.18,3.2.22,4.8.06,2.47.05,8.87.06,9.6,0,1.41.35,6.44.36,7.55.02,2.51.11,16.64.08,17.12-.06,1.09-.08,2.19-.17,3.28,2.72.03,16.7.02,18.3.01,1.6,0,3.2.07,4.8.11.52.01,1.05.04,1.57.03,1.43-.04,7.11.45,7.3.51.39.13.41.43.46.8.11.72.07,1.41-.07,2.12-.15.79-.16,1.61-.21,2.41-.05.81-.08,1.63-.12,2.44-.04.72-.11,1.45-.13,2.17-.04,1.08-.04,2.17-.07,3.26-.02.98-.78,5.87-1.13,6.05Z"></path></svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1000" height="1000"><style>
-@media (prefers-color-scheme: dark) { :root { filter: none; } }
+    #light-icon {
-</style></svg>
+      display: inline;
+    }
+    #dark-icon {
+      display: none;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      #light-icon {
+        display: none;
+      }
+      #dark-icon {
+        display: inline;
+      }
+    }
+  </style><g id="light-icon"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1000" height="1000"><g><g transform="matrix(0.9943817431511958,0,0,0.9943817431511958,0,0)"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1005.65" height="1005.65"><svg id="Ebene_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1005.65 1005.65"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#0c1e8b;}</style></defs><g id="Ebene_1-2"><rect class="cls-2" width="1005.65" height="1005.65"></rect><path class="cls-1" d="M908.49,680.85c-1.45,4.86-5.12,5.8-9.63,5.8-70.62-.04-141.23-.03-211.85-.03-11.53,0-23.07,0-34.6-.09-4.42-.04-8.41,1.05-12.21,3.31-38.79,23.05-77.61,46.07-116.43,69.08-10.36,6.14-20.77,12.17-31.16,18.26-.6.35-1.12.86-1.68,1.29h-.44c-.27-14.92-.66-29.84-.78-44.77-.11-14.12.06-28.24.11-42.36,0-.88,0-1.76,0-2.95H108.4c-.59,0-1.18,0-1.77,0-7.03,0-9.29-2.26-9.29-9.3,0-87.11,0-174.21,0-261.32,0-27.88,0-55.75,0-83.63,0-1.18-.02-2.38.15-3.54.52-3.69,2.26-5.41,5.98-6.1.34-.06,532.28-.4,797.93-.4,3.63.63,6.1,2.57,7.1,6.21v350.53ZM900.3,332.48H105.42v347.92h3.14c126.61,0,253.21,0,379.82,0,6.69,0,9.44,2.73,9.42,9.43-.02,7.24-.13,14.49-.14,21.73-.02,16.86,0,33.72,0,50.58v2.67c1.02-.55,1.72-.9,2.4-1.3,17.5-10.31,35.02-20.58,52.5-30.94,27.9-16.53,55.77-33.11,83.63-49.7,4.89-2.91,10.1-4.38,15.8-4.34,11.83.08,23.66.09,35.49.09,70.11,0,140.21,0,210.32,0h2.5v-346.15Z"></path></g></svg></svg></g></g></svg></g><g id="dark-icon"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1000" height="1000"><g clip-path="url(#SvgjsClipPath1004)"><rect width="1000" height="1000" fill="#0c1e8b"></rect><g transform="matrix(0.696067220205837,0,0,0.696067220205837,150,150)"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1005.65" height="1005.65"><svg id="Ebene_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1005.65 1005.65"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#0c1e8b;}</style><clipPath id="SvgjsClipPath1004"><rect width="1000" height="1000" x="0" y="0" rx="350" ry="350"></rect></clipPath></defs><g id="Ebene_1-2"><rect class="cls-2" width="1005.65" height="1005.65"></rect><path class="cls-1" d="M908.49,680.85c-1.45,4.86-5.12,5.8-9.63,5.8-70.62-.04-141.23-.03-211.85-.03-11.53,0-23.07,0-34.6-.09-4.42-.04-8.41,1.05-12.21,3.31-38.79,23.05-77.61,46.07-116.43,69.08-10.36,6.14-20.77,12.17-31.16,18.26-.6.35-1.12.86-1.68,1.29h-.44c-.27-14.92-.66-29.84-.78-44.77-.11-14.12.06-28.24.11-42.36,0-.88,0-1.76,0-2.95H108.4c-.59,0-1.18,0-1.77,0-7.03,0-9.29-2.26-9.29-9.3,0-87.11,0-174.21,0-261.32,0-27.88,0-55.75,0-83.63,0-1.18-.02-2.38.15-3.54.52-3.69,2.26-5.41,5.98-6.1.34-.06,532.28-.4,797.93-.4,3.63.63,6.1,2.57,7.1,6.21v350.53ZM900.3,332.48H105.42v347.92h3.14c126.61,0,253.21,0,379.82,0,6.69,0,9.44,2.73,9.42,9.43-.02,7.24-.13,14.49-.14,21.73-.02,16.86,0,33.72,0,50.58v2.67c1.02-.55,1.72-.9,2.4-1.3,17.5-10.31,35.02-20.58,52.5-30.94,27.9-16.53,55.77-33.11,83.63-49.7,4.89-2.91,10.1-4.38,15.8-4.34,11.83.08,23.66.09,35.49.09,70.11,0,140.21,0,210.32,0h2.5v-346.15Z"></path></g></svg></svg></g></g></svg></g></svg>

packages/base/Resources/Public/Favicons/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "MyWebSite",
+  "short_name": "MySite",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

packages/base/Resources/Public/Icons/arrow-up-right.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 7H17V17" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 17L17 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/base/Resources/Public/Icons/check.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 6L9 17L4 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/base/Resources/Public/Images/logo.svg

@@ -0,0 +1,25 @@
+<svg width="400" height="224" viewBox="0 0 400 224" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_260_892)">
+<path d="M399.903 175.878C399.188 178.274 397.379 178.738 395.155 178.738C360.34 178.718 325.529 178.723 290.713 178.723C285.029 178.723 279.339 178.723 273.655 178.678C271.476 178.659 269.509 179.196 267.636 180.31C248.512 191.674 229.374 203.023 210.235 214.367C205.128 217.394 199.996 220.367 194.874 223.369C194.578 223.542 194.321 223.793 194.045 224.005H193.828C193.695 216.649 193.503 209.294 193.444 201.933C193.39 194.972 193.473 188.011 193.498 181.05C193.498 180.616 193.498 180.182 193.498 179.595H5.45259C5.16171 179.595 4.87084 179.595 4.57997 179.595C1.11417 179.595 -8.47786e-06 178.481 -8.47786e-06 175.01C-8.47786e-06 132.065 -8.47786e-06 89.1247 -8.47786e-06 46.1794C-8.47786e-06 32.4345 -8.47786e-06 18.6946 -8.47786e-06 4.94973C-8.47786e-06 4.36799 -0.0098685 3.77639 0.0739417 3.20451C0.335232 1.38533 1.19305 0.537371 3.02209 0.1972C3.18971 0.16762 265.437 0 396.403 0C398.192 0.310591 399.41 1.26701 399.903 3.06154V175.873V175.878ZM395.865 4.13135H3.98837V175.656H5.53639C67.9553 175.656 130.369 175.656 192.788 175.656C196.086 175.656 197.442 177.002 197.432 180.305C197.422 183.875 197.368 187.449 197.363 191.018C197.353 199.33 197.363 207.642 197.363 215.954V217.271C197.866 216.999 198.211 216.827 198.546 216.63C207.174 211.547 215.811 206.484 224.429 201.376C238.184 193.227 251.924 185.053 265.659 176.874C268.069 175.439 270.638 174.715 273.448 174.734C279.28 174.774 285.112 174.779 290.945 174.779C325.509 174.779 360.068 174.779 394.633 174.779H395.865V4.13135Z" fill="white"/>
+<path d="M65.2733 89.7903C65.0761 89.5931 64.9775 89.3565 64.9775 89.0804V32.4296C64.9775 32.1486 65.0761 31.912 65.2733 31.7197C65.4705 31.5225 65.7072 31.4239 65.9833 31.4239H86.9358C91.1263 31.4239 94.7992 32.1634 97.9544 33.6424C101.11 35.1214 103.555 37.2019 105.285 39.8838C107.016 42.5657 107.883 45.6667 107.883 49.1867V72.3183C107.883 75.8384 107.016 78.9393 105.285 81.6213C103.555 84.3032 101.11 86.3837 97.9544 87.8627C94.7992 89.3417 91.1263 90.0812 86.9358 90.0812H65.9833C65.7022 90.0812 65.4656 89.9826 65.2733 89.7854V89.7903ZM77.2188 79.9451H87.3598C89.9283 79.9451 92.0088 79.0774 93.6012 77.3469C95.1936 75.6165 96.0169 73.2945 96.0711 70.3907V51.1144C96.0711 48.2106 95.2774 45.8935 93.685 44.1581C92.0926 42.4277 89.9579 41.56 87.276 41.56H77.2188C76.9377 41.56 76.7997 41.698 76.7997 41.979V79.5211C76.7997 79.8021 76.9377 79.9401 77.2188 79.9401V79.9451Z" fill="white"/>
+<path d="M117.063 89.7903C116.866 89.5931 116.767 89.3565 116.767 89.0804V32.4296C116.767 32.1486 116.866 31.912 117.063 31.7197C117.26 31.5225 117.497 31.4239 117.773 31.4239H127.579C127.86 31.4239 128.096 31.5225 128.289 31.7197C128.486 31.9169 128.585 32.1535 128.585 32.4296V89.0804C128.585 89.3614 128.486 89.598 128.289 89.7903C128.092 89.9875 127.855 90.0861 127.579 90.0861H117.773C117.492 90.0861 117.255 89.9875 117.063 89.7903Z" fill="white"/>
+<path d="M175.015 89.248L172.501 81.0346C172.388 80.8127 172.25 80.6994 172.082 80.6994H151.465C151.297 80.6994 151.159 80.8127 151.046 81.0346L148.615 89.248C148.448 89.8051 148.083 90.0861 147.526 90.0861H136.882C136.547 90.0861 136.295 89.9875 136.128 89.7903C135.96 89.5931 135.93 89.3022 136.044 88.9128L154.147 32.262C154.314 31.7049 154.679 31.4239 155.236 31.4239H168.394C168.952 31.4239 169.316 31.7049 169.484 32.262L187.587 88.9128C187.641 89.0261 187.671 89.1642 187.671 89.3318C187.671 89.8347 187.365 90.0861 186.749 90.0861H176.105C175.548 90.0861 175.183 89.8051 175.015 89.248ZM154.398 71.564H169.149C169.484 71.564 169.597 71.3964 169.484 71.0612L161.941 46.1696C161.887 45.9477 161.803 45.8491 161.69 45.8738C161.576 45.9033 161.492 46.0019 161.438 46.1696L154.063 71.0612C154.009 71.3964 154.117 71.564 154.398 71.564Z" fill="white"/>
+<path d="M195.337 89.7903C195.14 89.5931 195.041 89.3565 195.041 89.0804V32.4296C195.041 32.1486 195.14 31.912 195.337 31.7197C195.534 31.5225 195.771 31.4239 196.047 31.4239H205.853C206.134 31.4239 206.37 31.5225 206.562 31.7197C206.76 31.9169 206.858 32.1535 206.858 32.4296V79.526C206.858 79.807 206.996 79.9451 207.277 79.9451H234.678C234.959 79.9451 235.196 80.0437 235.388 80.2409C235.585 80.4381 235.684 80.6747 235.684 80.9508V89.0804C235.684 89.3614 235.585 89.598 235.388 89.7903C235.191 89.9826 234.954 90.0861 234.678 90.0861H196.047C195.766 90.0861 195.529 89.9875 195.337 89.7903Z" fill="white"/>
+<path d="M251.652 88.3261C248.33 86.5365 245.746 84.037 243.902 80.8275C242.059 77.6132 241.137 73.9157 241.137 69.7252V51.7898C241.137 47.6584 242.059 43.9954 243.902 40.8106C245.746 37.6259 248.33 35.1559 251.652 33.3959C254.975 31.6359 258.816 30.7583 263.174 30.7583C267.532 30.7583 271.456 31.6359 274.779 33.3959C278.102 35.1559 280.685 37.6308 282.529 40.8106C284.373 43.9954 285.295 47.6535 285.295 51.7898V69.7252C285.295 73.9157 284.373 77.6329 282.529 80.8719C280.685 84.1109 278.102 86.6104 274.779 88.3705C271.456 90.1305 267.586 91.008 263.174 91.008C258.762 91.008 254.975 90.1157 251.652 88.3261ZM270.633 77.9336C272.531 75.9813 273.483 73.3783 273.483 70.1393V51.701C273.483 48.462 272.546 45.8491 270.672 43.8672C268.799 41.8854 266.3 40.8944 263.174 40.8944C260.048 40.8944 257.628 41.8854 255.759 43.8672C253.886 45.8491 252.949 48.462 252.949 51.701V70.1393C252.949 73.3783 253.886 75.9764 255.759 77.9336C257.633 79.8908 260.102 80.867 263.174 80.867C266.245 80.867 268.73 79.8908 270.633 77.9336Z" fill="white"/>
+<path d="M303.566 88.1585C300.267 86.428 297.714 84.0074 295.899 80.9114C294.085 77.8104 293.178 74.2213 293.178 70.1442V51.3707C293.178 47.2936 294.085 43.6898 295.899 40.5592C297.714 37.4336 300.272 35.0129 303.566 33.3121C306.859 31.6063 310.66 30.7583 314.964 30.7583C319.268 30.7583 322.965 31.5964 326.234 33.2727C329.502 34.9489 332.041 37.2265 333.86 40.1007C335.675 42.9798 336.582 46.1745 336.582 49.6945V50.2812C336.582 50.5622 336.483 50.7988 336.291 50.996C336.094 51.1932 335.857 51.2869 335.576 51.2869H325.77C325.489 51.2869 325.253 51.1883 325.06 50.996C324.863 50.7988 324.765 50.5622 324.765 50.2812V50.0298C324.765 47.4612 323.872 45.297 322.083 43.5369C320.293 41.7769 317.922 40.8994 314.959 40.8994C311.996 40.8994 309.526 41.8361 307.712 43.7046C305.897 45.578 304.99 48.0183 304.99 51.0355V70.4795C304.99 73.4966 305.966 75.9419 307.924 77.8104C309.876 79.6838 312.366 80.6205 315.383 80.6205C318.4 80.6205 320.604 79.8514 322.339 78.3132C324.069 76.7751 324.937 74.6404 324.937 71.9042V68.1328C324.937 67.8518 324.799 67.7137 324.518 67.7137H315.131C314.85 67.7137 314.614 67.6151 314.421 67.4179C314.224 67.2207 314.126 66.9841 314.126 66.708V58.9975C314.126 58.7164 314.224 58.4798 314.421 58.2875C314.619 58.0903 314.855 57.9917 315.131 57.9917H335.581C335.862 57.9917 336.099 58.0903 336.296 58.2875C336.488 58.4847 336.587 58.7214 336.587 58.9975V70.0604C336.587 74.3051 335.694 77.9928 333.905 81.1233C332.115 84.2539 329.591 86.64 326.322 88.2867C323.054 89.9333 319.268 90.7615 314.969 90.7615C310.67 90.7615 306.869 89.8938 303.57 88.1634L303.566 88.1585Z" fill="white"/>
+<path d="M102.579 117.053C102.904 117.216 103.027 117.522 102.949 117.97L101.662 124.951C101.622 125.439 101.336 125.582 100.804 125.38C100.193 125.178 99.4778 125.074 98.6594 125.074C98.334 125.074 97.8854 125.114 97.3135 125.198C95.8444 125.321 94.5971 125.863 93.5766 126.82C92.5561 127.781 92.0433 129.053 92.0433 130.645V147.363C92.0433 147.57 91.9694 147.743 91.8314 147.886C91.6884 148.029 91.5158 148.098 91.3088 148.098H84.1455C83.9384 148.098 83.7658 148.029 83.6229 147.886C83.4799 147.743 83.4109 147.57 83.4109 147.363V117.354C83.4109 117.152 83.4799 116.979 83.6229 116.831C83.7658 116.684 83.9384 116.614 84.1455 116.614H91.3088C91.5109 116.614 91.6834 116.688 91.8314 116.831C91.9743 116.974 92.0433 117.147 92.0433 117.354V119.681C92.0433 119.804 92.0828 119.888 92.1666 119.927C92.2455 119.967 92.3096 119.947 92.349 119.868C94.0252 117.418 96.2684 116.195 99.0834 116.195C100.553 116.195 101.716 116.481 102.574 117.053H102.579Z" fill="white"/>
+<path d="M134.18 134.323C134.141 134.811 133.874 135.058 133.381 135.058H114.46C114.214 135.058 114.135 135.161 114.214 135.363C114.337 136.182 114.559 136.995 114.889 137.814C115.949 140.101 118.113 141.245 121.382 141.245C123.995 141.205 126.055 140.141 127.569 138.06C127.732 137.814 127.914 137.69 128.121 137.69C128.244 137.69 128.387 137.774 128.55 137.937L132.957 142.285C133.16 142.492 133.263 142.675 133.263 142.837C133.263 142.921 133.179 143.084 133.017 143.325C131.671 145.002 129.935 146.293 127.811 147.215C125.686 148.132 123.359 148.591 120.83 148.591C117.319 148.591 114.347 147.792 111.921 146.199C109.491 144.607 107.745 142.384 106.685 139.524C105.828 137.483 105.399 134.806 105.399 131.503C105.399 129.26 105.704 127.278 106.316 125.562C107.252 122.664 108.899 120.356 111.246 118.641C113.592 116.925 116.378 116.067 119.607 116.067C123.689 116.067 126.967 117.25 129.437 119.622C131.907 121.988 133.406 125.153 133.939 129.112C134.185 130.665 134.264 132.4 134.185 134.318L134.18 134.323ZM114.583 127.155C114.421 127.687 114.278 128.338 114.154 129.117C114.154 129.324 114.258 129.423 114.46 129.423H125.055C125.301 129.423 125.38 129.319 125.301 129.117C125.094 127.934 124.995 127.362 124.995 127.401C124.631 126.179 123.985 125.227 123.068 124.557C122.151 123.881 121.017 123.546 119.671 123.546C117.098 123.546 115.407 124.749 114.588 127.16L114.583 127.155Z" fill="white"/>
+<path d="M139.722 147.886C139.579 147.743 139.51 147.57 139.51 147.363V105.966C139.51 105.764 139.579 105.591 139.722 105.443C139.864 105.3 140.037 105.226 140.244 105.226H147.407C147.61 105.226 147.782 105.3 147.93 105.443C148.073 105.586 148.142 105.759 148.142 105.966V147.363C148.142 147.57 148.068 147.743 147.93 147.886C147.787 148.029 147.614 148.098 147.407 148.098H140.244C140.037 148.098 139.864 148.029 139.722 147.886Z" fill="white"/>
+<path d="M174.108 117.512C176.189 118.429 177.816 119.686 178.979 121.278C180.143 122.871 180.724 124.645 180.724 126.608V147.368C180.724 147.575 180.65 147.748 180.512 147.89C180.369 148.033 180.197 148.102 179.99 148.102H172.827C172.619 148.102 172.447 148.033 172.304 147.89C172.161 147.748 172.087 147.575 172.087 147.368V145.347C172.087 145.223 172.048 145.144 171.964 145.1C171.88 145.061 171.801 145.1 171.717 145.223C170.002 147.471 167.246 148.591 163.45 148.591C160.265 148.591 157.691 147.817 155.734 146.264C153.777 144.711 152.796 142.428 152.796 139.406C152.796 136.384 153.895 133.825 156.104 132.09C158.308 130.354 161.453 129.487 165.535 129.487H171.781C171.984 129.487 172.087 129.383 172.087 129.181V127.835C172.087 126.489 171.678 125.439 170.864 124.68C170.046 123.926 168.823 123.546 167.192 123.546C165.925 123.546 164.874 123.768 164.036 124.222C163.198 124.67 162.661 125.301 162.414 126.12C162.291 126.568 162.025 126.775 161.616 126.731L154.206 125.75C153.718 125.671 153.491 125.484 153.53 125.198C153.693 123.482 154.378 121.934 155.581 120.544C156.784 119.158 158.377 118.074 160.359 117.3C162.34 116.526 164.554 116.136 167.004 116.136C169.657 116.136 172.028 116.595 174.108 117.512ZM170.248 140.752C171.476 139.815 172.087 138.607 172.087 137.138V134.934C172.087 134.732 171.984 134.629 171.781 134.629H167.374C165.535 134.629 164.095 134.974 163.055 135.669C162.015 136.364 161.492 137.345 161.492 138.607C161.492 139.712 161.882 140.579 162.656 141.21C163.43 141.841 164.47 142.157 165.782 142.157C167.537 142.157 169.025 141.689 170.253 140.747L170.248 140.752Z" fill="white"/>
+<path d="M203.964 123.329C203.821 123.472 203.649 123.546 203.442 123.546H197.565C197.358 123.546 197.26 123.65 197.26 123.852V136.832C197.26 138.178 197.536 139.179 198.088 139.835C198.64 140.486 199.527 140.816 200.75 140.816H202.771C202.974 140.816 203.146 140.89 203.294 141.028C203.437 141.171 203.511 141.343 203.511 141.55V147.368C203.511 147.817 203.264 148.083 202.776 148.167C201.061 148.245 199.838 148.29 199.103 148.29C195.712 148.29 193.183 147.728 191.511 146.604C189.835 145.48 188.982 143.37 188.938 140.264V123.852C188.938 123.65 188.834 123.546 188.632 123.546H185.142C184.935 123.546 184.762 123.477 184.619 123.329C184.476 123.186 184.407 123.014 184.407 122.807V117.354C184.407 117.152 184.476 116.979 184.619 116.831C184.762 116.684 184.935 116.614 185.142 116.614H188.632C188.834 116.614 188.938 116.516 188.938 116.309V109.022C188.938 108.82 189.007 108.648 189.15 108.5C189.293 108.357 189.465 108.283 189.672 108.283H196.53C196.732 108.283 196.905 108.357 197.053 108.5C197.196 108.643 197.27 108.815 197.27 109.022V116.309C197.27 116.516 197.373 116.614 197.575 116.614H203.452C203.654 116.614 203.826 116.688 203.974 116.831C204.117 116.974 204.186 117.147 204.186 117.354V122.807C204.186 123.014 204.112 123.186 203.974 123.329H203.964Z" fill="white"/>
+<path d="M210.576 111.694C209.659 110.777 209.2 109.624 209.2 108.233C209.2 106.843 209.649 105.64 210.546 104.743C211.443 103.846 212.607 103.397 214.037 103.397C215.466 103.397 216.63 103.846 217.527 104.743C218.424 105.64 218.873 106.804 218.873 108.233C218.873 109.663 218.414 110.772 217.497 111.694C216.58 112.611 215.427 113.07 214.037 113.07C212.646 113.07 211.498 112.611 210.576 111.694ZM209.841 147.886C209.698 147.743 209.624 147.57 209.624 147.363V117.295C209.624 117.093 209.693 116.915 209.841 116.772C209.984 116.629 210.157 116.56 210.364 116.56H217.527C217.729 116.56 217.907 116.634 218.05 116.772C218.193 116.915 218.262 117.088 218.262 117.295V147.363C218.262 147.57 218.188 147.743 218.05 147.886C217.907 148.029 217.734 148.098 217.527 148.098H210.364C210.157 148.098 209.984 148.029 209.841 147.886Z" fill="white"/>
+<path d="M230.079 145.899C227.629 144.104 225.952 141.654 225.055 138.548C224.483 136.63 224.197 134.55 224.197 132.302C224.197 129.896 224.483 127.732 225.055 125.809C225.992 122.787 227.688 120.42 230.138 118.705C232.588 116.989 235.526 116.131 238.958 116.131C242.389 116.131 245.165 116.979 247.531 118.675C249.897 120.371 251.574 122.728 252.555 125.75C253.205 127.791 253.536 129.935 253.536 132.179C253.536 134.422 253.25 136.443 252.678 138.366C251.781 141.55 250.114 144.05 247.689 145.869C245.258 147.688 242.33 148.595 238.899 148.595C235.467 148.595 232.529 147.698 230.079 145.899ZM242.33 139.958C243.267 139.14 243.942 138.021 244.351 136.591C244.677 135.284 244.839 133.855 244.839 132.302C244.839 130.586 244.677 129.137 244.351 127.954C243.903 126.568 243.207 125.484 242.271 124.71C241.329 123.936 240.19 123.546 238.839 123.546C237.489 123.546 236.296 123.936 235.379 124.71C234.462 125.484 233.796 126.568 233.387 127.954C233.061 128.935 232.899 130.384 232.899 132.302C232.899 134.22 233.042 135.57 233.328 136.591C233.737 138.021 234.417 139.145 235.379 139.958C236.335 140.776 237.513 141.186 238.899 141.186C240.284 141.186 241.388 140.776 242.33 139.958Z" fill="white"/>
+<path d="M283.421 119.134C285.423 121.135 286.424 123.852 286.424 127.278V147.363C286.424 147.57 286.35 147.743 286.212 147.886C286.069 148.029 285.896 148.098 285.689 148.098H278.526C278.319 148.098 278.146 148.029 278.003 147.886C277.86 147.743 277.786 147.57 277.786 147.363V129.053C277.786 127.421 277.328 126.095 276.411 125.069C275.494 124.049 274.276 123.541 272.768 123.541C271.259 123.541 270.041 124.054 269.124 125.069C268.207 126.09 267.749 127.416 267.749 129.053V147.363C267.749 147.57 267.675 147.743 267.537 147.886C267.394 148.029 267.221 148.098 267.014 148.098H259.851C259.644 148.098 259.471 148.029 259.328 147.886C259.185 147.743 259.116 147.57 259.116 147.363V117.354C259.116 117.152 259.185 116.979 259.328 116.831C259.471 116.684 259.644 116.614 259.851 116.614H267.014C267.216 116.614 267.389 116.688 267.537 116.831C267.68 116.974 267.749 117.147 267.749 117.354V119.499C267.749 119.622 267.788 119.706 267.872 119.745C267.951 119.784 268.015 119.765 268.055 119.686C269.731 117.319 272.22 116.131 275.528 116.131C278.836 116.131 281.425 117.132 283.426 119.134H283.421Z" fill="white"/>
+<path d="M297.995 147.368C295.954 146.594 294.371 145.509 293.247 144.124C292.123 142.739 291.561 141.166 291.561 139.411V138.8C291.561 138.597 291.63 138.425 291.773 138.277C291.916 138.134 292.089 138.065 292.296 138.065H299.094C299.296 138.065 299.469 138.139 299.617 138.277C299.76 138.42 299.829 138.593 299.829 138.8V138.859C299.829 139.756 300.327 140.52 301.327 141.156C302.328 141.787 303.58 142.103 305.094 142.103C306.479 142.103 307.603 141.827 308.461 141.274C309.319 140.722 309.748 140.042 309.748 139.224C309.748 138.489 309.378 137.937 308.644 137.567C307.909 137.197 306.706 136.813 305.03 136.404C303.112 135.915 301.599 135.442 300.499 134.994C297.886 134.096 295.806 132.992 294.253 131.686C292.7 130.379 291.926 128.501 291.926 126.051C291.926 123.028 293.099 120.632 295.446 118.853C297.793 117.078 300.903 116.191 304.783 116.191C307.396 116.191 309.684 116.61 311.641 117.448C313.598 118.286 315.122 119.459 316.201 120.968C317.281 122.476 317.823 124.192 317.823 126.11C317.823 126.317 317.749 126.489 317.611 126.632C317.468 126.775 317.296 126.844 317.089 126.844H310.537C310.33 126.844 310.157 126.775 310.014 126.632C309.871 126.489 309.797 126.317 309.797 126.11C309.797 125.212 309.339 124.458 308.422 123.842C307.505 123.231 306.287 122.925 304.778 122.925C303.433 122.925 302.328 123.171 301.47 123.659C300.613 124.148 300.184 124.823 300.184 125.681C300.184 126.539 300.603 127.111 301.441 127.52C302.279 127.929 303.674 128.358 305.636 128.806C306.085 128.93 306.598 129.063 307.169 129.206C307.741 129.349 308.353 129.521 309.008 129.728C311.907 130.586 314.195 131.686 315.866 133.036C317.542 134.382 318.375 136.344 318.375 138.913C318.375 141.935 317.182 144.292 314.791 145.988C312.405 147.683 309.186 148.531 305.148 148.531C302.412 148.531 300.026 148.142 297.985 147.368H297.995Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_260_892">
+<rect width="399.903" height="224" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/base/Resources/Public/Scss/abstracts/_fonts.scss

@@ -30,6 +30,7 @@ h1, h2, h3, h4, h5, h6 {
   color: var(--color-primary);
   font-weight: 700;
   line-height: 1;
+  @apply mb-4
 }
 
 h1 {
@@ -81,10 +82,7 @@ a {
     color: var(--bs-primary);
     text-decoration: none;
     font-weight: 700;
-
+    @apply text-primary hover:text-primary-dark;
-    &:hover {
-      color: var(--bs-primary)
-    }
 }
 
 button, .btn {

packages/base/Resources/Public/Scss/abstracts/_icons.scss

@@ -14,26 +14,31 @@
   mask-repeat: no-repeat;
   mask-position: center;
   background-color: currentColor;
-  vertical-align: middle;
+  margin-top: 0.125em;
 }
 
+
 .ci-instagram::before {
   mask-image: url(../Icons/instagram.svg);
 }
-
 .ci-linkedin::before {
   mask-image: url(../Icons/linkedin.svg);
   width: 0.9em;
   height: 0.9em;
 }
-
 .ci-facebook::before {
   mask-image: url(../Icons/facebook.svg);
 }
+
 .ci-arrow-down::before {
   mask-image: url(../Icons/arrow-down.svg);
 }
-
+.ci-arrow-up-right::before {
+  mask-image: url(../Icons/arrow-up-right.svg);
+}
+.ci-check::before {
+  mask-image: url(../Icons/check.svg);
+}
 .ci-email::before {
   mask-image: url(../Icons/email.svg);
 }

packages/base/Resources/Public/Scss/base/_container.scss

@@ -1,6 +1,7 @@
 .container {
   margin: auto;
   /* padding: 3rem 1rem; */
+  @apply px-4 py-6 md:py-12;
 
   @include respond($breakpoint-sm) {
     max-width: 540px;

packages/base/Resources/Public/Scss/base/_global.scss

@@ -1,5 +1,17 @@
 :root {
   --color-primary: #0B197D;
+  --color-primary-dark: #08145C;
+  --color-light-grey: #F6F6F6;
+  --color-dark-grey: #00000026;
+}
+
+.page-2 {
+  --color-primary: #B80F0A;
+  --color-primary-dark: #880B07;
+}
+
+html {
+  scroll-behavior: smooth;
 }
 
 body {

packages/base/Resources/Public/Scss/components/_buttons.scss

@@ -1,16 +1,4 @@
 .btn {
-  background-color: var(--bs-primary);
+  @apply bg-primary font-bold text-white uppercase py-1 px-12 cursor-pointer transition-colors duration-300;
-  color: var(--bs-yellow);
+  @apply hover:bg-primary-dark;
-  font-family: 'Inter', sans-serif;
-  font-weight: 700;
-  border-radius: .5rem;
-  padding: 0.75rem 1.5rem;
-  border: none;
-  cursor: pointer;
-  transition: background 0.3s;
-
-  &:hover {
-    background-color: var(--bs-primary-dark);
-    color: var(--bs-yellow);
-  }
 }

packages/base/Resources/Public/Scss/components/_card-container.scss

@@ -0,0 +1,51 @@
+.card-container {
+    // Container styles if needed
+}
+
+.perspective {
+    perspective: 1000px;
+}
+
+.preserve-3d {
+    transform-style: preserve-3d;
+}
+
+.rotate-y-180 {
+    transform: rotateX(180deg);
+}
+
+.backface-hidden {
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden; /* Safari */
+}
+
+// Ensure the back is initially hidden and rotated
+.card-back {
+    transform: rotateX(180deg);
+}
+
+// Flip on hover/focus-within the group
+.group:hover .card-flip-inner,
+.group:focus-within .card-flip-inner {
+    transform: rotateX(180deg);
+}
+
+// Style the front overlay and title
+.card-front {
+    .absolute { // The overlay div
+        transition: background-color 0.3s ease;
+    }
+    h3 {
+        transition: opacity 0.3s ease;
+    }
+}
+
+// Fade out overlay slightly on hover to reveal image more
+.group:hover .card-front .absolute {
+    background-color: rgba(0, 0, 0, 0.2);
+}
+
+// Optional: Hide front title on hover if desired
+// .group:hover .card-front h3 {
+//     opacity: 0;
+// }

packages/base/Resources/Public/Scss/components/_navigation.scss

@@ -1,153 +1,11 @@
-// Define a fixed height for the navigation and apply that as padding-top on the body
-// so that when it becomes sticky, the content doesn't jump.
-$nav-height: 60px; // Adjust as needed
-
-// Use an absolute path to the extension’s public folder to avoid rewriting of URLs by the build process.
-// Ensure this path is correct for your TYPO3 installation.
-// Typically: /typo3conf/ext/<extension_key>/Resources/Public/Images/...
-
-body > header {
-  width: 100%;
-  line-height: $nav-height;
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-}
-
 .main-nav {
   .container {
-    display: flex;
-    align-items: center;
-    margin: 0 auto;
-    height: 100%;
     padding: 0 1rem;
   }
 
-  .nav-logo {
+  ul {
-    img {
+    ::before {
-      display: block;
+      @apply hidden;
-      max-height: 50px;
-      height: auto;
-      width: auto;
-    }
-  }
-
-  .nav-toggle {
-    background: none;
-    border: none;
-    cursor: pointer;
-    display: none; // hidden by default on desktop
-    position: relative;
-    width: 30px;
-    height: 30px;
-
-    .nav-toggle-icon {
-      width: 100%;
-      height: 2px;
-      background: $primary-color;
-      display: block;
-      position: relative;
-      @include transition(all, 0.3s);
-
-      &::before,
-      &::after {
-        content: '';
-        width: 100%;
-        height: 2px;
-        background: $primary-color;
-        position: absolute;
-        left: 0;
-        @include transition(all, 0.3s);
-      }
-
-      &::before {
-        top: -8px;
-      }
-
-      &::after {
-        top: 8px;
-      }
-    }
-
-    &.active .nav-toggle-icon {
-      background: transparent;
-
-      &::before {
-        transform: rotate(45deg) translate(5px, 5px);
-      }
-
-      &::after {
-        transform: rotate(-45deg) translate(5px, -5px);
-      }
-    }
-  }
-
-  .nav-links {
-    display: flex;
-    list-style: none;
-    align-items: center;
-    margin: auto;
-
-    font-family: 'Hajime Sans', sans-serif;
-    font-size: 1.75rem;
-
-    a {
-        font-weight: 400;
-    }
-  }
-
-  .nav-item {
-    margin: 0 1rem;
-
-    .nav-link {
-      text-decoration: none;
-      color: $primary-color;
-      font-weight: 700;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      font-size: 1rem;
-      @include transition(color);
-
-      &:hover {
-        color: $brand-color;
-      }
-    }
-  }
-
-  @media (max-width: $breakpoint-lg) {
-    .nav-toggle {
-      display: block;
-      margin-left: auto; // move toggle to the right on mobile
-    }
-
-    .nav-links {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      right: 0;
-      flex-direction: column;
-      max-height: 0;
-      overflow: hidden;
-      background: #fff; // Add white background for mobile dropdown
-      @include transition(max-height, 0.4s);
-
-      .nav-item {
-        margin: 0;
-        padding: 1rem;
-        border-top: 1px solid rgba(0,0,0,0.1);
-
-        &:first-child {
-          border-top: none;
-        }
-
-        .nav-link {
-          display: block;
-        }
-      }
-    }
-
-    &.open .nav-links {
-      max-height: 500px; // Adjust to fit all items
     }
   }
 }

packages/base/Resources/Public/Scss/components/_text.scss

@@ -0,0 +1,58 @@
+$marker-size: 1.5em;
+$gap-y: 2em;
+
+ol {
+  @apply list-none m-0 p-0;
+  counter-reset: step;
+
+  > li {
+    @apply relative;
+    padding-left: calc(#{$marker-size} + .5em);
+    margin-bottom: $gap-y;
+    counter-increment: step;
+
+    // the two‑digit number
+    &::before {
+      content: counter(step, decimal-leading-zero);
+      position: absolute;
+      top: .2em;
+      left: 0;
+      @apply text-primary font-bold text-2xl leading-none;
+    }
+
+    // the dashed connector, now stretches over the gap too
+    &::after {
+      content: "";
+      position: absolute;
+      top: calc(#{$marker-size} + .5em);
+      bottom: -$gap-y;              // extend past the li’s bottom margin
+      left: calc(#{$marker-size} / 2);
+      transform: translateX(-50%);
+      @apply border-l-2 border-dashed border-gray-300;
+    }
+
+    // last item: no connector & no extra bottom margin
+    &:last-child {
+      margin-bottom: 0;
+
+      &::after {
+        @apply hidden;
+      }
+    }
+  }
+}
+
+ul {
+  @apply list-none m-0 p-0;
+
+  > li {
+    @apply relative pl-8 mb-4; // Adjust padding-left based on icon size + desired gap
+
+    &::before {
+      @extend .ci; // Inherit base icon styles
+      @extend .ci-check; // Use the check icon
+      @apply absolute left-0 top-1 text-primary; // Position and color the icon
+      // Adjust 'top' value as needed for vertical alignment
+    }
+  }
+}

packages/base/Resources/Public/Scss/components/form.scss

@@ -0,0 +1,3 @@
+.frame-type-form_formframework {
+  @apply py-6 md:py-12;
+}

packages/base/Resources/Public/Scss/layouts/_home-page.scss

@@ -2,33 +2,15 @@
 
 .backendlayout-home_page {
 
-    // --- Target the header element ---
     header {
-        // --- Mobile First: Always Primary Background ---
-        @apply bg-primary text-white;
-
-        // Mobile link/icon colors (on primary background)
-        #mainNav .nav-link { // Target links within #mainNav
-            @apply text-white hover:text-gray-200;
-        }
-        #mainNav .nav-toggle-icon,
-        #mainNav .nav-toggle-icon::before,
-        #mainNav .nav-toggle-icon::after {
-             @apply bg-white; // Ensure mobile toggle is visible
-        }
-        // Adjust mobile submenu link colors if needed (depends on dropdown background)
-        #mainNav .sub-menu .nav-link {
-             @apply text-gray-700 hover:text-black; // Assuming light dropdown background
-        }
-
         // --- Desktop Styles ---
         @screen lg {
             // Initial state: Transparent background, fixed position
-            @apply fixed top-0 left-0 right-0 z-50 bg-transparent transition-colors duration-300 ease-in-out;
+            @apply bg-transparent transition-colors duration-300 ease-in-out;
 
             // Initial link colors and background for transparent header (desktop)
             #mainNav .nav-link {
-                @apply bg-white text-primary hover:text-brand px-3 py-1 rounded; // Add bg-white, padding, and rounded corners
+                @apply bg-white text-primary hover:text-primary px-3 py-1 rounded; // Add bg-white, padding, and rounded corners
             }
             // Ensure mobile toggle icon also uses primary color initially on desktop if visible (though usually hidden)
             #mainNav .nav-toggle-icon,
@@ -54,29 +36,3 @@
         }
     }
 }
-
-// --- Default styles for header on NON-home pages ---
-// Ensures header has a background and correct colors on other pages
-body:not(.backendlayout-home_page) {
-    header {
-        @apply bg-primary text-white; // Or your desired default background/text
-
-        #mainNav .nav-link {
-            @apply text-white hover:text-gray-200;
-        }
-        #mainNav .nav-toggle-icon,
-        #mainNav .nav-toggle-icon::before,
-        #mainNav .nav-toggle-icon::after {
-             @apply bg-white;
-        }
-        #mainNav .sub-menu .nav-link {
-             @apply text-gray-700 hover:text-black; // Assuming light dropdown background
-        }
-    }
-    // On non-home pages, main content doesn't need extra padding-top
-    @screen lg {
-        main {
-            @apply pt-0; // Reset padding if needed
-        }
-    }
-}

packages/base/Resources/Public/Scss/main.scss

@@ -9,11 +9,14 @@
 @import 'abstracts/icons';
 @import 'abstracts/fade-in';
 @import 'base/base';
-/* @import 'components/navigation'; */
+@import 'components/navigation';
 /* @import 'components/images'; */
 /* @import 'components/news'; */
 /* @import "components/news_detail"; */
 /* @import 'components/footer'; */
+@import 'components/text';
 @import 'components/buttons';
+@import 'components/form';
+@import 'components/card-container';
 @import 'layouts/home-page';
 

packages/base/ext_localconf.php

@@ -4,3 +4,18 @@ defined('TYPO3') or die('Access denied.');
 
 // Add default RTE configuration
 $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['base'] = 'EXT:base/Configuration/RTE/Default.yaml';
+
+// Register Icon for Content Element "Card Container"
+$iconRegistry = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Imaging\IconRegistry::class);
+$iconRegistry->registerIcon(
+    'content-card-container', // Icon Identifier
+    \TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider::class,
+    ['source' => 'EXT:base/Resources/Public/Icons/content-card-container.svg']
+);
+
+// Register Icon for Card RecordType
+$iconRegistry->registerIcon(
+    'content-card', // Icon Identifier
+    \TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider::class,
+    ['source' => 'EXT:base/Resources/Public/Icons/content-card.svg']
+);

tailwind.config.js

@@ -19,7 +19,7 @@ const config = {
     ...safelist,
   ] : [
     'md:col-span-6',
-    { 
+    {
       pattern: /col-span-\d+/,
       variants: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] // Include other variants (sm, lg) if needed
     },
@@ -39,9 +39,9 @@ const config = {
       // },
       colors: {
         primary: 'var(--color-primary)',
-        yellow: '#F5AE07',
+        'primary-dark': 'var(--color-primary-dark)',
-        'light-green': '#F4F6EC',
+        'light-grey': 'var(--color-light-grey)',
-        brand: '#6B8E23', // Added brand color for hover states from SCSS
+        'dark-grey': 'var(--color-dark-grey)',
       },
       backgroundImage: {
         'hero-gradient':