cdricms/latosa-escrima
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

centering features

Browse Source
This commit is contained in:
gom-by
2025-01-13 13:53:53 +01:00
parent 0ef71f41bd
commit e7753fe555
2 changed files with 104 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
latosa-frontend/app/page.tsx
View File

@@ -6,6 +6,7 @@ export default function Home() {
return ( return (
<main> <main>
<Hero /> <Hero />
<div className="flex flex-col">
<Features <Features
title="DÉVELOPPEMENT DU SYSTÈME" title="DÉVELOPPEMENT DU SYSTÈME"
description="Latosa Escrima Concepts est un système martial dynamique et en constante évolution. Ce système repose sur une approche logique, qui progresse au fil du développement des compétences techniques des pratiquants." description="Latosa Escrima Concepts est un système martial dynamique et en constante évolution. Ce système repose sur une approche logique, qui progresse au fil du développement des compétences techniques des pratiquants."
@@ -105,6 +106,7 @@ export default function Home() {
</ul> </ul>
</FeatureItem> </FeatureItem>
</Features> </Features>
</div>
<Gallery6 /> <Gallery6 />
<Gallery6 /> <Gallery6 />
</main> </main>

8
latosa-frontend/components/features.tsx
View File

@@ -8,8 +8,8 @@ const Features: React.FC<
}> }>
> = ({ title, description, cta, children }) => { > = ({ title, description, cta, children }) => {
return ( return (
<section className="py-32 px-4"> <section className="py-32 px-4 container self-center">
<div className="container flex flex-col gap-16 lg:px-16"> <div className="flex flex-col gap-16 lg:px-16">
<div className="lg:max-w-sm"> <div className="lg:max-w-sm">
<h2 className="mb-3 text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6"> <h2 className="mb-3 text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6">
{title} {title}
@@ -43,7 +43,7 @@ export const FeatureItem: React.FC<
}> }>
> = ({ title, children, image, position }) => { > = ({ title, children, image, position }) => {
const _image = () => ( const _image = () => (
<div className="md:min-h-[24rem] lg:min-h-[28rem] xl:min-h-[32rem]"> <div className="md:min-h-[18rem] lg:min-h-[24rem] xl:min-h-[28rem]">
<img <img
src={image} src={image}
alt={title} alt={title}
@@ -61,7 +61,7 @@ export const FeatureItem: React.FC<
); );
return ( return (
<div <div
className={`flex ${position === "left" ? "flex-col" : "flex-col-reverse"} overflow-clip rounded-xl border border-border md:col-span-2 md:grid md:grid-cols-2 md:gap-6 lg:gap-8`} className={`flex ${position === "left" ? "flex-col" : "flex-col-reverse"} container self-center overflow-clip rounded-xl border border-border md:col-span-2 md:grid md:grid-cols-2 md:gap-6 lg:gap-8`}
> >
{position === "left" ? ( {position === "left" ? (
<> <>