Merge version_1 into main #1
292
src/app/page.tsx
292
src/app/page.tsx
@@ -30,132 +30,53 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "À propos",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Compétences",
|
||||
id: "#skills",
|
||||
},
|
||||
{
|
||||
name: "Projets",
|
||||
id: "#projects",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
{ name: "À propos", id: "#about" },
|
||||
{ name: "Compétences", id: "#skills" },
|
||||
{ name: "Projets", id: "#projects" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="SIGEL MATHIS"
|
||||
button={{ text: "Contact", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="SIGEL MATHIS"
|
||||
description="Je construis des marques qui résonnent et des campagnes qui convertissent."
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-network-particle-flow-background_1048-12212.jpg",
|
||||
imageAlt: "dark abstract background tech",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-background-with-blue-clouds_23-2148292487.jpg",
|
||||
imageAlt: "dark abstract background tech",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/desert-starry-sky-background-aesthetic-remixed-media-landscape_53876-125215.jpg",
|
||||
imageAlt: "dark abstract background tech",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-technology-digital-wave-particle-background_1048-12583.jpg",
|
||||
imageAlt: "dark abstract background tech",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-modern-background-with-rainbow-coloured-flowing-particles-design_1048-20453.jpg",
|
||||
imageAlt: "dark abstract background tech",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-network-particle-flow-background_1048-12212.jpg", imageAlt: "dark abstract background tech" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/black-background-with-blue-clouds_23-2148292487.jpg", imageAlt: "dark abstract background tech" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/desert-starry-sky-background-aesthetic-remixed-media-landscape_53876-125215.jpg", imageAlt: "dark abstract background tech" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-technology-digital-wave-particle-background_1048-12583.jpg", imageAlt: "dark abstract background tech" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-modern-background-with-rainbow-coloured-flowing-particles-design_1048-20453.jpg", imageAlt: "dark abstract background tech" }
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-digital-particles-techno-background_1048-14519.jpg",
|
||||
imageAlt: "dark abstract background tech",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/soft-white-foam_23-2147797812.jpg",
|
||||
imageAlt: "dark abstract background tech",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-particle-design-with-shallow-depth-field_1048-14034.jpg",
|
||||
imageAlt: "dark abstract background tech",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spills-azure-pigment_23-2147798207.jpg",
|
||||
imageAlt: "dark abstract background tech",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-communications-background-with-low-poly-plexus-design_1048-13614.jpg",
|
||||
imageAlt: "dark abstract background tech",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-render-digital-particles-techno-background_1048-14519.jpg", imageAlt: "dark abstract background tech" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/soft-white-foam_23-2147797812.jpg", imageAlt: "dark abstract background tech" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-particle-design-with-shallow-depth-field_1048-14034.jpg", imageAlt: "dark abstract background tech" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/spills-azure-pigment_23-2147798207.jpg", imageAlt: "dark abstract background tech" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-communications-background-with-low-poly-plexus-design_1048-13614.jpg", imageAlt: "dark abstract background tech" }
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Découvrir",
|
||||
href: "#projects",
|
||||
},
|
||||
{
|
||||
text: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
{ text: "Découvrir", href: "#projects" },
|
||||
{ text: "Contact", href: "#contact" },
|
||||
]}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-render-flowing-particles-creating-anstract-landscape-modern-technology_1048-12001.jpg",
|
||||
alt: "3D render of a flowing particles creating an anstract landscape, modern technology",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-plexus-design-with-shallow-depth-field_1048-14031.jpg",
|
||||
alt: "3D render of an abstract background, plexus design with shallow depth of field",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-abstract-background-with-colourful-low-poly-plexus-design_1048-20445.jpg",
|
||||
alt: "3D abstract background with a colourful low poly plexus design",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/abstract-triangles-background_1048-16321.jpg",
|
||||
alt: "Abstract triangles background",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/watercolor-paint-background-holi-festival_23-2148093739.jpg",
|
||||
alt: "Watercolor paint background for holi festival",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/3d-render-flowing-particles-creating-anstract-landscape-modern-technology_1048-12001.jpg", alt: "3D render of a flowing particles creating an anstract landscape, modern technology" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-plexus-design-with-shallow-depth-field_1048-14031.jpg", alt: "3D render of an abstract background, plexus design with shallow depth of field" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/3d-abstract-background-with-colourful-low-poly-plexus-design_1048-20445.jpg", alt: "3D abstract background with a colourful low poly plexus design" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/abstract-triangles-background_1048-16321.jpg", alt: "Abstract triangles background" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/watercolor-paint-background-holi-festival_23-2148093739.jpg", alt: "Watercolor paint background for holi festival" }
|
||||
]}
|
||||
avatarText="Reconnu par 50+ partenaires"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "STRATÉGIE",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "DESIGN PREMIUM",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "CONVERSION",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "INNOVATION",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "PERFORMANCE",
|
||||
},
|
||||
{ type: "text", text: "STRATÉGIE" },
|
||||
{ type: "text", text: "DESIGN PREMIUM" },
|
||||
{ type: "text", text: "CONVERSION" },
|
||||
{ type: "text", text: "INNOVATION" },
|
||||
{ type: "text", text: "PERFORMANCE" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -178,36 +99,12 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Stratégie de Marque",
|
||||
description: "Construction d'identités fortes et durables.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-ferromagnetic-metal-with-green-substance_23-2148253655.jpg",
|
||||
},
|
||||
{
|
||||
title: "Web Design",
|
||||
description: "Interfaces modernes, sharp et performantes.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-heart-shaped-lollipops_23-2149535319.jpg",
|
||||
},
|
||||
{
|
||||
title: "Campaign Management",
|
||||
description: "Campagnes qui convertissent massivement.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/menu-icon-front-side_187299-40083.jpg",
|
||||
},
|
||||
{
|
||||
title: "UI/UX",
|
||||
description: "Expériences utilisateur immersives et fluides.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/nigeria-flag-heart-banner_187299-34476.jpg",
|
||||
},
|
||||
{
|
||||
title: "Motion Design",
|
||||
description: "Animations qui donnent vie à vos idées.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/screen-icon-front-side-with-white-background_187299-39959.jpg",
|
||||
},
|
||||
{
|
||||
title: "Growth Marketing",
|
||||
description: "Analyse de données et optimisation continue.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-circuit-board-close-up_23-2149174343.jpg",
|
||||
},
|
||||
{ title: "Stratégie de Marque", description: "Construction d'identités fortes et durables.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-ferromagnetic-metal-with-green-substance_23-2148253655.jpg" },
|
||||
{ title: "Web Design", description: "Interfaces modernes, sharp et performantes.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-heart-shaped-lollipops_23-2149535319.jpg" },
|
||||
{ title: "Campaign Management", description: "Campagnes qui convertissent massivement.", imageSrc: "http://img.b2bpic.net/free-photo/menu-icon-front-side_187299-40083.jpg" },
|
||||
{ title: "UI/UX", description: "Expériences utilisateur immersives et fluides.", imageSrc: "http://img.b2bpic.net/free-photo/nigeria-flag-heart-banner_187299-34476.jpg" },
|
||||
{ title: "Motion Design", description: "Animations qui donnent vie à vos idées.", imageSrc: "http://img.b2bpic.net/free-photo/screen-icon-front-side-with-white-background_187299-39959.jpg" },
|
||||
{ title: "Growth Marketing", description: "Analyse de données et optimisation continue.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-circuit-board-close-up_23-2149174343.jpg" },
|
||||
]}
|
||||
title="Compétences"
|
||||
description="Expertise technique au service de votre vision."
|
||||
@@ -221,60 +118,12 @@ export default function LandingPage() {
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "Brand A",
|
||||
name: "Modern Campaign",
|
||||
price: "+180% ROI",
|
||||
rating: 5,
|
||||
reviewCount: "2M",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smartphone-mockup-with-floating-phones-geometric-shapes_187299-48090.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "Brand B",
|
||||
name: "UI/UX Redesign",
|
||||
price: "+95% Engagement",
|
||||
rating: 5,
|
||||
reviewCount: "500k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/broker-looking-laptop-analyzing-stock-market-invest-trading-stocks-graph_169016-48828.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "Brand C",
|
||||
name: "Social Strategy",
|
||||
price: "+210% Conversion",
|
||||
rating: 5,
|
||||
reviewCount: "1M",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/mobile-tech-horizontal-banner-template_23-2148744751.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "Brand D",
|
||||
name: "Motion Branding",
|
||||
price: "High Impact",
|
||||
rating: 5,
|
||||
reviewCount: "800k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-laptop-with-rate-charts-display-while-man-woman-working-business-project-design-computer-screen-with-data-chart-information-finance-analysis-desk_482257-40065.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
brand: "Brand E",
|
||||
name: "E-commerce Launch",
|
||||
price: "+150% Revenue",
|
||||
rating: 5,
|
||||
reviewCount: "3M",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/digital-tablet-online-learning_53876-97299.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
brand: "Brand F",
|
||||
name: "Full Refresh",
|
||||
price: "Brand Growth",
|
||||
rating: 5,
|
||||
reviewCount: "2M",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-bright-colorful-light-coming-out-laptop-screen-darkness_181624-31148.jpg",
|
||||
},
|
||||
{ id: "p1", brand: "Brand A", name: "Modern Campaign", price: "+180% ROI", rating: 5, reviewCount: "2M", imageSrc: "http://img.b2bpic.net/free-photo/smartphone-mockup-with-floating-phones-geometric-shapes_187299-48090.jpg" },
|
||||
{ id: "p2", brand: "Brand B", name: "UI/UX Redesign", price: "+95% Engagement", rating: 5, reviewCount: "500k", imageSrc: "http://img.b2bpic.net/free-photo/broker-looking-laptop-analyzing-stock-market-invest-trading-stocks-graph_169016-48828.jpg" },
|
||||
{ id: "p3", brand: "Brand C", name: "Social Strategy", price: "+210% Conversion", rating: 5, reviewCount: "1M", imageSrc: "http://img.b2bpic.net/free-vector/mobile-tech-horizontal-banner-template_23-2148744751.jpg" },
|
||||
{ id: "p4", brand: "Brand D", name: "Motion Branding", price: "High Impact", rating: 5, reviewCount: "800k", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-laptop-with-rate-charts-display-while-man-woman-working-business-project-design-computer-screen-with-data-chart-information-finance-analysis-desk_482257-40065.jpg" },
|
||||
{ id: "p5", brand: "Brand E", name: "E-commerce Launch", price: "+150% Revenue", rating: 5, reviewCount: "3M", imageSrc: "http://img.b2bpic.net/free-photo/digital-tablet-online-learning_53876-97299.jpg" },
|
||||
{ id: "p6", brand: "Brand F", name: "Full Refresh", price: "Brand Growth", rating: 5, reviewCount: "2M", imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-bright-colorful-light-coming-out-laptop-screen-darkness_181624-31148.jpg" },
|
||||
]}
|
||||
title="03. Réalisations"
|
||||
description="Sélection de projets ayant généré des résultats concrets."
|
||||
@@ -288,41 +137,11 @@ export default function LandingPage() {
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{
|
||||
id: "m1",
|
||||
name: "Lifestyle",
|
||||
role: "Capture",
|
||||
description: "Vivre l'instant.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-female-leaning-against-wooden-wall-while-her-eyes-are-closed_181624-45187.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
name: "Architecture",
|
||||
role: "Détails",
|
||||
description: "Formes épurées.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-modern-architecture-with-strong-shadows-geometric-shapes_41433-193.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
name: "Textures",
|
||||
role: "Focus",
|
||||
description: "Matière brute.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/silhouette-interior-plant-wall_23-2148870674.jpg",
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
name: "Workspace",
|
||||
role: "Studio",
|
||||
description: "Espace de travail.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-table_400718-26.jpg",
|
||||
},
|
||||
{
|
||||
id: "m5",
|
||||
name: "Travel",
|
||||
role: "Évasion",
|
||||
description: "Horizons.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-photo-sea-waves_58702-16519.jpg",
|
||||
},
|
||||
{ id: "m1", name: "Lifestyle", role: "Capture", description: "Vivre l'instant.", imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-female-leaning-against-wooden-wall-while-her-eyes-are-closed_181624-45187.jpg" },
|
||||
{ id: "m2", name: "Architecture", role: "Détails", description: "Formes épurées.", imageSrc: "http://img.b2bpic.net/free-photo/abstract-modern-architecture-with-strong-shadows-geometric-shapes_41433-193.jpg" },
|
||||
{ id: "m3", name: "Textures", role: "Focus", description: "Matière brute.", imageSrc: "http://img.b2bpic.net/free-photo/silhouette-interior-plant-wall_23-2148870674.jpg" },
|
||||
{ id: "m4", name: "Workspace", role: "Studio", description: "Espace de travail.", imageSrc: "http://img.b2bpic.net/free-photo/laptop-table_400718-26.jpg" },
|
||||
{ id: "m5", name: "Travel", role: "Évasion", description: "Horizons.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-photo-sea-waves_58702-16519.jpg" },
|
||||
]}
|
||||
title="Galerie"
|
||||
description="Moments capturés et vision créative."
|
||||
@@ -332,17 +151,12 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="CONTACT"
|
||||
title="Travaillons ensemble."
|
||||
description="Disponible pour des projets freelance."
|
||||
buttons={[
|
||||
{
|
||||
text: "mathissigel@gmail.com",
|
||||
href: "mailto:mathissigel@gmail.com",
|
||||
},
|
||||
{ text: "mathissigel@gmail.com", href: "mailto:mathissigel@gmail.com" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -352,16 +166,8 @@ export default function LandingPage() {
|
||||
logoText="SIGEL MATHIS"
|
||||
copyrightText="© 2025 | Tous droits réservés."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "https://instagram.com/mat.sigel",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
{
|
||||
icon: Linkedin,
|
||||
href: "https://linkedin.com/in/sigelmathis",
|
||||
ariaLabel: "LinkedIn",
|
||||
},
|
||||
{ icon: Instagram, href: "https://instagram.com/mat.sigel", ariaLabel: "Instagram" },
|
||||
{ icon: Linkedin, href: "https://linkedin.com/in/sigelmathis", ariaLabel: "LinkedIn" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user