Merge version_2 into main #2
292
src/app/page.tsx
292
src/app/page.tsx
@@ -31,21 +31,13 @@ export default function LandingPage() {
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
name: "Home / Accueil", id: "hero"},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
name: "Services", id: "services"},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
name: "Pricing / Tarifs", id: "pricing"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CZxiJwhJtXkuw7LSFfzWhe8AAx/uploaded-1777490213660-9rx53xz5.png"
|
||||
brandName="Grid Studio"
|
||||
@@ -55,116 +47,36 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Elevating Digital Experiences"
|
||||
description="Grid Studio builds high-performance, future-proof websites for ambitious brands. Precision design meets scalable architecture."
|
||||
variant: "gradient-bars"}}
|
||||
title="Elevating Digital Experiences | Élever les expériences numériques"
|
||||
description="Grid Studio builds high-performance, future-proof websites for ambitious brands. | Grid Studio conçoit des sites web haute performance pour des marques ambitieuses."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Jane Doe",
|
||||
handle: "@janedoe",
|
||||
testimonial: "Exceptional design and delivery.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",
|
||||
},
|
||||
name: "Jane Doe", handle: "@janedoe", testimonial: "Exceptional design and delivery. | Design et livraison exceptionnels.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg"},
|
||||
{
|
||||
name: "John Smith",
|
||||
handle: "@jsmith",
|
||||
testimonial: "Best development partner we've had.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg",
|
||||
},
|
||||
{
|
||||
name: "Emily Chen",
|
||||
handle: "@echen",
|
||||
testimonial: "Transformed our digital presence completely.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/horizontal-portrait-happy-male-enterpreneur-being-glad-succeed_273609-8635.jpg",
|
||||
},
|
||||
{
|
||||
name: "Marcus Vane",
|
||||
handle: "@mvane",
|
||||
testimonial: "Technical expertise is unmatched in the industry.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-handsome-young-office-worker-glasses-suit-smiling-camera-looking-happy-white_1258-173667.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sarah Miller",
|
||||
handle: "@smiller",
|
||||
testimonial: "Professional, efficient, and highly creative.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/interested-black-man-woolen-elegant-jacket-close-up-portrait-handsome-guy-with-dark-skin-wears-headphones_197531-21842.jpg",
|
||||
},
|
||||
name: "John Smith", handle: "@jsmith", testimonial: "Best development partner we've had. | Le meilleur partenaire de développement que nous ayons eu.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg"},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Project",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Start Project / Démarrer un projet", href: "#contact"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-shapes-glowing-with-bright-holographic-colors_23-2151037192.jpg?_wi=1"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-view-young-handsome-man-wearing-glasses-looking-front-isolated-orange-wall_141793-73719.jpg",
|
||||
alt: "User portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-brunette-girl-black-hat-smiling_176420-8505.jpg",
|
||||
alt: "User portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-serious-young-businessman-glasses_1262-3810.jpg",
|
||||
alt: "User portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/successful-man-pointing-camera-with-finger_1262-3118.jpg",
|
||||
alt: "User portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/serene-businessman-with-glasses_1098-719.jpg",
|
||||
alt: "User portrait",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Scalable Infrastructure",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Precision UI Design",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Rapid Deployment",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "High Performance",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Future-Proof Tech",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Design With Purpose"
|
||||
description="We specialize in crafting digital infrastructure that grows with your business."
|
||||
title="Design With Purpose | Design avec intention"
|
||||
description="Grid Studio specializes in crafting bilingual digital infrastructure that grows with your business. | Grid Studio se spécialise dans la création d'infrastructures numériques bilingues."
|
||||
metrics={[
|
||||
{
|
||||
value: "100+",
|
||||
title: "Projects Delivered",
|
||||
},
|
||||
value: "100+", title: "Projects Delivered / Projets livrés"},
|
||||
{
|
||||
value: "50+",
|
||||
title: "Happy Clients",
|
||||
},
|
||||
value: "50+", title: "Happy Clients / Clients satisfaits"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/programming-language-code-editor-software-ui-computer-display_482257-124942.jpg?_wi=1"
|
||||
mediaAnimation="blur-reveal"
|
||||
@@ -179,32 +91,10 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "s1",
|
||||
title: "Web Design",
|
||||
description: "Custom, responsive interfaces.",
|
||||
tag: "Core",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CZxiJwhJtXkuw7LSFfzWhe8AAx/uploaded-1777490213660-9rx53xz5.png",
|
||||
imageAlt: "User provided image",
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
title: "UX Strategy",
|
||||
description: "User-centric conversion flows.",
|
||||
tag: "Strategy",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-shapes-glowing-with-bright-holographic-colors_23-2151037192.jpg?_wi=2",
|
||||
imageAlt: "User provided image",
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
title: "Web App Dev",
|
||||
description: "Custom software solutions.",
|
||||
tag: "Development",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/programming-language-code-editor-software-ui-computer-display_482257-124942.jpg?_wi=2",
|
||||
imageAlt: "User provided image",
|
||||
},
|
||||
id: "s1", title: "Web Design (Bilingual) / Design Web (Bilingue)", description: "Custom, responsive interfaces. | Interfaces personnalisées.", tag: "Core / Principal", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CZxiJwhJtXkuw7LSFfzWhe8AAx/uploaded-1777490213660-9rx53xz5.png"},
|
||||
]}
|
||||
title="Our Expertise"
|
||||
description="Full-cycle digital solutions, from conceptual design to deployment and optimization."
|
||||
title="Our Expertise / Notre Expertise"
|
||||
description="Full-cycle bilingual digital solutions by Grid Studio. | Solutions numériques bilingues par Grid Studio."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -215,42 +105,16 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "one-time",
|
||||
badge: "Growth",
|
||||
price: "$5,000+",
|
||||
subtitle: "One-off web design build",
|
||||
features: [
|
||||
"UI/UX Design",
|
||||
"Custom Dev",
|
||||
"Payment Setup",
|
||||
],
|
||||
id: "one-time", badge: "Growth / Croissance", price: "$5,000+", subtitle: "One-off web design build / Conception web ponctuelle", features: [
|
||||
"Bilingual UI/UX Design", "Custom Dev / Développpement", "Payment Setup / Paiement"],
|
||||
buttons: [
|
||||
{
|
||||
text: "Buy Now",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "monthly",
|
||||
badge: "Partnership",
|
||||
price: "$500/mo",
|
||||
subtitle: "Ongoing maintenance & security",
|
||||
features: [
|
||||
"Server Updates",
|
||||
"Security Patching",
|
||||
"Priority Support",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Subscribe",
|
||||
href: "#",
|
||||
},
|
||||
text: "Buy Now / Acheter", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Transparent Pricing"
|
||||
description="Flexible plans for one-off builds and ongoing stability."
|
||||
title="Transparent Pricing / Tarifs Transparents"
|
||||
description="Grid Studio plans for one-off builds and bilingual maintenance."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -260,50 +124,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah J.",
|
||||
role: "Director",
|
||||
company: "Company A",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2149022640.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mark L.",
|
||||
role: "CTO",
|
||||
company: "Company B",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/interested-gorgeous-man-with-black-eyes-looking-indoor-photo-fashionable-well-dressed-african-guy-glasses_197531-22079.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Alex K.",
|
||||
role: "Owner",
|
||||
company: "Company C",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-confident-business-leader_1262-4808.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Beth R.",
|
||||
role: "PM",
|
||||
company: "Company D",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-redhead-woman-black-wall_176420-16401.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Dave H.",
|
||||
role: "Dev",
|
||||
company: "Company E",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Success"
|
||||
description="What our clients say about the Grid Studio experience."
|
||||
testimonials={[]}
|
||||
title="Client Success / Succès Clients"
|
||||
description="Grid Studio client reviews. | Avis clients de Grid Studio."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -313,23 +136,9 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do you provide maintenance?",
|
||||
content: "Yes, we offer recurring maintenance subscriptions.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "What payment methods?",
|
||||
content: "We support all major credit cards.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "How long for a build?",
|
||||
content: "Typical builds take 4-8 weeks.",
|
||||
},
|
||||
id: "f1", title: "Do you provide bilingual maintenance? / Maintenance bilingue ?", content: "Yes, we offer recurring bilingual maintenance subscriptions."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/still-life-red-thread-connection_23-2149870879.jpg"
|
||||
title="Common Questions"
|
||||
title="Common Questions / Questions Fréquentes"
|
||||
description="Getting started with Grid Studio."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
@@ -339,16 +148,13 @@ export default function LandingPage() {
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Get in touch"
|
||||
title="Ready to Launch?"
|
||||
description="Let's build something remarkable together."
|
||||
variant: "sparkles-gradient"}}
|
||||
tag="Get in touch / Contactez-nous"
|
||||
title="Ready to Launch with Grid Studio? / Prêt à lancer avec Grid Studio ?"
|
||||
description="Let's build something remarkable together in English or French."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "mailto:hello@gridstudio.com",
|
||||
},
|
||||
text: "Contact Us / Contactez-nous", href: "mailto:hello@gridstudio.com"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -357,34 +163,20 @@ export default function LandingPage() {
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#",
|
||||
},
|
||||
title: "Company / Société", items: [
|
||||
{ label: "About / À Propos", href: "#" },
|
||||
{ label: "Services", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#",
|
||||
},
|
||||
title: "Support / Soutien", items: [
|
||||
{ label: "Contact", href: "#" },
|
||||
{ label: "FAQ", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Grid Studio"
|
||||
bottomRightText="All rights reserved."
|
||||
bottomLeftText="© 2025 Grid Studio"
|
||||
bottomRightText="All rights reserved / Tous droits réservés."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user