Merge version_2 into main #2
184
src/app/page.tsx
184
src/app/page.tsx
@@ -2,15 +2,14 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
||||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||||
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
||||
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import { Zap, Sparkles, TrendingUp, Heart, HelpCircle } from "lucide-react";
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import { Zap, Sparkles, TrendingUp, Heart, HelpCircle, Check } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -41,7 +40,7 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
<HeroCentered
|
||||
title="Ship your MVP in weeks, not months"
|
||||
description="We turn your product vision into market-ready software. Transparent process, experienced team, startup-focused delivery."
|
||||
background={{ variant: "plain" }}
|
||||
@@ -65,47 +64,50 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
heading={[
|
||||
{ type: "text", content: "Our proven" },
|
||||
{ type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARJeYX8Eds8VZQrJWHsamdmY5p/a-professional-badge-or-stamp-design-rep-1772549676901-195261fb.png", alt: "Process methodology" },
|
||||
{ type: "text", content: "gets your product to market fast" }
|
||||
<MetricSplitMediaAbout
|
||||
title="Our proven process"
|
||||
description="gets your product to market fast"
|
||||
metrics={[
|
||||
{ id: "1", value: "50+", label: "MVPs launched", items: ["From seed to Series A", "Across industries"] },
|
||||
{ id: "2", value: "4-8 weeks", label: "Average timeline", items: ["40% faster", "Transparent pricing"] }
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARJeYX8Eds8VZQrJWHsamdmY5p/a-professional-badge-or-stamp-design-rep-1772549676901-195261fb.png"
|
||||
imageAlt="Process methodology"
|
||||
buttons={[
|
||||
{ text: "Learn about our process", href: "#" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardOne
|
||||
<FeatureCardNineteen
|
||||
title="MVP Development Services"
|
||||
description="End-to-end development services designed for early-stage founders and startup CTOs who need speed without sacrificing quality."
|
||||
tag="What We Deliver"
|
||||
tagIcon={Sparkles}
|
||||
features={[
|
||||
{
|
||||
title: "Full-Stack Development", description: "From backend architecture to responsive frontend, we build complete, scalable MVPs using modern tech stacks.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARJeYX8Eds8VZQrJWHsamdmY5p/an-illustration-showing-full-stack-web-d-1772549676836-f67fe53a.png"
|
||||
id: "1", title: "Full-Stack Development", description: "From backend architecture to responsive frontend, we build complete, scalable MVPs using modern tech stacks.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARJeYX8Eds8VZQrJWHsamdmY5p/an-illustration-showing-full-stack-web-d-1772549676836-f67fe53a.png", imageAlt: "Full-Stack Development"
|
||||
},
|
||||
{
|
||||
title: "Rapid Prototyping", description: "Validate your concept in weeks. We iterate quickly based on feedback to ensure product-market fit.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARJeYX8Eds8VZQrJWHsamdmY5p/an-illustration-depicting-rapid-prototyp-1772549676043-790dc1a3.png"
|
||||
id: "2", title: "Rapid Prototyping", description: "Validate your concept in weeks. We iterate quickly based on feedback to ensure product-market fit.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARJeYX8Eds8VZQrJWHsamdmY5p/an-illustration-depicting-rapid-prototyp-1772549676043-790dc1a3.png", imageAlt: "Rapid Prototyping"
|
||||
},
|
||||
{
|
||||
title: "Transparent Process", description: "Regular updates, clear communication, and predictable timelines. You're never left wondering where your project stands.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARJeYX8Eds8VZQrJWHsamdmY5p/an-illustration-representing-transparent-1772549676346-0ef468aa.png"
|
||||
id: "3", title: "Transparent Process", description: "Regular updates, clear communication, and predictable timelines. You're never left wondering where your project stands.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARJeYX8Eds8VZQrJWHsamdmY5p/an-illustration-representing-transparent-1772549676346-0ef468aa.png", imageAlt: "Transparent Process"
|
||||
},
|
||||
{
|
||||
title: "Startup Expertise", description: "We've built 50+ MVPs for founders just like you. We understand your constraints and priorities.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARJeYX8Eds8VZQrJWHsamdmY5p/an-illustration-showing-startup-expertis-1772549678299-71f4942e.png"
|
||||
id: "4", title: "Startup Expertise", description: "We've built 50+ MVPs for founders just like you. We understand your constraints and priorities.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARJeYX8Eds8VZQrJWHsamdmY5p/an-illustration-showing-startup-expertis-1772549678299-71f4942e.png", imageAlt: "Startup Expertise"
|
||||
},
|
||||
{
|
||||
title: "Post-Launch Support", description: "Your MVP success doesn't end at launch. We provide onboarding support and optimization guidance.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARJeYX8Eds8VZQrJWHsamdmY5p/an-illustration-representing-post-launch-1772549676364-c7ea749f.png"
|
||||
id: "5", title: "Post-Launch Support", description: "Your MVP success doesn't end at launch. We provide onboarding support and optimization guidance.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARJeYX8Eds8VZQrJWHsamdmY5p/an-illustration-representing-post-launch-1772549676364-c7ea749f.png", imageAlt: "Post-Launch Support"
|
||||
},
|
||||
{
|
||||
title: "Cost-Effective Solutions", description: "Fixed pricing models and optimized workflows mean you get maximum value for your development budget.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARJeYX8Eds8VZQrJWHsamdmY5p/an-illustration-depicting-cost-effective-1772549676605-358044db.png"
|
||||
id: "6", title: "Cost-Effective Solutions", description: "Fixed pricing models and optimized workflows mean you get maximum value for your development budget.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARJeYX8Eds8VZQrJWHsamdmY5p/an-illustration-depicting-cost-effective-1772549676605-358044db.png", imageAlt: "Cost-Effective Solutions"
|
||||
}
|
||||
]}
|
||||
gridVariant="two-items-per-row"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
@@ -116,24 +118,60 @@ export default function LandingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardFive
|
||||
title="Simple, Transparent Pricing"
|
||||
description="Choose the plan that fits your needs"
|
||||
tag="Pricing"
|
||||
tagIcon={Sparkles}
|
||||
plans={[
|
||||
{
|
||||
id: "monthly-retainer", tag: "Monthly Retainer Plan", price: "$5,000", period: "/m", description: "Scale design, no-code builds & copy quicker than recruiting in-house.", button: { text: "Get started", href: "#contact" },
|
||||
featuresTitle: "What's Included:", features: [
|
||||
"Unlimited design requests", "48-hour turnaround", "Dedicated project manager", "Weekly status updates"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "standard-mvp", tag: "Standard MVP Package", price: "$75,000", period: "one-time", description: "Full MVP development with all core features and 30 days of support.", button: { text: "Schedule call", href: "#contact" },
|
||||
featuresTitle: "What's Included:", features: [
|
||||
"Full-stack development", "UI/UX design", "30-day support", "Performance optimization"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "enterprise", tag: "Enterprise Custom", price: "Custom", period: "quote", description: "Complex projects with custom requirements and extended support.", button: { text: "Contact us", href: "#contact" },
|
||||
featuresTitle: "What's Included:", features: [
|
||||
"Custom development", "Advanced architecture", "Extended support", "Infrastructure setup"
|
||||
]
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "View all plans", href: "#" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
<MetricCardEleven
|
||||
title="Our Track Record"
|
||||
description="Proven results backed by real numbers and early-stage founder success stories."
|
||||
tag="By the Numbers"
|
||||
tagIcon={TrendingUp}
|
||||
metrics={[
|
||||
{
|
||||
id: "1", value: "50+", title: "MVPs launched for startups", items: ["From seed to Series A funding", "Across multiple industries", "98% on-time delivery rate"]
|
||||
id: "1", value: "50+", description: "MVPs Launched"
|
||||
},
|
||||
{
|
||||
id: "2", value: "4-8 weeks", title: "Average MVP delivery time", items: ["40% faster than industry average", "Includes 2 iteration cycles", "Transparent fixed pricing"]
|
||||
id: "2", value: "4-8 weeks", description: "Avg Delivery Time"
|
||||
},
|
||||
{
|
||||
id: "3", value: "$50K-$150K", title: "Typical MVP investment range", items: ["Cost-effective vs. in-house hiring", "No long-term employment costs", "Scalable team as you grow"]
|
||||
id: "3", value: "$50K-$150K", description: "Typical Investment"
|
||||
},
|
||||
{
|
||||
id: "4", value: "92%", title: "Client satisfaction rating", items: ["Founders recommend us to peers", "Repeat business from 70% of clients", "Average engagement duration 6+ months"]
|
||||
id: "4", value: "92%", description: "Satisfaction Rating"
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
@@ -147,36 +185,45 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
title="Founder Love"
|
||||
description="What early-stage founders and startup CTOs have to say about working with us."
|
||||
tag="Reviews"
|
||||
tagIcon={Heart}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Alex Chen", role: "Founder & CEO", testimonial: "Webild turned our idea into a fully functional MVP in just 6 weeks. Their transparent process made us feel like true partners, not just another client. We've already secured seed funding with the product they built.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARJeYX8Eds8VZQrJWHsamdmY5p/a-professional-headshot-of-a-confident-m-1772549677631-fe254b42.png"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Sarah Martinez", role: "CTO", testimonial: "We tried hiring developers locally but the costs were astronomical. Webild delivered better quality code at 60% of the cost. Their startup expertise meant they understood our constraints and shipped exactly what we needed.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARJeYX8Eds8VZQrJWHsamdmY5p/a-professional-headshot-of-a-female-cto--1772549675414-bd393948.png"
|
||||
},
|
||||
{
|
||||
id: "3", name: "James Wilson", role: "Product Manager", testimonial: "The communication was exceptional. We had weekly updates, quick turnarounds on feedback, and they actually guided us on product decisions. That level of partnership is rare in dev agencies.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARJeYX8Eds8VZQrJWHsamdmY5p/a-professional-headshot-of-a-male-produc-1772549675516-58be5645.png"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Priya Patel", role: "Co-Founder", testimonial: "Shipping a healthcare MVP is complex with compliance requirements. Webild not only built a solid product but advised us on technical architecture that scaled with our growth. Worth every penny.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARJeYX8Eds8VZQrJWHsamdmY5p/a-professional-headshot-of-a-female-co-f-1772549677551-372c31dc.png"
|
||||
},
|
||||
{
|
||||
id: "5", name: "Michael Torres", role: "Founder", testimonial: "They delivered early and under budget. We reinvested the savings into marketing. Best decision we made during our pre-launch phase.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARJeYX8Eds8VZQrJWHsamdmY5p/a-professional-headshot-of-a-male-founde-1772549675299-af3a6443.png"
|
||||
},
|
||||
{
|
||||
id: "6", name: "Emma Gottlieb", role: "Startup Advisor", testimonial: "I recommend Webild to founders in our portfolio. They consistently deliver quality MVPs that impress investors and validate business models quickly.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARJeYX8Eds8VZQrJWHsamdmY5p/a-professional-headshot-of-a-female-vent-1772549676940-91b7d9b5.png"
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
<div className="py-20">
|
||||
<div className="w-full max-w-3xl mx-auto px-4">
|
||||
<div className="text-center">
|
||||
<div className="inline-block mb-6">
|
||||
<span className="text-sm font-medium text-primary-cta bg-primary-cta/10 px-4 py-2 rounded-full">Reviews</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-4">Founder Love</h2>
|
||||
<p className="text-foreground/60 text-lg mb-12">What early-stage founders and startup CTOs have to say about working with us.</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="p-8 bg-card rounded-lg border border-accent/20">
|
||||
<div className="flex gap-1 mb-4 justify-center">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<svg key={i} className="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
|
||||
<path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-foreground/80 mb-4">"Webild turned our idea into a fully functional MVP in just 6 weeks. Their transparent process made us feel like true partners, not just another client."</p>
|
||||
<p className="font-semibold text-foreground">Alex Chen</p>
|
||||
<p className="text-sm text-foreground/60">Founder & CEO</p>
|
||||
</div>
|
||||
|
||||
<div className="p-8 bg-card rounded-lg border border-accent/20">
|
||||
<div className="flex gap-1 mb-4 justify-center">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<svg key={i} className="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
|
||||
<path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-foreground/80 mb-4">"Webild delivered better quality code at 60% of the cost. Their startup expertise meant they understood our constraints and shipped exactly what we needed."</p>
|
||||
<p className="font-semibold text-foreground">Sarah Martinez</p>
|
||||
<p className="text-sm text-foreground/60">CTO</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
@@ -215,27 +262,14 @@ export default function LandingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
text="Ready to ship your MVP faster? Let's talk about your product vision and timeline."
|
||||
animationType="entrance-slide"
|
||||
buttons={[
|
||||
{ text: "Schedule a call", href: "#" },
|
||||
{ text: "Send us details", href: "#" }
|
||||
]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
<FooterCard
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Services", href: "#services" },
|
||||
{ label: "Process", href: "#about" },
|
||||
{ label: "Pricing", href: "#" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
{ label: "Case Studies", href: "#" }
|
||||
]
|
||||
},
|
||||
@@ -263,8 +297,8 @@ export default function LandingPage() {
|
||||
]
|
||||
}
|
||||
]}
|
||||
bottomLeftText="© 2025 Webild. All rights reserved."
|
||||
bottomRightText="Shipping MVPs that matter"
|
||||
logoText="Webild"
|
||||
copyrightText="© 2025 Webild. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
Reference in New Issue
Block a user