fix: change back to current and make first release manual

Reviewed-on: Cloonar/lena-schilling-website#14

.ddev/config.yaml

@@ -1,4 +1,4 @@
-name: lena-schilling
+name: dialog-relations
 type: typo3
 docroot: public
 php_version: "8.3"
@@ -14,270 +14,12 @@ composer_version: "2"
 web_environment:
   - TYPO3_CONTEXT=Development/Ddev
 corepack_enable: false
+nodejs_version: "18"
 
-# Key features of DDEV's config.yaml:
-
-# name: <projectname> # Name of the project, automatically provides
-#   http://projectname.ddev.site and https://projectname.ddev.site
-
-# type: <projecttype>  # backdrop, craftcms, django4, drupal, drupal6, drupal7, laravel, magento, magento2, php, python, shopware6, silverstripe, typo3, wordpress
-# See https://ddev.readthedocs.io/en/stable/users/quickstart/ for more
-# information on the different project types
-# "drupal" covers recent Drupal 8+
-
-# docroot: <relative_path> # Relative path to the directory containing index.php.
-
-# php_version: "8.2"  # PHP version to use, "5.6", "7.0", "7.1", "7.2", "7.3", "7.4", "8.0", "8.1", "8.2", "8.3"
-
-# You can explicitly specify the webimage but this
-# is not recommended, as the images are often closely tied to DDEV's' behavior,
-# so this can break upgrades.
-
-# webimage: <docker_image>  # nginx/php docker image.
-
-# database:
-#   type: <dbtype> # mysql, mariadb, postgres
-#   version: <version> # database version, like "10.11" or "8.0"
-#   MariaDB versions can be 5.5-10.8 and 10.11, MySQL versions can be 5.5-8.0
-#   PostgreSQL versions can be 9-16.
-
-# router_http_port: <port>  # Port to be used for http (defaults to global configuration, usually 80)
-# router_https_port: <port> # Port for https (defaults to global configuration, usually 443)
-
-# xdebug_enabled: false  # Set to true to enable Xdebug and "ddev start" or "ddev restart"
-# Note that for most people the commands
-# "ddev xdebug" to enable Xdebug and "ddev xdebug off" to disable it work better,
-# as leaving Xdebug enabled all the time is a big performance hit.
-
-# xhprof_enabled: false  # Set to true to enable Xhprof and "ddev start" or "ddev restart"
-# Note that for most people the commands
-# "ddev xhprof" to enable Xhprof and "ddev xhprof off" to disable it work better,
-# as leaving Xhprof enabled all the time is a big performance hit.
-
-# webserver_type: nginx-fpm, apache-fpm, or nginx-gunicorn
-
-# timezone: Europe/Berlin
-# This is the timezone used in the containers and by PHP;
-# it can be set to any valid timezone,
-# see https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
-# For example Europe/Dublin or MST7MDT
-
-# composer_root: <relative_path>
-# Relative path to the Composer root directory from the project root. This is
-# the directory which contains the composer.json and where all Composer related
-# commands are executed.
-
-# composer_version: "2"
-# You can set it to "" or "2" (default) for Composer v2 or "1" for Composer v1
-# to use the latest major version available at the time your container is built.
-# It is also possible to use each other Composer version channel. This includes:
-#   - 2.2 (latest Composer LTS version)
-#   - stable
-#   - preview
-#   - snapshot
-# Alternatively, an explicit Composer version may be specified, for example "2.2.18".
-# To reinstall Composer after the image was built, run "ddev debug refresh".
-
-# nodejs_version: "20"
-# change from the default system Node.js version to any other version.
-# Numeric version numbers can be complete (i.e. 18.15.0) or
-# incomplete (18, 17.2, 16). 'lts' and 'latest' can be used as well along with
-# other named releases.
-# see https://www.npmjs.com/package/n#specifying-nodejs-versions
-# Note that you can continue using 'ddev nvm' or nvm inside the web container
-# to change the project's installed node version if you need to.
-
-# corepack_enable: false
-# Change to 'true' to 'corepack enable' and gain access to latest versions of yarn/pnpm
-
-# additional_hostnames:
-#  - somename
-#  - someothername
-# would provide http and https URLs for "somename.ddev.site"
-# and "someothername.ddev.site".
-
-# additional_fqdns:
-#  - example.com
-#  - sub1.example.com
-# would provide http and https URLs for "example.com" and "sub1.example.com"
-# Please take care with this because it can cause great confusion.
-
-# upload_dirs: "custom/upload/dir"
-#
-# upload_dirs:
-#   - custom/upload/dir
-#   - ../private
-#
-# would set the destination paths for ddev import-files to <docroot>/custom/upload/dir
-# When Mutagen is enabled this path is bind-mounted so that all the files
-# in the upload_dirs don't have to be synced into Mutagen.
-
-# disable_upload_dirs_warning: false
-# If true, turns off the normal warning that says
-# "You have Mutagen enabled and your 'php' project type doesn't have upload_dirs set"
-
-# ddev_version_constraint: ""
-# Example:
-# ddev_version_constraint: ">= 1.22.4"
-# This will enforce that the running ddev version is within this constraint.
-# See https://github.com/Masterminds/semver#checking-version-constraints for
-# supported constraint formats
-
-# working_dir:
-#   web: /var/www/html
-#   db: /home
-# would set the default working directory for the web and db services.
-# These values specify the destination directory for ddev ssh and the
-# directory in which commands passed into ddev exec are run.
-
-# omit_containers: [db, ddev-ssh-agent]
-# Currently only these containers are supported. Some containers can also be
-# omitted globally in the ~/.ddev/global_config.yaml. Note that if you omit
-# the "db" container, several standard features of DDEV that access the
-# database container will be unusable. In the global configuration it is also
-# possible to omit ddev-router, but not here.
-
-# performance_mode: "global"
-# DDEV offers performance optimization strategies to improve the filesystem
-# performance depending on your host system. Should be configured globally.
-#
-# If set, will override the global config. Possible values are:
-#   - "global":  uses the value from the global config.
-#   - "none":    disables performance optimization for this project.
-#   - "mutagen": enables Mutagen for this project.
-#   - "nfs":     enables NFS for this project.
-#
-# See https://ddev.readthedocs.io/en/stable/users/install/performance/#nfs
-# See https://ddev.readthedocs.io/en/stable/users/install/performance/#mutagen
-
-# fail_on_hook_fail: False
-# Decide whether 'ddev start' should be interrupted by a failing hook
-
-# host_https_port: "59002"
-# The host port binding for https can be explicitly specified. It is
-# dynamic unless otherwise specified.
-# This is not used by most people, most people use the *router* instead
-# of the localhost port.
-
-# host_webserver_port: "59001"
-# The host port binding for the ddev-webserver can be explicitly specified. It is
-# dynamic unless otherwise specified.
-# This is not used by most people, most people use the *router* instead
-# of the localhost port.
-
-# host_db_port: "59002"
-# The host port binding for the ddev-dbserver can be explicitly specified. It is dynamic
-# unless explicitly specified.
-
-# mailpit_http_port: "8025"
-# mailpit_https_port: "8026"
-# The Mailpit ports can be changed from the default 8025 and 8026
-
-# host_mailpit_port: "8025"
-# The mailpit port is not normally bound on the host at all, instead being routed
-# through ddev-router, but it can be bound directly to localhost if specified here.
-
-# webimage_extra_packages: [php7.4-tidy, php-bcmath]
-# Extra Debian packages that are needed in the webimage can be added here
-
-# dbimage_extra_packages: [telnet,netcat]
-# Extra Debian packages that are needed in the dbimage can be added here
-
-# use_dns_when_possible: true
-# If the host has internet access and the domain configured can
-# successfully be looked up, DNS will be used for hostname resolution
-# instead of editing /etc/hosts
-# Defaults to true
-
-# project_tld: ddev.site
-# The top-level domain used for project URLs
-# The default "ddev.site" allows DNS lookup via a wildcard
-# If you prefer you can change this to "ddev.local" to preserve
-# pre-v1.9 behavior.
-
-# ngrok_args: --basic-auth username:pass1234
-# Provide extra flags to the "ngrok http" command, see
-# https://ngrok.com/docs/ngrok-agent/config or run "ngrok http -h"
-
-# disable_settings_management: false
-# If true, DDEV will not create CMS-specific settings files like
-# Drupal's settings.php/settings.ddev.php or TYPO3's AdditionalConfiguration.php
-# In this case the user must provide all such settings.
-
-# You can inject environment variables into the web container with:
-# web_environment:
-# - SOMEENV=somevalue
-# - SOMEOTHERENV=someothervalue
-
-# no_project_mount: false
-# (Experimental) If true, DDEV will not mount the project into the web container;
-# the user is responsible for mounting it manually or via a script.
-# This is to enable experimentation with alternate file mounting strategies.
-# For advanced users only!
-
-# bind_all_interfaces: false
-# If true, host ports will be bound on all network interfaces,
-# not the localhost interface only. This means that ports
-# will be available on the local network if the host firewall
-# allows it.
-
-# default_container_timeout: 120
-# The default time that DDEV waits for all containers to become ready can be increased from
-# the default 120. This helps in importing huge databases, for example.
-
-#web_extra_exposed_ports:
-#- name: nodejs
-#  container_port: 3000
-#  http_port: 2999
-#  https_port: 3000
-#- name: something
-#  container_port: 4000
-#  https_port: 4000
-#  http_port: 3999
-# Allows a set of extra ports to be exposed via ddev-router
-# Fill in all three fields even if you don’t intend to use the https_port!
-# If you don’t add https_port, then it defaults to 0 and ddev-router will fail to start.
-#
-# The port behavior on the ddev-webserver must be arranged separately, for example
-# using web_extra_daemons.
-# For example, with a web app on port 3000 inside the container, this config would
-# expose that web app on https://<project>.ddev.site:9999 and http://<project>.ddev.site:9998
-# web_extra_exposed_ports:
-#  - name: myapp
-#    container_port: 3000
-#    http_port: 9998
-#    https_port: 9999
-
-#web_extra_daemons:
-#- name: "http-1"
-#  command: "/var/www/html/node_modules/.bin/http-server -p 3000"
-#  directory: /var/www/html
-#- name: "http-2"
-#  command: "/var/www/html/node_modules/.bin/http-server /var/www/html/sub -p 3000"
-#  directory: /var/www/html
-
-# override_config: false
-# By default, config.*.yaml files are *merged* into the configuration
-# But this means that some things can't be overridden
-# For example, if you have 'use_dns_when_possible: true'' you can't override it with a merge
-# and you can't erase existing hooks or all environment variables.
-# However, with "override_config: true" in a particular config.*.yaml file,
-# 'use_dns_when_possible: false' can override the existing values, and
-# hooks:
-#   post-start: []
-# or
-# web_environment: []
-# or
-# additional_hostnames: []
-# can have their intended affect. 'override_config' affects only behavior of the
-# config.*.yaml file it exists in.
-
-# Many DDEV commands can be extended to run tasks before or after the
-# DDEV command is executed, for example "post-start", "post-import-db",
-# "pre-composer", "post-composer"
-# See https://ddev.readthedocs.io/en/stable/users/extend/custom-commands/ for more
-# information on the commands that can be extended and the tasks you can define
-# for them. Example:
-#hooks:
-#  post-start:
-#    - exec: composer install -d /var/www/html
+additional_services:
+  - mailpit
+hooks:
+  post-start:
+    - exec-host: |
+        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/build.yaml

@@ -1,3 +1,4 @@
+
 name: Build
 
 on:
@@ -26,7 +27,7 @@ jobs:
 
       - name: Run composer install if composer.json exists
         run: | 
-          rm composer.lock
+          [ -f composer.lock ] && rm composer.lock
           composer validate --no-check-publish
 
       - name: Set up Node.js

.gitea/workflows/deploy.yaml

@@ -68,8 +68,8 @@ jobs:
           rm typo3.tar.gz
       - name: Install ssh agent and rsync
         run: |
-          apt update
-          apt install -y openssh-client rsync
+          apt-get update
+          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 install -y openssh-client rsync
+          apt-get update
+          apt-get install -y openssh-client rsync
       - name: Switch to release
         uses: deployphp/action@v1
         with:
@@ -119,8 +119,8 @@ jobs:
           rm typo3.tar.gz
       - name: Install ssh agent and rsync
         run: |
-          apt update
-          apt install -y openssh-client rsync
+          apt-get update
+          apt-get install -y openssh-client rsync
       - name: Deploy
         uses: deployphp/action@v1
         with:

.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 install -y openssh-client rsync
+          apt-get update
+          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

.roorules

@@ -0,0 +1,6 @@
+# .roorules
+- This is a Typo3 project
+- Allways check composer.json and package.json for context of the project
+- Never read the .env file
+- The Website design is done with the base extension under packages/base
+- For Design Tailwind is used

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

build/servers.yaml

@@ -2,7 +2,7 @@ hosts:
   production:
       stage: production
       hostname: web-arm.cloonar.com
-      remote_user: lena_schilling_at
+      remote_user: dialog_relations_at
       writable_mode: chmod
       forward_agent: true
       deploy_path: ~/
@@ -10,7 +10,7 @@ hosts:
   stage:
       stage: staging
       hostname: web-arm.cloonar.com
-      remote_user: lena_schilling_cloonar_dev
+      remote_user: dialog_relations_cloonar_dev
       writable_mode: chmod
       forward_agent: true
       deploy_path: ~/

config/sites/default/config.yaml

@@ -1,12 +1,13 @@
-base: https://lena-schilling.at
+base: https://dialog-relations.at
 baseVariants:
-  - base: https://lena-schilling.ddev.site
+  - base: https://dialog-relations.ddev.site
     condition: 'applicationContext == "Development/Ddev"'
-  - base: https://lena-schilling.cloonar.dev
+  - base: https://dialog-relations.cloonar.dev
     condition: 'applicationContext == "Production/Staging"'
 dependencies:
   - georgringer/news
   - typo3/redirects
+  - typo3/form
   - cloonar-typo3/base
 languages:
   -
@@ -25,8 +26,8 @@ languages:
 rootPageId: 1
 websiteTitle: ''
 favicons:
-  full_name: 'Lena Schilling'
-  short_name: 'Lena Schilling'
+  full_name: 'Dialog Relations'
+  short_name: 'Dialog Relations'
   theme_color: '#233600'
   favicon_path: 'EXT:base/Resources/Public/Images/Favicons/'
   favicon_svg: favicon.svg

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',
-        'transport_smtp_encrypt' => false,
-        'transport_smtp_password' => '',
-        'transport_smtp_server' => '',
-        'transport_smtp_username' => '',
+        'defaultMailFromAddress' => $_ENV['TYPO3_MAIL_FROM'],
+        'transport' => $_ENV['TYPO3_MAIL_TRANSPORT'],
+        'transport_smtp_server' => $_ENV['TYPO3_MAIL_SMTP_SERVER'],
+        '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'],
+        'transport_sendmail_command' => $_ENV['TYPO3_MAIL_SENDMAIL_COMMAND'],
     ],
     'SYS' => [
         'caching' => [

flake.nix

@@ -0,0 +1,83 @@
+{
+  description = "Dialog Relations VSCode workspace";
+
+  inputs = {
+    nixpkgs.url = "github:nixos/nixpkgs/nixpkgs-unstable";
+    mcp-servers-nix = {
+      url = "github:natsukium/mcp-servers-nix";
+      inputs.nixpkgs.follows = "nixpkgs";
+    };
+  };
+
+  outputs =
+    {
+      nixpkgs,
+      mcp-servers-nix,
+      ...
+    }:
+    let
+      inherit (nixpkgs) lib;
+      forAllSystems = lib.genAttrs [
+        "aarch64-darwin"
+        "aarch64-linux"
+        "x86_64-darwin"
+        "x86_64-linux"
+      ];
+    in
+    {
+      devShells = forAllSystems (
+        system:
+        let
+          pkgs = import nixpkgs {
+            inherit system;
+            config.allowUnfree = true;
+          };
+        in
+        {
+          default = pkgs.mkShell {
+            packages = with pkgs; [ vscode ];
+            shellHook =
+              let
+                config = mcp-servers-nix.lib.mkConfig pkgs {
+                  fileName = "mcp.json";
+                  flavor = "vscode-workspace";
+                  programs = {
+                    filesystem = {
+                      enable = true;
+                      args = [
+                        # NOTE: Using builtins.getEnv requires running `nix develop` with --impure flag
+                        "${toString (builtins.getEnv "PWD")}"
+                      ];
+                    };
+                    fetch = {
+                      enable = true;
+                    };
+                    # github = {
+                    #   enable = true;
+                    #   env = {
+                    #     GITHUB_PERSONAL_ACCESS_TOKEN = ''''${input:github_token}'';
+                    #   };
+                    # };
+                  };
+                  settings.inputs = [
+                    # {
+                    #   type = "promptString";
+                    #   id = "github_token";
+                    #   description = "GitHub Personal Access Token";
+                    #   password = true;
+                    # }
+                  ];
+                };
+              in
+              ''
+                if [ -L ".vscode/mcp.json" ]; then
+                  unlink .vscode/mcp.json
+                fi
+                mkdir -p .vscode
+                ln -sf ${config} .vscode/mcp.json
+              '';
+          };
+        }
+      );
+    };
+}

package.json

@@ -1,15 +1,23 @@
 {
-  "name": "lena-schilling-website",
+  "name": "dialog-relations-website",
   "version": "1.0.0",
   "scripts": {
-    "build:css": "webpack --config webpack.config.js"
+    "build:css": "NODE_ENV=production webpack --config webpack.config.js --mode production",
+    "dev:css": "webpack --config webpack.config.js --mode development --watch"
   },
   "devDependencies": {
+    "autoprefixer": "^10.4.21",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
+    "postcss": "^8.5.3",
+    "postcss-loader": "^8.1.1",
     "sass": "^1.63.4",
     "sass-loader": "^13.3.2",
+    "tailwindcss": "^3.4.17",
     "webpack": "^5.88.0",
     "webpack-cli": "^5.1.4"
+  },
+  "dependencies": {
+    "yaml-loader": "^0.8.1"
   }
 }

packages/base/Configuration/Ext/Form/TypoScript/setup.typoscript

@@ -0,0 +1,15 @@
+plugin.tx_form {
+    settings {
+        yamlConfigurations {
+            11 = EXT:base/Configuration/Ext/Form/Yaml/Setup.yaml
+        }
+    }
+}
+
+module.tx_form {
+    settings {
+        yamlConfigurations {
+            11 = EXT:base/Configuration/Ext/Form/Yaml/Setup.yaml
+        }
+    }
+}

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

@@ -0,0 +1,201 @@
+TYPO3:
+  CMS:
+    Form:
+      prototypes:
+        standard:
+          formElementsDefinition:
+            Form:
+              renderingOptions:
+                templateVariant: version2
+                partialRootPaths:
+                  20: 'EXT:base/Resources/Private/Extensions/Form/Partials/'
+              variants:
+                -
+                  renderingOptions:
+                    formNavigation:
+                      navigationClassAttribute: 'form-navigation text-right'
+                      btnNextClassAttribute: 'btn btn-primary'
+                      btnPreviousClassAttribute: 'btn btn-outline btn-primary'
+                      btnSubmitClassAttribute: 'btn btn-primary'
+                    fieldProperties:
+                      descriptionClassAttribute: 'form-text'
+                      errorClassAttribute: 'peer [&_input]:input-error [&_[type=checkbox]]:checkbox-error [&_[type=file]]:file-input-error [&_[type=radio]]:radio-error [&_select]:select-error [&_textarea]:textarea-error'
+                      errorMsgClassAttribute: 'label label-text-alt justify-start text-error peer-[.form-control]:-mt-4'
+                      requiredMarkClassAttribute: 'required'
+                      visuallyHiddenClassAttribute: 'sr-only'
+            SummaryPage:
+              variants:
+                -
+                  renderingOptions:
+                    listRowClassAttribute: 'grid grid-cols-2 gap-4'
+
+            # Form elements
+            AdvancedPassword:
+              variants:
+                -
+                  properties:
+                    fieldsetClassAttribute: 'form-control form-element-advancedpassword mb-4'
+                    containerClassAttribute: 'form-control mb-4'
+                    elementClassAttribute: 'input input-bordered'
+                    confirmationClassAttribute: 'input input-bordered'
+                    labelClassAttribute: 'label label-text justify-start'
+                    renderFieldset: 0
+            Checkbox:
+              variants:
+                -
+                  properties:
+                    containerClassAttribute: 'form-control form-element-checkbox mb-4'
+                    elementClassAttribute: 'checkbox border border-primary'
+                    labelTextClassAttribute: 'label-text'
+                    labelClassAttribute: 'label cursor-pointer justify-start gap-2'
+            ContentElement:
+              variants:
+                1:
+                  properties:
+                    outerContainerClassAttribute: 'mb-4 [&_.container]:max-w-none [&_.frame]:py-0'
+            CountrySelect:
+              variants:
+                -
+                  properties:
+                    containerClassAttribute: 'form-control form-element-select mb-4'
+                    elementClassAttribute: 'select select-bordered'
+                    labelClassAttribute: 'label label-text justify-start'
+            Date:
+              variants:
+                -
+                  properties:
+                    containerClassAttribute: 'form-control form-element-date mb-4'
+                    elementClassAttribute: 'input input-bordered'
+                    labelClassAttribute: 'label label-text justify-start'
+            DatePicker:
+              variants:
+                -
+                  properties:
+                    containerClassAttribute: 'form-control form-element-date mb-4'
+                    elementClassAttribute: 'input input-bordered'
+                    labelClassAttribute: 'label label-text justify-start'
+            SingleSelect:
+              variants:
+                -
+                  properties:
+                    containerClassAttribute: 'form-control form-element-select mb-4'
+                    elementClassAttribute: 'select select-bordered'
+                    labelClassAttribute: 'label label-text justify-start'
+            StaticText:
+              variants:
+                1:
+                  properties:
+                    containerClassAttribute: 'form-element-statictext mb-4 [&>p]:label-text'
+            Email:
+              variants:
+                -
+                  properties:
+                    containerClassAttribute: 'form-control form-element-email mb-4'
+                    elementClassAttribute: 'border border-primary block w-full p-2'
+                    labelClassAttribute: 'label label-text font-bold justify-start block w-full mb-2'
+            Fieldset:
+              variants:
+                -
+                  properties:
+                    elementClassAttribute: 'form-element-fieldset mb-4 [&>legend]:font-bold'
+            FileUpload:
+              variants:
+                -
+                  properties:
+                    containerClassAttribute: 'form-control form-element-fileupload mb-4'
+                    elementClassAttribute: 'file-input file-input-bordered'
+                    labelClassAttribute: 'label label-text justify-start'
+            ImageUpload:
+              variants:
+                -
+                  properties:
+                    containerClassAttribute: 'form-control form-element-imageupload mb-4'
+                    elementClassAttribute: 'file-input file-input-bordered'
+                    labelClassAttribute: 'label label-text justify-start'
+            MultiCheckbox:
+              variants:
+                -
+                  properties:
+                    fieldsetClassAttribute: 'mb-4 [&>legend]:label [&>legend]:label-text [&>legend]:justify-start'
+                    containerClassAttribute: 'form-control form-element-checkbox'
+                    elementClassAttribute: 'checkbox'
+                    labelTextClassAttribute: 'label-text'
+                    labelClassAttribute: 'label cursor-pointer justify-start gap-2'
+            MultiSelect:
+              variants:
+                -
+                  properties:
+                    containerClassAttribute: 'form-control form-element-multiselect mb-4'
+                    elementClassAttribute: 'select select-bordered'
+                    labelClassAttribute: 'label label-text justify-start'
+            Number:
+              variants:
+                -
+                  properties:
+                    containerClassAttribute: 'form-control form-element-number mb-4'
+                    elementClassAttribute: 'input input-bordered'
+                    labelClassAttribute: 'label label-text justify-start'
+            Password:
+              variants:
+                -
+                  properties:
+                    containerClassAttribute: 'form-control form-element-password mb-4'
+                    elementClassAttribute: 'input input-bordered'
+                    labelClassAttribute: 'label label-text justify-start'
+            RadioButton:
+              variants:
+                -
+                  properties:
+                    fieldsetClassAttribute: 'mb-4 [&>legend]:label [&>legend]:label-text [&>legend]:justify-start'
+                    containerClassAttribute: 'form-control form-element-radio'
+                    elementClassAttribute: 'radio border border-primary'
+                    labelTextClassAttribute: 'label-text'
+                    labelClassAttribute: 'label cursor-pointer justify-start gap-2'
+            Telephone:
+              variants:
+                -
+                  properties:
+                    containerClassAttribute: 'form-control form-element-phone mb-4'
+                    elementClassAttribute: 'border border-primary block w-full p-2'
+                    labelClassAttribute: 'label label-text font-bold justify-start block w-full mb-2'
+            Text:
+              variants:
+                -
+                  properties:
+                    containerClassAttribute: 'form-control form-element-text mb-4'
+                    elementClassAttribute: 'border border-primary block w-full p-2'
+                    labelClassAttribute: 'label label-text font-bold justify-start block w-full mb-2'
+            Textarea:
+              variants:
+                -
+                  properties:
+                    containerClassAttribute: 'form-control form-element-textarea mb-4'
+                    elementClassAttribute: 'border border-primary block w-full p-2 h-24'
+                    labelClassAttribute: 'label label-text font-bold justify-start block w-full mb-2'
+            Url:
+              variants:
+                -
+                  properties:
+                    containerClassAttribute: 'form-control form-element-url mb-4'
+                    elementClassAttribute: 'border border-primary block w-full p-2'
+                    labelClassAttribute: 'label label-text font-bold justify-start block w-full mb-2'
+            GridRow:
+              variants:
+                -
+                  properties:
+                    elementClassAttribute: 'form-element form-element-gridrow grid grid-cols-12 gap-8 md:gap-16'
+                    gridColumnClassAutoConfiguration:
+                      gridSize: 12
+                      viewPorts:
+                        xs:
+                          classPattern: 'col-span-{@numbersOfColumnsToUse}'
+                        sm:
+                          classPattern: 'sm:col-span-{@numbersOfColumnsToUse}'
+                        md:
+                          classPattern: 'md:col-span-{@numbersOfColumnsToUse}'
+                        lg:
+                          classPattern: 'lg:col-span-{@numbersOfColumnsToUse}'
+                        xl:
+                          classPattern: 'xl:col-span-{@numbersOfColumnsToUse}'
+                        xxl:
+                          classPattern: 'xxl:col-span-{@numbersOfColumnsToUse}'

packages/base/Configuration/Sets/SitePackage/PageTsConfig/BackendLayouts/HomePage.tsconfig

@@ -0,0 +1,22 @@
+mod.web_layout.BackendLayouts {
+    home_page {
+        title = LLL:EXT:base/Resources/Private/Language/locallang_be.xlf:backend_layout.home_page
+        icon = EXT:base/Resources/Public/Images/BackendLayouts/default.png
+        config {
+            backend_layout {
+                colCount = 1
+                rowCount = 1
+                rows {
+                    1 {
+                        columns {
+                            1 {
+                                name = LLL:EXT:base/Resources/Private/Language/locallang_be.xlf:backend_layout.column.content
+                                colPos = 0
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

packages/base/Configuration/Sets/SitePackage/PageTsConfig/BackendLayouts/default.tsconfig

@@ -8,35 +8,18 @@ mod {
                 title = Default
                 config {
                     backend_layout {
-                        colCount = 12
-                        rowCount = 2
+                        colCount = 1
+                        rowCount = 1
                         rows {
                             1 {
                                 columns {
                                     1 {
                                         name = LLL:EXT:base/Resources/Private/Language/locallang_be.xlf:backend_layout.column.normal
                                         colPos = 0
-                                        colspan = 12
                                         identifier = main
                                     }
                                 }
                             }
-                            2 {
-                                columns {
-                                    1 {
-                                        name = Footer Left
-                                        colPos = 90
-                                        colspan = 6
-                                        identifier = footer-left
-                                    }
-                                    2 {
-                                        name = Footer Right
-                                        colPos = 91
-                                        colspan = 6
-                                        identifier = footer-right
-                                    }
-                                }
-                            }
                         }
                     }
                 }

packages/base/Configuration/Sets/SitePackage/TypoScript/Helper/PageClass.typoscript

@@ -0,0 +1,40 @@
+# PAGE CLASS
+lib.page.class = COA
+lib.page.class {
+    // Page alias or id as fallback
+    10 = TEXT
+    10 {
+        field = alias // uid
+        noTrimWrap = |page-||
+    }
+    // Current level of the page within the tree structure
+    20 = TEXT
+    20 {
+        data = level:1
+        noTrimWrap = | pagelevel-||
+    }
+    // Language
+    30 = TEXT
+    30 {
+        data = siteLanguage:languageId
+        noTrimWrap = | language-||
+    }
+    // Backend layout
+    40 = TEXT
+    40 {
+        data = pagelayout
+        replacement.10 {
+            search = pagets__
+            replace =
+        }
+        ifEmpty = default
+        noTrimWrap = | backendlayout-||
+    }
+    // Layout
+    50 = TEXT
+    50 {
+        field = layout
+        noTrimWrap = | layout-||
+        ifEmpty = default
+    }
+}

packages/base/Configuration/Sets/SitePackage/TypoScript/page.typoscript

@@ -3,10 +3,24 @@
 # Include constants
 #<INCLUDE_TYPOSCRIPT: source="FILE:EXT:base/Configuration/Sets/SitePackage/TypoScript/constants.typoscript">
 
+# HELPER
+@import 'EXT:base/Configuration/Sets/SitePackage/TypoScript/Helper/PageClass.typoscript'
+
 page = PAGE
 page {
   typeNum = 0
   shortcutIcon = EXT:base/Resources/Public/Favicons/favicon-96x96.png
+
+  bodyTagCObject = COA
+  bodyTagCObject {
+      10 = TEXT
+      10.data = TSFE:id
+      10.noTrimWrap = | id="p|"|
+      20 =< lib.page.class
+      20.stdWrap.noTrimWrap = | class="|"|
+      wrap = <body|>
+  }
+
   10 = PAGEVIEW
   10 {
     paths {
@@ -32,6 +46,7 @@ page {
             as = metanavigation
         }
     }
+
   }
 
   meta {
@@ -88,6 +103,7 @@ page {
   }
 
   footerMenuPid = {$footerMenuPid}
+
 }
 
 lib.contentElement {

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

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

packages/base/Configuration/Sets/SitePackage/setup.typoscript

@@ -1,4 +1,5 @@
 @import './TypoScript/'
+@import 'EXT:base/Configuration/Ext/Form/TypoScript/setup.typoscript'
 
 # Override tx_news templates
 plugin.tx_news {

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,4 +0,0 @@
-<f:layout name="Default" />
-<f:section name="Main">
-    <h1><span class="tapered">{data.header}</span></h1>
-</f:section>

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

@@ -1,167 +0,0 @@
-.frame-type-cloonar_hero {
-  position: relative;
-  z-index: 1;
-  /* Use a relative path to correctly load the image */
-  background: #cecece;
-  background-repeat: repeat;
-  background: url('../../../Images/background.jpg') repeat;
-}
-
-.frame-type-cloonar_hero + .frame {
-    margin-top: -10.4rem;
-}
-.frame-type-cloonar_hero .container {
-    padding-bottom: 3rem;
-}
-
-/* Inner container with white background and padding */
-.frame-type-cloonar_hero .hero-inner {
-  padding: 3rem 1rem;
-  max-width: 1140px;
-  margin: 0 auto;
-}
-
-.frame-type-cloonar_hero .hero {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.frame-type-cloonar_hero .hero-subheader {
-  font-size: 2rem;
-  color: var(--bs-primary);
-  margin-bottom: 0rem;
-  line-height: 1;
-}
-
-.frame-type-cloonar_hero .hero-title {
-  text-transform: uppercase;
-  font-size: 4rem;
-  color: var(--bs-primary);
-  line-height: 1;
-  margin-bottom: 2rem;
-}
-
-.frame-type-cloonar_hero h4 {
-    text-transform: uppercase;
-}
-
-.frame-type-cloonar_hero .hero-text {
-  font-size: 1rem;
-  color: #333;
-  line-height: 1.4;
-  margin-bottom: 1rem;
-  max-width: 45ch;
-}
-
-.frame-type-cloonar_hero .hero-social-icons {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-/* Smaller icons on mobile */
-.frame-type-cloonar_hero .social-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1rem;
-  padding: 1rem;
-  text-decoration: none;
-  border-radius: 50%;
-  transition: background 0.3s;
-}
-
-.frame-type-cloonar_hero .hero-image-wrapper {
-  margin-top: 1rem;
-  align-self: flex-end;
-  width: 100%;
-}
-
-.frame-type-cloonar_hero .hero-image {
-  width: 100%;
-  height: auto;
-  border-radius: 0.5rem;
-}
-
-.frame-type-cloonar_hero img {
-    width: 100%;
-}
-
-@media (min-width: 768px) {
-    .frame-type-cloonar_hero .container {
-        padding-bottom: 4rem;
-    }
-
-  .frame-type-cloonar_hero .hero-subheader {
-    font-size: 3rem;
-  }
-
-  .frame-type-cloonar_hero .hero-title {
-    font-size: 5rem;
-  }
-
-  .frame-type-cloonar_hero .hero-text {
-    font-size: 1rem;
-  }
-
-  .frame-type-cloonar_hero .social-icon {
-    width: 2.5rem;
-    height: 2rem;
-    font-size: 2rem;
-    padding: 2.375rem;
-  }
-
-  .frame-type-cloonar_hero .hero-image {
-  }
-}
-
-@media (min-width: 992px) {
-  .frame-type-cloonar_hero .hero {
-    display: grid;
-    grid-template-columns: 1fr 40% 7.125rem;
-    grid-template-rows: auto auto 1fr;
-    grid-template-areas:
-      "subheader    image social"
-      "title        image social"
-      "text         image social";
-    align-items: start;
-    justify-items: start;
-    text-align: left;
-  }
-
-  .frame-type-cloonar_hero .hero-subheader {
-    grid-area: subheader;
-  }
-
-  .frame-type-cloonar_hero .hero-title {
-    grid-area: title;
-  }
-
-  .frame-type-cloonar_hero .hero-text {
-    grid-area: text;
-    font-size: 1rem;
-    max-width: 40ch;
-    margin-bottom: 1.5rem;
-  }
-
-  .frame-type-cloonar_hero .hero-social-icons {
-    grid-area: social;
-    flex-direction: column;
-    gap: 1rem;
-    margin-bottom: 0;
-    align-items: flex-start;
-    align-self: center;
-  }
-
-  .frame-type-cloonar_hero .hero-image-wrapper {
-    grid-area: image;
-    margin-top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .frame-type-cloonar_hero .hero-image {
-  }
-}

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

@@ -1,62 +1,101 @@
-<f:layout name="Default" />
+<f:layout name="FullWidth" />
 
-<!-- No extra heading from the parent layout -->
 <f:section name="Header" />
 
 <f:section name="Main">
-  <f:asset.css identifier="CBHero" href="{cb:assetPath()}/frontend.css" />
+  <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">
 
-  <div class="hero-inner">
-    <div class="hero">
-      <h2 class="hero-subheader">{data.subheader}</h2>
-      <h1 class="hero-title">{data.header}</h1>
-      <div class="hero-text">
-        <f:format.html>{data.bodytext}</f:format.html>
-      </div>
-      <div class="hero-social-icons">
-        <a href="https://www.instagram.com/lena.ats/" target="_blank" aria-label="Lena Schillings Instagram" class="btn social-icon"><i class="ci ci-instagram"></i></a>
-        <a href="https://www.tiktok.com/@dieschilling" target="_blank" aria-label="Lena Schillings TikTok" class="btn social-icon"><i class="ci ci-tiktok"></i></a>
-      </div>
-      <div class="hero-image-wrapper">
+        <!-- IMAGE HALF -->
+        <div class="order-2 py-16 md:order-1 md:w-1/2 relative">
           <f:if condition="{data.image}">
             <f:then>
-            <figure>
-                <!-- WEBP source -->
+              <picture class="block w-full object-cover">
+                <!-- WEBP -->
                 <source
                   type="image/webp"
                   srcset="
-                    {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default', fileExtension:'webp')} 320w,
-                    {f:uri.image(image:data.image.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w,
-                    {f:uri.image(image:data.image.0, width:'430c', cropVariant:'default', fileExtension:'webp')} 1024w"
-                  sizes="(max-width: 320px) 80vw,
-                         (max-width: 768px) 80px,
-                         430px" />
-
-                <!-- Fallback source -->
+                    {f:uri.image(image:data.image.0, width:'320c', fileExtension:'webp')} 320w,
+                    {f:uri.image(image:data.image.0, width:'768c', fileExtension:'webp')} 768w,
+                    {f:uri.image(image:data.image.0, width:'1024c', fileExtension:'webp')} 1024w"
+                  sizes="(max-width: 768px) 80vw, 1024px" />
+                <!-- fallback -->
                 <source
                   srcset="
-                  {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
-                  {f:uri.image(image:data.image.0, width:'600c', cropVariant:'default')} 600w,
-                  {f:uri.image(image:data.image.0, width:'430c', cropVariant:'default')} 1024w"
-                sizes="(max-width: 320px) 80vw,
-                       (max-width: 768px) 80vw,
-                       430px" />
+                    {f:uri.image(image:data.image.0, width:'320c')} 320w,
+                    {f:uri.image(image:data.image.0, width:'768c')} 768w,
+                    {f:uri.image(image:data.image.0, width:'1024c')} 1024w"
+                  sizes="(max-width: 768px) 80vw, 1024px" />
                 <f:image
                   image="{data.image.0}"
                   treatIdAsReference="1"
                   fetchpriority="high"
                   cropVariant="default"
-                width="430c"
+                  width="1024c"
                   alt="Hero Image"
                   loading="lazy"
-                class="hero-image" />
-            </figure>
+                  class="w-full h-auto"
+                />
+              </picture>
             </f:then>
             <f:else>
-            <p>No image available</p>
+              <p class="w-full text-center text-white py-20">
+                No image available
+              </p>
             </f:else>
           </f:if>
+
+          <!-- Down‑arrow, half out on the right edge -->
+          <div
+            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="#"
+               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>
+          </div>
+        </div>
+
+        <!-- TEXT HALF -->
+        <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="flex items-center space-x-3">
+            <span class="block h-px w-10 bg-gray-600"></span>
+            <span class="text-sm uppercase tracking-wide font-bold">
+              {data.subheader}
+            </span>
+          </div>
+
+          <!-- Heading -->
+          <h1>
+            {data.header}
+          </h1>
+
+          <!-- Body copy -->
+          <div class="text-base md:text-lg max-w-md">
+            <f:format.html>{data.bodytext}</f:format.html>
+          </div>
+
+          <f:comment>
+          <!-- Social icons -->
+          <div class="space-x-3">
+            <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="#" 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="#" 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/assets/frontend.css

@@ -1,44 +0,0 @@
-.frame-type-cloonar_stats .stats-wrapper {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: flex-start;
-    position: relative;
-    z-index: 10;
-    background: #fff;
-    padding: 1rem;
-    max-width: 1140px;
-    margin-left: auto;
-    margin-right: auto;
-    gap: 1rem; /* maintain gap on mobile */
-}
-
-/* Two columns on mobile */
-.frame-type-cloonar_stats .stats-wrapper p {
-    box-sizing: border-box;
-    flex: 0 0 calc((100% - 1rem) / 2);
-    max-width: calc((100% - 1rem) / 2);
-    text-align: center;
-    margin-bottom: 1rem;
-    text-transform: uppercase;
-    color: var(--bs-primary);
-}
-
-.frame-type-cloonar_stats .stats-wrapper span.big-number {
-    font-size: 4rem;
-    font-family: 'Hajime Sans', sans-serif;
-    text-transform: none;
-}
-
-@media (min-width: 768px) {
-  .frame-type-cloonar_stats .stats-wrapper {
-      padding: 3rem 1rem;
-      gap: 2rem; /* increase gap on desktop */
-  }
-
-  /* Four columns on desktop */
-  .frame-type-cloonar_stats .stats-wrapper p {
-      flex: 0 0 calc((100% - 6rem) / 4); /* 3 gaps * 2rem = 6rem total gap */
-      max-width: calc((100% - 6rem) / 4);
-  }
-}

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,13 +0,0 @@
-<f:layout name="Default" />
-
-<f:section name="Header" />
-
-<f:section name="Main">
-  <f:asset.css identifier="CBStats" href="{cb:assetPath()}/frontend.css" />
-
-  <div class="stats-wrapper">
-    <f:format.html>
-      {data.bodytext}
-    </f:format.html>
-  </div>
-</f:section>

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

@@ -1,4 +0,0 @@
-/* CSS for text content element */
-.frame-type-cloonar_text .text-bodytext {
-    max-width: 750px;
-}

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

@@ -1,13 +1,14 @@
 <f:layout name="Default" />
 <f:section name="Main">
-    <f:asset.css identifier="CBText" href="{cb:assetPath()}/frontend.css" />
     <div class="fade-in-on-scroll">
         <f:if condition="{data.header}">
             <f:then><h2>{data.header}</h2></f:then>
         </f:if>
         <f:if condition="{data.bodytext}">
             <f:then>
-                <div class="text-bodytext"><f:format.html>{data.bodytext}</f:format.html></div>
+                <div class="max-w-3xl prose lg:prose-lg">
+                    <f:format.html>{data.bodytext}</f:format.html>
+                </div>
             </f:then>
         </f:if>
     </div>

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

@@ -1,75 +0,0 @@
-.textimage-container {
-    --gap: 2rem;
-    display: flex;
-    flex-direction: column;
-    gap: var(--gap);
-}
-
-.textimage-wrapper {
-  width: 100%;
-}
-
-.textimage-text {
-  font-size: 1rem;
-  line-height: 1.5;
-}
-
-.textimage-image-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.textimage-picture {
-  display: block;
-  max-width: 100%;
-}
-
-.textimage-image {
-  max-width: 100%;
-  height: auto;
-  border-radius: 0.5rem;
-  display: block;
-}
-
-/* Image positions: 25 = left, 26 = right */
-.textimage-container.image-pos-25 {
-  flex-direction: column;
-}
-
-.textimage-container.image-pos-26 {
-  flex-direction: column;
-}
-
-/* On larger screens, arrange horizontally for image position settings */
-@media (min-width: 768px) {
-    .textimage-container.size-25 {
-        --gap: 8rem;
-    }
-
-  .textimage-container.image-pos-25 {
-    flex-direction: row;
-  }
-
-  .textimage-container.image-pos-26 {
-    flex-direction: row-reverse;
-  }
-
-    .textimage-image-wrapper.size-25 {
-        flex: 0 0 calc(40% - (var(--gap) / 2));
-        max-width: calc(40% - (var(--gap) / 2));
-    }
-    .textimage-wrapper.size-25 {
-        flex: 0 0 calc(40% - (var(--gap) / 2));
-        max-width: calc(40% - (var(--gap) / 2));
-    }
-
-    .textimage-image-wrapper.size-50 {
-        flex: 0 0 calc(50% - (var(--gap) / 2));
-        max-width: calc(50% - (var(--gap) / 2));
-    }
-
-    .textimage-wrapper {
-    flex: 1;
-    }
-}

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: 50%
+      - label: 33%
         value: 2
+      - label: 50%
+        value: 3

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

@@ -1,23 +1,27 @@
 <f:layout name="Default" />
-
 <f:section name="Header"></f:section>
 <f:section name="Main">
-  <f:asset.css identifier="CBTextImage" href="{cb:assetPath()}/frontend.css" />
+  <f:variable name="imageSizeClass" value="md:w-1/2" />
+  <f:variable name="textSizeClass" value="md:w-1/2" />
+  <f:variable name="gapClass" value="gap-8 md:gap-16" />
 
-  <!-- Determine size class based on imagesize field -->
-  <f:variable name="sizeClass" value="" />
-  <f:if condition="{data.imagesize} == 1">
-    <f:then><f:variable name="sizeClass" value="size-25" /></f:then>
-  </f:if>
-  <f:if condition="{data.imagesize} == 2">
-    <f:then><f:variable name="sizeClass" value="size-50" /></f:then>
+  <f:if condition="{data.imagesize} == 1"> <!-- Size 25% -->
+    <f:variable name="imageSizeClass" value="md:w-1/4" />
+    <f:variable name="textSizeClass" value="md:w-3/4" />
+    <f:variable name="gapClass" value="gap-6 md:gap-12" />
   </f:if>
 
-  <div class="textimage-container image-pos-{data.imageorient} {sizeClass} fade-in-on-scroll">
-    <div class="textimage-image-wrapper {sizeClass}">
+  <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="textimage-picture">
+          <picture class="block w-full">
             <!-- WEBP source -->
             <source
               type="image/webp"
@@ -25,42 +29,45 @@
                 {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default', fileExtension:'webp')} 320w,
                 {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: 320px) 90vw,
-                     (max-width: 768px) 600px,
-                     600px" />
-
+              sizes="(max-width: 767px) 90vw,
+                     {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="
                 {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
                 {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: 320px) 90vw,
-                     (max-width: 768px) 600px,
-                     600px" />
-
+              sizes="(max-width: 767px) 90vw,
+                     {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"
               cropVariant="default"
               width="538c"
               alt="{data.image.0.alternative}"
-              class="textimage-image"
+              class="max-w-full h-auto block"
             />
-          </figure>
+          </picture>
         </f:then>
         <f:else>
           <p>No image available</p>
         </f:else>
       </f:if>
     </div>
-    <div class="textimage-wrapper {sizeClass}">
+    <div class="{textSizeClass}">
       <f:if condition="{data.header}">
-        <h2 class="textimage-header">{data.header}</h2>
-        <h3 class="textimage-subheader">{data.subheader}</h3>
+        <h2>{data.header}</h2>
       </f:if>
       <f:if condition="{data.bodytext}">
-        <div class="textimage-text">
+        <div class="prose lg:prose-lg">
           <f:format.html>{data.bodytext}</f:format.html>
         </div>
       </f:if>

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/ContentElements/Layouts/FullWidth.html

@@ -0,0 +1,9 @@
+<div class="frame frame-type-{data.CType}">
+    <f:render section="Header" optional="true" />
+    <f:render section="Main" optional="true" />
+</div>
+<f:section name="Header">
+    <div class="header">
+        <h2>{data.header}</h2>
+    </div>
+</f:section>

packages/base/Resources/Private/Extensions/Form/Partials/GridRow.html

@@ -0,0 +1,11 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
+<formvh:renderRenderable renderable="{element}">
+    <div class="{f:if(condition: element.properties.elementClassAttribute, then: '{element.properties.elementClassAttribute}')} grid-cols-{f:if(condition: '{element.properties.gridColumnClassAutoConfiguration.gridSize}', then: '{element.properties.gridColumnClassAutoConfiguration.gridSize}', else: '12')}">
+        <f:for each="{element.elements}" as="element">
+            <div class="{formvh:gridColumnClassAutoConfiguration(element: element)}">
+                <f:render partial="{element.templateName}" arguments="{element: element}" />
+            </div>
+        </f:for>
+    </div>
+</formvh:renderRenderable>
+</html>

packages/base/Resources/Private/Language/locallang_be.xlf

@@ -18,6 +18,16 @@
             <trans-unit id="backend_layout.column.right">
                 <source>Right</source>
             </trans-unit>
+            <trans-unit id="backend_layout.home_page">
+                <source>Home Page</source>
+            </trans-unit>
+            <trans-unit id="backend_layout.column.hero">
+                <source>Hero</source>
+            </trans-unit>
+            <trans-unit id="backend_layout.column.content">
+                <source>Content</source>
+            </trans-unit>
+
         </body>
     </file>
 </xliff>

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>
@@ -8,49 +8,76 @@
     <f:render section="Main" />
 </main>
 
-<footer class="site-footer">
-    <div class="container">
-        <div class="site-footer__top">
-            <div class="site-footer__grid">
-                <div class="site-footer__left">
-                    <div class="frame site-footer__logo">
-                        <div class="container">
-                            <f:image src="EXT:base/Resources/Public/Images/greens-efa-logo.png" alt="Greens EFA Logo" />
-                            <f:image src="EXT:base/Resources/Public/Images/logo.png" alt="Lena Schilling Logo" />
-                        </div>
-                    </div>
-                    <f:cObject typoscriptObjectPath="lib.dynamicContentSlide" data="{pageUid: '{data.uid}', colPos: '90'}" />
-                </div>
-                <div class="site-footer__right">
-                    <f:cObject typoscriptObjectPath="lib.dynamicContentSlide" data="{pageUid: '{data.uid}', colPos: '91'}" />
-                    <div class="frame site-footer__social">
-                        <div class="container">
-                            <a href="https://www.instagram.com/lena.ats/" target="_blank" rel="noopener noreferrer" title="Instagram">
-                                <i class="ci ci-instagram"></i>
-                            </a>
-                            <a href="https://www.tiktok.com/@dieschilling" target="_blank" rel="noopener noreferrer" title="TikTok">
-                                <i class="ci ci-tiktok"></i>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </div>
+<footer class="bg-primary text-white">
+  <div class="container mx-auto max-w-7xl px-4 py-12 space-y-10">
+
+    <!-- ── Row 1 ───────────────────────────────────────── -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
+
+      <!-- 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.svg" alt="Logo" class="block max-h-[100px] h-auto w-auto" />
       </div>
 
-        <hr class="site-footer__divider" />
-
-        <div class="site-footer__bottom">
-            <div class="site-footer__bottom-grid">
-                <ul class="site-footer__legal">
-                    <f:for each="{metanavigation}" as="item">
-                        <li{f:if(condition: item.active, then:' class="active"')}>
-                            <a href="{item.link}"{f:if(condition: '{item.target}', then: ' target="{item.target}"')}{f:if(condition: '{item.target} == "_blank"', then: ' rel="noopener noreferrer"')} title="{item.title}">
-                                <span>{item.title}</span>
+      <!-- Kontaktiere uns -->
+      <div>
+        <h3 class="text-white text-sm">Kontaktiere uns</h3>
+        <ul class="space-y-4">
+          <li class="flex items-center pl-0">
+            <!-- mail -->
+            <a href="mailto:office@dialog-relations.at" class="hover:text-white text-white">
+              office@dialog-relations.at
+            </a>
+          </li>
+          <li class="flex items-center pl-0">
+            <!-- phone -->
+            <a href="tel:+436763533669" class="hover:text-white text-white">
+              +43 676 3533669
             </a>
           </li>
-                    </f:for>
         </ul>
-                <p class="site-footer__copyright">© All Right Reserved</p>
       </div>
+
+      <f:comment>
+      <!-- Folge uns -->
+      <div class="flex flex-col items-start md:items-end">
+        <h3 class="text-white text-sm">Folge uns</h3>
+        <div class="flex space-x-4">
+          <!-- Social buttons -->
+
+          <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="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="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 -->
+
+
+    <!-- ── Row 2 ───────────────────────────────────────── -->
+    <div class="flex flex-col-reverse md:flex-row md:justify-between items-start md:items-center text-sm">
+
+      <!-- Rights reserved -->
+      <p class="pt-4 md:pt-0">
+        Dialog Relations 2025 &mdash; All rights reserved.
+      </p>
+
+      <!-- Privacy links -->
+      <p>
+        <a href="/datenschutz" class="hover:text-white text-white">Datenschutz</a>
+        <span class="mx-1">|</span>
+        <a href="/impressum" class="hover:text-white text-white">Impressum</a>
+      </p>
+
+    </div><!-- /Row 2 -->
+
   </div>
 </footer>

packages/base/Resources/Private/PageView/Pages/Home_page.html

@@ -0,0 +1,6 @@
+<f:layout name="Default" />
+
+<f:section name="Main">
+    <f:comment> Render main content for colPos 0 (Home Page) </f:comment>
+    <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '0'}" />
+</f:section>

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

@@ -1,29 +1,24 @@
-<nav class="main-nav" id="mainNav">
-    <div class="container">
+<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" />
+            <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" id="navToggle" aria-label="Toggle Menu">
-            <span class="nav-toggle-icon"></span>
+        <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-white transition-all 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-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-y-[8px]
+                         group-[.active]:after:-rotate-45 group-[.active]:after:-translate-y-[8px]"></span>
         </button>
 
-        <ul class="nav-links" id="navLinks">
+        <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{f:if(condition: mainnavigationItem.active, then:' active')}{f:if(condition: mainnavigationItem.children, then:' has-submenu')}">
-                    <a href="{mainnavigationItem.link}" target="{mainnavigationItem.target}" title="{mainnavigationItem.title}">
+                <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}" 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">
-                            <f:for each="{mainnavigationItem.children}" as="child">
-                                <li class="{f:if(condition: child.active, then:'active')}">
-                                    <a class="nav-link" 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; } }
-@media (prefers-color-scheme: dark) { :root { filter: none; } }
-</style></svg>
+<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>
+    #light-icon {
+      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/Extension.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="83.098" height="84.172" viewBox="43.201 42.122 83.098 84.172">
-  <path fill="#FF8700" d="M106.074 100.128c-1.247.368-2.242.506-3.549.506-10.689 0-26.389-37.359-26.389-49.793 0-4.577 1.083-6.104 2.613-7.415-13.084 1.527-28.784 6.329-33.806 12.433-1.085 1.529-1.743 3.926-1.743 6.98 0 19.41 20.718 63.455 35.332 63.455 6.765.001 18.164-11.112 27.542-26.166M99.25 42.122c13.52 0 27.049 2.18 27.049 9.812 0 15.483-9.819 34.246-14.832 34.246-8.942 0-20.065-24.867-20.065-37.301.001-5.67 2.181-6.757 7.848-6.757"/>
-</svg>

packages/base/Resources/Public/Icons/angle-left.svg

@@ -1,3 +0,0 @@
-<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.23646 14.3886C8.30033 14.4525 8.351 14.5283 8.38557 14.6118C8.42014 14.6952 8.43794 14.7847 8.43794 14.875C8.43794 14.9654 8.42014 15.0548 8.38557 15.1383C8.351 15.2217 8.30033 15.2975 8.23646 15.3614C8.17258 15.4253 8.09675 15.476 8.01329 15.5105C7.92984 15.5451 7.84039 15.5629 7.75005 15.5629C7.65972 15.5629 7.57027 15.5451 7.48681 15.5105C7.40335 15.476 7.32752 15.4253 7.26365 15.3614L0.388646 8.48642C0.324725 8.42257 0.274016 8.34675 0.239418 8.26329C0.20482 8.17983 0.187012 8.09036 0.187012 8.00002C0.187012 7.90967 0.20482 7.82021 0.239418 7.73674C0.274016 7.65328 0.324725 7.57746 0.388646 7.51361L7.26365 0.63861C7.39265 0.509607 7.56762 0.437134 7.75005 0.437134C7.93249 0.437134 8.10746 0.509607 8.23646 0.63861C8.36546 0.767613 8.43794 0.942578 8.43794 1.12502C8.43794 1.30745 8.36546 1.48242 8.23646 1.61142L1.84701 8.00002L8.23646 14.3886Z" fill="black" fill-opacity="0.87"/>
-</svg>

packages/base/Resources/Public/Icons/angle-right.svg

@@ -1,3 +0,0 @@
-<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.6113 8.48642L1.7363 15.3614C1.67242 15.4253 1.59659 15.476 1.51314 15.5105C1.42968 15.5451 1.34023 15.5629 1.24989 15.5629C1.15956 15.5629 1.07011 15.5451 0.986653 15.5105C0.903195 15.476 0.827363 15.4253 0.763487 15.3614C0.699612 15.2975 0.648943 15.2217 0.614373 15.1383C0.579804 15.0548 0.562012 14.9654 0.562012 14.875C0.562012 14.7847 0.579804 14.6952 0.614373 14.6118C0.648943 14.5283 0.699612 14.4525 0.763487 14.3886L7.15294 8.00002L0.763487 1.61142C0.634484 1.48242 0.562012 1.30745 0.562012 1.12502C0.562012 0.942578 0.634484 0.767613 0.763487 0.63861C0.89249 0.509607 1.06746 0.437134 1.24989 0.437134C1.43233 0.437134 1.6073 0.509607 1.7363 0.63861L8.6113 7.51361C8.67522 7.57746 8.72593 7.65328 8.76053 7.73674C8.79513 7.82021 8.81293 7.90967 8.81293 8.00002C8.81293 8.09036 8.79513 8.17983 8.76053 8.26329C8.72593 8.34675 8.67522 8.42257 8.6113 8.48642Z" fill="black" fill-opacity="0.87"/>
-</svg>

packages/base/Resources/Public/Icons/arrow-down.svg

@@ -0,0 +1,4 @@
+<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40.4863 17.355V63.9892" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M63.8022 40.6719L40.4851 63.989L17.168 40.6719" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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/Icons/email.svg

@@ -1,3 +1,4 @@
-<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.875 0.5C0.839844 0.5 0 1.33984 0 2.375C0 2.96484 0.277344 3.51953 0.75 3.875L9.25 10.25C9.69531 10.582 10.3047 10.582 10.75 10.25L19.25 3.875C19.7227 3.51953 20 2.96484 20 2.375C20 1.33984 19.1602 0.5 18.125 0.5H1.875ZM0 4.875V13C0 14.3789 1.12109 15.5 2.5 15.5H17.5C18.8789 15.5 20 14.3789 20 13V4.875L11.5 11.25C10.6094 11.918 9.39062 11.918 8.5 11.25L0 4.875Z" fill="#2E2E2E"/>
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5 4H4.5C3.39543 4 2.5 4.89543 2.5 6V18C2.5 19.1046 3.39543 20 4.5 20H20.5C21.6046 20 22.5 19.1046 22.5 18V6C22.5 4.89543 21.6046 4 20.5 4Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.5 7L13.53 12.7C13.2213 12.8934 12.8643 12.996 12.5 12.996C12.1357 12.996 11.7787 12.8934 11.47 12.7L2.5 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

packages/base/Resources/Public/Icons/facebook.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="M18 2H15C13.6739 2 12.4021 2.52678 11.4645 3.46447C10.5268 4.40215 10 5.67392 10 7V10H7V14H10V22H14V14H17L18 10H14V7C14 6.73478 14.1054 6.48043 14.2929 6.29289C14.4804 6.10536 14.7348 6 15 6H18V2Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -1,3 +1,5 @@
-<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4417 0.776626C13.3967 0.686626 14.0201 0.666626 19.0001 0.666626C23.9801 0.666626 24.6034 0.688293 26.5567 0.776626C28.5101 0.864959 29.8434 1.17663 31.0101 1.62829C32.2317 2.08996 33.3401 2.81163 34.2567 3.74496C35.1901 4.65996 35.9101 5.76663 36.3701 6.98996C36.8234 8.15663 37.1334 9.48996 37.2234 11.44C37.3134 13.3983 37.3334 14.0216 37.3334 19C37.3334 23.98 37.3117 24.6033 37.2234 26.5583C37.1351 28.5083 36.8234 29.8416 36.3701 31.0083C35.9101 32.2318 35.1889 33.3403 34.2567 34.2566C33.3401 35.19 32.2317 35.91 31.0101 36.37C29.8434 36.8233 28.5101 37.1333 26.5601 37.2233C24.6034 37.3133 23.9801 37.3333 19.0001 37.3333C14.0201 37.3333 13.3967 37.3116 11.4417 37.2233C9.49175 37.135 8.15842 36.8233 6.99175 36.37C5.76828 35.9099 4.65978 35.1887 3.74341 34.2566C2.81071 33.3411 2.08894 32.2331 1.62841 31.01C1.17675 29.8433 0.866748 28.51 0.776748 26.56C0.686748 24.6016 0.666748 23.9783 0.666748 19C0.666748 14.02 0.688415 13.3966 0.776748 11.4433C0.865081 9.48996 1.17675 8.15663 1.62841 6.98996C2.08962 5.76676 2.81195 4.65881 3.74508 3.74329C4.66015 2.81079 5.76754 2.08903 6.99008 1.62829C8.15675 1.17663 9.49008 0.866626 11.4401 0.776626H11.4417ZM26.4084 4.07663C24.4751 3.98829 23.8951 3.96996 19.0001 3.96996C14.1051 3.96996 13.5251 3.98829 11.5917 4.07663C9.80342 4.15829 8.83342 4.45663 8.18675 4.70829C7.33175 5.04163 6.72008 5.43663 6.07842 6.07829C5.47016 6.67005 5.00205 7.39043 4.70842 8.18663C4.45675 8.83329 4.15841 9.80329 4.07675 11.5916C3.98841 13.525 3.97008 14.105 3.97008 19C3.97008 23.895 3.98841 24.475 4.07675 26.4083C4.15841 28.1966 4.45675 29.1666 4.70842 29.8133C5.00175 30.6083 5.47008 31.33 6.07842 31.9216C6.67008 32.53 7.39175 32.9983 8.18675 33.2916C8.83342 33.5433 9.80342 33.8416 11.5917 33.9233C13.5251 34.0116 14.1034 34.03 19.0001 34.03C23.8967 34.03 24.4751 34.0116 26.4084 33.9233C28.1967 33.8416 29.1667 33.5433 29.8134 33.2916C30.6684 32.9583 31.2801 32.5633 31.9217 31.9216C32.5301 31.33 32.9984 30.6083 33.2918 29.8133C33.5434 29.1666 33.8418 28.1966 33.9234 26.4083C34.0117 24.475 34.0301 23.895 34.0301 19C34.0301 14.105 34.0117 13.525 33.9234 11.5916C33.8418 9.80329 33.5434 8.83329 33.2918 8.18663C32.9584 7.33163 32.5634 6.71996 31.9217 6.07829C31.33 5.47008 30.6096 5.00198 29.8134 4.70829C29.1667 4.45663 28.1967 4.15829 26.4084 4.07663ZM16.6584 24.6516C17.9662 25.196 19.4224 25.2695 20.7783 24.8595C22.1342 24.4495 23.3057 23.5815 24.0928 22.4037C24.8798 21.2259 25.2335 19.8114 25.0935 18.4018C24.9535 16.9922 24.3284 15.6749 23.3251 14.675C22.6855 14.0358 21.9121 13.5463 21.0606 13.2419C20.2092 12.9374 19.3008 12.8256 18.4009 12.9143C17.501 13.0031 16.632 13.2903 15.8564 13.7552C15.0808 14.2201 14.418 14.8512 13.9156 15.603C13.4132 16.3549 13.0837 17.2088 12.9509 18.1032C12.8182 18.9977 12.8853 19.9104 13.1476 20.7758C13.41 21.6412 13.8609 22.4376 14.4679 23.1078C15.075 23.778 15.8231 24.3053 16.6584 24.6516ZM12.3367 12.3366C13.2118 11.4616 14.2506 10.7675 15.3939 10.2939C16.5372 9.82033 17.7626 9.57658 19.0001 9.57658C20.2376 9.57658 21.463 9.82033 22.6063 10.2939C23.7495 10.7675 24.7884 11.4616 25.6634 12.3366C26.5385 13.2117 27.2326 14.2505 27.7061 15.3938C28.1797 16.5371 28.4235 17.7625 28.4235 19C28.4235 20.2375 28.1797 21.4628 27.7061 22.6061C27.2326 23.7494 26.5385 24.7883 25.6634 25.6633C23.8962 27.4305 21.4993 28.4233 19.0001 28.4233C16.5008 28.4233 14.104 27.4305 12.3367 25.6633C10.5695 23.8961 9.57671 21.4992 9.57671 19C9.57671 16.5007 10.5695 14.1039 12.3367 12.3366ZM30.5134 10.98C30.7303 10.7754 30.9039 10.5294 31.0239 10.2566C31.144 9.98374 31.2081 9.68957 31.2124 9.39151C31.2168 9.09344 31.1613 8.79754 31.0492 8.52131C30.9372 8.24508 30.7708 7.99414 30.56 7.78336C30.3492 7.57257 30.0983 7.40622 29.8221 7.29416C29.5458 7.18209 29.2499 7.12659 28.9519 7.13093C28.6538 7.13528 28.3596 7.19938 28.0868 7.31945C27.8139 7.43952 27.568 7.61312 27.3634 7.82996C26.9656 8.25168 26.7478 8.81183 26.7563 9.39151C26.7647 9.97119 26.9987 10.5248 27.4087 10.9347C27.8186 11.3446 28.3722 11.5787 28.9519 11.5871C29.5315 11.5956 30.0917 11.3778 30.5134 10.98Z" fill="#F5AE07"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 2H7C4.23858 2 2 4.23858 2 7V17C2 19.7614 4.23858 22 7 22H17C19.7614 22 22 19.7614 22 17V7C22 4.23858 19.7614 2 17 2Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.9997 11.3698C16.1231 12.2021 15.981 13.052 15.5935 13.7988C15.206 14.5456 14.5929 15.1512 13.8413 15.5295C13.0898 15.9077 12.2382 16.0394 11.4075 15.9057C10.5768 15.7721 9.80947 15.3799 9.21455 14.785C8.61962 14.1901 8.22744 13.4227 8.09377 12.592C7.96011 11.7614 8.09177 10.9097 8.47003 10.1582C8.84829 9.40667 9.45389 8.79355 10.2007 8.40605C10.9475 8.01856 11.7975 7.8764 12.6297 7.99981C13.4786 8.1257 14.2646 8.52128 14.8714 9.12812C15.4782 9.73496 15.8738 10.5209 15.9997 11.3698Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.5 6.5H17.51" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

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

@@ -1,3 +1,5 @@
-<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.22175 6.969H11.894V8.819C12.423 7.755 13.7796 6.799 15.8174 6.799C19.724 6.799 20.6515 8.917 20.6515 12.803V20H16.6964V13.688C16.6964 11.475 16.1675 10.227 14.8208 10.227C12.953 10.227 12.1768 11.572 12.1768 13.687V20H8.22175V6.969ZM1.43982 19.83H5.39487V6.799H1.43982V19.83ZM5.96143 2.55C5.96158 2.88528 5.89584 3.21724 5.76802 3.52659C5.6402 3.83594 5.45287 4.11651 5.21689 4.352C4.73873 4.83262 4.09149 5.10165 3.41734 5.1C2.74438 5.09954 2.09864 4.8312 1.61977 4.353C1.38465 4.11671 1.19795 3.83582 1.07036 3.52643C0.942766 3.21704 0.876793 2.88522 0.876221 2.55C0.876221 1.873 1.14319 1.225 1.62076 0.747C2.09921 0.268158 2.74522 -0.000299211 3.41833 2.50265e-07C4.09267 2.50265e-07 4.73932 0.269 5.21689 0.747C5.69348 1.225 5.96143 1.873 5.96143 2.55Z" fill="#2E2E2E"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 8C17.5913 8 19.1174 8.63214 20.2426 9.75736C21.3679 10.8826 22 12.4087 22 14V21H18V14C18 13.4696 17.7893 12.9609 17.4142 12.5858C17.0391 12.2107 16.5304 12 16 12C15.4696 12 14.9609 12.2107 14.5858 12.5858C14.2107 12.9609 14 13.4696 14 14V21H10V14C10 12.4087 10.6321 10.8826 11.7574 9.75736C12.8826 8.63214 14.4087 8 16 8Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 9H2V21H6V9Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 6C5.10457 6 6 5.10457 6 4C6 2.89543 5.10457 2 4 2C2.89543 2 2 2.89543 2 4C2 5.10457 2.89543 6 4 6Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

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

@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.44141 0.960964C6.14062 0.234401 5.34766 -0.152317 4.58984 0.0547138L1.15234 0.992214C0.472656 1.17971 0 1.7969 0 2.50003C0 12.1641 7.83594 20 17.5 20C18.2031 20 18.8203 19.5274 19.0078 18.8477L19.9453 15.4102C20.1523 14.6524 19.7656 13.8594 19.0391 13.5586L15.2891 11.9961C14.6523 11.7305 13.9141 11.9141 13.4805 12.4492L11.9023 14.375C9.15234 13.0742 6.92578 10.8477 5.625 8.09768L7.55078 6.52346C8.08594 6.08596 8.26953 5.35159 8.00391 4.71487L6.44141 0.96487V0.960964Z" fill="#2E2E2E"/>
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.4994 16.92V19.92C22.5006 20.1985 22.4435 20.4741 22.332 20.7293C22.2204 20.9845 22.0567 21.2136 21.8515 21.4018C21.6463 21.5901 21.404 21.7335 21.1402 21.8227C20.8764 21.9119 20.5968 21.945 20.3194 21.92C17.2423 21.5856 14.2864 20.5341 11.6894 18.85C9.27327 17.3146 7.22478 15.2661 5.68945 12.85C3.99942 10.2412 2.94769 7.27097 2.61944 4.17997C2.59446 3.90344 2.62732 3.62474 2.71595 3.3616C2.80457 3.09846 2.94702 2.85666 3.13421 2.6516C3.32141 2.44653 3.54925 2.28268 3.80324 2.1705C4.05722 2.05831 4.33179 2.00024 4.60945 1.99997H7.60945C8.09475 1.9952 8.56524 2.16705 8.93321 2.48351C9.30118 2.79996 9.54152 3.23942 9.60944 3.71997C9.73607 4.68004 9.97089 5.6227 10.3094 6.52997C10.444 6.8879 10.4731 7.27689 10.3934 7.65086C10.3136 8.02482 10.1283 8.36809 9.85944 8.63998L8.58945 9.90997C10.013 12.4135 12.0859 14.4864 14.5894 15.91L15.8594 14.64C16.1313 14.3711 16.4746 14.1858 16.8486 14.1061C17.2225 14.0263 17.6115 14.0554 17.9694 14.19C18.8767 14.5285 19.8194 14.7634 20.7794 14.89C21.2652 14.9585 21.7088 15.2032 22.026 15.5775C22.3431 15.9518 22.5116 16.4296 22.4994 16.92Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

packages/base/Resources/Public/Icons/skip-back.svg

@@ -1,3 +0,0 @@
-<svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.1712 0.921884C12.9564 0.802887 12.7137 0.743556 12.4683 0.750055C12.2229 0.756553 11.9837 0.828643 11.7755 0.958838L1.5 7.38696V1.43751C1.5 1.25517 1.42757 1.0803 1.29864 0.951374C1.1697 0.822442 0.994836 0.750009 0.8125 0.750009C0.630164 0.750009 0.455295 0.822442 0.326364 0.951374C0.197433 1.0803 0.125 1.25517 0.125 1.43751V16.5625C0.125 16.7448 0.197433 16.9197 0.326364 17.0486C0.455295 17.1776 0.630164 17.25 0.8125 17.25C0.994836 17.25 1.1697 17.1776 1.29864 17.0486C1.42757 16.9197 1.5 16.7448 1.5 16.5625V10.6131L11.7755 17.0395C11.9825 17.1694 12.2204 17.2416 12.4646 17.2487C12.7088 17.2558 12.9505 17.1974 13.1646 17.0797C13.3787 16.962 13.5575 16.7892 13.6824 16.5792C13.8073 16.3692 13.8738 16.1297 13.875 15.8853V2.1147C13.875 1.87112 13.8097 1.63201 13.6859 1.42223C13.5621 1.21245 13.3844 1.03968 13.1712 0.921884ZM12.5 15.875L1.51375 9.00001L12.5 2.13103V15.875Z" fill="black" fill-opacity="0.87"/>
-</svg>

packages/base/Resources/Public/Icons/skip-forward.svg

@@ -1,3 +0,0 @@
-<svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.1875 0.75C13.0052 0.75 12.8303 0.822433 12.7014 0.951364C12.5724 1.0803 12.5 1.25516 12.5 1.4375V7.38695L2.22445 0.960547C2.01752 0.830642 1.77962 0.758412 1.53539 0.751335C1.29116 0.744258 1.04948 0.802592 0.835364 0.920296C0.621252 1.038 0.442494 1.2108 0.317598 1.42079C0.192702 1.63079 0.126208 1.87036 0.125 2.11469V15.8853C0.127568 16.1291 0.194905 16.3678 0.320112 16.577C0.445318 16.7862 0.623891 16.9583 0.837531 17.0758C1.05117 17.1932 1.2922 17.2517 1.53591 17.2454C1.77962 17.239 2.01725 17.1679 2.22445 17.0395L12.5 10.613V16.5625C12.5 16.7448 12.5724 16.9197 12.7014 17.0486C12.8303 17.1776 13.0052 17.25 13.1875 17.25C13.3698 17.25 13.5447 17.1776 13.6736 17.0486C13.8026 16.9197 13.875 16.7448 13.875 16.5625V1.4375C13.875 1.25516 13.8026 1.0803 13.6736 0.951364C13.5447 0.822433 13.3698 0.75 13.1875 0.75ZM1.5 15.869V2.1293L12.4862 9.0043L1.5 15.869Z" fill="black" fill-opacity="0.87"/>
-</svg>

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

@@ -1,3 +0,0 @@
-<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M35 16.3984C31.5593 16.4058 28.2033 15.3318 25.4063 13.3281V27.2969C25.4055 29.884 24.6148 32.4091 23.1399 34.5346C21.6651 36.6602 19.5765 38.2847 17.1533 39.1911C14.7302 40.0974 12.0881 40.2422 9.58042 39.6063C7.07272 38.9703 4.81898 37.5838 3.12062 35.6323C1.42225 33.6807 0.36023 31.2572 0.0765895 28.6857C-0.207051 26.1142 0.301214 23.5174 1.53341 21.2426C2.7656 18.9678 4.66297 17.1235 6.97177 15.9562C9.28057 14.789 11.8907 14.3545 14.4531 14.7109V21.7344C13.2815 21.3655 12.0232 21.3763 10.858 21.7652C9.69288 22.1541 8.68036 22.9012 7.96508 23.8998C7.24979 24.8984 6.86831 26.0974 6.8751 27.3258C6.88189 28.5541 7.27661 29.7489 8.00289 30.7395C8.72917 31.7302 9.74988 32.466 10.9193 32.842C12.0887 33.2179 13.347 33.2148 14.5145 32.8331C15.682 32.4513 16.6991 31.7104 17.4204 30.7162C18.1418 29.722 18.5306 28.5252 18.5313 27.2969V0H25.4063C25.4024 0.581456 25.4521 1.16203 25.5547 1.73438C25.7938 3.01016 26.2905 4.22379 27.0145 5.30109C27.7386 6.37839 28.6747 7.29674 29.7656 8C31.3186 9.02566 33.1389 9.57177 35 9.57031V16.3984Z" fill="#F5AE07"/>
-</svg>

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

@@ -1,3 +0,0 @@
-<svg width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.8952 0.0625H18.8947L12.3434 7.63359L20.0503 17.9375H14.0173L9.28864 11.6898L3.88442 17.9375H0.880665L7.8866 9.83789L0.498291 0.0625H6.68425L10.9541 5.77305L15.8952 0.0625ZM14.8415 16.1242H16.5028L5.7793 1.78125H3.99489L14.8415 16.1242Z" fill="black"/>
-</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/JavaScript/main.js

@@ -1 +0,0 @@
-console.log('WE LOVE TYPO3');

packages/base/Resources/Public/JavaScript/navigation.js

@@ -1,15 +1,38 @@
 document.addEventListener('DOMContentLoaded', function () {
-    const nav = document.getElementById('mainNav');
+    const nav = document.getElementById('mainNav'); // Keep for mobile toggle
+    const header = document.querySelector('header'); // Get the header element
     const toggle = document.getElementById('navToggle');
 
     // Toggle menu on mobile
     toggle.addEventListener('click', function () {
-        nav.classList.toggle('open');
+        nav.classList.toggle('open'); // Mobile menu still controlled by nav
         toggle.classList.toggle('active');
     });
 
-    // No need to add or remove sticky class here since CSS handles position: sticky
-    // We simply rely on the CSS-based sticky behavior and reserved space via body padding.
+    // Handle transparent header scroll effect for home page on desktop
+    const body = document.body;
+    const scrollThreshold = 50; // Pixels to scroll before changing background
+
+    function handleScroll() {
+        // Check if it's the home page layout and desktop view
+        if (header && body.classList.contains('backendlayout-home_page') && window.innerWidth >= 1024) { // 1024px is Tailwind's default lg breakpoint
+            if (window.scrollY > scrollThreshold) {
+                header.classList.add('scrolled'); // Add class to header
+            } else {
+                header.classList.remove('scrolled'); // Remove class from header
+            }
+        } else if (header) { // Check if header exists before trying to remove class
+             // Ensure scrolled class is removed if not on home page desktop or resized below lg
+             header.classList.remove('scrolled'); // Remove class from header
+        }
+    }
+
+    // Initial check in case the page loads already scrolled
+    handleScroll();
+
+    // Add scroll and resize listeners
+    window.addEventListener('scroll', handleScroll);
+    window.addEventListener('resize', handleScroll); // Re-check on resize
 
     const submenuParents = document.querySelectorAll('.nav-item.has-submenu');
     submenuParents.forEach(parent => {

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

@@ -1,71 +1,77 @@
 // Update font file names and ensure no spaces for better compatibility.
 @font-face {
-  font-family: 'Hajime Sans';
-  src: url('../Fonts/Hajime-Sans.woff2') format('woff2');
-  font-weight: 400;
+  font-family: 'Barlow';
+  src: url('../Fonts/Barlow-Medium.woff2') format('woff2');
+  font-weight: 500;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Inter';
-  src: url('../Fonts/Inter.woff2') format('woff2');
-  font-weight: 100 900; // Adjust as needed for variable font range
+  font-family: 'Barlow';
+  src: url('../Fonts/Barlow-Bold.woff2') format('woff2');
+  font-weight: 700;
   font-style: normal;
   font-display: swap;
 }
 
 body {
-  font-family: 'Inter', sans-serif;
+  font-family: 'Barlow', sans-serif;
   font-weight: 500;
+  font-size: 14px;
+
+  @media (min-width: $breakpoint-md) {
+    font-size: 18px;
+  }
 }
 
-h1, h2 {
-  font-family: 'Hajime Sans', sans-serif;
-  color: var(--bs-primary);
-  font-weight: 400;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Barlow', sans-serif;
+  color: var(--color-primary);
+  font-weight: 700;
   line-height: 1;
+  @apply mb-4
 }
 
 h1 {
-  text-align: center;
   font-size: 3rem;
 
-  @media (min-width: $breakpoint-md) {
-    font-size: 4.5rem;
-  }
-}
-h1 span.tapered {
-  background-size: 100% 15%;
-  background-repeat: repeat-x;
-  background-position: left 0% bottom 15%;
-  background-image: linear-gradient(179deg,var(--bs-yellow) 0%, var(--bs-yellow) 50%,transparent 54%, transparent 100%);
+  /* @media (min-width: $breakpoint-md) { */
+  /*   font-size: 4.5rem; */
+  /* } */
 }
 
 h2 {
   font-size: 2rem;
 
-  @media (min-width: $breakpoint-md) {
-    font-size: 3rem;
-  }
+  /* @media (min-width: $breakpoint-md) { */
+  /*   font-size: 3rem; */
+  /* } */
 }
 
 h3 {
-  font-size: 1.125rem;
-  font-weight: 600;
+  font-size: 1.75rem;
 
-  @media (min-width: $breakpoint-md) {
-    font-size: 1.5rem;
-  }
+  /* @media (min-width: $breakpoint-md) { */
+  /*   font-size: 1.5rem; */
+  /* } */
 }
 
 h4 {
   font-size: 1.125rem;
-  font-weight: 600;
 
-  @media (min-width: $breakpoint-md) {
-    font-size: 1.5rem;
-  }
+  /* @media (min-width: $breakpoint-md) { */
+  /*   font-size: 1.5rem; */
+  /* } */
+}
+
+h5 {
+  font-size: 0.875rem;
+}
+
+h6 {
+  font-size: 0.875rem;
+  font-weight: 500;
 }
 
 p {
@@ -76,13 +82,10 @@ a {
     color: var(--bs-primary);
     text-decoration: none;
     font-weight: 700;
-
-    &:hover {
-      color: var(--bs-primary-light)
-    }
+    @apply text-primary hover:text-primary-dark;
 }
 
 button, .btn {
-  font-family: 'Hajime Sans', sans-serif;
-  font-weight: 400;
+  font-family: 'Barlow', sans-serif;
+  font-weight: 700;
 }

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

@@ -14,24 +14,30 @@
   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-tiktok::before {
-  mask-image: url(../Icons/tiktok.svg);
+.ci-linkedin::before {
+  mask-image: url(../Icons/linkedin.svg);
   width: 0.9em;
   height: 0.9em;
 }
-
-.ci-linkedin::before {
-  mask-image: url(../Icons/linkedin.svg);
+.ci-facebook::before {
+  mask-image: url(../Icons/facebook.svg);
 }
-.ci-x::before {
-  mask-image: url(../Icons/x.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);
@@ -39,18 +45,3 @@
 .ci-phone::before {
   mask-image: url(../Icons/phone.svg);
 }
-.ci-angle-right::before {
-  mask-image: url(../Icons/angle-right.svg);
-}
-
-.ci-angle-left::before {
-  mask-image: url(../Icons/angle-left.svg);
-}
-
-.ci-skip-forward::before {
-  mask-image: url(../Icons/skip-forward.svg);
-}
-
-.ci-skip-back::before {
-  mask-image: url(../Icons/skip-back.svg);
-}

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

@@ -1,6 +1,7 @@
 .container {
   margin: auto;
-  padding: 3rem 1rem;
+  /* 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,3 +1,19 @@
+: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 {
   line-height: 1.5;
 }

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

@@ -1,16 +1,4 @@
 .btn {
-  background-color: var(--bs-primary);
-  color: var(--bs-yellow);
-  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);
-  }
+  @apply bg-primary font-bold text-white uppercase py-1 px-12 cursor-pointer transition-colors duration-300;
+  @apply hover:bg-primary-dark;
 }

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,155 +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 {
-  background: url('../Images/background.jpg') repeat;
-
   .container {
-    display: flex;
-    align-items: center;
-    margin: 0 auto;
-    height: 100%;
     padding: 0 1rem;
   }
 
-  .nav-logo {
-    img {
-      display: block;
-      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
+  ul {
+    ::before {
+      @apply hidden;
     }
   }
 }