feat(wip homepage with new design)
This commit is contained in:
10
package-lock.json
generated
10
package-lock.json
generated
@@ -45,6 +45,7 @@
|
||||
"@eslint/js": "^9.19.0",
|
||||
"@laravel/vite-plugin-wayfinder": "^0.1.3",
|
||||
"@types/node": "^22.13.5",
|
||||
"baseline-browser-mapping": "^2.10.10",
|
||||
"eslint": "^9.17.0",
|
||||
"eslint-config-prettier": "^10.0.1",
|
||||
"eslint-plugin-react": "^7.37.3",
|
||||
@@ -2848,10 +2849,15 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/baseline-browser-mapping": {
|
||||
"version": "2.8.10",
|
||||
"version": "2.10.10",
|
||||
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.10.tgz",
|
||||
"integrity": "sha512-sUoJ3IMxx4AyRqO4MLeHlnGDkyXRoUG0/AI9fjK+vS72ekpV0yWVY7O0BVjmBcRtkNcsAO2QDZ4tdKKGoI6YaQ==",
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"baseline-browser-mapping": "dist/cli.js"
|
||||
"baseline-browser-mapping": "dist/cli.cjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/brace-expansion": {
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
"@eslint/js": "^9.19.0",
|
||||
"@laravel/vite-plugin-wayfinder": "^0.1.3",
|
||||
"@types/node": "^22.13.5",
|
||||
"baseline-browser-mapping": "^2.10.10",
|
||||
"eslint": "^9.17.0",
|
||||
"eslint-config-prettier": "^10.0.1",
|
||||
"eslint-plugin-react": "^7.37.3",
|
||||
|
||||
BIN
public/favicons/apple-touch-icon.png
Normal file
BIN
public/favicons/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
public/favicons/favicon-96x96.png
Normal file
BIN
public/favicons/favicon-96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
public/favicons/favicon.ico
Normal file
BIN
public/favicons/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
17
public/favicons/favicon.svg
Normal file
17
public/favicons/favicon.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="1000"><style>
|
||||
#light-icon {
|
||||
display: inline;
|
||||
}
|
||||
#dark-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#light-icon {
|
||||
display: none;
|
||||
}
|
||||
#dark-icon {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
</style><g id="light-icon"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="1000"><g><g transform="matrix(10.75268817204301,0,0,10.75268817204301,5.684341886080802e-14,102.15053763440864)"><svg xmlns="http://www.w3.org/2000/svg" width="93" height="74" viewBox="0 0 93 74" fill="none"><ellipse cx="46.3415" cy="41.389" rx="35.3752" ry="27.9464" fill="white"></ellipse><circle cx="27.9347" cy="37.99" r="4.46941" fill="#FFA8BA"></circle><circle cx="63.6901" cy="37.99" r="4.46941" fill="#FFA8BA"></circle><path d="M46.1219 0C61.5954 0.00108972 74.8403 9.53527 80.3104 23.0479L81.6834 25.0723C83.6532 27.9801 85.8227 31.4382 87.6756 34.8086C89.5186 38.1612 91.0891 41.4998 91.8094 44.1504C92.1654 45.4609 92.3492 46.7271 92.1717 47.7842C92.0805 48.3269 91.8844 48.8619 91.5272 49.3145C91.1614 49.7768 90.6687 50.0974 90.0916 50.2676C88.996 50.589 87.6298 50.3673 86.0868 49.8076C84.7924 49.3378 83.2492 48.5798 81.4295 47.5156C76.8613 62.6894 62.7841 73.7439 46.1219 73.7451C29.4595 73.7447 15.377 62.6912 10.8075 47.5176C8.98891 48.5806 7.4458 49.3382 6.15219 49.8076C4.60898 50.3672 3.24387 50.5893 2.14828 50.2676C1.57071 50.0974 1.07767 49.7774 0.711757 49.3145C0.354546 48.8619 0.159453 48.327 0.0682023 47.7842C-0.109333 46.727 0.0764139 45.4611 0.43246 44.1504C1.15279 41.4997 2.72122 38.1613 4.5643 34.8086C6.4172 31.4382 8.58663 27.9802 10.5565 25.0723L11.9246 23.0498C17.3949 9.53493 30.6464 0.000380988 46.1219 0ZM75.5555 34.3604C68.6179 28.2902 62.5227 27.1288 57.7127 27.9727C52.8444 28.8279 49.0905 31.7745 46.9705 34.2471L46.1151 35.2441L45.2684 34.2432C40.6526 28.7884 34.925 27.6504 29.6131 28.4512C24.2424 29.2619 19.3457 32.0593 16.6844 34.3652L16.0145 34.9434C15.9742 35.5812 15.9539 36.225 15.9539 36.873C15.9542 53.5342 29.4609 67.0405 46.1219 67.041C62.7822 67.0396 76.2906 53.5336 76.2909 36.873C76.2909 36.2273 76.2674 35.5859 76.2274 34.9502L75.5555 34.3604Z" fill="black"></path><path d="M47.4565 41.9402C46.5147 42.6325 45.11 42.6325 44.1682 41.9402L37.7342 37.2104C35.9945 35.9316 37.0689 33.5206 39.3783 33.5206L52.2464 33.5206C54.5559 33.5206 55.6302 35.9316 53.8906 37.2104L47.4565 41.9402Z" fill="#FAAE2B"></path></svg></g></g></svg></g><g id="dark-icon"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="1000"><g clip-path="url(#SvgjsClipPath1009)"><rect width="1000" height="1000" fill="#ffffff"></rect><g transform="matrix(7.526881720430108,0,0,7.526881720430108,150,221.50537634408602)"><svg xmlns="http://www.w3.org/2000/svg" width="93" height="74" viewBox="0 0 93 74" fill="none"><ellipse cx="46.3415" cy="41.389" rx="35.3752" ry="27.9464" fill="white"></ellipse><circle cx="27.9347" cy="37.99" r="4.46941" fill="#FFA8BA"></circle><circle cx="63.6901" cy="37.99" r="4.46941" fill="#FFA8BA"></circle><path d="M46.1219 0C61.5954 0.00108972 74.8403 9.53527 80.3104 23.0479L81.6834 25.0723C83.6532 27.9801 85.8227 31.4382 87.6756 34.8086C89.5186 38.1612 91.0891 41.4998 91.8094 44.1504C92.1654 45.4609 92.3492 46.7271 92.1717 47.7842C92.0805 48.3269 91.8844 48.8619 91.5272 49.3145C91.1614 49.7768 90.6687 50.0974 90.0916 50.2676C88.996 50.589 87.6298 50.3673 86.0868 49.8076C84.7924 49.3378 83.2492 48.5798 81.4295 47.5156C76.8613 62.6894 62.7841 73.7439 46.1219 73.7451C29.4595 73.7447 15.377 62.6912 10.8075 47.5176C8.98891 48.5806 7.4458 49.3382 6.15219 49.8076C4.60898 50.3672 3.24387 50.5893 2.14828 50.2676C1.57071 50.0974 1.07767 49.7774 0.711757 49.3145C0.354546 48.8619 0.159453 48.327 0.0682023 47.7842C-0.109333 46.727 0.0764139 45.4611 0.43246 44.1504C1.15279 41.4997 2.72122 38.1613 4.5643 34.8086C6.4172 31.4382 8.58663 27.9802 10.5565 25.0723L11.9246 23.0498C17.3949 9.53493 30.6464 0.000380988 46.1219 0ZM75.5555 34.3604C68.6179 28.2902 62.5227 27.1288 57.7127 27.9727C52.8444 28.8279 49.0905 31.7745 46.9705 34.2471L46.1151 35.2441L45.2684 34.2432C40.6526 28.7884 34.925 27.6504 29.6131 28.4512C24.2424 29.2619 19.3457 32.0593 16.6844 34.3652L16.0145 34.9434C15.9742 35.5812 15.9539 36.225 15.9539 36.873C15.9542 53.5342 29.4609 67.0405 46.1219 67.041C62.7822 67.0396 76.2906 53.5336 76.2909 36.873C76.2909 36.2273 76.2674 35.5859 76.2274 34.9502L75.5555 34.3604Z" fill="black"></path><path d="M47.4565 41.9402C46.5147 42.6325 45.11 42.6325 44.1682 41.9402L37.7342 37.2104C35.9945 35.9316 37.0689 33.5206 39.3783 33.5206L52.2464 33.5206C54.5559 33.5206 55.6302 35.9316 53.8906 37.2104L47.4565 41.9402Z" fill="#FAAE2B"></path></svg></g></g><defs><clipPath id="SvgjsClipPath1009"><rect width="1000" height="1000" x="0" y="0" rx="350" ry="350"></rect></clipPath></defs></svg></g></svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
21
public/favicons/site.webmanifest
Normal file
21
public/favicons/site.webmanifest
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "Le Retzien Libre",
|
||||
"short_name": "Retzien",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/favicons/web-app-manifest-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
},
|
||||
{
|
||||
"src": "/favicons/web-app-manifest-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
}
|
||||
],
|
||||
"theme_color": "#ffffff",
|
||||
"background_color": "#ffffff",
|
||||
"display": "standalone"
|
||||
}
|
||||
BIN
public/favicons/web-app-manifest-192x192.png
Normal file
BIN
public/favicons/web-app-manifest-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
public/favicons/web-app-manifest-512x512.png
Normal file
BIN
public/favicons/web-app-manifest-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@@ -1,5 +1,5 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
|
||||
@import 'tailwindcss';
|
||||
@import './fonts.css';
|
||||
|
||||
@plugin 'tailwindcss-animate';
|
||||
|
||||
@@ -8,13 +8,17 @@
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme {
|
||||
--font-sans: 'Figtree', 'Inter', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
|
||||
/* Fonts */
|
||||
--font-sans: 'Space Grotesk', 'Inter', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
|
||||
/* Radius Sizes */
|
||||
--radius-lg: var(--radius);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Colors */
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
|
||||
@@ -38,7 +42,7 @@
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
}
|
||||
|
||||
:root {
|
||||
|
||||
44
resources/css/fonts.css
Normal file
44
resources/css/fonts.css
Normal file
@@ -0,0 +1,44 @@
|
||||
/* space-grotesk-300 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: 'Space Grotesk';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url('fonts/space-grotesk-v22-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* space-grotesk-regular - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: 'Space Grotesk';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('fonts/space-grotesk-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* space-grotesk-500 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: 'Space Grotesk';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: url('fonts/space-grotesk-v22-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* space-grotesk-600 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: 'Space Grotesk';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: url('fonts/space-grotesk-v22-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* space-grotesk-700 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: 'Space Grotesk';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('fonts/space-grotesk-v22-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
BIN
resources/css/fonts/space-grotesk-v22-latin-300.woff2
Normal file
BIN
resources/css/fonts/space-grotesk-v22-latin-300.woff2
Normal file
Binary file not shown.
BIN
resources/css/fonts/space-grotesk-v22-latin-500.woff2
Normal file
BIN
resources/css/fonts/space-grotesk-v22-latin-500.woff2
Normal file
Binary file not shown.
BIN
resources/css/fonts/space-grotesk-v22-latin-600.woff2
Normal file
BIN
resources/css/fonts/space-grotesk-v22-latin-600.woff2
Normal file
Binary file not shown.
BIN
resources/css/fonts/space-grotesk-v22-latin-700.woff2
Normal file
BIN
resources/css/fonts/space-grotesk-v22-latin-700.woff2
Normal file
Binary file not shown.
BIN
resources/css/fonts/space-grotesk-v22-latin-regular.woff2
Normal file
BIN
resources/css/fonts/space-grotesk-v22-latin-regular.woff2
Normal file
Binary file not shown.
@@ -2,13 +2,6 @@ import { SVGAttributes } from 'react';
|
||||
|
||||
export default function AppLogoIcon(props: SVGAttributes<SVGElement>) {
|
||||
return (
|
||||
/* <svg {...props} viewBox="0 0 40 42" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M17.2 5.63325L8.6 0.855469L0 5.63325V32.1434L16.2 41.1434L32.4 32.1434V23.699L40 19.4767V9.85547L31.4 5.07769L22.8 9.85547V18.2999L17.2 21.411V5.63325ZM38 18.2999L32.4 21.411V15.2545L38 12.1434V18.2999ZM36.9409 10.4439L31.4 13.5221L25.8591 10.4439L31.4 7.36561L36.9409 10.4439ZM24.8 18.2999V12.1434L30.4 15.2545V21.411L24.8 18.2999ZM23.8 20.0323L29.3409 23.1105L16.2 30.411L10.6591 27.3328L23.8 20.0323ZM7.6 27.9212L15.2 32.1434V38.2999L2 30.9666V7.92116L7.6 11.0323V27.9212ZM8.6 9.29991L3.05913 6.22165L8.6 3.14339L14.1409 6.22165L8.6 9.29991ZM30.4 24.8101L17.2 32.1434V38.2999L30.4 30.9666V24.8101ZM9.6 11.0323L15.2 7.92117V22.5221L9.6 25.6333V11.0323Z"
|
||||
/>
|
||||
</svg>*/
|
||||
<svg {...props} viewBox="0 0 42 33" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="21.138" cy="16.5" r="15" stroke="#000" strokeWidth="3"/>
|
||||
<path d="M21.138 15c-4.4-5.2-11-2.167-13.5 0 1.6-10.4 9.333-12 13-12 10.4.4 13.667 8.167 14 12-6.4-5.6-11.5-2.333-13.5 0Z" fill="#000" stroke="#000"/>
|
||||
@@ -17,6 +10,5 @@ export default function AppLogoIcon(props: SVGAttributes<SVGElement>) {
|
||||
<path d="M5.638 11.5c-3.5 5.167-8.4 14.2 0 9v-9ZM36.638 11.5c3.5 5.167 8.4 14.2 0 9v-9Z" fill="#000" stroke="#000"/>
|
||||
<path d="M21.736 18.768a1.28 1.28 0 0 1-1.472 0l-2.879-2.117c-.778-.572-.298-1.651.736-1.651h5.758c1.034 0 1.514 1.079.736 1.651l-2.88 2.117Z" fill="#FAAE2B"/>
|
||||
</svg>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
8
resources/js/components/common/Container.tsx
Normal file
8
resources/js/components/common/Container.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
import { cn } from '@/lib/utils';
|
||||
import React from "react";
|
||||
|
||||
export function Container({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div className={cn('w-full max-w-7xl mx-auto px-4', className)} {...props} />
|
||||
);
|
||||
}
|
||||
33
resources/js/components/common/ScrollToTop.tsx
Normal file
33
resources/js/components/common/ScrollToTop.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { ChevronUp } from 'lucide-react';
|
||||
|
||||
export function ScrollToTop() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const hero = document.getElementById('hero');
|
||||
if (!hero) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => setIsVisible(!entry.isIntersecting),
|
||||
{ threshold: 0 },
|
||||
);
|
||||
|
||||
observer.observe(hero);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
|
||||
if (!isVisible) return null;
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={scrollToTop}
|
||||
aria-label="Retour en haut"
|
||||
className="fixed bottom-6 right-6 z-50 p-3 rounded-full border-3 border-black bg-primary shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition duration-200"
|
||||
>
|
||||
<ChevronUp className="size-5" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
27
resources/js/components/common/SectionHeading.tsx
Normal file
27
resources/js/components/common/SectionHeading.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import {cn} from '@/lib/utils';
|
||||
|
||||
interface SectionHeadingProps {
|
||||
title: string;
|
||||
color?: string;
|
||||
subtitle?: string;
|
||||
align?: 'left' | 'center';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function SectionHeading({title, color, subtitle, align = 'center', className}: SectionHeadingProps) {
|
||||
return (
|
||||
<div className={cn(
|
||||
'flex gap-10 items-center ',
|
||||
align === 'center' && 'text-center',
|
||||
align === 'left' && 'text-left',
|
||||
className,
|
||||
)}>
|
||||
<h2 className={`text-3xl text-black font-medium bg-${color} rounded p-1`}>
|
||||
{title}
|
||||
</h2>
|
||||
{subtitle && (
|
||||
<p className="text-md text-muted-foreground max-w-2xl">{subtitle}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
41
resources/js/components/features/home/AboutSection.tsx
Normal file
41
resources/js/components/features/home/AboutSection.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
43
resources/js/components/features/home/AlternativeSection.tsx
Normal file
43
resources/js/components/features/home/AlternativeSection.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
58
resources/js/components/features/home/HeroSection.tsx
Normal file
58
resources/js/components/features/home/HeroSection.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
25
resources/js/components/features/home/ServiceCard.tsx
Normal file
25
resources/js/components/features/home/ServiceCard.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
82
resources/js/components/features/home/ServicesSection.tsx
Normal file
82
resources/js/components/features/home/ServicesSection.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
34
resources/js/components/footer.tsx
Normal file
34
resources/js/components/footer.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import { Link } from '@inertiajs/react';
|
||||
import { contact, home, membership } from '@/routes';
|
||||
import AppLogoIcon from '@/components/app-logo-icon';
|
||||
|
||||
export function Footer() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
return (
|
||||
<footer className="w-full border-t-4 border-black py-10 mt-auto">
|
||||
<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 gap-3">
|
||||
<Link href={home()} className="flex items-center gap-2 no-underline">
|
||||
<AppLogoIcon className="size-8 text-[var(--foreground)] dark:text-white" />
|
||||
<span className="font-bold text-lg">Le Retzien Libre</span>
|
||||
</Link>
|
||||
<p className="text-sm max-w-xs">
|
||||
Une association locale pour un internet éthique, libre et respectueux.
|
||||
</p>
|
||||
</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 className="border-t border-black/20 pt-6 text-sm text-center">
|
||||
© {currentYear} Le Retzien Libre. Tous droits réservés.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -18,7 +18,6 @@ const buttonVariants = cva(
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
||||
ghost: "bg-accent hover:text-accent-foreground hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2 shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-2 transition delay-50 duration-200 ease-in-out",
|
||||
|
||||
11
resources/js/img/utils/lrl-logo.svg
Normal file
11
resources/js/img/utils/lrl-logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.5 KiB |
0
resources/js/layouts/app/app-footer-layout.tsx
Normal file
0
resources/js/layouts/app/app-footer-layout.tsx
Normal file
@@ -1,86 +1,91 @@
|
||||
import {Link, router, usePage} from "@inertiajs/react";
|
||||
import {dashboard, home, login, logout, register, contact, membership} from "@/routes";
|
||||
import AppLogoIcon from "@/components/app-logo-icon";
|
||||
import {Button} from "@/components/ui/button";
|
||||
import type {SharedData} from "@/types";
|
||||
import {useMobileNavigation} from "@/hooks/use-mobile-navigation";
|
||||
import {LogOut} from "lucide-react";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Link, router, usePage } from '@inertiajs/react';
|
||||
import { dashboard, home, login, logout, contact, membership } from '@/routes';
|
||||
import AppLogoIcon from '@/components/app-logo-icon';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { type SharedData } from '@/types';
|
||||
import { useMobileNavigation } from '@/hooks/use-mobile-navigation';
|
||||
import { useAppearance } from '@/hooks/use-appearance';
|
||||
import { Menu, Moon, Sun, X } from 'lucide-react';
|
||||
import AppLogo from "@/components/app-logo";
|
||||
|
||||
export default function NavGuestLayout() {
|
||||
const { auth } = usePage<SharedData>().props;
|
||||
|
||||
const cleanup = useMobileNavigation();
|
||||
const { appearance, updateAppearance } = useAppearance();
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
|
||||
const handleLogout = () => {
|
||||
cleanup();
|
||||
router.flushAll();
|
||||
};
|
||||
|
||||
const [dark, setDark] = useState(false);
|
||||
const toggleAppearance = () => {
|
||||
updateAppearance(appearance === 'dark' ? 'light' : 'dark');
|
||||
};
|
||||
|
||||
const closeMenu = () => setIsMenuOpen(false);
|
||||
|
||||
// Fermer sur navigation Inertia
|
||||
useEffect(() => {
|
||||
if (dark) {
|
||||
document.documentElement.classList.add("dark");
|
||||
} else {
|
||||
document.documentElement.classList.remove("dark");
|
||||
}
|
||||
}, [dark]);
|
||||
return router.on('navigate', closeMenu);
|
||||
}, []);
|
||||
|
||||
// Fermer sur touche Escape
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') closeMenu();
|
||||
};
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
return () => document.removeEventListener('keydown', handleKeyDown);
|
||||
}, []);
|
||||
|
||||
// Bloquer le scroll quand menu ouvert
|
||||
useEffect(() => {
|
||||
document.body.style.overflow = isMenuOpen ? 'hidden' : '';
|
||||
return () => { document.body.style.overflow = ''; };
|
||||
}, [isMenuOpen]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<header
|
||||
className="flex justify-between my-6 w-full max-w-[335px] text-sm not-has-[nav]:hidden lg:max-w-7xl">
|
||||
<div className="flex items-center justify-start">
|
||||
<Link
|
||||
href={home()}
|
||||
className="flex items-center justify-start gap-2 font-medium no-underline"
|
||||
>
|
||||
<div className="mb-1 flex h-9 w-9 items-center justify-center rounded-md">
|
||||
<AppLogoIcon className="size-9 text-[var(--foreground)] dark:text-white"/>
|
||||
<header className="flex justify-between items-center my-6 w-full max-w-[335px] lg:max-w-7xl text-sm">
|
||||
{/* Logo */}
|
||||
<Link href={home()} className="flex items-center gap-2 font-medium no-underline">
|
||||
<div className="flex items-center justify-center rounded-md">
|
||||
<AppLogo className="max-w-[200px] max-h-[42px] w-full h-auto" />
|
||||
</div>
|
||||
<h1 className="text-black">Le Retzien Libre</h1>
|
||||
{/*@todo: gérer l'accessibilité de l'image'*/}
|
||||
{/*<span className="font-bold text-black dark:text-white">Le Retzien Libre</span>*/}
|
||||
</Link>
|
||||
</div>
|
||||
<nav className="flex items-center justify-end gap-4">
|
||||
<Link
|
||||
href={home()}
|
||||
className="inline-block px-5 py-1.5 text-lg leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:text-[#EDEDEC] dark:hover:border-[#62605b] no-underline"
|
||||
>
|
||||
|
||||
{/* Navigation desktop */}
|
||||
<nav className="hidden lg:flex items-center gap-1">
|
||||
<Link href={home()} className="px-5 py-1.5 text-lg text-[#1b1b18] dark:text-[#EDEDEC] no-underline hover:underline">
|
||||
Accueil
|
||||
</Link>
|
||||
<Link
|
||||
href="#"
|
||||
className="inline-block px-5 py-1.5 text-lg leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:text-[#EDEDEC] dark:hover:border-[#62605b] no-underline"
|
||||
>
|
||||
<Link href="#services" className="px-5 py-1.5 text-lg text-[#1b1b18] dark:text-[#EDEDEC] no-underline hover:underline">
|
||||
Nos Services
|
||||
</Link>
|
||||
<Link
|
||||
href="#"
|
||||
className="inline-block px-5 py-1.5 text-lg leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:text-[#EDEDEC] dark:hover:border-[#62605b] no-underline"
|
||||
>
|
||||
<Link href="#" className="px-5 py-1.5 text-lg text-[#1b1b18] dark:text-[#EDEDEC] no-underline hover:underline">
|
||||
Le Blog
|
||||
</Link>
|
||||
<Link
|
||||
href={contact()}
|
||||
className="inline-block px-5 py-1.5 text-lg leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:text-[#EDEDEC] dark:hover:border-[#62605b] no-underline"
|
||||
>
|
||||
<Link href={contact()} className="px-5 py-1.5 text-lg text-[#1b1b18] dark:text-[#EDEDEC] no-underline hover:underline">
|
||||
Contact
|
||||
</Link>
|
||||
</nav>
|
||||
<nav className="flex items-center justify-end gap-4">
|
||||
|
||||
{/* Actions desktop */}
|
||||
<div className="hidden lg:flex items-center gap-3">
|
||||
|
||||
{auth.user ? (
|
||||
<>
|
||||
<Link
|
||||
href={dashboard()}
|
||||
className=" no-underline"
|
||||
>
|
||||
<Link href={dashboard()} className="no-underline">
|
||||
<Button variant="outline">Tableau de bord</Button>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
className="border-3 bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 px-4 py-2 shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-2 transition delay-50 duration-200 ease-in-out font-bold"
|
||||
href={logout()}
|
||||
onClick={handleLogout}
|
||||
className="border-3 bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 px-4 py-2 shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-2 transition delay-50 duration-200 ease-in-out font-bold no-underline"
|
||||
data-test="logout-button"
|
||||
>
|
||||
Se déconnecter
|
||||
@@ -88,26 +93,118 @@ export default function NavGuestLayout() {
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Link
|
||||
href={login()}
|
||||
>
|
||||
<Link href={login()} className="no-underline">
|
||||
<Button variant="outline">Se connecter</Button>
|
||||
</Link>
|
||||
<Link
|
||||
href={membership()}
|
||||
>
|
||||
<Link href={membership()} className="no-underline">
|
||||
<Button>Adhérer</Button>
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
<button
|
||||
onClick={() => setDark(!dark)}
|
||||
className="absolute top-4 right-4 px-3 py-1 rounded-xl border border-gray-400 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-800 transition"
|
||||
onClick={toggleAppearance}
|
||||
className="border-3 bg-primary text-secondary-foreground hover:bg-primary/80 h-10 px-4 py-2 shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-2 transition delay-50 duration-200 ease-in-out font-bold no-underline"
|
||||
aria-label="Changer le thème"
|
||||
>
|
||||
{dark ? "☀️ Mode clair" : "🌙 Mode sombre"}
|
||||
{appearance === 'dark' ? <Sun className="size-4" /> : <Moon className="size-4" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Actions mobile : thème + hamburger */}
|
||||
<div className="flex lg:hidden items-center gap-2">
|
||||
<button
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
className="border-3 bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 px-4 py-2 shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-2 transition delay-50 duration-200 ease-in-out font-bold no-underline"
|
||||
aria-label={isMenuOpen ? 'Fermer le menu' : 'Ouvrir le menu'}
|
||||
aria-expanded={isMenuOpen}
|
||||
>
|
||||
{isMenuOpen ? <X className="size-5" /> : <Menu className="size-5" />}
|
||||
</button>
|
||||
<button
|
||||
onClick={toggleAppearance}
|
||||
className="border-3 bg-primary text-secondary-foreground hover:bg-primary/80 h-10 px-4 py-2 shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-2 transition delay-50 duration-200 ease-in-out font-bold no-underline"
|
||||
aria-label="Changer le thème"
|
||||
>
|
||||
{appearance === 'dark' ? <Sun className="size-4" /> : <Moon className="size-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Menu mobile */}
|
||||
{isMenuOpen && (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0 z-40 bg-black/30 lg:hidden"
|
||||
onClick={closeMenu}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
{/* Panel */}
|
||||
<div className="fixed inset-x-0 top-0 z-50 lg:hidden bg-[#F5F5F5] dark:bg-[#0a0a0a] border-b-4 border-black flex flex-col gap-6 p-6">
|
||||
{/* En-tête du panel */}
|
||||
<div className="flex justify-between items-center">
|
||||
<Link href={home()} onClick={closeMenu} className="flex items-center gap-2 no-underline">
|
||||
<AppLogoIcon className="size-8 text-[var(--foreground)] dark:text-white" />
|
||||
<span className="font-bold text-black dark:text-white">Le Retzien Libre</span>
|
||||
</Link>
|
||||
<button
|
||||
onClick={closeMenu}
|
||||
className="p-2 rounded-md border border-black/20 dark:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 transition"
|
||||
aria-label="Fermer le menu"
|
||||
>
|
||||
<X className="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Liens de navigation */}
|
||||
<nav className="flex flex-col">
|
||||
<Link href={home()} onClick={closeMenu} className="text-lg py-3 border-b border-black/10 dark:border-white/10 no-underline">
|
||||
<span className="text-black hover:underline">Accueil</span>
|
||||
</Link>
|
||||
<Link href="#services" onClick={closeMenu} className="text-lg py-3 border-b border-black/10 dark:border-white/10 no-underline">
|
||||
<span className="text-black hover:underline">Nos Services</span>
|
||||
</Link>
|
||||
<Link href="#" onClick={closeMenu} className="text-lg py-3 border-b border-black/10 dark:border-white/10 no-underline">
|
||||
<span className="text-black hover:underline">Le Blog</span>
|
||||
</Link>
|
||||
<Link href={contact()} onClick={closeMenu} className="text-lg py-3 no-underline">
|
||||
<span className="text-black hover:underline">Contact</span>
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* Boutons auth */}
|
||||
<div className="flex flex-col gap-3">
|
||||
{auth.user ? (
|
||||
<>
|
||||
<Link href={dashboard()} onClick={closeMenu} className="no-underline mx-auto mb-4">
|
||||
<Button variant="outline" className="max-w-[150px]">Tableau de bord</Button>
|
||||
</Link>
|
||||
<Link
|
||||
href={logout()}
|
||||
method="post"
|
||||
as="button"
|
||||
onClick={() => { closeMenu(); handleLogout(); }}
|
||||
className="inline-flex items-center justify-center max-w-[150px] mx-auto gap-2 whitespace-nowrap rounded-md text-sm font-bold cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 px-4 py-2 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 w-full no-underline"
|
||||
data-test="logout-button"
|
||||
>
|
||||
Se déconnecter
|
||||
</Link>
|
||||
</>
|
||||
)
|
||||
) : (
|
||||
<>
|
||||
<Link href={login()} onClick={closeMenu} className="no-underline">
|
||||
<Button variant="outline" className="w-full">Se connecter</Button>
|
||||
</Link>
|
||||
<Link href={membership()} onClick={closeMenu} className="no-underline">
|
||||
<Button className="w-full">Adhérer</Button>
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
export default function MaintenancePage() {
|
||||
const [dark, setDark] = useState(false);
|
||||
|
||||
|
||||
@@ -1,15 +1,13 @@
|
||||
import {dashboard, home, login, register} from '@/routes';
|
||||
import {type SharedData} from '@/types';
|
||||
import {Head, Link, usePage} from '@inertiajs/react';
|
||||
import {Button} from "@/components/ui/button";
|
||||
import AppLogoIcon from "@/components/app-logo-icon";
|
||||
import illustrationImage from '@/img/utils/lrl-illustration.png';
|
||||
import NavGuestLayout from "@/layouts/nav-guest-layout";
|
||||
|
||||
import { Head } from '@inertiajs/react';
|
||||
import NavGuestLayout from '@/layouts/nav-guest-layout';
|
||||
import { HeroSection } from '@/components/features/home/HeroSection';
|
||||
import { ServicesSection } from '@/components/features/home/ServicesSection';
|
||||
import { AboutSection } from '@/components/features/home/AboutSection';
|
||||
import { AlternativeSection } from '@/components/features/home/AlternativeSection';
|
||||
import { Footer } from '@/components/footer';
|
||||
import { ScrollToTop } from '@/components/common/ScrollToTop';
|
||||
|
||||
export default function Welcome() {
|
||||
const {auth} = usePage<SharedData>().props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head title="Bienvenue">
|
||||
@@ -19,100 +17,19 @@ export default function Welcome() {
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</Head>
|
||||
<div
|
||||
className="flex min-h-screen flex-col items-center bg-[#F5F5F5] text-[#1b1b18] lg:justify-center dark:bg-[#0a0a0a]">
|
||||
<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">
|
||||
<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">
|
||||
<div
|
||||
className="flex flex-col w-full items-center accent-middle py-50 text-center 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>
|
||||
<Link
|
||||
href={register()}
|
||||
>
|
||||
<Button variant="secondary">Adhérer dès maintenant</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<main className="flex flex-col items-center">
|
||||
<HeroSection />
|
||||
<ServicesSection />
|
||||
<AboutSection />
|
||||
<AlternativeSection />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
<div className="flex w-full items-center justify-center gap-4">
|
||||
<img src={illustrationImage} alt="illustration"/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div
|
||||
className="flex flex-col items-center bg-[#F5F5F5] text-[#1b1b18] lg:justify-center dark:bg-[#0a0a0a]">
|
||||
|
||||
<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>
|
||||
<ScrollToTop />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
10
resources/js/types/index.d.ts
vendored
10
resources/js/types/index.d.ts
vendored
@@ -59,6 +59,16 @@ export interface Plans {
|
||||
}
|
||||
|
||||
|
||||
export interface Service {
|
||||
title: string;
|
||||
colorTitle: string;
|
||||
bgTitle: string;
|
||||
bgColor: string;
|
||||
description: string;
|
||||
link: string;
|
||||
illustration: string;
|
||||
}
|
||||
|
||||
export interface PageProps {
|
||||
flash?: FlashMessages;
|
||||
auth?: Auth;
|
||||
|
||||
@@ -32,9 +32,12 @@
|
||||
|
||||
<title inertia>{{ config('app.name', 'Laravel') }}</title>
|
||||
|
||||
<link rel="icon" href="/favicon.ico" sizes="any">
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" href="/favicons/favicon-96x96.png" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" />
|
||||
<link rel="shortcut icon" href="/favicons/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
|
||||
<meta name="apple-mobile-web-app-title" content="Le Retzien Libre" />
|
||||
<link rel="manifest" href="/favicons/site.webmanifest" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||
<link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />
|
||||
|
||||
@@ -7,7 +7,13 @@ import {defineConfig} from 'vite';
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
laravel({
|
||||
input: ['resources/css/app.css', 'resources/css/backend.css', 'resources/js/app.tsx', 'vendor/andreia/filament-nord-theme/resources/css/theme.css'],
|
||||
input: [
|
||||
'resources/css/app.css',
|
||||
'resources/css/backend.css',
|
||||
'resources/css/fonts.css',
|
||||
'resources/js/app.tsx',
|
||||
'vendor/andreia/filament-nord-theme/resources/css/theme.css'
|
||||
],
|
||||
ssr: 'resources/js/ssr.tsx',
|
||||
refresh: true,
|
||||
}),
|
||||
|
||||
Reference in New Issue
Block a user