Merge version_1 into main #1
455
src/app/page.tsx
455
src/app/page.tsx
@@ -29,337 +29,148 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="WebBuild Pros"
|
||||
button={{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="WebBuild Pros"
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
logoText="WebBuild Pros"
|
||||
description="We craft professional, high-performance websites that elevate your business identity and boost your digital presence."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Project",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "Our Services",
|
||||
href: "#features",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/mid-section-businessman-showing-open-laptop-with-blank-white-screen_23-2148041564.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="clean workspace web design"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{ variant: "radial-gradient" }}
|
||||
logoText="WebBuild Pros"
|
||||
description="We craft professional, high-performance websites that elevate your business identity and boost your digital presence."
|
||||
buttons={[
|
||||
{ text: "Start Project", href: "#contact" },
|
||||
{ text: "Our Services", href: "#features" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/mid-section-businessman-showing-open-laptop-with-blank-white-screen_23-2148041564.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="clean workspace web design"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Crafting Digital Excellence",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/adult-male-illustrator-working-tablet-device_23-2149863236.jpg",
|
||||
alt: "web design collaboration professionals",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "Crafting Digital Excellence" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/adult-male-illustrator-working-tablet-device_23-2149863236.jpg", alt: "web design collaboration professionals" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Responsive Design",
|
||||
description: "Beautiful, accessible interfaces that work perfectly across all devices.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-designer-working-floor_23-2149930985.jpg",
|
||||
imageAlt: "responsive web design icon",
|
||||
},
|
||||
{
|
||||
title: "SEO Optimized",
|
||||
description: "Built from the ground up for maximum visibility and better ranking.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-science-background-with-low-poly-plexus-design_1048-13265.jpg",
|
||||
imageAlt: "seo growth icon digital",
|
||||
},
|
||||
{
|
||||
title: "Secure Hosting",
|
||||
description: "Fast, scalable, and secure infrastructure for maximum uptime.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cloud-with-open-lock_1048-1662.jpg",
|
||||
imageAlt: "web hosting security icon",
|
||||
},
|
||||
]}
|
||||
title="Our Web Solutions"
|
||||
description="Comprehensive design and development tailored for growth."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Responsive Design", description: "Beautiful, accessible interfaces that work perfectly across all devices.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-designer-working-floor_23-2149930985.jpg", imageAlt: "responsive web design icon" },
|
||||
{ title: "SEO Optimized", description: "Built from the ground up for maximum visibility and better ranking.", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-science-background-with-low-poly-plexus-design_1048-13265.jpg", imageAlt: "seo growth icon digital" },
|
||||
{ title: "Secure Hosting", description: "Fast, scalable, and secure infrastructure for maximum uptime.", imageSrc: "http://img.b2bpic.net/free-photo/cloud-with-open-lock_1048-1662.jpg", imageAlt: "web hosting security icon" },
|
||||
]}
|
||||
title="Our Web Solutions"
|
||||
description="Comprehensive design and development tailored for growth."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "150+",
|
||||
title: "Projects Completed",
|
||||
description: "Successful web deployments",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "99%",
|
||||
title: "Client Satisfaction",
|
||||
description: "Highly satisfied partners",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "24/7",
|
||||
title: "Support Availability",
|
||||
description: "Always ready to help",
|
||||
icon: Zap,
|
||||
},
|
||||
]}
|
||||
title="Proven Results"
|
||||
description="Our work speaks for itself in hard numbers."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "150+", title: "Projects Completed", description: "Successful web deployments", icon: CheckCircle },
|
||||
{ id: "m2", value: "99%", title: "Client Satisfaction", description: "Highly satisfied partners", icon: Award },
|
||||
{ id: "m3", value: "24/7", title: "Support Availability", description: "Always ready to help", icon: Zap },
|
||||
]}
|
||||
title="Proven Results"
|
||||
description="Our work speaks for itself in hard numbers."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah J.",
|
||||
role: "CEO",
|
||||
testimonial: "Exceptional work! My business grew significantly with the new site.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coffee-time-me-please_329181-17310.jpg",
|
||||
imageAlt: "professional client portrait smile",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael C.",
|
||||
role: "Director",
|
||||
testimonial: "Professional, fast, and responsive. Highly recommend.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5370.jpg",
|
||||
imageAlt: "professional male client portrait",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily R.",
|
||||
role: "Marketing",
|
||||
testimonial: "They truly understand our branding and delivery was seamless.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-smiling-kitchen_107420-12357.jpg",
|
||||
imageAlt: "professional office client portrait",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David K.",
|
||||
role: "Founder",
|
||||
testimonial: "The best investment for my company this year.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-with-cup-coffee_23-2149330971.jpg",
|
||||
imageAlt: "business executive portrait professional",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Laura S.",
|
||||
role: "Manager",
|
||||
testimonial: "Efficient workflow and stunning design results.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-blue-jacket_23-2149020770.jpg",
|
||||
imageAlt: "creative business owner portrait",
|
||||
},
|
||||
]}
|
||||
title="Client Success"
|
||||
description="What our clients say about us."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah J.", role: "CEO", testimonial: "Exceptional work! My business grew significantly with the new site.", imageSrc: "http://img.b2bpic.net/free-photo/coffee-time-me-please_329181-17310.jpg", imageAlt: "professional client portrait smile" },
|
||||
{ id: "2", name: "Michael C.", role: "Director", testimonial: "Professional, fast, and responsive. Highly recommend.", imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5370.jpg", imageAlt: "professional male client portrait" },
|
||||
{ id: "3", name: "Emily R.", role: "Marketing", testimonial: "They truly understand our branding and delivery was seamless.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-smiling-kitchen_107420-12357.jpg", imageAlt: "professional office client portrait" },
|
||||
{ id: "4", name: "David K.", role: "Founder", testimonial: "The best investment for my company this year.", imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-with-cup-coffee_23-2149330971.jpg", imageAlt: "business executive portrait professional" },
|
||||
{ id: "5", name: "Laura S.", role: "Manager", testimonial: "Efficient workflow and stunning design results.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-blue-jacket_23-2149020770.jpg", imageAlt: "creative business owner portrait" },
|
||||
]}
|
||||
title="Client Success"
|
||||
description="What our clients say about us."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "starter",
|
||||
badge: "Essential",
|
||||
price: "$1,999",
|
||||
subtitle: "Perfect for new businesses",
|
||||
features: [
|
||||
"Landing Page",
|
||||
"Mobile Optimized",
|
||||
"Standard SEO",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Popular",
|
||||
price: "$4,999",
|
||||
subtitle: "Great for growing companies",
|
||||
features: [
|
||||
"Full Website",
|
||||
"Custom UI",
|
||||
"Advanced SEO",
|
||||
"Support",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "premium",
|
||||
badge: "Enterprise",
|
||||
price: "$9,999+",
|
||||
subtitle: "For established brands",
|
||||
features: [
|
||||
"Custom App",
|
||||
"E-commerce",
|
||||
"Full Maintenance",
|
||||
"24/7 Priority",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Pricing Plans"
|
||||
description="Choose the perfect package for your project."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "starter", badge: "Essential", price: "$1,999", subtitle: "Perfect for new businesses", features: ["Landing Page", "Mobile Optimized", "Standard SEO"], buttons: [{ text: "Contact Us", href: "#contact" }] },
|
||||
{ id: "pro", badge: "Popular", price: "$4,999", subtitle: "Great for growing companies", features: ["Full Website", "Custom UI", "Advanced SEO", "Support"], buttons: [{ text: "Contact Us", href: "#contact" }] },
|
||||
{ id: "premium", badge: "Enterprise", price: "$9,999+", subtitle: "For established brands", features: ["Custom App", "E-commerce", "Full Maintenance", "24/7 Priority"], buttons: [{ text: "Contact Us", href: "#contact" }] },
|
||||
]}
|
||||
title="Pricing Plans"
|
||||
description="Choose the perfect package for your project."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How long does a build take?",
|
||||
content: "Typically 2-6 weeks depending on project complexity.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do you provide support?",
|
||||
content: "Yes, we offer ongoing maintenance and support packages.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Can I edit content?",
|
||||
content: "Yes, all sites are delivered with an intuitive CMS.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Get answers to everything you need to know."
|
||||
faqsAnimation="blur-reveal"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/african-american-manager-corporate-office-reviewing-company-reports_482257-116898.jpg"
|
||||
imageAlt="African american manager in corporate office reviewing company reports"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How long does a build take?", content: "Typically 2-6 weeks depending on project complexity." },
|
||||
{ id: "f2", title: "Do you provide support?", content: "Yes, we offer ongoing maintenance and support packages." },
|
||||
{ id: "f3", title: "Can I edit content?", content: "Yes, all sites are delivered with an intuitive CMS." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Get answers to everything you need to know."
|
||||
faqsAnimation="blur-reveal"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/african-american-manager-corporate-office-reviewing-company-reports_482257-116898.jpg"
|
||||
imageAlt="African american manager in corporate office reviewing company reports"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "rotated-rays-animated",
|
||||
}}
|
||||
tag="Get Started"
|
||||
title="Let's Build Something Great"
|
||||
description="Send us your details and we will schedule a consultation."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-minimalist-office-black-white_23-2151777528.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="modern office reception desk"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
tag="Get Started"
|
||||
title="Let's Build Something Great"
|
||||
description="Send us your details and we will schedule a consultation."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-minimalist-office-black-white_23-2151777528.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="modern office reception desk"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="WebBuild Pros"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="WebBuild Pros"
|
||||
columns={[
|
||||
{ title: "Navigation", items: [{ label: "Services", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Contact", href: "#contact" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user