Cloonar/dialog-relations-website
2
0
Fork 0
Code Pull Requests Actions Activity

feat: change the hero ce layout

Browse Source
This commit is contained in:
Dominik Polakovics Polakovics
2025-04-21 11:38:40 +02:00
parent 983436da32
commit b1cb4d0208
3 changed files with 50 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
View File

@@ -3,29 +3,30 @@
<f:section name="Header" />
<f:section name="Main">
<div class="md:flex">
<section class="bg-white md:bg-hero-gradient">
<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">
<!-- LEFT: blue background + image -->
<div class="relative bg-primary md:w-3/5 py-16 flex justify-end">
<!-- picture wrapper for relative positioning -->
<div class="relative w-3/4">
<!-- IMAGE HALF -->
<div class="order-2 md:order-1 md:w-1/2 relative">
<f:if condition="{data.image}">
<f:then>
<picture class="block w-full object-cover">
<!-- webp / fallback sources as before… -->
<!-- WEBP -->
<source
type="image/webp"
srcset="
{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, 430px" />
sizes="(max-width: 768px) 80vw, 1024px" />
<!-- fallback -->
<source
srcset="
{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, 430px" />
sizes="(max-width: 768px) 80vw, 1024px" />
<f:image
image="{data.image.0}"
treatIdAsReference="1"
@@ -39,12 +40,15 @@
</picture>
</f:then>
<f:else>
<p class="w-full text-center text-white">No image available</p>
<p class="w-full text-center text-white py-20">
No image available
</p>
</f:else>
</f:if>
<!-- arrow: half‑out on right edge -->
<div class="absolute top-1/2 -translate-y-1/2 right-[-2rem] z-20">
<!-- Down‑arrow, half out on the right edge -->
<div
class="absolute top-1/2 -translate-y-1/2 right-[-2rem] z-20">
<a href="#next-section"
class="bg-primary border-4 border-white rounded-full p-5 inline-flex items-center justify-center hover:bg-opacity-90">
<span class="sr-only">Scroll down</span>
@@ -58,58 +62,47 @@
</a>
</div>
</div>
</div>
<!-- RIGHT: text & socials -->
<div class="md:w-2/5 px-6 py-12 md:py-0 md:px-16 flex flex-col justify-center">
<!-- TEXT HALF -->
<div class="order-1 md:order-2 md:w-1/2 flex flex-col justify-center space-y-6 md:pl-24">
<!-- Mobile: simple centered intro -->
<div class="block md:hidden text-center space-y-2 mb-8">
<div class="text-sm uppercase tracking-wide text-gray-600">
Hallo, wir sind
</div>
<h1 class="text-3xl font-extrabold">
Dialog Relations
</h1>
<p class="text-base text-gray-800">
Sorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc vulputate libero et velit interdum, ac aliquet odio mattis.
</p>
</div>
<!-- Desktop: line + intro -->
<div class="hidden md:block space-y-4">
<!-- horizontal line + text -->
<div class="flex items-center space-x-3 mb-2">
<!-- Desktop: line + intro -->
<div class="hidden md:flex items-center space-x-3">
<span class="block h-px w-10 bg-gray-600"></span>
<div class="text-sm uppercase tracking-wide text-gray-600">
<span class="text-sm uppercase tracking-wide text-gray-600">
Hallo, wir sind
</div>
</span>
</div>
<h1 class="text-5xl font-extrabold">
<!-- Heading -->
<h1 class="text-3xl md:text-5xl font-extrabold">
Dialog Relations
</h1>
<p class="text-lg text-gray-800 max-w-md">
<!-- Body copy -->
<p class="text-base md:text-lg text-gray-800 max-w-md">
Sorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc vulputate libero et velit interdum, ac aliquet odio mattis.
</p>
</div>
<!-- Social icons -->
<div class="mt-8 flex justify-center md:justify-start space-x-4">
<a href="#" class="bg-primary text-white p-3 rounded-full">
<span class="sr-only">LinkedIn</span>
<svg class="w-5 h-5" fill="currentColor"><!-- … --></svg>
</a>
<a href="#" class="bg-primary text-white p-3 rounded-full">
<span class="sr-only">Instagram</span>
<svg class="w-5 h-5" fill="currentColor"><!-- … --></svg>
</a>
<a href="#" class="bg-primary text-white p-3 rounded-full">
<span class="sr-only">Facebook</span>
<svg class="w-5 h-5" fill="currentColor"><!-- … --></svg>
</a>
<!-- Social icons -->
<div class="flex space-x-4">
<a href="#" class="bg-primary text-white p-3 rounded-full">
<span class="sr-only">LinkedIn</span>
<svg class="w-5 h-5" fill="currentColor"><!-- … --></svg>
</a>
<a href="#" class="bg-primary text-white p-3 rounded-full">
<span class="sr-only">Instagram</span>
<svg class="w-5 h-5" fill="currentColor"><!-- … --></svg>
</a>
<a href="#" class="bg-primary text-white p-3 rounded-full">
<span class="sr-only">Facebook</span>
<svg class="w-5 h-5" fill="currentColor"><!-- … --></svg>
</a>
</div>
</div>
</div>
</div>
</section>
</f:section>

1
packages/base/Resources/Public/Scss/abstracts/_fonts.scss
View File

@@ -28,7 +28,6 @@ h1, h2 {
}
h1 {
text-align: center;
font-size: 3rem;
@media (min-width: $breakpoint-md) {

6
tailwind.config.js
View File

@@ -28,6 +28,12 @@ module.exports = {
'light-green': '#F4F6EC',
brand: '#6B8E23', // Added brand color for hover states from SCSS
},
backgroundImage: {
'hero-gradient':
'linear-gradient(to right, #0B197D 0%, #0B197D 50%, #ffffff 50%, #ffffff 100%)',
'hero-inner':
'linear-gradient(to right, #0B197D 0%, #0B197D 25%, #ffffff 25%, #ffffff 100%)',
},
maxHeight: {
'0': '0',
'[500px]': '500px', // Add specific max-height for mobile menu transition