Merge version_2 into main #3
359
src/app/page.tsx
359
src/app/page.tsx
@@ -18,265 +18,124 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="noise"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="SampleSite"
|
||||
/>
|
||||
</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: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="SampleSite"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Welcome to Our Simple Solution"
|
||||
description="We help businesses succeed with streamlined processes and elegant design."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-flat-terracotta-background_23-2149544668.jpg",
|
||||
imageAlt: "Abstract beige background 1",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/triangle-copper-frame-pastel-background_53876-112994.jpg",
|
||||
imageAlt: "Abstract beige background 2",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/minimal-poster-layout-with-vibrant-gradient-blurs_206725-166.jpg",
|
||||
imageAlt: "Abstract beige background 3",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-abstract-doodle-background_23-2149315510.jpg",
|
||||
imageAlt: "Abstract beige background 4",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/white-background-with-golden-line-strokes_1017-20797.jpg",
|
||||
imageAlt: "Abstract beige background 5",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Warm, Professional Solutions"
|
||||
description="We create elegant, high-impact digital experiences for your business."
|
||||
buttons={[{ text: "Get Started", href: "#contact" }]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-flat-terracotta-background_23-2149544668.jpg", imageAlt: "minimalist abstract warm background" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-vector/triangle-copper-frame-pastel-background_53876-112994.jpg", imageAlt: "gentle wave abstract shape" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-vector/minimal-poster-layout-with-vibrant-gradient-blurs_206725-166.jpg", imageAlt: "abstract circular soft gradient" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="About Us"
|
||||
title="Crafting Solutions with Passion"
|
||||
description="We specialize in creating simple, impactful digital experiences for businesses of all sizes."
|
||||
subdescription="Our team focuses on quality and long-term results."
|
||||
icon={Users}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-african-american-man-happily-looking-camera-work-with-colleagues-modern-co-working-space_574295-1880.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="About Us"
|
||||
title="Crafting Solutions with Passion"
|
||||
description="We focus on simplicity and professionalism to deliver long-term value."
|
||||
subdescription="Our design philosophy is rooted in clarity and quality."
|
||||
icon={Users}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-african-american-man-happily-looking-camera-work-with-colleagues-modern-co-working-space_574295-1880.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Fast Performance",
|
||||
tags: [
|
||||
"Speed",
|
||||
"Optimization",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/colorful-geometric-logos_23-2147509513.jpg",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Secure Platform",
|
||||
tags: [
|
||||
"Security",
|
||||
"Trust",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-business-landing-page-template_52683-13554.jpg",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Easy To Use",
|
||||
tags: [
|
||||
"Usability",
|
||||
"Design",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/psychology-logos-abstract-style_23-2147590187.jpg",
|
||||
},
|
||||
]}
|
||||
title="Why Choose Us"
|
||||
description="Streamlined features designed for your growth."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "f1", title: "Fast Performance", tags: ["Speed", "Efficiency"], imageSrc: "http://img.b2bpic.net/free-vector/colorful-geometric-logos_23-2147509513.jpg" },
|
||||
{ id: "f2", title: "Secure Platform", tags: ["Reliability", "Security"], imageSrc: "http://img.b2bpic.net/free-vector/flat-business-landing-page-template_52683-13554.jpg" },
|
||||
{ id: "f3", title: "Modern Design", tags: ["Aesthetics", "User-Centric"], imageSrc: "http://img.b2bpic.net/free-vector/psychology-logos-abstract-style_23-2147590187.jpg" }
|
||||
]}
|
||||
title="Our Core Strengths"
|
||||
description="Robust features built for professional excellence."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
title: "Great Service",
|
||||
quote: "They made our workflow so much easier.",
|
||||
name: "Alex Smith",
|
||||
role: "CEO",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-dark-curly-hair-warmly-dressed-fur-coat-scarf-winter-frost-sunny-day-street-city_1321-2313.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
title: "Impactful Design",
|
||||
quote: "Beautiful work that drives results.",
|
||||
name: "Maria Garcia",
|
||||
role: "Designer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/indoor-portrait-handsome-happy-enthusiastic-guy-striped-shirt-sitting-kitchen-table-with-arms-crossed_343059-3858.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
title: "Professional Team",
|
||||
quote: "Always responsive and professional.",
|
||||
name: "John Doe",
|
||||
role: "Manager",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-street_641386-1075.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
title: "Highly Recommend",
|
||||
quote: "The best partner for our digital needs.",
|
||||
name: "Sarah Lee",
|
||||
role: "Developer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiling-young-woman-wearing-life-jacket_23-2147562086.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
title: "Exceptional Quality",
|
||||
quote: "A truly transformative partnership.",
|
||||
name: "David Chen",
|
||||
role: "Operations",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-dark-curly-hair-warmly-dressed-fur-coat-scarf-winter-frost-sunny-day-street-city_1321-2313.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
title="Loved by Our Clients"
|
||||
description="Read what our partners say about working with us."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", title: "Exceptional Partners", quote: "Professional, warm, and highly efficient team.", name: "Alex Smith", role: "CEO", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-dark-curly-hair-warmly-dressed-fur-coat-scarf-winter-frost-sunny-day-street-city_1321-2313.jpg" },
|
||||
{ id: "t2", title: "Stunning Results", quote: "They transformed our workflow seamlessly.", name: "Maria Garcia", role: "Designer", imageSrc: "http://img.b2bpic.net/free-photo/indoor-portrait-handsome-happy-enthusiastic-guy-striped-shirt-sitting-kitchen-table-with-arms-crossed_343059-3858.jpg" }
|
||||
]}
|
||||
title="Trusted by Clients"
|
||||
description="Hear how we've helped partners succeed."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "What is the onboarding process?",
|
||||
content: "Our process is simple and quick.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Do you offer support?",
|
||||
content: "Yes, we provide 24/7 dedicated support.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Can I cancel anytime?",
|
||||
content: "Yes, our plans are flexible.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Find answers to our most frequently asked questions."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "How do we begin?", content: "Get in touch through our contact form and we'll start with a consultation." },
|
||||
{ id: "q2", title: "What is your process?", content: "We focus on a collaborative approach to ensure professional results every time." },
|
||||
{ id: "q3", title: "Can we scale?", content: "Absolutely, our solutions grow alongside your business." }
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about our services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Get In Touch"
|
||||
description="Fill out the form and we will get back to you shortly."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Your Message",
|
||||
rows: 4,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/online-school-equipment-home_23-2149041145.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Get In Touch"
|
||||
description="Let's discuss how we can work together."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Tell us about your project", rows: 4 }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/online-school-equipment-home_23-2149041145.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="SampleSite"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "About", href: "#about" }, { label: "Features", href: "#features" }, { label: "Contact", href: "#contact" }] },
|
||||
{ items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
|
||||
]}
|
||||
logoText="SampleSite"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user