Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-04-05 18:10:35 +00:00

View File

@@ -16,446 +16,181 @@ import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCar
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="medium"
sizing="mediumLarge"
background="floatingGradient"
cardStyle="solid"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="light"
defaultButtonVariant="directional-hover"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="medium"
sizing="mediumLarge"
background="floatingGradient"
cardStyle="solid"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="light"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Services",
id: "services",
},
{
name: "Portfolio",
id: "portfolio",
},
{
name: "Pricing",
id: "pricing",
},
]}
brandName="WebStart Solutions"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "hero" },
{ name: "Services", id: "services" },
{ name: "Portfolio", id: "portfolio" },
{ name: "Pricing", id: "pricing" },
]}
brandName="WebStart Solutions"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogo
logoText="WebStart Solutions"
description="Premium websites and digital systems crafted to elevate your business from day one."
buttons={[
{
text: "Get Started",
href: "#contact",
},
{
text: "View Our Work",
href: "#portfolio",
},
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/vertical-shot-linear-lights-black_181624-4960.jpg"
imageAlt="Luxurious WebStart Solutions hero"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogo
logoText="WebStart Solutions"
description="Premium websites and digital systems crafted to elevate your business from day one."
buttons={[
{ text: "Get Started", href: "#contact" },
{ text: "View Our Work", href: "#portfolio" },
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/vertical-shot-linear-lights-black_181624-4960.jpg"
imageAlt="Luxurious WebStart Solutions hero"
/>
</div>
<div id="values" data-section="values">
<FeatureCardTwentySeven
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
id: "1",
title: "Luxury Design",
descriptions: [
"Tailor-made interfaces that look polished and feel effortless.",
],
imageSrc: "http://img.b2bpic.net/free-vector/elegant-business-stationery_1195-107.jpg",
imageAlt: "Luxury design",
},
{
id: "2",
title: "High-Conversion Architecture",
descriptions: [
"Built with psychology-backed layouts that turn visitors into clients.",
],
imageSrc: "http://img.b2bpic.net/free-photo/diagram-graphs-information-statistics-stock-data-concept_53876-64925.jpg",
imageAlt: "High conversion",
},
{
id: "3",
title: "Fast, Secure, Reliable",
descriptions: [
"Modern frameworks, optimized performance, and clean code.",
],
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-concept-online-storage-clouds_1048-4189.jpg",
imageAlt: "Reliability",
},
]}
title="Why WebStart Solutions"
description="We build with precision, luxury, and conversion in mind to ensure your digital presence is unmatched."
/>
</div>
<div id="values" data-section="values">
<FeatureCardTwentySeven
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{ id: "1", title: "Luxury Design", descriptions: ["Tailor-made interfaces that look polished and feel effortless."], imageSrc: "http://img.b2bpic.net/free-vector/elegant-business-stationery_1195-107.jpg", imageAlt: "Luxury design" },
{ id: "2", title: "High-Conversion Architecture", descriptions: ["Built with psychology-backed layouts that turn visitors into clients."], imageSrc: "http://img.b2bpic.net/free-photo/diagram-graphs-information-statistics-stock-data-concept_53876-64925.jpg", imageAlt: "High conversion" },
{ id: "3", title: "Fast, Secure, Reliable", descriptions: ["Modern frameworks, optimized performance, and clean code."], imageSrc: "http://img.b2bpic.net/free-photo/3d-render-concept-online-storage-clouds_1048-4189.jpg", imageAlt: "Reliability" },
]}
title="Why WebStart Solutions"
description="We build with precision, luxury, and conversion in mind to ensure your digital presence is unmatched."
/>
</div>
<div id="services" data-section="services">
<ProductCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "s1",
brand: "Web",
name: "Custom Websites",
price: "From $5k",
rating: 5,
reviewCount: "10+",
imageSrc: "http://img.b2bpic.net/free-photo/focused-smart-businesswoman-is-reading-important-document-while-sitting-her-office_613910-3136.jpg?_wi=1",
},
{
id: "s2",
brand: "Dev",
name: "Landing Pages",
price: "From $2k",
rating: 5,
reviewCount: "15+",
imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884876.jpg?_wi=1",
},
{
id: "s3",
brand: "Store",
name: "E-Commerce",
price: "From $8k",
rating: 5,
reviewCount: "8+",
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-subway-station-illuminated-modern-empty-motion-generated-by-ai_188544-37950.jpg?_wi=1",
},
{
id: "s4",
brand: "Brand",
name: "Brand Identity",
price: "From $3k",
rating: 5,
reviewCount: "12+",
imageSrc: "http://img.b2bpic.net/free-photo/focused-smart-businesswoman-is-reading-important-document-while-sitting-her-office_613910-3136.jpg?_wi=2",
},
{
id: "s5",
brand: "System",
name: "Digital Systems",
price: "Custom",
rating: 5,
reviewCount: "5+",
imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884876.jpg?_wi=2",
},
{
id: "s6",
brand: "Optim",
name: "Full Audit",
price: "From $1k",
rating: 5,
reviewCount: "20+",
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-subway-station-illuminated-modern-empty-motion-generated-by-ai_188544-37950.jpg?_wi=2",
},
]}
title="What We Build"
description="Comprehensive digital solutions tailored to scale."
/>
</div>
<div id="services" data-section="services">
<ProductCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{ id: "s1", brand: "Web", name: "Custom Websites", price: "From $5k", rating: 5, reviewCount: "10+", imageSrc: "http://img.b2bpic.net/free-photo/focused-smart-businesswoman-is-reading-important-document-while-sitting-her-office_613910-3136.jpg" },
{ id: "s2", brand: "Dev", name: "Landing Pages", price: "From $2k", rating: 5, reviewCount: "15+", imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884876.jpg" },
{ id: "s3", brand: "Store", name: "E-Commerce", price: "From $8k", rating: 5, reviewCount: "8+", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-subway-station-illuminated-modern-empty-motion-generated-by-ai_188544-37950.jpg" },
{ id: "s4", brand: "Brand", name: "Brand Identity", price: "From $3k", rating: 5, reviewCount: "12+", imageSrc: "http://img.b2bpic.net/free-photo/focused-smart-businesswoman-is-reading-important-document-while-sitting-her-office_613910-3136.jpg" },
{ id: "s5", brand: "System", name: "Digital Systems", price: "Custom", rating: 5, reviewCount: "5+", imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884876.jpg" },
{ id: "s6", brand: "Optim", name: "Full Audit", price: "From $1k", rating: 5, reviewCount: "20+", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-subway-station-illuminated-modern-empty-motion-generated-by-ai_188544-37950.jpg" },
]}
title="What We Build"
description="Comprehensive digital solutions tailored to scale."
/>
</div>
<div id="portfolio" data-section="portfolio">
<FeatureCardTwentySeven
textboxLayout="split"
useInvertedBackground={false}
features={[
{
id: "p1",
title: "Luxury Fashion Brand",
descriptions: [
"Full digital platform for global fashion retail.",
],
imageSrc: "http://img.b2bpic.net/free-psd/minimalist-inauguration-landing-page-template_23-2149355913.jpg",
},
{
id: "p2",
title: "E-Commerce Tech Store",
descriptions: [
"High-performance storefront with custom checkout flow.",
],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dqewvg",
},
{
id: "p3",
title: "Startup Launch Pad",
descriptions: [
"Rapid-launch landing page for series-A funded venture.",
],
imageSrc: "http://img.b2bpic.net/free-photo/development-performance-self-improvement-ratings-icon_53876-122739.jpg",
},
]}
title="Featured Work"
description="A selection of our finest digital craft."
/>
</div>
<div id="portfolio" data-section="portfolio">
<FeatureCardTwentySeven
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{ id: "p1", title: "Luxury Fashion Brand", descriptions: ["Full digital platform for global fashion retail."], imageSrc: "http://img.b2bpic.net/free-psd/minimalist-inauguration-landing-page-template_23-2149355913.jpg" },
{ id: "p2", title: "E-Commerce Tech Store", descriptions: ["High-performance storefront with custom checkout flow."], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dqewvg" },
{ id: "p3", title: "Startup Launch Pad", descriptions: ["Rapid-launch landing page for series-A funded venture."], imageSrc: "http://img.b2bpic.net/free-photo/development-performance-self-improvement-ratings-icon_53876-122739.jpg" },
]}
title="Featured Work"
description="A selection of our finest digital craft."
/>
</div>
<div id="process" data-section="process">
<MetricCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "01",
description: "Strategy Call",
},
{
id: "m2",
value: "02",
description: "Design Concept",
},
{
id: "m3",
value: "03",
description: "Build & Develop",
},
{
id: "m4",
value: "04",
description: "Launch & Optimize",
},
]}
title="A Simple, Powerful Process"
description="Our streamlined approach to delivering excellence."
/>
</div>
<div id="process" data-section="process">
<MetricCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "01", description: "Strategy Call" },
{ id: "m2", value: "02", description: "Design Concept" },
{ id: "m3", value: "03", description: "Build & Develop" },
{ id: "m4", value: "04", description: "Launch & Optimize" },
]}
title="A Simple, Powerful Process"
description="Our streamlined approach to delivering excellence."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
title: "Exceptional",
quote: "The most precise web work I've ever experienced.",
name: "Alice Johnson",
role: "CEO",
imageSrc: "http://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg",
},
{
id: "t2",
title: "Brilliant",
quote: "Built our store exactly as we envisioned it.",
name: "Bob Smith",
role: "Founder",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",
},
{
id: "t3",
title: "High Impact",
quote: "WebStart took our conversions to the next level.",
name: "Charlie Day",
role: "CMO",
imageSrc: "http://img.b2bpic.net/free-photo/confident-businessman-smiling_107420-84733.jpg",
},
{
id: "t4",
title: "Stellar",
quote: "Reliable, fast, and beautiful designs.",
name: "Diana Ross",
role: "Director",
imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-posing-with-crossed-arms_23-2148336911.jpg",
},
{
id: "t5",
title: "Luxury Feel",
quote: "The site feels premium, just like our products.",
name: "Eve Adams",
role: "VP Product",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-trendy-hairstyle_23-2149405999.jpg",
},
]}
title="What Clients Say"
description="Hear directly from those who trust our craft."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{ id: "t1", title: "Exceptional", quote: "The most precise web work I've ever experienced.", name: "Alice Johnson", role: "CEO", imageSrc: "http://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg" },
{ id: "t2", title: "Brilliant", quote: "Built our store exactly as we envisioned it.", name: "Bob Smith", role: "Founder", imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg" },
{ id: "t3", title: "High Impact", quote: "WebStart took our conversions to the next level.", name: "Charlie Day", role: "CMO", imageSrc: "http://img.b2bpic.net/free-photo/confident-businessman-smiling_107420-84733.jpg" },
{ id: "t4", title: "Stellar", quote: "Reliable, fast, and beautiful designs.", name: "Diana Ross", role: "Director", imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-posing-with-crossed-arms_23-2148336911.jpg" },
{ id: "t5", title: "Luxury Feel", quote: "The site feels premium, just like our products.", name: "Eve Adams", role: "VP Product", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-trendy-hairstyle_23-2149405999.jpg" },
]}
title="What Clients Say"
description="Hear directly from those who trust our craft."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "basic",
badge: "Launch",
price: "$5,000",
name: "Starter Launch",
buttons: [
{
text: "Book Discovery Call",
href: "#contact",
},
],
features: [
"Brand Identity",
"Homepage",
"Responsive UI",
"3 Pages",
],
},
{
id: "pro",
badge: "Scale",
price: "$12,000",
name: "Business Pro",
buttons: [
{
text: "Book Discovery Call",
href: "#contact",
},
],
features: [
"Everything in Starter",
"CMS Integration",
"E-Commerce",
"Speed Optimization",
],
},
{
id: "premium",
badge: "Custom",
price: "Custom",
name: "Premium Signature",
buttons: [
{
text: "Book Discovery Call",
href: "#contact",
},
],
features: [
"Everything in Pro",
"Custom Systems",
"Priority Support",
"Dedicated Strategist",
],
},
]}
title="Transparent Packages"
description="Simple, high-end tiers for your business needs."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{ id: "basic", badge: "Launch", price: "$5,000", name: "Starter Launch", buttons: [{ text: "Book Discovery Call", href: "#contact" }], features: ["Brand Identity", "Homepage", "Responsive UI", "3 Pages"] },
{ id: "pro", badge: "Scale", price: "$12,000", name: "Business Pro", buttons: [{ text: "Book Discovery Call", href: "#contact" }], features: ["Everything in Starter", "CMS Integration", "E-Commerce", "Speed Optimization"] },
{ id: "premium", badge: "Custom", price: "Custom", name: "Premium Signature", buttons: [{ text: "Book Discovery Call", href: "#contact" }], features: ["Everything in Pro", "Custom Systems", "Priority Support", "Dedicated Strategist"] },
]}
title="Transparent Packages"
description="Simple, high-end tiers for your business needs."
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
useInvertedBackground={false}
title="Meet WebStart Solutions"
description="A focused digital partner dedicated to building functional, high-end websites that move businesses forward. Precision is in our DNA."
metrics={[
{
value: "100+",
title: "Projects",
},
{
value: "50+",
title: "Clients",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/business-desk-concept-with-flower_23-2149073030.jpg"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
useInvertedBackground={false}
title="Meet WebStart Solutions"
description="A focused digital partner dedicated to building functional, high-end websites that move businesses forward. Precision is in our DNA."
metrics={[
{ value: "100+", title: "Projects" },
{ value: "50+", title: "Clients" },
]}
imageSrc="http://img.b2bpic.net/free-photo/business-desk-concept-with-flower_23-2149073030.jpg"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Start Your Project"
description="Let's build something exceptional together."
inputs={[
{
name: "name",
type: "text",
placeholder: "Name",
},
{
name: "email",
type: "email",
placeholder: "Email",
},
{
name: "business",
type: "text",
placeholder: "Business Name",
},
]}
textarea={{
name: "message",
placeholder: "Tell us about your project...",
}}
imageSrc="http://img.b2bpic.net/free-photo/red-price-tags-dark-copy-space-background_23-2148663125.jpg"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Start Your Project"
description="Let's build something exceptional together."
inputs={[
{ name: "name", type: "text", placeholder: "Name" },
{ name: "email", type: "email", placeholder: "Email" },
{ name: "business", type: "text", placeholder: "Business Name" },
]}
textarea={{ name: "message", placeholder: "Tell us about your project..." }}
imageSrc="http://img.b2bpic.net/free-photo/red-price-tags-dark-copy-space-background_23-2148663125.jpg"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="WebStart Solutions"
columns={[
{
title: "Solutions",
items: [
{
label: "Websites",
href: "#services",
},
{
label: "Branding",
href: "#services",
},
],
},
{
title: "Company",
items: [
{
label: "About",
href: "#about",
},
{
label: "Portfolio",
href: "#portfolio",
},
],
},
{
title: "Contact",
items: [
{
label: "Book Discovery",
href: "#contact",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="WebStart Solutions"
columns={[
{ title: "Solutions", items: [{ label: "Websites", href: "#services" }, { label: "Branding", href: "#services" }] },
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Portfolio", href: "#portfolio" }] },
{ title: "Contact", items: [{ label: "Book Discovery", href: "#contact" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);