nebulae/roxane
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip(Home Design)
All checks were successful
Deploy Roxane to Preprod / deploy (push) Successful in 2m32s
Details

Browse Source
This commit is contained in:
Nebulae
2026-03-30 18:50:04 +02:00
parent 24bff5f4b5
commit 83b7c42fe4
7 changed files with 90 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
resources/js/components/features/home/AboutSection.tsx
View File

@@ -1,38 +1,40 @@
import {SectionHeading} from "@/components/common/SectionHeading"; import {SectionHeading} from "@/components/common/SectionHeading";
import {Button} from '@/components/ui/button';
export function AboutSection() { export function AboutSection() {
return ( return (
<section className="w-full py-16"> <section className="w-full py-16">
<div className="max-w-7xl mx-auto px-4"> <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' /> <SectionHeading title="Qui sommes-nous ?" color="secondary"
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-5"> subtitle="Le Retzien Libre, c’est une association qui promeut l’auto-hébergement et la décentralisation des services en ligne depuis 2017."
<div className="flex flex-col gap-3"> align='left'/>
<h3 className="text-xl font-semibold">Une association locale</h3> <div
<p> className="bg-white rounded-4xl border-3 border-black mt-10 px-10 pt-20 pb-10 shadow-[4px_4px_0px_rgba(0,0,0,1)]">
Le Retzien Libre est une association engagée pour la promotion du logiciel libre <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
et la protection de vos données personnelles sur le territoire du Pays de Retz. <div className="flex flex-col gap-3 lg:border-r-2 border-black lg:pr-10 border-0">
</p> <h3 className="text-xl text-primary font-semibold">Une association locale</h3>
<p>
Nous voulons vous proposer à travers des outils libres, ouverts et solidaires, de
quitter l'industrie du G.A.F.A.M.
</p>
</div>
<div className="flex flex-col gap-3 border-r-2 border-black pr-10">
<h3 className="text-xl text-primary font-semibold">Notre mission</h3>
<p>
Nous nous positionnons comme "A.M.A.P. informatique", délivrant des services "bio",
"éthiques" et "locaux" dans le Pays de Retz et Nantes.
</p>
</div>
<div className="flex flex-col gap-3">
<h3 className="text-xl text-primary font-semibold">Notre solution</h3>
<p>
Pour seulement 12€/an, adhérez au Retzien Libre pour bénéficier des services de
l'association et reprenez le contrôle de vos données.
</p>
</div>
</div> </div>
<div className="flex flex-col gap-3"> <div className="w-full flex justify-center mt-20">
<h3 className="text-xl font-semibold">Notre mission</h3> <Button variant="default">En savoir plus en lisant notre Blog</Button>
<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> </div>
</div> </div>

26
resources/js/components/features/home/AlternativeSection.tsx
View File

@@ -2,22 +2,29 @@ import { Link, usePage } from '@inertiajs/react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { dashboard, register } from '@/routes'; import { dashboard, register } from '@/routes';
import { type SharedData } from '@/types'; import { type SharedData } from '@/types';
import illustrationImage from '@/img/utils/lrl-illustration.png'; import IllustrationLogo from '@/img/utils/lrl-logo-full.svg';
export function AlternativeSection() { export function AlternativeSection() {
const { auth } = usePage<SharedData>().props; const { auth } = usePage<SharedData>().props;
return ( return (
<section className="w-full py-16"> <section className="w-full py-16">
<div className="max-w-7xl mx-auto px-4"> <div className="bg-gray-100 rounded-4xl max-w-7xl mx-auto px-4">
<div className="flex flex-col lg:flex-row items-center gap-12"> <div className="flex flex-col lg:flex-row items-center gap-12">
<div className="lg:w-1/2 flex justify-center">
<img
src={IllustrationLogo}
alt="Le Retzien Libre"
className="rounded-lg max-w-md w-full"
/>
</div>
<div className="flex flex-col gap-6 lg:w-1/2"> <div className="flex flex-col gap-6 lg:w-1/2">
<h2 className="text-3xl font-bold"> <h2 className="text-3xl text-black font-medium">
Notre alternative : Le Retzien Libre Notre alternative : Le Retzien Libre
</h2> </h2>
<p> <p>
Une association locale engagée pour la promotion du logiciel libre Ici, pas d’exploitation des vos données personnelles à des fins commerciales, ni de dépense aux services centralisés.<br/>
et la protection de vos données personnelles. Le Retzien Libre, c’est une association locale engagée pour la promotion du logiciel libre et la protection de vos données personnelles.
</p> </p>
{auth.user ? ( {auth.user ? (
<Link href={dashboard()}> <Link href={dashboard()}>
@@ -25,17 +32,10 @@ export function AlternativeSection() {
</Link> </Link>
) : ( ) : (
<Link href={register()}> <Link href={register()}>
<Button variant="default">Rejoignez-nous</Button> <Button variant="secondary">Rejoignez-nous</Button>
</Link> </Link>
)} )}
</div> </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>
</div> </div>
</section> </section>

2
resources/js/components/features/home/ServiceCard.tsx
View File

@@ -3,7 +3,7 @@ import {Service} from "@/types";
export function ServiceCard({title, colorTitle, bgColor, bgTitle, description, link, illustration}: Service) { export function ServiceCard({title, colorTitle, bgColor, bgTitle, description, link, illustration}: Service) {
return ( return (
<div <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`}> className={`flex gap-1 items-center bg-${bgColor} justify-center gap-4 rounded-4xl 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>
<div className="max-w-[150px]"> <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> <h3 className={`inline text-2xl font-semibold text-${colorTitle} font-medium bg-${bgTitle} rounded p-1 line-clamp-2`}>{title}</h3>

56
resources/js/components/footer.tsx
View File

@@ -1,34 +1,42 @@
import { Link } from '@inertiajs/react'; import {Link} from '@inertiajs/react';
import { contact, home, membership } from '@/routes'; import {contact, home, membership} from '@/routes';
import AppLogoIcon from '@/components/app-logo-icon'; import AppLogoIcon from '@/components/app-logo-icon';
export function Footer() { export function Footer() {
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
return ( return (
<footer className="w-full border-t-4 border-black py-10 mt-auto"> <footer className="gap-10 bg-accent rounded-t-4xl text-white py-10 px-20 mt-auto mx-5">
<div className="max-w-7xl mx-auto px-4 flex flex-col gap-8"> <div className="max-w-7xl mx-auto px-4 flex flex-col gap-8">
<div className="flex flex-col lg:flex-row justify-between gap-8"> <div className="flex flex-col lg:flex-row justify-between gap-8">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<Link href={home()} className="flex items-center gap-2 no-underline"> <Link href={home()} className="flex items-center gap-2 no-underline">
<AppLogoIcon className="size-8 text-[var(--foreground)] dark:text-white" /> <AppLogoIcon className="size-8 text-[var(--foreground)] dark:text-white"/>
<span className="font-bold text-lg">Le Retzien Libre</span> <span className="font-bold text-white text-lg">Le Retzien Libre</span>
</Link> </Link>
<p className="text-sm max-w-xs"> <p className="text-sm max-w-xs">
Une association locale pour un internet éthique, libre et respectueux. Une association locale pour un internet éthique, libre et respectueux.
</p> </p>
</div>
<nav className="flex flex-col gap-3">
<span className="font-semibold">Navigation</span>
<Link href={home()} className="text-sm text-white no-underline hover:underline">Accueil</Link>
<Link href={contact()} className="text-sm text-white no-underline hover:underline">Contact</Link>
<Link href={membership()} className="text-sm text-white no-underline hover:underline">Adhérer</Link>
</nav>
</div>
<div className="flex justify-between border-t border-black/20 pt-6 text-sm text-center">
<div className="text-left">
&copy; {currentYear} Le Retzien Libre. Tous droits réservés.
</div>
<div className="flex items-stretch text-right">
<Link href="#" className="text-sm text-white underline mx-4 hover:underline">Mentions Légales</Link>
<Link href="#" className="text-sm text-white underline mx-4 hover:underline">CGU</Link>
<Link href={"#"} className="text-sm text-white underline mx-4 hover:underline">Confidentialité</Link>
</div>
</div> </div>
<nav className="flex flex-col gap-3">
<span className="font-semibold">Navigation</span>
<Link href={home()} className="text-sm no-underline hover:underline">Accueil</Link>
<Link href={contact()} className="text-sm no-underline hover:underline">Contact</Link>
<Link href={membership()} className="text-sm no-underline hover:underline">Adhérer</Link>
</nav>
</div> </div>
<div className="border-t border-black/20 pt-6 text-sm text-center"> </footer>
&copy; {currentYear} Le Retzien Libre. Tous droits réservés.
</div>
</div>
</footer>
); );
} }

9
resources/js/img/utils/lrl-logo-full.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

4
resources/js/layouts/nav-guest-layout.tsx
View File

@@ -97,7 +97,7 @@ export default function NavGuestLayout() {
<Button variant="outline">Se connecter</Button> <Button variant="outline">Se connecter</Button>
</Link> </Link>
<Link href={membership()} className="no-underline"> <Link href={membership()} className="no-underline">
<Button>Adhérer</Button> <Button variant="secondary">Adhérer</Button>
</Link> </Link>
</> </>
)} )}
@@ -197,7 +197,7 @@ export default function NavGuestLayout() {
<Button variant="outline" className="w-full">Se connecter</Button> <Button variant="outline" className="w-full">Se connecter</Button>
</Link> </Link>
<Link href={membership()} onClick={closeMenu} className="no-underline"> <Link href={membership()} onClick={closeMenu} className="no-underline">
<Button className="w-full">Adhérer</Button> <Button variant="secondary" className="w-full">Adhérer</Button>
</Link> </Link>
</> </>
)} )}

12
resources/js/pages/welcome.tsx
View File

@@ -10,22 +10,16 @@ import { ScrollToTop } from '@/components/common/ScrollToTop';
export default function Welcome() { export default function Welcome() {
return ( return (
<> <>
<Head title="Bienvenue"> <Head title="Bienvenue sur le site du Retzien Libre" />
<link rel="preconnect" href="https://fonts.bunny.net" /> <div className="flex flex-col min-h-screen bg-white text-[#1b1b18] dark:bg-[#0a0a0a] dark:text-[#EDEDEC]">
<link
href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600"
rel="stylesheet"
/>
</Head>
<div className="flex flex-col min-h-screen bg-[#F5F5F5] text-[#1b1b18] dark:bg-[#0a0a0a] dark:text-[#EDEDEC]">
<div className="flex flex-col items-center px-4"> <div className="flex flex-col items-center px-4">
<NavGuestLayout /> <NavGuestLayout />
</div> </div>
<main className="flex flex-col items-center"> <main className="flex flex-col items-center">
<HeroSection /> <HeroSection />
<ServicesSection /> <ServicesSection />
<AboutSection />
<AlternativeSection /> <AlternativeSection />
<AboutSection />
</main> </main>
<Footer /> <Footer />
</div> </div>