feat: many changes
This commit is contained in:
@@ -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
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,55 @@
|
||||
<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><f:format.html parseFuncTSPath="lib.parseFunc_RTE">{data.header}</f:format.html></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>
|
||||
<f:image image="{card.images.0}" alt="{card.images.0.alternative}" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500" />
|
||||
</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-black bg-opacity-40 flex items-center justify-center">
|
||||
<h3 class="text-white text-xl font-bold text-center p-4">{card.header}</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-back absolute w-full h-full backface-hidden rotate-y-180 bg-gray-100 shadow-lg p-6 overflow-y-auto">
|
||||
<h4 class="text-lg font-semibold mb-2">{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>
|
||||
@@ -3,7 +3,7 @@
|
||||
<f:section name="Header" />
|
||||
|
||||
<f:section name="Main">
|
||||
<section class="bg-white md:bg-hero-gradient mb-16">
|
||||
<section class="bg-white md:bg-hero-gradient md:mb-16">
|
||||
<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">
|
||||
|
||||
@@ -48,9 +48,9 @@
|
||||
|
||||
<!-- Down‑arrow, half out on the right edge -->
|
||||
<div
|
||||
class="absolute top-1/2 -translate-y-1/2 right-[-2rem] z-20">
|
||||
class="absolute top-2/3 -translate-y-1/2 right-[-3rem] z-20">
|
||||
<a href="#next-section"
|
||||
class="bg-primary border-4 border-white text-white rounded-full p-5 inline-flex items-center justify-center hover:bg-opacity-90">
|
||||
class="w-24 h-24 text-5xl bg-primary border-8 border-white text-white rounded-full inline-flex items-center justify-center hover:bg-opacity-90">
|
||||
<span class="sr-only">Scroll down</span>
|
||||
<i class="ci ci-arrow-down"></i>
|
||||
</a>
|
||||
@@ -80,13 +80,13 @@
|
||||
|
||||
<!-- Social icons -->
|
||||
<div class="space-x-3">
|
||||
<a href="#" class="bg-primary text-white p-1 rounded-full inline-flex items-center justify-center">
|
||||
<a href="#" class="w-6 h-6 md:w-10 md:h-10 bg-primary text-white rounded-full inline-flex items-center justify-center">
|
||||
<i class="ci ci-linkedin"></i>
|
||||
</a>
|
||||
<a href="#" class="bg-primary text-white p-1 rounded-full inline-flex items-center justify-center">
|
||||
<a href="#" class="w-6 h-6 md:w-10 md:h-10 bg-primary text-white rounded-full inline-flex items-center justify-center">
|
||||
<i class="ci ci-instagram"></i>
|
||||
</a>
|
||||
<a href="#" class="bg-primary text-white p-1 rounded-full inline-flex items-center justify-center">
|
||||
<a href="#" class="w-6 h-6 md:w-10 md:h-10 bg-primary text-white rounded-full inline-flex items-center justify-center">
|
||||
<i class="ci ci-facebook"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<f:layout name="Default" />
|
||||
<f:section name="Main">
|
||||
<div class="fade-in-on-scroll py-16">
|
||||
<div class="fade-in-on-scroll">
|
||||
<f:if condition="{data.header}">
|
||||
<f:then><h2>{data.header}</h2></f:then>
|
||||
</f:if>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<f:variable name="gapClass" value="gap-8 md:gap-16 lg:gap-32" />
|
||||
</f:if>
|
||||
|
||||
<div class="flex flex-col {gapClass} py-16 fade-in-on-scroll {f:if(condition: '{data.imageorient} == 26', then: 'md:flex-row-reverse', else: 'md:flex-row')}">
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user