14 Commits

Author SHA1 Message Date
e07c8a81f1 Update theme colors 2026-03-06 13:41:58 +00:00
fad956a961 Update src/app/services/page.tsx 2026-03-06 13:40:37 +00:00
051138fa79 Update src/app/portfolio/page.tsx 2026-03-06 13:40:37 +00:00
f4930f4124 Update src/app/page.tsx 2026-03-06 13:40:37 +00:00
0423c73f1f Update src/app/about/page.tsx 2026-03-06 13:40:36 +00:00
babf81f9fb Update src/app/styles/variables.css 2026-03-06 13:39:25 +00:00
7eac9b21d3 Update src/app/styles/base.css 2026-03-06 13:39:24 +00:00
edf5b43d5d Update src/app/services/page.tsx 2026-03-06 13:39:24 +00:00
e3f9da7843 Update src/app/portfolio/page.tsx 2026-03-06 13:39:23 +00:00
c7243d6f1c Update src/app/page.tsx 2026-03-06 13:39:23 +00:00
939fceba8b Update src/app/layout.tsx 2026-03-06 13:39:22 +00:00
90b5889066 Update src/app/contact/page.tsx 2026-03-06 13:39:22 +00:00
e49c869033 Update src/app/about/page.tsx 2026-03-06 13:39:21 +00:00
24f5ce3ae7 Merge version_1 into main
Merge version_1 into main
2026-03-06 13:28:29 +00:00
8 changed files with 83 additions and 269 deletions

View File

@@ -30,12 +30,10 @@ export default function AboutPage() {
secondaryButtonStyle="radial-glow" secondaryButtonStyle="radial-glow"
headingFontWeight="bold" headingFontWeight="bold"
> >
{/* Navbar */}
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleApple brandName="Rami Haddad" navItems={navItems} /> <NavbarStyleApple brandName="Rami Haddad" navItems={navItems} />
</div> </div>
{/* About Section */}
<div id="about" data-section="about"> <div id="about" data-section="about">
<SplitAbout <SplitAbout
title="Qui est Rami Haddad" title="Qui est Rami Haddad"
@@ -44,28 +42,20 @@ export default function AboutPage() {
tagAnimation="slide-up" tagAnimation="slide-up"
bulletPoints={[ bulletPoints={[
{ {
title: "Créativité", title: "Créativité", description: "Chaque projet est une opportunité d'explorer de nouvelles perspectives et de repousser les limites créatives.", icon: Sparkles,
description: "Chaque projet est une opportunité d'explorer de nouvelles perspectives et de repousser les limites créatives.",
icon: Sparkles,
}, },
{ {
title: "Moments authentiques", title: "Moments authentiques", description: "Je capture des instants vrais et spontanés qui racontent une histoire émotionnelle.", icon: Heart,
description: "Je capture des instants vrais et spontanés qui racontent une histoire émotionnelle.",
icon: Heart,
}, },
{ {
title: "Attention au détail", title: "Attention au détail", description: "Chaque élément, de la lumière à la composition, est pensé avec soin pour un résultat impeccable.", icon: Eye,
description: "Chaque élément, de la lumière à la composition, est pensé avec soin pour un résultat impeccable.",
icon: Eye,
}, },
{ {
title: "Narration visuelle", title: "Narration visuelle", description: "La photographie est un langage ; je raconte des histoires à travers mes images.", icon: BookOpen,
description: "La photographie est un langage ; je raconte des histoires à travers mes images.",
icon: BookOpen,
}, },
]} ]}
imageSrc="http://img.b2bpic.net/free-photo/full-shot-woman-working-as-photographer_52683-110079.jpg?_wi=2" imageSrc="https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=800&q=80&_wi=3"
imageAlt="Rami Haddad, photographe" imageAlt="Rami Haddad, photographe professionnel"
mediaAnimation="slide-up" mediaAnimation="slide-up"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
@@ -74,7 +64,6 @@ export default function AboutPage() {
/> />
</div> </div>
{/* Portfolio Categories */}
<div id="categories" data-section="categories"> <div id="categories" data-section="categories">
<FeatureCardTwentySeven <FeatureCardTwentySeven
title="Domaines de spécialité" title="Domaines de spécialité"
@@ -83,26 +72,11 @@ export default function AboutPage() {
tagAnimation="slide-up" tagAnimation="slide-up"
features={[ features={[
{ {
id: "portrait", id: "portrait", title: "Portrait", description: "Portraits professionnels, marque personnelle et portraits artistiques qui capturent l'essence du sujet.", imageSrc: "https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?w=800&q=80&_wi=4", imageAlt: "Portrait photography male professional"},
title: "Portrait",
description: "Portraits professionnels, marque personnelle et portraits artistiques qui capturent l'essence du sujet.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021812.jpg?_wi=3",
imageAlt: "Portrait photography",
},
{ {
id: "event", id: "event", title: "Événement", description: "Couverture complète des événements corporatifs, célébrations et événements culturels avec une perspective dynamique.", imageSrc: "https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=800&q=80&_wi=5", imageAlt: "Event photography professional"},
title: "Événement",
description: "Couverture complète des événements corporatifs, célébrations et événements culturels avec une perspective dynamique.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-friends-hanging-out_23-2149143994.jpg?_wi=3",
imageAlt: "Event photography",
},
{ {
id: "nature", id: "nature", title: "Nature", description: "Photographie de paysages et de nature du Québec et au-delà, explorant la beauté brute de l'environnement.", imageSrc: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80&_wi=6", imageAlt: "Nature photography landscape"},
title: "Nature",
description: "Photographie de paysages et de nature du Québec et au-delà, explorant la beauté brute de l'environnement.",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-blue-lake-surrounded-with-tall-trees_181624-22773.jpg?_wi=3",
imageAlt: "Nature photography",
},
]} ]}
gridVariant="three-columns-all-equal-width" gridVariant="three-columns-all-equal-width"
animationType="slide-up" animationType="slide-up"
@@ -112,7 +86,6 @@ export default function AboutPage() {
/> />
</div> </div>
{/* Call to Action */}
<div id="contact-cta" data-section="contact-cta"> <div id="contact-cta" data-section="contact-cta">
<ContactText <ContactText
text="Vous avez un projet photo en tête ? Parlons de votre vision et créons quelque chose d'extraordinaire ensemble." text="Vous avez un projet photo en tête ? Parlons de votre vision et créons quelque chose d'extraordinaire ensemble."
@@ -120,26 +93,21 @@ export default function AboutPage() {
background={{ variant: "plain" }} background={{ variant: "plain" }}
useInvertedBackground={false} useInvertedBackground={false}
buttons={[ buttons={[
{ text: "Contactez-moi", href: "/contact" }, { text: "Contactez-moi", href: "contact" },
{ text: "Voir Portfolio", href: "/portfolio" }, { text: "Voir Portfolio", href: "portfolio" },
]} ]}
/> />
</div> </div>
{/* Footer */}
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterLogoReveal <FooterLogoReveal
logoText="Rami Haddad" logoText="Rami Haddad"
leftLink={{ leftLink={{
text: "Politique de confidentialité", text: "Politique de confidentialité", href: "#"}}
href: "#",
}}
rightLink={{ rightLink={{
text: "Conditions d'utilisation", text: "Conditions d'utilisation", href: "#"}}
href: "#",
}}
/> />
</div> </div>
</ThemeProvider> </ThemeProvider>
); );
} }

View File

@@ -27,7 +27,6 @@ export default function ContactPage() {
secondaryButtonStyle="radial-glow" secondaryButtonStyle="radial-glow"
headingFontWeight="bold" headingFontWeight="bold"
> >
{/* Navigation */}
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleApple <NavbarStyleApple
brandName="Rami Haddad" brandName="Rami Haddad"
@@ -40,7 +39,6 @@ export default function ContactPage() {
/> />
</div> </div>
{/* Contact Section */}
<div id="contact-cta" data-section="contact-cta"> <div id="contact-cta" data-section="contact-cta">
<ContactText <ContactText
text="Vous avez un projet photo en tête ? Parlons de votre vision et créons quelque chose d'extraordinaire ensemble." text="Vous avez un projet photo en tête ? Parlons de votre vision et créons quelque chose d'extraordinaire ensemble."
@@ -49,12 +47,11 @@ export default function ContactPage() {
useInvertedBackground={false} useInvertedBackground={false}
buttons={[ buttons={[
{ text: "Contactez-moi", href: "#" }, { text: "Contactez-moi", href: "#" },
{ text: "Voir Portfolio", href: "#" }, { text: "Voir Portfolio", href: "portfolio" },
]} ]}
/> />
</div> </div>
{/* Footer */}
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterLogoReveal <FooterLogoReveal
logoText="Rami Haddad" logoText="Rami Haddad"
@@ -64,4 +61,4 @@ export default function ContactPage() {
</div> </div>
</ThemeProvider> </ThemeProvider>
); );
} }

View File

@@ -1,54 +1,31 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Halant } from "next/font/google"; import { Poppins } from "next/font/google";
import { Inter } from "next/font/google"; import { Manrope } from "next/font/google";
import { Lato } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper"; import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag"; import Tag from "@/tag/Tag";
const halant = Halant({ const poppins = Poppins({
variable: "--font-halant", variable: "--font-poppins", subsets: ["latin"],
subsets: ["latin"], weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
weight: ["300", "400", "500", "600", "700"],
}); });
const inter = Inter({ const manrope = Manrope({
variable: "--font-inter", variable: "--font-manrope", subsets: ["latin"],
subsets: ["latin"],
});
const lato = Lato({
variable: "--font-lato",
subsets: ["latin"],
weight: ["100", "300", "400", "700", "900"],
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Rami Haddad Photographe | Portrait • Événement • Nature au Québec", title: "Rami Haddad Photographe | Portrait • Événement • Nature au Québec", description: "Photographe professionnel au Québec spécialisé en portrait, événement et photographie de nature. Exploration créative et moments authentiques capturés avec passion.", keywords: "photographe québec, portrait photography, event photography, nature photography, rami haddad", metadataBase: new URL("https://ramihaddad.com"),
description: "Photographe professionnel au Québec spécialisé en portrait, événement et photographie de nature. Exploration créative et moments authentiques capturés avec passion.",
keywords: "photographe québec, portrait photography, event photography, nature photography, rami haddad",
metadataBase: new URL("https://ramihaddad.com"),
alternates: { alternates: {
canonical: "https://ramihaddad.com", canonical: "https://ramihaddad.com"},
},
openGraph: { openGraph: {
title: "Rami Haddad Photographe | Portrait • Événement • Nature", title: "Rami Haddad Photographe | Portrait • Événement • Nature", description: "Découvrez le portfolio de Rami Haddad, photographe professionnel basé au Québec.", url: "https://ramihaddad.com", siteName: "Rami Haddad Photographe", type: "website", images: [
description: "Découvrez le portfolio de Rami Haddad, photographe professionnel basé au Québec.",
url: "https://ramihaddad.com",
siteName: "Rami Haddad Photographe",
type: "website",
images: [
{ {
url: "http://img.b2bpic.net/free-photo/woman-taking-photo_53876-32442.jpg", url: "http://img.b2bpic.net/free-photo/woman-taking-photo_53876-32442.jpg", alt: "Rami Haddad Photography Portfolio"},
alt: "Rami Haddad Photography Portfolio",
},
], ],
}, },
twitter: { twitter: {
card: "summary_large_image", card: "summary_large_image", title: "Rami Haddad Photographe", description: "Portrait • Événement • Nature", images: ["http://img.b2bpic.net/free-photo/woman-taking-photo_53876-32442.jpg"],
title: "Rami Haddad Photographe",
description: "Portrait • Événement • Nature",
images: ["http://img.b2bpic.net/free-photo/woman-taking-photo_53876-32442.jpg"],
}, },
robots: { robots: {
index: true, index: true,
@@ -65,7 +42,7 @@ export default function RootLayout({
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<ServiceWrapper> <ServiceWrapper>
<body <body
className={`${halant.variable} ${inter.variable} ${lato.variable} antialiased`} className={`${poppins.variable} ${manrope.variable} antialiased`}
> >
<Tag /> <Tag />
{children} {children}
@@ -1440,4 +1417,4 @@ export default function RootLayout({
</ServiceWrapper> </ServiceWrapper>
</html> </html>
); );
} }

View File

@@ -46,19 +46,15 @@ export default function HomePage() {
background={{ variant: "plain" }} background={{ variant: "plain" }}
mediaItems={[ mediaItems={[
{ {
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-16021.jpg", imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&q=80&_wi=1", imageAlt: "Professional male photographer portrait studio"},
imageAlt: "Professional portrait photography black background",
},
{ {
imageSrc: "http://img.b2bpic.net/free-photo/good-friends-having-new-year-party_23-2149144094.jpg", imageSrc: "https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=800&q=80&_wi=1", imageAlt: "Professional event photography male photographer at work"},
imageAlt: "Event photography celebration moment",
},
]} ]}
rating={5} rating={5}
ratingText="Capturing authentic moments" ratingText="Capturing authentic moments"
buttons={[ buttons={[
{ text: "Voir le Portfolio", href: "/portfolio" }, { text: "Voir le Portfolio", href: "portfolio" },
{ text: "Réserver une séance", href: "#contact" }, { text: "Réserver une séance", href: "contact" },
]} ]}
buttonAnimation="slide-up" buttonAnimation="slide-up"
mediaAnimation="slide-up" mediaAnimation="slide-up"
@@ -69,26 +65,11 @@ export default function HomePage() {
<FeatureCardTwentySeven <FeatureCardTwentySeven
features={[ features={[
{ {
id: "portrait", id: "portrait", title: "Portrait", description: "Portraits professionnels, marque personnelle et portraits artistiques qui capturent l'essence du sujet.", imageSrc: "https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?w=800&q=80&_wi=1", imageAlt: "Professional male portrait photography studio elegant"},
title: "Portrait",
description: "Portraits professionnels, marque personnelle et portraits artistiques qui capturent l'essence du sujet.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021812.jpg?_wi=1",
imageAlt: "Professional portrait photography studio elegant",
},
{ {
id: "event", id: "event", title: "Événement", description: "Couverture complète des événements corporatifs, célébrations et événements culturels avec une perspective dynamique.", imageSrc: "https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=800&q=80&_wi=1", imageAlt: "Event photography celebration moment professional"},
title: "Événement",
description: "Couverture complète des événements corporatifs, célébrations et événements culturels avec une perspective dynamique.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-friends-hanging-out_23-2149143994.jpg?_wi=1",
imageAlt: "Event photography celebration moment",
},
{ {
id: "nature", id: "nature", title: "Nature", description: "Photographie de paysages et de nature du Québec et au-delà, explorant la beauté brute de l'environnement.", imageSrc: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80&_wi=1", imageAlt: "Landscape photography nature scenic mountain vista"},
title: "Nature",
description: "Photographie de paysages et de nature du Québec et au-delà, explorant la beauté brute de l'environnement.",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-blue-lake-surrounded-with-tall-trees_181624-22773.jpg?_wi=1",
imageAlt: "Landscape photography nature scenic",
},
]} ]}
gridVariant="three-columns-all-equal-width" gridVariant="three-columns-all-equal-width"
animationType="slide-up" animationType="slide-up"
@@ -110,28 +91,20 @@ export default function HomePage() {
tagAnimation="slide-up" tagAnimation="slide-up"
bulletPoints={[ bulletPoints={[
{ {
title: "Créativité", title: "Créativité", description: "Chaque projet est une opportunité d'explorer de nouvelles perspectives et de repousser les limites créatives.", icon: Sparkles,
description: "Chaque projet est une opportunité d'explorer de nouvelles perspectives et de repousser les limites créatives.",
icon: Sparkles,
}, },
{ {
title: "Moments authentiques", title: "Moments authentiques", description: "Je capture des instants vrais et spontanés qui racontent une histoire émotionnelle.", icon: Heart,
description: "Je capture des instants vrais et spontanés qui racontent une histoire émotionnelle.",
icon: Heart,
}, },
{ {
title: "Attention au détail", title: "Attention au détail", description: "Chaque élément, de la lumière à la composition, est pensé avec soin pour un résultat impeccable.", icon: Eye,
description: "Chaque élément, de la lumière à la composition, est pensé avec soin pour un résultat impeccable.",
icon: Eye,
}, },
{ {
title: "Narration visuelle", title: "Narration visuelle", description: "La photographie est un langage ; je raconte des histoires à travers mes images.", icon: BookOpen,
description: "La photographie est un langage ; je raconte des histoires à travers mes images.",
icon: BookOpen,
}, },
]} ]}
imageSrc="http://img.b2bpic.net/free-photo/full-shot-woman-working-as-photographer_52683-110079.jpg?_wi=1" imageSrc="https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=800&q=80&_wi=2"
imageAlt="Rami Haddad, photographe" imageAlt="Rami Haddad, photographe professionnel au travail"
mediaAnimation="slide-up" mediaAnimation="slide-up"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
@@ -144,26 +117,11 @@ export default function HomePage() {
<ProductCardThree <ProductCardThree
products={[ products={[
{ {
id: "gallery-item-1", id: "gallery-item-1", name: "Portrait Studio", price: "À partir de 250$", imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&q=80&_wi=2", imageAlt: "Professional portrait photography studio male model"},
name: "Portrait Studio",
price: "À partir de 250$",
imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-chair-being-photographed_23-2148565559.jpg?_wi=1",
imageAlt: "Professional portrait photography studio",
},
{ {
id: "gallery-item-2", id: "gallery-item-2", name: "Événement Pro", price: "À partir de 800$", imageSrc: "https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=800&q=80&_wi=2", imageAlt: "Event photography professional coverage celebration"},
name: "Événement Pro",
price: "À partir de 800$",
imageSrc: "http://img.b2bpic.net/free-photo/fancy-dressed-man-woman-silver-gown-hug-each-other-tender-standing-before-christmas-tree_8353-9054.jpg?_wi=1",
imageAlt: "Event photography celebration capture",
},
{ {
id: "gallery-item-3", id: "gallery-item-3", name: "Nature & Paysage", price: "À partir de 300$", imageSrc: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80&_wi=2", imageAlt: "Landscape photography nature scenic mountain beautiful"},
name: "Nature & Paysage",
price: "À partir de 300$",
imageSrc: "http://img.b2bpic.net/free-photo/skjolden-norway-may-16-2023-mountain_58702-16470.jpg?_wi=1",
imageAlt: "Landscape photography nature scenic beautiful",
},
]} ]}
gridVariant="three-columns-all-equal-width" gridVariant="three-columns-all-equal-width"
animationType="slide-up" animationType="slide-up"
@@ -181,26 +139,11 @@ export default function HomePage() {
<FeatureCardTwentySeven <FeatureCardTwentySeven
features={[ features={[
{ {
id: "service-portrait", id: "service-portrait", title: "Photographie de Portrait", description: "Portraits professionnels pour la marque personnelle, shootings artistiques et portraits en studio ou en extérieur avec éclairage premium.", imageSrc: "https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?w=800&q=80&_wi=2", imageAlt: "Professional portrait photography session male subject"},
title: "Photographie de Portrait",
description: "Portraits professionnels pour la marque personnelle, shootings artistiques et portraits en studio ou en extérieur avec éclairage premium.",
imageSrc: "http://img.b2bpic.net/free-photo/fashion-beautiful-elegant-young-woman-pretty-black-sweater_114579-81915.jpg?_wi=1",
imageAlt: "Professional portrait photography session",
},
{ {
id: "service-event", id: "service-event", title: "Photographie d'Événement", description: "Couverture complète d'événements corporatifs, mariages, célébrations avec capture des moments clés et ambiance générale.", imageSrc: "https://images.unsplash.com/photo-1514320291840-2e0a9bf2a9ae?w=800&q=80&_wi=1", imageAlt: "Event photography professional celebration moment"},
title: "Photographie d'Événement",
description: "Couverture complète d'événements corporatifs, mariages, célébrations avec capture des moments clés et ambiance générale.",
imageSrc: "http://img.b2bpic.net/free-photo/beach-party-sunset_1098-13571.jpg?_wi=1",
imageAlt: "Event photography celebration professional",
},
{ {
id: "service-nature", id: "service-nature", title: "Photographie de Nature", description: "Photographie de paysages et exploration de la nature, du Québec aux destinations lointaines, avec expertise en conditions variées.", imageSrc: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80&_wi=3", imageAlt: "Landscape photography nature scenic professional"},
title: "Photographie de Nature",
description: "Photographie de paysages et exploration de la nature, du Québec aux destinations lointaines, avec expertise en conditions variées.",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-trees-lake-maksimir-park-zagreb-croatia-springtime_181624-22043.jpg?_wi=1",
imageAlt: "Landscape photography nature scenic",
},
]} ]}
gridVariant="three-columns-all-equal-width" gridVariant="three-columns-all-equal-width"
animationType="slide-up" animationType="slide-up"
@@ -209,7 +152,7 @@ export default function HomePage() {
tag="Services" tag="Services"
tagIcon={Camera} tagIcon={Camera}
tagAnimation="slide-up" tagAnimation="slide-up"
buttons={[{ text: "Vous avez un projet ?", href: "#contact" }]} buttons={[{ text: "Vous avez un projet ?", href: "contact" }]}
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
buttonAnimation="slide-up" buttonAnimation="slide-up"
@@ -223,8 +166,8 @@ export default function HomePage() {
background={{ variant: "plain" }} background={{ variant: "plain" }}
useInvertedBackground={false} useInvertedBackground={false}
buttons={[ buttons={[
{ text: "Contactez-moi", href: "#contact" }, { text: "Contactez-moi", href: "contact" },
{ text: "Voir Portfolio", href: "/portfolio" }, { text: "Voir Portfolio", href: "portfolio" },
]} ]}
/> />
</div> </div>
@@ -238,4 +181,4 @@ export default function HomePage() {
</div> </div>
</ThemeProvider> </ThemeProvider>
); );
} }

View File

@@ -37,26 +37,11 @@ export default function PortfolioPage() {
<FeatureCardTwentySeven <FeatureCardTwentySeven
features={[ features={[
{ {
id: "portfolio-portrait", id: "portfolio-portrait", title: "Portrait", description: "Exploration approfondie de la photographie de portrait, capturant l'essence et la personnalité de chaque sujet avec éclairage et composition maîtrisés.", imageSrc: "https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?w=800&q=80&_wi=3", imageAlt: "Professional male portrait photography studio elegant"},
title: "Portrait",
description: "Exploration approfondie de la photographie de portrait, capturant l'essence et la personnalité de chaque sujet avec éclairage et composition maîtrisés.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021812.jpg?_wi=2",
imageAlt: "Professional portrait photography studio elegant",
},
{ {
id: "portfolio-event", id: "portfolio-event", title: "Événement", description: "Couverture complète d'événements, des mariages aux événements corporatifs, capturant les moments émouvants et la dynamique de chaque occasion.", imageSrc: "https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=800&q=80&_wi=3", imageAlt: "Event photography celebration moment professional"},
title: "Événement",
description: "Couverture complète d'événements, des mariages aux événements corporatifs, capturant les moments émouvants et la dynamique de chaque occasion.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-friends-hanging-out_23-2149143994.jpg?_wi=2",
imageAlt: "Event photography celebration moment",
},
{ {
id: "portfolio-nature", id: "portfolio-nature", title: "Nature", description: "Photographie de paysages et de nature showcasing la beauté sauvage du Québec et au-delà, explorant la lumière naturelle et les compositions époustouflantes.", imageSrc: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80&_wi=4", imageAlt: "Landscape photography nature scenic professional"},
title: "Nature",
description: "Photographie de paysages et de nature showcasing la beauté sauvage du Québec et au-delà, explorant la lumière naturelle et les compositions époustouflantes.",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-blue-lake-surrounded-with-tall-trees_181624-22773.jpg?_wi=2",
imageAlt: "Landscape photography nature scenic",
},
]} ]}
gridVariant="three-columns-all-equal-width" gridVariant="three-columns-all-equal-width"
animationType="slide-up" animationType="slide-up"
@@ -74,26 +59,11 @@ export default function PortfolioPage() {
<ProductCardThree <ProductCardThree
products={[ products={[
{ {
id: "work-1", id: "work-1", name: "Séance Portrait Studio", price: "Galerie 1", imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&q=80&_wi=3", imageAlt: "Professional portrait photography studio male model"},
name: "Séance Portrait Studio",
price: "Galerie 1",
imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-chair-being-photographed_23-2148565559.jpg?_wi=2",
imageAlt: "Professional portrait photography studio",
},
{ {
id: "work-2", id: "work-2", name: "Capture Événement", price: "Galerie 2", imageSrc: "https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=800&q=80&_wi=4", imageAlt: "Event photography professional celebration capture"},
name: "Capture Événement",
price: "Galerie 2",
imageSrc: "http://img.b2bpic.net/free-photo/fancy-dressed-man-woman-silver-gown-hug-each-other-tender-standing-before-christmas-tree_8353-9054.jpg?_wi=2",
imageAlt: "Event photography celebration capture",
},
{ {
id: "work-3", id: "work-3", name: "Paysage Nature", price: "Galerie 3", imageSrc: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80&_wi=5", imageAlt: "Landscape photography nature scenic mountain beautiful"},
name: "Paysage Nature",
price: "Galerie 3",
imageSrc: "http://img.b2bpic.net/free-photo/skjolden-norway-may-16-2023-mountain_58702-16470.jpg?_wi=2",
imageAlt: "Landscape photography nature scenic beautiful",
},
]} ]}
gridVariant="three-columns-all-equal-width" gridVariant="three-columns-all-equal-width"
animationType="slide-up" animationType="slide-up"
@@ -114,7 +84,7 @@ export default function PortfolioPage() {
background={{ variant: "plain" }} background={{ variant: "plain" }}
useInvertedBackground={false} useInvertedBackground={false}
buttons={[ buttons={[
{ text: "Contactez-moi", href: "#contact" }, { text: "Contactez-moi", href: "contact" },
{ text: "Retour à l'accueil", href: "/" }, { text: "Retour à l'accueil", href: "/" },
]} ]}
/> />
@@ -129,4 +99,4 @@ export default function PortfolioPage() {
</div> </div>
</ThemeProvider> </ThemeProvider>
); );
} }

View File

@@ -30,12 +30,10 @@ export default function ServicesPage() {
secondaryButtonStyle="radial-glow" secondaryButtonStyle="radial-glow"
headingFontWeight="bold" headingFontWeight="bold"
> >
{/* Navbar */}
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleApple brandName="Rami Haddad" navItems={navItems} /> <NavbarStyleApple brandName="Rami Haddad" navItems={navItems} />
</div> </div>
{/* Services Section */}
<div id="services" data-section="services"> <div id="services" data-section="services">
<FeatureCardTwentySeven <FeatureCardTwentySeven
title="Services Photographiques" title="Services Photographiques"
@@ -45,26 +43,11 @@ export default function ServicesPage() {
tagAnimation="slide-up" tagAnimation="slide-up"
features={[ features={[
{ {
id: "service-portrait", id: "service-portrait", title: "Photographie de Portrait", description: "Portraits professionnels pour la marque personnelle, shootings artistiques et portraits en studio ou en extérieur avec éclairage premium.", imageSrc: "https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?w=800&q=80&_wi=5", imageAlt: "Professional portrait service male photographer"},
title: "Photographie de Portrait",
description: "Portraits professionnels pour la marque personnelle, shootings artistiques et portraits en studio ou en extérieur avec éclairage premium.",
imageSrc: "http://img.b2bpic.net/free-photo/fashion-beautiful-elegant-young-woman-pretty-black-sweater_114579-81915.jpg?_wi=2",
imageAlt: "Professional portrait service",
},
{ {
id: "service-event", id: "service-event", title: "Photographie d'Événement", description: "Couverture complète d'événements corporatifs, mariages, célébrations avec capture des moments clés et ambiance générale.", imageSrc: "https://images.unsplash.com/photo-1514320291840-2e0a9bf2a9ae?w=800&q=80&_wi=2", imageAlt: "Event photography service professional"},
title: "Photographie d'Événement",
description: "Couverture complète d'événements corporatifs, mariages, célébrations avec capture des moments clés et ambiance générale.",
imageSrc: "http://img.b2bpic.net/free-photo/beach-party-sunset_1098-13571.jpg?_wi=2",
imageAlt: "Event photography service",
},
{ {
id: "service-nature", id: "service-nature", title: "Photographie de Nature", description: "Photographie de paysages et exploration de la nature, du Québec aux destinations lointaines, avec expertise en conditions variées.", imageSrc: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80&_wi=7", imageAlt: "Nature photography service landscape"},
title: "Photographie de Nature",
description: "Photographie de paysages et exploration de la nature, du Québec aux destinations lointaines, avec expertise en conditions variées.",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-trees-lake-maksimir-park-zagreb-croatia-springtime_181624-22043.jpg?_wi=2",
imageAlt: "Nature photography service",
},
]} ]}
gridVariant="three-columns-all-equal-width" gridVariant="three-columns-all-equal-width"
animationType="slide-up" animationType="slide-up"
@@ -72,15 +55,12 @@ export default function ServicesPage() {
useInvertedBackground={false} useInvertedBackground={false}
buttons={[ buttons={[
{ {
text: "Vous avez un projet ?", text: "Vous avez un projet ?", href: "contact"},
href: "/contact",
},
]} ]}
buttonAnimation="slide-up" buttonAnimation="slide-up"
/> />
</div> </div>
{/* Gallery Showcase */}
<div id="gallery" data-section="gallery"> <div id="gallery" data-section="gallery">
<ProductCardThree <ProductCardThree
title="Galerie Mise en avant" title="Galerie Mise en avant"
@@ -89,26 +69,11 @@ export default function ServicesPage() {
tagAnimation="slide-up" tagAnimation="slide-up"
products={[ products={[
{ {
id: "gallery-item-1", id: "gallery-item-1", name: "Portrait Studio", price: "À partir de 250$", imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&q=80&_wi=4", imageAlt: "Studio portrait session male model"},
name: "Portrait Studio",
price: "À partir de 250$",
imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-chair-being-photographed_23-2148565559.jpg?_wi=3",
imageAlt: "Studio portrait session",
},
{ {
id: "gallery-item-2", id: "gallery-item-2", name: "Événement Pro", price: "À partir de 800$", imageSrc: "https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=800&q=80&_wi=6", imageAlt: "Professional event coverage celebration"},
name: "Événement Pro",
price: "À partir de 800$",
imageSrc: "http://img.b2bpic.net/free-photo/fancy-dressed-man-woman-silver-gown-hug-each-other-tender-standing-before-christmas-tree_8353-9054.jpg?_wi=3",
imageAlt: "Professional event coverage",
},
{ {
id: "gallery-item-3", id: "gallery-item-3", name: "Nature & Paysage", price: "À partir de 300$", imageSrc: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80&_wi=8", imageAlt: "Landscape photography nature scenic"},
name: "Nature & Paysage",
price: "À partir de 300$",
imageSrc: "http://img.b2bpic.net/free-photo/skjolden-norway-may-16-2023-mountain_58702-16470.jpg?_wi=3",
imageAlt: "Landscape photography",
},
]} ]}
gridVariant="three-columns-all-equal-width" gridVariant="three-columns-all-equal-width"
animationType="slide-up" animationType="slide-up"
@@ -118,7 +83,6 @@ export default function ServicesPage() {
/> />
</div> </div>
{/* Call to Action */}
<div id="contact-cta" data-section="contact-cta"> <div id="contact-cta" data-section="contact-cta">
<ContactText <ContactText
text="Vous avez un projet photo en tête ? Parlons de votre vision et créons quelque chose d'extraordinaire ensemble." text="Vous avez un projet photo en tête ? Parlons de votre vision et créons quelque chose d'extraordinaire ensemble."
@@ -126,26 +90,21 @@ export default function ServicesPage() {
background={{ variant: "plain" }} background={{ variant: "plain" }}
useInvertedBackground={false} useInvertedBackground={false}
buttons={[ buttons={[
{ text: "Contactez-moi", href: "/contact" }, { text: "Contactez-moi", href: "contact" },
{ text: "Voir Portfolio", href: "/portfolio" }, { text: "Voir Portfolio", href: "portfolio" },
]} ]}
/> />
</div> </div>
{/* Footer */}
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterLogoReveal <FooterLogoReveal
logoText="Rami Haddad" logoText="Rami Haddad"
leftLink={{ leftLink={{
text: "Politique de confidentialité", text: "Politique de confidentialité", href: "#"}}
href: "#",
}}
rightLink={{ rightLink={{
text: "Conditions d'utilisation", text: "Conditions d'utilisation", href: "#"}}
href: "#",
}}
/> />
</div> </div>
</ThemeProvider> </ThemeProvider>
); );
} }

View File

@@ -11,7 +11,7 @@ html {
body { body {
background-color: var(--background); background-color: var(--background);
color: var(--foreground); color: var(--foreground);
font-family: var(--font-lato), sans-serif; font-family: var(--font-poppins), sans-serif;
position: relative; position: relative;
min-height: 100vh; min-height: 100vh;
overscroll-behavior: none; overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: var(--font-lato), sans-serif; font-family: var(--font-manrope), sans-serif;
} }

View File

@@ -10,15 +10,15 @@
--accent: #ffffff; --accent: #ffffff;
--background-accent: #ffffff; */ --background-accent: #ffffff; */
--background: #f7f6f7; --background: #fcf6ec;
--card: #ffffff; --card: #f3ede2;
--foreground: #0c1325; --foreground: #2e2521;
--primary-cta: #0798ff; --primary-cta: #2e2521;
--primary-cta-text: #f7f6f7; --primary-cta-text: #fcf6ec;
--secondary-cta: #ffffff; --secondary-cta: #ffffff;
--secondary-cta-text: #0c1325; --secondary-cta-text: #2e2521;
--accent: #93c7ff; --accent: #b2a28b;
--background-accent: #a8cde8; --background-accent: #b2a28b;
/* text sizing - set by ThemeProvider */ /* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);