297 lines
14 KiB
TypeScript
297 lines
14 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
|
|
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
|
import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
|
|
import FeatureCardFourteen from '@/components/sections/feature/FeatureCardFourteen';
|
|
import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
|
|
import PricingCardSeven from '@/components/sections/pricing/PricingCardSeven';
|
|
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
|
|
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import { CreditCard, Heart, Sparkles, Star, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant={"text-stagger"}
|
|
defaultTextAnimation={"reveal-blur"}
|
|
borderRadius={"pill"}
|
|
contentWidth={"mediumSmall"}
|
|
sizing={"mediumLarge"}
|
|
background={"circleGradient"}
|
|
cardStyle={"outline-light"}
|
|
primaryButtonStyle={"radial-glow"}
|
|
secondaryButtonStyle={"radial-glow"}
|
|
headingFontWeight={"normal"}
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleMinimal
|
|
brandName="Webild"
|
|
button={{
|
|
text: "Get Started", href: "contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCarouselLogo
|
|
logoText="WEBILD"
|
|
description="Create stunning, responsive websites with our comprehensive component library and design system"
|
|
buttons={[
|
|
{
|
|
text: "Get Started", href: "contact"
|
|
},
|
|
{
|
|
text: "Learn More", href: "about"
|
|
}
|
|
]}
|
|
slides={[
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-vector/abstract-modern-background-with-waves_1361-1452.jpg", imageAlt: "Modern gradient background"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-vector/abstract-background-with-gradient-shapes_23-2148236980.jpg", imageAlt: "Colorful geometric design"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-vector/gradient-abstract-background_23-2149124366.jpg", imageAlt: "Digital futuristic background"
|
|
}
|
|
]}
|
|
autoplayDelay={4000}
|
|
showDimOverlay={true}
|
|
logoLineHeight={1.1}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<ParallaxAbout
|
|
title="Elevate Your Digital Presence"
|
|
description="We craft beautiful, functional experiences that resonate with your audience. Our design philosophy combines innovation with accessibility, ensuring every interaction feels intentional and delightful."
|
|
tag="About Us"
|
|
tagIcon={Sparkles}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717145571-8bb6qqvp.jpg"
|
|
imageAlt="Creative team workspace"
|
|
buttons={[
|
|
{
|
|
text: "Discover Our Story", href: "#"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardFourteen
|
|
title="Powerful Features for Modern Design"
|
|
description="Everything you need to build extraordinary digital experiences"
|
|
tag="Features"
|
|
tagIcon={Zap}
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
features={[
|
|
{
|
|
id: "1", title: "Intelligent Design System", description: "Pre-built components that adapt to your brand and scale effortlessly", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717147155-pyqqrqtf.jpg", imageAlt: "Design system showcase"
|
|
},
|
|
{
|
|
id: "2", title: "Dynamic Interactions", description: "Smooth animations and responsive behaviors that delight users", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717148416-s3c8kqqv.jpg", imageAlt: "Interactive design demonstration"
|
|
},
|
|
{
|
|
id: "3", title: "Developer Friendly", description: "Clean code and comprehensive documentation for seamless integration", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717149693-xsfbemh8.jpg", imageAlt: "Development environment preview"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardSeven
|
|
title="Featured Collections"
|
|
description="Explore our curated selection of premium digital assets"
|
|
tag="New Arrivals"
|
|
tagIcon={Star}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
products={[
|
|
{
|
|
id: "1", name: "Designer's Toolkit Pro", price: "$149", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717150812-1msj25rh.jpg", imageAlt: "Designer toolkit product"
|
|
},
|
|
{
|
|
id: "2", name: "Component Library Plus", price: "$199", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717152150-hnthrayc.jpg", imageAlt: "Component library package"
|
|
},
|
|
{
|
|
id: "3", name: "Full Stack Framework", price: "$299", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717153591-1r1i77fy.jpg", imageAlt: "Framework premium edition"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardSeven
|
|
title="Simple, Transparent Pricing"
|
|
description="Choose the plan that fits your needs and scale as you grow"
|
|
tag="Pricing"
|
|
tagIcon={CreditCard}
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertCard"
|
|
animationType="slide-up"
|
|
plans={[
|
|
{
|
|
id: "starter", tag: "PERFECT FOR BEGINNERS", pricingOptions: [
|
|
{
|
|
value: "monthly", label: "Monthly", price: "$29", subtitle: "Per Month"
|
|
},
|
|
{
|
|
value: "yearly", label: "Yearly", price: "$290", subtitle: "Per Year"
|
|
}
|
|
],
|
|
defaultOption: "yearly", selectorNote: "Save 17% with yearly billing", description: "Essential tools for individual creators and small projects", buttons: [
|
|
{
|
|
text: "Start Free Trial", href: "#"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: "professional", tag: "MOST POPULAR", pricingOptions: [
|
|
{
|
|
value: "monthly", label: "Monthly", price: "$79", subtitle: "Per Month"
|
|
},
|
|
{
|
|
value: "yearly", label: "Yearly", price: "$790", subtitle: "Per Year"
|
|
}
|
|
],
|
|
defaultOption: "yearly", selectorNote: "Save 17% with yearly billing", description: "Full access to all features with priority support", buttons: [
|
|
{
|
|
text: "Get Started", href: "#"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: "enterprise", tag: "CUSTOM SOLUTIONS", pricingOptions: [
|
|
{
|
|
value: "monthly", label: "Monthly", price: "$199", subtitle: "Per Month"
|
|
},
|
|
{
|
|
value: "yearly", label: "Yearly", price: "$1990", subtitle: "Per Year"
|
|
}
|
|
],
|
|
defaultOption: "yearly", selectorNote: "Save 17% with yearly billing", description: "Unlimited access, dedicated support, and custom integrations", buttons: [
|
|
{
|
|
text: "Contact Sales", href: "#"
|
|
}
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardEight
|
|
title="Loved by Creators Worldwide"
|
|
description="See what our community has to say about their experience"
|
|
tag="Testimonials"
|
|
tagIcon={Heart}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", role: "Creative Director", company: "Design Studio Co.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716612033-pmp8jgth.jpg", imageAlt: "Sarah Johnson"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Chen", role: "Product Lead", company: "TechVentures Inc.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716612977-ndtzevzi.jpg", imageAlt: "Michael Chen"
|
|
},
|
|
{
|
|
id: "3", name: "Emily Rodriguez", role: "Founder", company: "Innovation Labs", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717155333-vqc8t7wg.jpg", imageAlt: "Emily Rodriguez"
|
|
},
|
|
{
|
|
id: "4", name: "David Park", role: "Lead Developer", company: "StartupXYZ", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717157494-lxyh2p44.jpg", imageAlt: "David Park"
|
|
},
|
|
{
|
|
id: "5", name: "Lisa Thompson", role: "UX Manager", company: "Creative Agency Ltd.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716614231-c7kqvy4k.jpg", imageAlt: "Lisa Thompson"
|
|
},
|
|
{
|
|
id: "6", name: "James Wilson", role: "CEO", company: "Digital Solutions Corp.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716615370-11cqkj8g.jpg", imageAlt: "James Wilson"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenterForm
|
|
title="Let's Create Together"
|
|
description="Have questions or ready to start your project? We'd love to hear from you. Get in touch with our team and let's bring your vision to life."
|
|
useInvertedBackground="invertDefault"
|
|
buttonText="Send Message"
|
|
inputs={[
|
|
{
|
|
name: "name", type: "text", placeholder: "Your Name", required: true
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "Email Address", required: true
|
|
},
|
|
{
|
|
name: "company", type: "text", placeholder: "Company Name", required: false
|
|
}
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Tell us about your project...", rows: 5,
|
|
required: true
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="Webild"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{
|
|
label: "Features", href: "features"
|
|
},
|
|
{
|
|
label: "Pricing", href: "pricing"
|
|
},
|
|
{
|
|
label: "About", href: "about"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Documentation", href: "#"
|
|
},
|
|
{
|
|
label: "Support", href: "#"
|
|
},
|
|
{
|
|
label: "Contact", href: "contact"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Privacy Policy", href: "#"
|
|
},
|
|
{
|
|
label: "Terms of Service", href: "#"
|
|
},
|
|
{
|
|
label: "Cookies", href: "#"
|
|
}
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |