Merge version_1 into main #1
419
src/app/page.tsx
419
src/app/page.tsx
@@ -19,307 +19,146 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
{
|
||||
name: "Work",
|
||||
id: "#work",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="Whirlad Inspired"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Work", id: "work" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Whirlad Inspired"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "rotated-rays-animated",
|
||||
}}
|
||||
title="Premium Solutions Unmistakable Results"
|
||||
description="We deliver sophisticated strategy and design that transforms how your brand connects with your audience. Built for leaders who demand excellence."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Our Work",
|
||||
href: "#services",
|
||||
},
|
||||
]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/glass-wall-details_1359-1066.jpg",
|
||||
imageAlt: "Abstract tech architectural",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/open-drawer-linear-perspective-dark-interior_169016-69134.jpg",
|
||||
imageAlt: "Creative office interior",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-landscape-flowing-dots_1048-13342.jpg",
|
||||
imageAlt: "Fluid strategy abstract",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/colorful-cupboards-design_23-2148518416.jpg",
|
||||
imageAlt: "Luxury material texture",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/white-desk-with-glasses-phone-with-diagram-earphones_1163-2721.jpg",
|
||||
imageAlt: "Professional analytics UI",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/light-rays-prism-shadows_23-2148771775.jpg",
|
||||
imageAlt: "Serene abstract landscape",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
title="Premium Solutions Unmistakable Results"
|
||||
description="We deliver sophisticated strategy and design that transforms how your brand connects with your audience. Built for leaders who demand excellence."
|
||||
buttons={[{ text: "Explore Our Work", href: "#services" }]}
|
||||
carouselItems={[
|
||||
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/glass-wall-details_1359-1066.jpg", imageAlt: "Abstract tech architectural" },
|
||||
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/open-drawer-linear-perspective-dark-interior_169016-69134.jpg", imageAlt: "Creative office interior" },
|
||||
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-landscape-flowing-dots_1048-13342.jpg", imageAlt: "Fluid strategy abstract" },
|
||||
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/colorful-cupboards-design_23-2148518416.jpg", imageAlt: "Luxury material texture" },
|
||||
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/white-desk-with-glasses-phone-with-diagram-earphones_1163-2721.jpg", imageAlt: "Professional analytics UI" },
|
||||
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/light-rays-prism-shadows_23-2148771775.jpg", imageAlt: "Serene abstract landscape" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="Built for Leaders Who Demand Excellence"
|
||||
description={[
|
||||
"At the intersection of sophisticated strategy and design, we build brands that command attention. Our approach is grounded in clarity, ensuring your value proposition remains unmistakable.",
|
||||
"We partner with visionary companies to distill complexity into compelling visual identities and high-impact digital experiences.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="Built for Leaders Who Demand Excellence"
|
||||
description={[
|
||||
"At the intersection of sophisticated strategy and design, we build brands that command attention. Our approach is grounded in clarity, ensuring your value proposition remains unmistakable.", "We partner with visionary companies to distill complexity into compelling visual identities and high-impact digital experiences."
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyNine
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Brand Strategy",
|
||||
description: "Defining your market position with precision and authority.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/white-sheets-book_116348-90.jpg",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/ambitious-woman-ceo-meeting-shares-ideas-with-her-staff_482257-124470.jpg",
|
||||
buttonText: "Discover",
|
||||
},
|
||||
{
|
||||
title: "Creative Design",
|
||||
description: "Visual narratives that drive connection and loyalty.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/from-smartphone-laptop-near-stationery_23-2147768927.jpg",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/high-end-home-office-trendy-loft-apartment-with-empty-desk_482257-122616.jpg",
|
||||
buttonText: "Discover",
|
||||
},
|
||||
{
|
||||
title: "Data Analytics",
|
||||
description: "Turning actionable insights into clear growth strategies.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-is-sitting-table-with-tablet-that-says-chart-screen_23-2151929037.jpg",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/advisory-board-members-meeting-boardroom-establish-future-development-plan_482257-113859.jpg",
|
||||
buttonText: "Discover",
|
||||
},
|
||||
]}
|
||||
title="Unrivaled Service Portfolio"
|
||||
description="Comprehensive solutions tailored to your unique market positioning and business objectives."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyNine
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
animationType="blur-reveal"
|
||||
features={[
|
||||
{ title: "Brand Strategy", description: "Defining your market position with precision and authority.", imageSrc: "http://img.b2bpic.net/free-photo/white-sheets-book_116348-90.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/ambitious-woman-ceo-meeting-shares-ideas-with-her-staff_482257-124470.jpg", buttonText: "Discover" },
|
||||
{ title: "Creative Design", description: "Visual narratives that drive connection and loyalty.", imageSrc: "http://img.b2bpic.net/free-photo/from-smartphone-laptop-near-stationery_23-2147768927.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/high-end-home-office-trendy-loft-apartment-with-empty-desk_482257-122616.jpg", buttonText: "Discover" },
|
||||
{ title: "Data Analytics", description: "Turning actionable insights into clear growth strategies.", imageSrc: "http://img.b2bpic.net/free-photo/man-is-sitting-table-with-tablet-that-says-chart-screen_23-2151929037.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/advisory-board-members-meeting-boardroom-establish-future-development-plan_482257-113859.jpg", buttonText: "Discover" },
|
||||
]}
|
||||
title="Unrivaled Service Portfolio"
|
||||
description="Comprehensive solutions tailored to your unique market positioning and business objectives."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"InnovateTech",
|
||||
"GrowthLabs",
|
||||
"GlobalScale",
|
||||
"NextGen Systems",
|
||||
"Apex Design",
|
||||
"ScaleUP",
|
||||
"Vertex",
|
||||
]}
|
||||
title="Trusted by Market Leaders"
|
||||
description="Collaborating with companies that redefine their industries."
|
||||
/>
|
||||
</div>
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={["InnovateTech", "GrowthLabs", "GlobalScale", "NextGen Systems", "Apex Design", "ScaleUP", "Vertex"]}
|
||||
title="Trusted by Market Leaders"
|
||||
description="Collaborating with companies that redefine their industries."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Proven Results in Action"
|
||||
tag="Milestones"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "150+",
|
||||
description: "Strategic Projects Delivered",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "45%",
|
||||
description: "Average Brand Growth",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "12+",
|
||||
description: "Global Industries Served",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Proven Results in Action"
|
||||
tag="Milestones"
|
||||
metrics={[
|
||||
{ id: "m1", value: "150+", description: "Strategic Projects Delivered" },
|
||||
{ id: "m2", value: "45%", description: "Average Brand Growth" },
|
||||
{ id: "m3", value: "12+", description: "Global Industries Served" },
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alex Rivers",
|
||||
role: "CMO",
|
||||
testimonial: "Whirlad-level sophistication that yielded immediate, measurable results for our brand.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-business-office-business-center_1303-20365.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Elena Vance",
|
||||
role: "Director",
|
||||
testimonial: "The clarity of strategy provided was second to none. Absolutely transformative partnership.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081912.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Marcus Thorne",
|
||||
role: "Founder",
|
||||
testimonial: "They don't just design; they understand our business better than we do. Highly recommend.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-red-tie-shirt-wearing-glasses-looking-camera-smiling-presenting-copy-space-with-arm-his-handstanding-orange-background_141793-110723.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Sara Chen",
|
||||
role: "Head of Marketing",
|
||||
testimonial: "Unmistakable impact from day one. A truly top-tier agency experience.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/successful-expert_1098-14503.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Julian Pike",
|
||||
role: "CEO",
|
||||
testimonial: "Professional, precise, and visually stunning work that genuinely moved the needle.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-supporting-by-wall_23-2148289223.jpg",
|
||||
},
|
||||
]}
|
||||
title="Voices of Excellence"
|
||||
description="Hear how we've helped leaders transform their brand presence."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
animationType="blur-reveal"
|
||||
testimonials={[
|
||||
{ id: "1", name: "Alex Rivers", role: "CMO", testimonial: "Whirlad-level sophistication that yielded immediate, measurable results for our brand.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-business-office-business-center_1303-20365.jpg" },
|
||||
{ id: "2", name: "Elena Vance", role: "Director", testimonial: "The clarity of strategy provided was second to none. Absolutely transformative partnership.", imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081912.jpg" },
|
||||
{ id: "3", name: "Marcus Thorne", role: "Founder", testimonial: "They don't just design; they understand our business better than we do. Highly recommend.", imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-red-tie-shirt-wearing-glasses-looking-camera-smiling-presenting-copy-space-with-arm-his-handstanding-orange-background_141793-110723.jpg" },
|
||||
{ id: "4", name: "Sara Chen", role: "Head of Marketing", testimonial: "Unmistakable impact from day one. A truly top-tier agency experience.", imageSrc: "http://img.b2bpic.net/free-photo/successful-expert_1098-14503.jpg" },
|
||||
{ id: "5", name: "Julian Pike", role: "CEO", testimonial: "Professional, precise, and visually stunning work that genuinely moved the needle.", imageSrc: "http://img.b2bpic.net/free-photo/young-man-supporting-by-wall_23-2148289223.jpg" },
|
||||
]}
|
||||
title="Voices of Excellence"
|
||||
description="Hear how we've helped leaders transform their brand presence."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "How do you ensure project success?",
|
||||
content: "We begin with deep discovery and strategy alignment to define clear success metrics before design begins.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "What is the typical engagement timeframe?",
|
||||
content: "Most engagements range from 3 to 6 months depending on the scope of strategy and brand development.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Do you work with global companies?",
|
||||
content: "Yes, we partner with mid-to-large global enterprises to elevate their presence across all markets.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Clarifying our process and partnership approach."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqsAnimation="blur-reveal"
|
||||
faqs={[
|
||||
{ id: "q1", title: "How do you ensure project success?", content: "We begin with deep discovery and strategy alignment to define clear success metrics before design begins." },
|
||||
{ id: "q2", title: "What is the typical engagement timeframe?", content: "Most engagements range from 3 to 6 months depending on the scope of strategy and brand development." },
|
||||
{ id: "q3", title: "Do you work with global companies?", content: "Yes, we partner with mid-to-large global enterprises to elevate their presence across all markets." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Clarifying our process and partnership approach."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
tag="Let's Talk"
|
||||
title="Start Your Transformation"
|
||||
description="Connect with our team to discuss your next big initiative."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
tag="Let's Talk"
|
||||
title="Start Your Transformation"
|
||||
description="Connect with our team to discuss your next big initiative."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Strategy",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Design",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Analytics",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Use",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Whirlad Inspired"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Careers", href: "#" }, { label: "Contact", href: "#contact" }] },
|
||||
{ title: "Services", items: [{ label: "Strategy", href: "#services" }, { label: "Design", href: "#services" }, { label: "Analytics", href: "#services" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Use", href: "#" }] },
|
||||
]}
|
||||
logoText="Whirlad Inspired"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user