Update src/app/page.tsx
This commit is contained in:
423
src/app/page.tsx
423
src/app/page.tsx
@@ -2,16 +2,16 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
||||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import { ShieldCheck, Zap } from "lucide-react";
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import { ShieldCheck, Zap, TrendingUp, Users, Target } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -19,316 +19,123 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="large"
|
||||
background="floatingGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="medium"
|
||||
background="noise"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="light"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Results",
|
||||
id: "metrics",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Vantage Social"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Vantage"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Scaling Brands, Building Influence."
|
||||
description="We architect high-performance social strategies for premium brands. Elevate your presence through data-driven creativity and refined storytelling."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/blonde-girl_1303-5235.jpg",
|
||||
alt: "Client 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-confident-manager-cafeteria_1098-20954.jpg",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-painter-desk-joyfully-choosing-paint-brush-with-big-pattern-canvas-background-home_574295-3722.jpg",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-young-confident-woman-startup-manager-office-posing-with-confidence-looking_1258-195338.jpg",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/serious-young-businessman-pointing-camera_1262-3837.jpg",
|
||||
alt: "Client 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 50+ Global Brands"
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Your Strategy",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Strategic Growth",
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Viral Content",
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Audience Insight",
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Brand Authority",
|
||||
icon: ShieldCheck,
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Conversion Optimization",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="Data-Driven Influence for Premium Brands."
|
||||
description="We transform digital presence into measurable authority using high-performance creative engineering and precision data analytics."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
carouselItems={[
|
||||
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-polygonal-space-low-poly-dark-background-with-connecting-dots-lines-connection-structure_1048-15232.jpg" },
|
||||
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/school-supplies-grey-table_176420-4558.jpg" },
|
||||
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/digital-tablet-with-blurred-background_1098-481.jpg" },
|
||||
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/blue-arrow-with-blue-background_23-2148879378.jpg" },
|
||||
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl_1303-5235.jpg" },
|
||||
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/smiling-confident-manager-cafeteria_1098-20954.jpg" },
|
||||
]}
|
||||
buttons={[{ text: "Start Your Strategy", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Vogue",
|
||||
"Bloomberg",
|
||||
"TechCrunch",
|
||||
"Forbes",
|
||||
"The New York Times",
|
||||
"Harper's Bazaar",
|
||||
"Wall Street Journal",
|
||||
]}
|
||||
title="Collaborated With Industry Leaders"
|
||||
description="Empowering premium brands across diverse sectors to achieve measurable growth."
|
||||
/>
|
||||
</div>
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
title="Powering Industry Leaders"
|
||||
names={["Vogue", "Bloomberg", "Forbes", "TechCrunch", "WSJ"]}
|
||||
description="Our sophisticated approach is trusted by global leaders to elevate digital identity."
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="Defining Modern Presence."
|
||||
description={[
|
||||
"Our philosophy centers on the intersection of aesthetic brilliance and algorithmic precision.",
|
||||
"We move beyond vanity metrics, focusing on building sustainable community and brand authority through bespoke content engineering.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
tag="About Us"
|
||||
title="Precision Engineering for Social Growth."
|
||||
buttons={[{ text: "Explore Our Philosophy" }]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Influencer Strategy",
|
||||
description: "Authentic partnerships that amplify brand voice to targeted, high-value audiences.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-polygonal-space-low-poly-dark-background-with-connecting-dots-lines-connection-structure_1048-15232.jpg",
|
||||
imageAlt: "Strategy",
|
||||
},
|
||||
{
|
||||
title: "Creative Production",
|
||||
description: "High-end visual assets designed to stop the scroll and drive long-term engagement.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/school-supplies-grey-table_176420-4558.jpg",
|
||||
imageAlt: "Content",
|
||||
},
|
||||
{
|
||||
title: "Data Analytics",
|
||||
description: "Deep performance reporting that translates engagement into clear business intelligence.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/digital-tablet-with-blurred-background_1098-481.jpg",
|
||||
imageAlt: "Insights",
|
||||
},
|
||||
]}
|
||||
title="Strategic Capabilities"
|
||||
description="Comprehensive solutions tailored to your unique market positioning."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyOne
|
||||
title="Core Capabilities"
|
||||
description="Our bespoke content engineering is designed for high-conversion performance."
|
||||
accordionItems={[
|
||||
{ id: "1", title: "Strategic Content", content: "High-conversion storytelling assets." },
|
||||
{ id: "2", title: "Algorithmic Growth", content: "Data-driven audience amplification." },
|
||||
{ id: "3", title: "Brand Authority", content: "Building long-term market leadership." }
|
||||
]}
|
||||
mediaPosition="right"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-render-abstract-polygonal-space-low-poly-dark-background-with-connecting-dots-lines-connection-structure_1048-15232.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "150%",
|
||||
title: "Avg. Engagement Growth",
|
||||
description: "Year-over-year community growth.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blue-arrow-with-blue-background_23-2148879378.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "20M+",
|
||||
title: "Targeted Reach",
|
||||
description: "Content impressions generated last quarter.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blue-arrow-with-blue-background_23-2148879378.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "45%",
|
||||
title: "Conversion Rate",
|
||||
description: "Lead generation from social funnels.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blue-arrow-with-blue-background_23-2148879378.jpg?_wi=3",
|
||||
},
|
||||
]}
|
||||
title="Proven Performance"
|
||||
description="Numbers that underscore our commitment to your brand growth."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
title="Quantifiable Growth"
|
||||
metrics={[
|
||||
{ id: "1", value: "150%", description: "Avg. Annual Growth" },
|
||||
{ id: "2", value: "20M+", description: "Targeted Reach" },
|
||||
{ id: "3", value: "45%", description: "Conversion Rate" },
|
||||
]}
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alexandra Reed",
|
||||
role: "CMO",
|
||||
testimonial: "Vantage completely redefined our social footprint. Their attention to aesthetic detail is unmatched.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl_1303-5235.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Marcus Chen",
|
||||
role: "CEO",
|
||||
testimonial: "Data-driven results combined with creative excellence. Exactly what we needed for our expansion.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-confident-manager-cafeteria_1098-20954.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elena Rossi",
|
||||
role: "Founder",
|
||||
testimonial: "The level of strategy and professional diligence they bring to every project is refreshing.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-painter-desk-joyfully-choosing-paint-brush-with-big-pattern-canvas-background-home_574295-3722.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Sarah Miller",
|
||||
role: "Brand Director",
|
||||
testimonial: "They don't just post content; they craft stories that actually convert.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-confident-woman-startup-manager-office-posing-with-confidence-looking_1258-195338.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "David Thorne",
|
||||
role: "VP Marketing",
|
||||
testimonial: "Professional, strategic, and consistently innovative. A true extension of our internal team.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serious-young-businessman-pointing-camera_1262-3837.jpg",
|
||||
},
|
||||
]}
|
||||
title="What Clients Say"
|
||||
description="Transforming brands through collaborative excellence."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
title="Client Success Stories"
|
||||
testimonials={[
|
||||
{ id: "1", name: "Alexandra Reed", handle: "@alex", testimonial: "Unmatched attention to detail.", rating: 5 },
|
||||
{ id: "2", name: "Marcus Chen", handle: "@marcus", testimonial: "Exceeded all our conversion goals.", rating: 5 },
|
||||
{ id: "3", name: "Elena Rossi", handle: "@elena", testimonial: "A truly strategic partnership.", rating: 5 },
|
||||
]}
|
||||
showRating={true}
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
text="Ready to redefine your digital presence? We're taking on new partnerships for the upcoming quarter."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Our Team",
|
||||
href: "mailto:hello@vantage.social",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Contact"
|
||||
title="Let's Build Your Legacy"
|
||||
description="Partner with us to redefine your brand's potential in the digital space."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Vantage Social"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
{
|
||||
label: "Blog",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Case Studies",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Insights",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Vantage"
|
||||
columns={[
|
||||
{ title: "Agency", items: [{ label: "About", href: "#about" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Solutions", items: [{ label: "Growth", href: "#" }, { label: "Content", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user