feat(wip homepage with new design)

resources/js/components/features/home/AboutSection.tsx

@@ -0,0 +1,41 @@
+import {SectionHeading} from "@/components/common/SectionHeading";
+
+export function AboutSection() {
+    return (
+        <section className="w-full py-16">
+            <div className="max-w-7xl mx-auto px-4">
+                <SectionHeading title="Qui sommes-nous ?" color="secondary" subtitle="Le Retzien Libre, c’est une association qui promeut l’auto-hébergement et la décentralisation des services en ligne depuis 2017." align='left' />
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-5">
+                    <div className="flex flex-col gap-3">
+                        <h3 className="text-xl font-semibold">Une association locale</h3>
+                        <p>
+                            Le Retzien Libre est une association engagée pour la promotion du logiciel libre
+                            et la protection de vos données personnelles sur le territoire du Pays de Retz.
+                        </p>
+                    </div>
+                    <div className="flex flex-col gap-3">
+                        <h3 className="text-xl font-semibold">Notre mission</h3>
+                        <p>
+                            Nous sensibilisons et accompagnons les citoyens vers des pratiques numériques
+                            plus respectueuses, libres et indépendantes des grandes plateformes commerciales.
+                        </p>
+                    </div>
+                    <div className="flex flex-col gap-3">
+                        <h3 className="text-xl font-semibold">Surveillance massive</h3>
+                        <p>
+                            Les GAFAM collectent et exploitent vos données personnelles à des fins commerciales,
+                            sans transparence sur l'usage qui en est fait.
+                        </p>
+                    </div>
+                    <div className="flex flex-col gap-3">
+                        <h3 className="text-xl font-semibold">Monopole numérique</h3>
+                        <p>
+                            Concentration excessive du pouvoir et dépendance aux services centralisés.
+                            Il existe des alternatives libres, locales et respectueuses.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}

resources/js/components/features/home/AlternativeSection.tsx

@@ -0,0 +1,43 @@
+import { Link, usePage } from '@inertiajs/react';
+import { Button } from '@/components/ui/button';
+import { dashboard, register } from '@/routes';
+import { type SharedData } from '@/types';
+import illustrationImage from '@/img/utils/lrl-illustration.png';
+
+export function AlternativeSection() {
+    const { auth } = usePage<SharedData>().props;
+
+    return (
+        <section className="w-full py-16">
+            <div className="max-w-7xl mx-auto px-4">
+                <div className="flex flex-col lg:flex-row items-center gap-12">
+                    <div className="flex flex-col gap-6 lg:w-1/2">
+                        <h2 className="text-3xl font-bold">
+                            Notre alternative : Le Retzien Libre
+                        </h2>
+                        <p>
+                            Une association locale engagée pour la promotion du logiciel libre
+                            et la protection de vos données personnelles.
+                        </p>
+                        {auth.user ? (
+                            <Link href={dashboard()}>
+                                <Button variant="default">Accéder à mon espace</Button>
+                            </Link>
+                        ) : (
+                            <Link href={register()}>
+                                <Button variant="default">Rejoignez-nous</Button>
+                            </Link>
+                        )}
+                    </div>
+                    <div className="lg:w-1/2 flex justify-center">
+                        <img
+                            src={illustrationImage}
+                            alt="Le Retzien Libre"
+                            className="rounded-lg max-w-md w-full"
+                        />
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}

resources/js/components/features/home/HeroSection.tsx

@@ -0,0 +1,58 @@
+import { Link, usePage } from '@inertiajs/react';
+import { ChevronDown } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { dashboard, membership } from '@/routes';
+import { type SharedData } from '@/types';
+import illustrationImage from '@/img/utils/lrl-illustration.png';
+
+export function HeroSection() {
+    const { auth } = usePage<SharedData>().props;
+
+    const scrollToFirstSection = () => {
+        document.getElementById('first-section')?.scrollIntoView({ behavior: 'smooth' });
+    };
+
+    return (
+        <section
+            id="hero"
+            className="flex flex-col w-full max-w-[335px] lg:max-w-7xl mx-auto min-h-[calc(100vh-80px)] px-4"
+        >
+            {/* Contenu principal */}
+            <div className="flex flex-1 items-center justify-center gap-4 w-full">
+                <div className="flex flex-col w-full items-center text-center lg:items-start lg:text-left justify-center gap-4">
+                    <h1 className="text-5xl text-accent max-w-[450px] mb-5">
+                        Pour un internet éthique !
+                    </h1>
+                    <p className="text-xl mb-5">
+                        "Dégooglisons"<br />
+                        nos ordinateurs, nos tablettes et nos smartphones.<br />
+                        <i>"Le chemin est long, mais la voie est libre"</i>
+                    </p>
+                    {auth.user ? (
+                        <Link href={dashboard()}>
+                            <Button variant="secondary">Mon espace</Button>
+                        </Link>
+                    ) : (
+                        <Link href={membership()}>
+                            <Button variant="secondary">Adhérer dès maintenant</Button>
+                        </Link>
+                    )}
+                </div>
+                <div className="hidden lg:flex w-full items-center justify-center">
+                    <img src={illustrationImage} alt="Illustration Le Retzien Libre" className="max-w-md w-full" />
+                </div>
+            </div>
+
+            {/* Flèche vers la première section */}
+            <div className="flex justify-center pb-8">
+                <button
+                    onClick={scrollToFirstSection}
+                    aria-label="Voir nos services"
+                    className="p-2 rounded-full border-3 border-black animate-bounce hover:animate-none transition"
+                >
+                    <ChevronDown className="size-6" />
+                </button>
+            </div>
+        </section>
+    );
+}

resources/js/components/features/home/ServiceCard.tsx

@@ -0,0 +1,25 @@
+import {Service} from "@/types";
+
+export function ServiceCard({title, colorTitle, bgColor, bgTitle, description, link, illustration}: Service) {
+    return (
+        <div
+            className={`flex gap-1 items-center bg-${bgColor} justify-center gap-4 rounded-3xl p-10 border-3 border-black shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-none  hover:translate-2 transition delay-50 duration-200 ease-in-out`}>
+            <div>
+                <div className="max-w-[150px]">
+                    <h3 className={`inline text-2xl font-semibold text-${colorTitle} font-medium bg-${bgTitle} rounded p-1 line-clamp-2`}>{title}</h3>
+                </div>
+                <p className="text-sm text-muted-foreground mt-5">{description}</p>
+                <a href={link} className="text-white underline hover:font-medium mt-4 inline-block  hover:underline">
+                    En savoir plus
+                </a>
+            </div>
+            <div className="relative w-full h-64">
+                <img
+                    src={illustration}
+                    alt={title}
+                    className="w-full h-full object-cover rounded-lg"
+                />
+            </div>
+        </div>
+    );
+}

resources/js/components/features/home/ServicesSection.tsx

@@ -0,0 +1,82 @@
+import { type Service } from '@/types';
+import { ServiceCard } from './ServiceCard';
+import { SectionHeading } from '@/components/common/SectionHeading';
+import { Container } from '@/components/common/Container';
+
+const services: Service[] = [
+    {
+        title: 'Boîte mail',
+        description: 'Service de messagerie électronique sécurisé et respectueux de votre vie privée',
+        colorTitle: 'white',
+        bgTitle: 'accent',
+        bgColor: 'secondary',
+        link: '#',
+        illustration: '../../img/utils/lrl-logo.svg'
+    },
+    {
+        title: 'Stockage Cloud',
+        description: 'Stockage en ligne et collaboration avec vos données hébergées localement',
+        colorTitle: 'black',
+        bgTitle: 'white',
+        bgColor: 'primary',
+        link: '#',
+        illustration: '../../img/utils/lrl-logo.svg'
+    },
+    {
+        title: 'Hébergement de site',
+        description: "Solutions d'hébergement web éthiques et performantes",
+        colorTitle: 'black',
+        bgTitle: 'primary',
+        bgColor: 'accent',
+        link: '#',
+        illustration: '../../img/utils/lrl-logo.svg'
+    },
+    {
+        title: 'Email Marketing',
+        description: "Gérez vos communications de groupe efficacement",
+        colorTitle: 'black',
+        bgTitle: 'secondary',
+        bgColor: 'gray',
+        link: '#',
+        illustration: '../../img/utils/lrl-logo.svg'
+    },
+    {
+        title: 'Partage de fichiers',
+        description: 'Partager facielement vos fichiers en toute sécurité',
+        colorTitle: 'black',
+        bgTitle: 'white',
+        bgColor: 'primary',
+        link: '#',
+        illustration: '../../img/utils/lrl-logo.svg'
+    },
+    {
+        title: 'Outil de Sondage',
+        description: 'Créez et partagez des sondages en ligne en toute confidentialité',
+        colorTitle: 'black',
+        bgTitle: 'primary',
+        bgColor: 'accent',
+        link: '#',
+        illustration: '../../img/utils/lrl-logo.svg'
+    },
+
+];
+
+export function ServicesSection() {
+    return (
+        <section id="first-section" className="w-full bg-white py-16">
+            <Container className="flex flex-col gap-10">
+                <SectionHeading
+                    title="Nos services"
+                    color="primary"
+                    subtitle="Nous vous proposons, à travers des outils libres, ouverts et solidaires, de quitter l’industrie du G.A.F.A.M. N’acceptons plus d’être leur produit !"
+                    align="left"
+                />
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    {services.map((service) => (
+                        <ServiceCard key={service.title} {...service} />
+                    ))}
+                </div>
+            </Container>
+        </section>
+    );
+}