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

feat: initial design for hero

Browse Source
This commit is contained in:
Dominik Polakovics Polakovics
2024-12-12 17:23:29 +01:00
parent 2bac342a5e
commit 869df50c01
2 changed files with 97 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
packages/base/ContentBlocks/ContentElements/hero/assets/frontend.css
View File

@@ -1,3 +1,73 @@
.frame-type-cloonar_hero .container { .frame-type-cloonar_hero {
position: relative;
display: flex; display: flex;
flex-direction: column;
padding-bottom: 3rem; /* Space for overlap */
background: #f9f9f9;
} }
.frame-type-cloonar_hero .hero-header {
text-align: center;
margin-bottom: 2rem;
font-size: 2.5rem;
color: #3c3c3c;
}
.frame-type-cloonar_hero .hero-content {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.frame-type-cloonar_hero .hero-text {
flex: 1;
font-size: 1.2rem;
color: #3c3c3c;
line-height: 1.6;
}
.frame-type-cloonar_hero .hero-image-wrapper {
position: relative;
flex: 1;
}
.frame-type-cloonar_hero .hero-image {
max-width: 100%;
height: auto;
border-radius: 8px;
}
.frame-type-cloonar_hero .hero-social-icons {
position: absolute;
right: -10%;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.frame-type-cloonar_hero .social-icon {
display: inline-block;
width: 40px;
height: 40px;
background-color: #3c3c3c;
color: #fff;
text-align: center;
line-height: 40px;
border-radius: 50%;
text-decoration: none;
font-size: 1.2rem;
}
.frame-type-cloonar_hero .next-section-overlap {
position: absolute;
bottom: 2rem;
width: 100%;
height: 2rem;
background: #ffffff;
z-index: 10;
}

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

@@ -1,18 +1,31 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:cb="http://typo3.org/ns/TYPO3/CMS/ContentBlocks/ViewHelpers"
xmlns:bk2k="http://typo3.org/ns/BK2K/BootstrapPackage/ViewHelpers"
data-namespace-typo3-fluid="true">
<f:layout name="Default" /> <f:layout name="Default" />
<f:section name="Main">
<f:asset.css identifier="hero" href="{cb:assetPath()}/frontend.css"/> <f:section name="Main">
<div class="textpic textpic-{data.imageorient}"> <f:asset.css identifier="CBHero" href="{cb:assetPath()}/frontend.css" />
<div class="textpic-item textpic-gallery"> <div class="hero">
<f:image image="{data.image.0}" alt="Wobi" /> <header class="hero-header">
</div> <h1>{data.header}</h1>
<div class="textpic-item textpic-text"> </header>
<f:format.html>{data.bodytext}</f:format.html> <div class="hero-content">
<div class="hero-text">
<f:format.html>{data.bodytext}</f:format.html>
</div>
<div class="hero-image-wrapper">
<f:if condition="{data.image}">
<f:then>
<f:image image="{data.image.0}" alt="Hero Image" class="hero-image" />
</f:then>
<f:else>
<p>No image available</p>
</f:else>
</f:if>
<div class="hero-social-icons">
<a href="#" class="social-icon">X</a>
<a href="#" class="social-icon">Instagram</a>
<a href="#" class="social-icon">TikTok</a>
</div> </div>
</div>
</div> </div>
<div class="next-section-overlap"></div>
</div>
</f:section> </f:section>