feat(Structure & IDE Helper)
This commit is contained in:
@@ -1,31 +1,60 @@
|
||||
import {Form, Head} from "@inertiajs/react";
|
||||
import {LoaderCircle} from 'lucide-react';
|
||||
import {cn} from "@/lib/utils";
|
||||
import {CheckIcon, LoaderCircle} from 'lucide-react';
|
||||
import MembershipFormController from "@/actions/App/Http/Controllers/Forms/MembershipFormController";
|
||||
import {Label} from "@/components/ui/label";
|
||||
import {Input} from "@/components/ui/input";
|
||||
import InputError from "@/components/input-error";
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from "@/components/ui/select";
|
||||
import NavGuestLayout from "@/layouts/nav-guest-layout";
|
||||
import {RadioGroup, RadioGroupItem} from "@/components/ui/radio-group";
|
||||
import {Switch} from "@/components/ui/switch";
|
||||
import {Checkbox} from "@/components/ui/checkbox";
|
||||
import {useState} from "react";
|
||||
|
||||
export default function Membership() {
|
||||
const today = new Date();
|
||||
const actualMonth = today.getMonth() + 1;
|
||||
const leftMonths = 12 - actualMonth;
|
||||
|
||||
|
||||
const [selectedPlan, setSelectedPlan] = useState<
|
||||
"custom" | "one-year" | "two-year"
|
||||
>("one-year");
|
||||
|
||||
const plans = [
|
||||
{
|
||||
id: "custom" as const,
|
||||
name: "Sur-mesure",
|
||||
price: `${leftMonths}€`,
|
||||
description: "Derniers mois de l'année.",
|
||||
},
|
||||
{
|
||||
id: "one-year" as const,
|
||||
name: "Un an",
|
||||
price: "12€",
|
||||
description: "Pour nous soutenir durant un an.",
|
||||
},
|
||||
{
|
||||
id: "two-year" as const,
|
||||
name: "Deux ans",
|
||||
price: "24€",
|
||||
description: "Pour nous soutenir durant deux ans.",
|
||||
},
|
||||
];
|
||||
const features = [
|
||||
"Boîte Mail",
|
||||
"NextCloud",
|
||||
"Mailing list",
|
||||
"Hébergement de site",
|
||||
"Sondage",
|
||||
"Et plus encore ...",
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head title="Adhérer au Retzien Libre"/>
|
||||
<div
|
||||
className="flex min-h-screen flex-col items-center bg-[#F5F5F5] p-6 text-[#1b1b18] lg:justify-center lg:p-8 dark:bg-[#0a0a0a]">
|
||||
<NavGuestLayout />
|
||||
<NavGuestLayout/>
|
||||
|
||||
<div className="flex flex-col items-center justify-center gap-4">
|
||||
<div>
|
||||
@@ -56,7 +85,7 @@ export default function Membership() {
|
||||
placeholder="Votre Nom"
|
||||
/>
|
||||
<InputError
|
||||
message={errors.name}
|
||||
message={errors.lastname}
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
@@ -74,7 +103,7 @@ export default function Membership() {
|
||||
placeholder="Votre Prénom"
|
||||
/>
|
||||
<InputError
|
||||
message={errors.name}
|
||||
message={errors.firstname}
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
@@ -94,21 +123,21 @@ export default function Membership() {
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="phone">Téléphone*</Label>
|
||||
<Label htmlFor="phone1">Téléphone*</Label>
|
||||
<Input
|
||||
id="phone"
|
||||
id="phone1"
|
||||
type="phone"
|
||||
required
|
||||
tabIndex={4}
|
||||
autoComplete="phone"
|
||||
name="phone"
|
||||
name="phone1"
|
||||
placeholder="Votre numéro de téléphone"
|
||||
/>
|
||||
<InputError message={errors.email}/>
|
||||
<InputError message={errors.phone}/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="address">Votre adresse postale*</Label>
|
||||
<Label htmlFor="address">Votre adresse*</Label>
|
||||
<Input
|
||||
id="address"
|
||||
type="text"
|
||||
@@ -117,50 +146,100 @@ export default function Membership() {
|
||||
tabIndex={5}
|
||||
autoComplete="address"
|
||||
name="address"
|
||||
placeholder="Votre adresse postale"
|
||||
placeholder="Votre adresse"
|
||||
/>
|
||||
<InputError
|
||||
message={errors.name}
|
||||
message={errors.address}
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="subject">Formule d'adhésion*</Label>
|
||||
<RadioGroup
|
||||
defaultValue="comfortable"
|
||||
<Label htmlFor="zipcode">Votre code postale*</Label>
|
||||
<Input
|
||||
id="zipcode"
|
||||
type="text"
|
||||
required
|
||||
autoFocus
|
||||
tabIndex={6}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<RadioGroupItem value="default" id="r1" />
|
||||
<Label htmlFor="short">2 mois</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<RadioGroupItem value="comfortable" id="r2" />
|
||||
<Label htmlFor="one-year">1 an</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<RadioGroupItem value="compact" id="r3" />
|
||||
<Label htmlFor="two-year">2 ans</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
autoComplete="zipcode"
|
||||
name="zipcode"
|
||||
placeholder="Votre code postale"
|
||||
/>
|
||||
<InputError
|
||||
message={errors.zipcode}
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch id="cloud-access" tabIndex={7}/>
|
||||
<Label htmlFor="cloud-access">Me créer un accès au service du "cloud" ?</Label>
|
||||
<Label htmlFor="city">Votre ville*</Label>
|
||||
<Input
|
||||
id="city"
|
||||
type="text"
|
||||
required
|
||||
autoFocus
|
||||
tabIndex={6}
|
||||
autoComplete="city"
|
||||
name="city"
|
||||
placeholder="Votre ville"
|
||||
/>
|
||||
<InputError
|
||||
message={errors.city}
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Label htmlFor="package">Formule d'adhésion*</Label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{plans.map((plan) => (
|
||||
<button
|
||||
className={cn(
|
||||
"flex flex-col items-center justify-center rounded border-3 p-4 transition-colors",
|
||||
selectedPlan === plan.id
|
||||
? "border-primary"
|
||||
: "border-black hover:border-primary"
|
||||
)}
|
||||
key={plan.id}
|
||||
onClick={() => setSelectedPlan(plan.id)}
|
||||
type="button"
|
||||
>
|
||||
<span className="font-semibold">{plan.name}</span>
|
||||
<span className="font-bold text-lg">{plan.price}</span>
|
||||
<span className="text-center text-muted-foreground text-xs">
|
||||
{plan.description}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-semibold text-sm">Fonctionnalités inclues :</h4>
|
||||
<ul className="space-y-2">
|
||||
{features.map((feature, index) => (
|
||||
<li className="flex items-center gap-2 text-sm" key={index}>
|
||||
<CheckIcon className="h-4 w-4 text-primary"/>
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/*<div className="grid gap-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch id="cloud-access" tabIndex={8}/>
|
||||
<Label htmlFor="cloud-access">Me créer un accès au service du "cloud" ?</Label>
|
||||
</div>
|
||||
</div>*/}
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="captcha">Captcha</Label>
|
||||
<Input
|
||||
id="captcha"
|
||||
type="text"
|
||||
autoFocus
|
||||
tabIndex={8}
|
||||
tabIndex={9}
|
||||
name="captcha"
|
||||
placeholder="Entrez le captcha ci-dessous"
|
||||
/>
|
||||
@@ -171,9 +250,12 @@ export default function Membership() {
|
||||
<Checkbox
|
||||
id="cgu"
|
||||
name="cgu"
|
||||
tabIndex={9}
|
||||
tabIndex={10}
|
||||
required
|
||||
/>
|
||||
<Label htmlFor="remember">J'ai lu et j'accepte les <a href="#">C.G.U.</a>, je comprends la nécessité des enregistrements de mes données personnelles.</Label>
|
||||
<Label htmlFor="remember">J'ai lu et j'accepte les <a href="#">C.G.U.</a>,
|
||||
je comprends la nécessité des enregistrements de mes données
|
||||
personnelles.</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -181,7 +263,7 @@ export default function Membership() {
|
||||
variant="outline"
|
||||
type="submit"
|
||||
className="mt-2 w-full"
|
||||
tabIndex={5}
|
||||
tabIndex={11}
|
||||
data-test="register-user-button"
|
||||
>
|
||||
{processing && (
|
||||
|
||||
@@ -20,7 +20,7 @@ export default function Welcome() {
|
||||
/>
|
||||
</Head>
|
||||
<div
|
||||
className="flex min-h-screen flex-col items-center bg-[#F5F5F5] p-6 text-[#1b1b18] lg:justify-center lg:p-8 dark:bg-[#0a0a0a]">
|
||||
className="flex min-h-screen flex-col items-center bg-[#F5F5F5] text-[#1b1b18] lg:justify-center dark:bg-[#0a0a0a]">
|
||||
<NavGuestLayout />
|
||||
<section className="flex items-center justify-center gap-4 w-full max-w-[335px] lg:max-w-7xl">
|
||||
<div className="flex w-full items-center justify-center gap-4">
|
||||
@@ -42,8 +42,77 @@ export default function Welcome() {
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div
|
||||
className="flex flex-col items-center bg-[#F5F5F5] text-[#1b1b18] lg:justify-center dark:bg-[#0a0a0a]">
|
||||
|
||||
<section className="flex bg-accent items-center justify-center p-6 w-full max-w-[335px] lg:max-w-7xl lg:justify-center lg:p-8">TEST</section>
|
||||
<section className="w-full bg-accent pr-0 py-16">
|
||||
<div className="flex flex-col items-center gap-8 w-full max-w-7xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-10">Nos services numériques éthiques, libres,
|
||||
ouverts et locaux</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[
|
||||
{
|
||||
title: 'Boîte mail',
|
||||
description: 'Service de messagerie électronique sécurisé et respectueux de votre vie privée'
|
||||
},
|
||||
{
|
||||
title: 'Cloud (Nextcloud)',
|
||||
description: 'Stockage en ligne et collaboration avec vos données hébergées localement'
|
||||
},
|
||||
{title: 'File2link', description: 'Partage de fichiers simplifié et sécurisé'},
|
||||
{
|
||||
title: 'Hébergement web',
|
||||
description: 'Solutions d\'hébergement web éthiques et performantes'
|
||||
},
|
||||
{
|
||||
title: 'Sondage',
|
||||
description: 'Créez et partagez des sondages en ligne en toute confidentialité'
|
||||
},
|
||||
{
|
||||
title: 'Liste de diffusion Mail',
|
||||
description: 'Gérez vos communications de groupe efficacement'
|
||||
}
|
||||
].map((service, index) => (
|
||||
<div key={index} className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
|
||||
<h3 className="text-xl font-semibold mb-3">{service.title}</h3>
|
||||
<p>{service.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section className="w-full max-w-7xl py-16 bg-gray-50 dark:bg-gray-900">
|
||||
<h2 className="text-3xl font-bold text-center mb-10">GAFAM : Quels dangers ?</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
|
||||
<h3 className="text-xl font-semibold mb-3">Surveillance massive</h3>
|
||||
<p>Les GAFAM collectent et exploitent vos données personnelles à des fins commerciales</p>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
|
||||
<h3 className="text-xl font-semibold mb-3">Monopole numérique</h3>
|
||||
<p>Concentration excessive du pouvoir et dépendance aux services centralisés</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="w-full max-w-7xl py-16">
|
||||
<div className="flex flex-col lg:flex-row items-center gap-8">
|
||||
<div className="lg:w-1/2">
|
||||
<h2 className="text-3xl font-bold mb-6">Notre alternative : Le Retzien Libre</h2>
|
||||
<p className="mb-6">Une association locale engagée pour la promotion du logiciel libre et la
|
||||
protection de vos données personnelles.</p>
|
||||
<Link href={register()}>
|
||||
<Button variant="default">Rejoignez-nous</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="lg:w-1/2">
|
||||
<img src={illustrationImage} alt="Le Retzien Libre" className="rounded-lg"/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user