This commit is contained in:
Paul Fresnel
2024-11-07 02:59:39 +01:00
parent 9e6b11930b
commit c165c30aa1
6 changed files with 156 additions and 135 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 180 KiB

+7 -15
View File
@@ -2,20 +2,12 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
:root {
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body { body {
color: var(--foreground); @apply bg-bakery-50 text-bakery-900;
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
} }
@layer components {
.container {
@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}
}
+23 -18
View File
@@ -1,21 +1,30 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import localFont from "next/font/local"; import { Playfair_Display, Raleway } from "next/font/google";
import "./globals.css"; import "./globals.css";
const geistSans = localFont({ const playfair = Playfair_Display({
src: "./fonts/GeistVF.woff", subsets: ["latin"],
variable: "--font-geist-sans", variable: '--font-playfair',
weight: "100 900", display: 'swap',
}); });
const geistMono = localFont({
src: "./fonts/GeistMonoVF.woff", const raleway = Raleway({
variable: "--font-geist-mono", subsets: ["latin"],
weight: "100 900", variable: '--font-raleway',
display: 'swap',
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Create Next App", title: "Boulangerie Artisanale - Pains & Délices",
description: "Generated by create next app", description: "Boulangerie artisanale proposant des pains traditionnels, viennoiseries et pâtisseries faits maison avec des produits de qualité.",
keywords: "boulangerie, pâtisserie, pain artisanal, viennoiseries, gâteaux, pâtisseries françaises",
metadataBase: new URL('https://votre-domaine.fr'),
openGraph: {
title: 'Boulangerie Artisanale - Pains & Délices',
description: 'Découvrez nos pains et pâtisseries artisanales',
locale: 'fr_FR',
type: 'website',
},
}; };
export default function RootLayout({ export default function RootLayout({
@@ -24,12 +33,8 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en"> <html lang="fr" className={`${playfair.variable} ${raleway.variable}`}>
<body <body className="min-h-screen bg-bakery-50">{children}</body>
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html> </html>
); );
} }
+3 -99
View File
@@ -1,101 +1,5 @@
import Image from "next/image"; import HomePage from '@/components/Homepage';
export default function Home() { export default function Home() {
return ( return <HomePage />;
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"> }
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2">
Get started by editing{" "}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
src/app/page.tsx
</code>
.
</li>
<li>Save and see your changes instantly.</li>
</ol>
<div className="flex gap-4 items-center flex-col sm:flex-row">
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Read our docs
</a>
</div>
</main>
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/file.svg"
alt="File icon"
width={16}
height={16}
/>
Learn
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org
</a>
</footer>
</div>
);
}
+106
View File
@@ -0,0 +1,106 @@
import Link from 'next/link';
import Image from 'next/image';
const HomePage = () => {
return (
<div className="min-h-screen">
{/* Hero Section */}
<section className="relative h-[80vh] bg-bakery-100">
<div className="absolute inset-0 bg-black/30" />
<div className="relative container mx-auto px-4 h-full flex items-center">
<div className="text-white max-w-2xl">
<h1 className="font-serif text-5xl mb-4">Boulangerie Artisanale</h1>
<p className="text-xl mb-8">Découvrez nos pains et pâtisseries faits maison avec passion depuis 1987</p>
<Link href="/commander" className="bg-bakery-600 hover:bg-bakery-700 text-white px-8 py-3 rounded-md inline-block transition">
Commander en ligne
</Link>
</div>
</div>
</section>
{/* Le reste du code reste identique, mais remplacez tous les `to=` par `href=` */}
{/* ... */}
{/* Nos Spécialités */}
<section className="py-16 bg-white">
<div className="container mx-auto px-4">
<h2 className="font-serif text-4xl text-center mb-12">Nos Spécialités</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{['Pains Traditionnels', 'Viennoiseries', 'Pâtisseries'].map((item, index) => (
<div key={index} className="text-center p-6 bg-bakery-50 rounded-lg">
<h3 className="font-serif text-2xl mb-4">{item}</h3>
<p className="text-bakery-700">Découvrez notre sélection de {item.toLowerCase()} préparés chaque jour avec amour.</p>
</div>
))}
</div>
</div>
</section>
{/* Notre Histoire */}
<section className="py-16 bg-bakery-50">
<div className="container mx-auto px-4">
<div className="max-w-3xl mx-auto text-center">
<h2 className="font-serif text-4xl mb-8">Notre Histoire</h2>
<p className="text-lg mb-6">
Depuis plus de 35 ans, notre boulangerie familiale perpétue la tradition du bon pain artisanal.
Chaque jour, nos artisans boulangers se lèvent tôt pour vous proposer des produits frais et authentiques.
</p>
<Link href="/notre-histoire" className="text-bakery-600 hover:text-bakery-700 font-semibold">
En savoir plus
</Link>
</div>
</div>
</section>
{/* Carte de Fidélité */}
<section className="py-16 bg-bakery-600 text-white">
<div className="container mx-auto px-4 text-center">
<h2 className="font-serif text-4xl mb-8">Carte de Fidélité</h2>
<p className="text-xl mb-8 max-w-2xl mx-auto">
Rejoignez notre programme de fidélité et bénéficiez d'avantages exclusifs.
Votre 10ème baguette offerte !
</p>
<button className="bg-white text-bakery-600 px-8 py-3 rounded-md hover:bg-bakery-50 transition">
Obtenir ma carte
</button>
</div>
</section>
{/* Horaires et Contact */}
<section className="py-16 bg-white">
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
<div>
<h2 className="font-serif text-3xl mb-6">Nos Horaires</h2>
<ul className="space-y-3">
<li className="flex justify-between">
<span>Lundi - Vendredi</span>
<span>6h30 - 19h30</span>
</li>
<li className="flex justify-between">
<span>Samedi</span>
<span>6h30 - 20h00</span>
</li>
<li className="flex justify-between">
<span>Dimanche</span>
<span>7h00 - 13h00</span>
</li>
</ul>
</div>
<div>
<h2 className="font-serif text-3xl mb-6">Contact</h2>
<address className="not-italic">
<p className="mb-2">123 Rue du Pain</p>
<p className="mb-2">75001 Paris</p>
<p className="mb-2">Tél: 01 23 45 67 89</p>
<p>Email: contact@boulangerie-artisanale.fr</p>
</address>
</div>
</div>
</div>
</section>
</div>
);
};
export default HomePage;
+17 -3
View File
@@ -9,11 +9,25 @@ const config: Config = {
theme: { theme: {
extend: { extend: {
colors: { colors: {
background: "var(--background)", 'bakery': {
foreground: "var(--foreground)", 50: '#FDF8F6',
100: '#F2E8E5',
200: '#E8D6D0',
300: '#D4B4A5',
400: '#C19277',
500: '#A67759',
600: '#8B5E43',
700: '#6F4A34',
800: '#523627',
900: '#352318',
},
},
fontFamily: {
'serif': ['var(--font-playfair)'],
'sans': ['var(--font-raleway)'],
}, },
}, },
}, },
plugins: [], plugins: [],
}; };
export default config; export default config;