274 lines
16 KiB
TypeScript
274 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
|
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
|
|
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
|
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import ContactText from "@/components/sections/contact/ContactText";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import { Sparkles, Award, Briefcase, MessageCircle, Users, Twitter, Linkedin, Github, ArrowRight } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="medium"
|
|
sizing="largeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Webild Studio"
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Work", id: "featured-work" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
]}
|
|
button={{
|
|
text: "Get Started", href: "contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDoubleCarousel
|
|
title="Websites That Drive Results"
|
|
description="We create stunning, conversion-focused websites for companies. Beautiful design meets strategic thinking to transform your online presence."
|
|
tag="Web Design Studio"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "glowing-orb" }}
|
|
leftCarouselItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/a-sleek-modern-website-homepage-design-w-1772593793082-fafc27e1.png", imageAlt: "Modern tech startup website"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/an-e-commerce-website-interface-with-pro-1772593793762-b309c95e.png", imageAlt: "E-commerce platform design"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/a-corporate-business-website-with-hero-s-1772593793095-c31f25ea.png", imageAlt: "Corporate business website"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/a-creative-agency-website-showcasing-por-1772593792303-bfca2d17.png", imageAlt: "Creative agency portfolio"
|
|
},
|
|
]}
|
|
rightCarouselItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/a-saas-product-landing-page-with-feature-1772593794357-f5fafa05.png", imageAlt: "SaaS product landing page"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/a-health-and-wellness-website-with-beaut-1772593792817-0f926c14.png", imageAlt: "Health and wellness site"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/a-restaurant-and-hospitality-website-wit-1772593814586-c2950457.png", imageAlt: "Restaurant website"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/a-fashion-brand-website-with-elegant-pro-1772593792755-8bb98022.png", imageAlt: "Fashion brand site"
|
|
},
|
|
]}
|
|
carouselPosition="right"
|
|
buttons={[
|
|
{
|
|
text: "View Our Work", href: "#featured-work"
|
|
},
|
|
{
|
|
text: "Start a Project", href: "#contact"
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{
|
|
type: "text", content: "We design websites that"
|
|
},
|
|
{
|
|
type: "text", content: "convert visitors into customers"
|
|
},
|
|
]}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{
|
|
text: "Learn Our Process", href: "#services"
|
|
},
|
|
{
|
|
text: "Schedule a Consultation", href: "#contact"
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="featured-work" data-section="featured-work">
|
|
<FeatureCardTwentySix
|
|
title="Featured Projects"
|
|
description="Explore our latest work showcasing strategic design and technical excellence"
|
|
tag="Case Studies"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
title: "Tech Startup Rebrand", description: "Complete website redesign with modern UI and improved conversion rate by 45%", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/beautiful-website-design-showcase-for-a--1772593792583-38b9243a.png?_wi=1", imageAlt: "Tech startup website redesign", buttonIcon: ArrowRight,
|
|
buttonHref: "#"
|
|
},
|
|
{
|
|
title: "E-Commerce Platform", description: "Full-stack design and development for scalable online store with advanced features", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/professional-e-commerce-redesign-with-im-1772593795823-80b46336.png?_wi=1", imageAlt: "E-commerce platform design", buttonIcon: ArrowRight,
|
|
buttonHref: "#"
|
|
},
|
|
{
|
|
title: "Corporate Identity", description: "Brand strategy and website design for Fortune 500 company with global reach", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/corporate-branding-and-website-redesign--1772593792355-1be93702.png?_wi=1", imageAlt: "Corporate branding project", buttonIcon: ArrowRight,
|
|
buttonHref: "#"
|
|
},
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{
|
|
text: "See All Projects", href: "#"
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<ProductCardFour
|
|
title="Our Services"
|
|
description="Comprehensive web design and development solutions tailored to your business needs"
|
|
tag="What We Offer"
|
|
tagIcon={Briefcase}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
products={[
|
|
{
|
|
id: "web-design", name: "Web Design", price: "Starting at $2,500", variant: "UI/UX Design • Responsive Layout", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/beautiful-website-design-showcase-for-a--1772593792583-38b9243a.png?_wi=2", imageAlt: "Web design service"
|
|
},
|
|
{
|
|
id: "web-development", name: "Web Development", price: "Starting at $5,000", variant: "Frontend • Backend • Database", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/professional-e-commerce-redesign-with-im-1772593795823-80b46336.png?_wi=2", imageAlt: "Web development service"
|
|
},
|
|
{
|
|
id: "ecommerce", name: "E-Commerce Solutions", price: "Starting at $7,500", variant: "Shopify • WooCommerce • Custom", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/corporate-branding-and-website-redesign--1772593792355-1be93702.png?_wi=2", imageAlt: "E-commerce development"
|
|
},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Get a Quote", href: "#contact"
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
title="What Our Clients Say"
|
|
description="Real feedback from companies we've worked with"
|
|
tag="Testimonials"
|
|
tagIcon={MessageCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", handle: "CEO, TechFlow Inc", testimonial: "Webild Studio transformed our online presence. The new website increased our leads by 60% in just three months. Truly exceptional work!", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/professional-headshot-of-a-business-exec-1772593791038-c7972f90.png", imageAlt: "Sarah Johnson"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Chen", handle: "Founder, StartupXYZ", testimonial: "Their understanding of user experience and business goals resulted in a website that not only looks beautiful but converts exceptionally well.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/professional-headshot-of-a-creative-prof-1772593791694-89ff1179.png", imageAlt: "Michael Chen"
|
|
},
|
|
{
|
|
id: "3", name: "Emily Rodriguez", handle: "Marketing Director, GrowthCo", testimonial: "Working with Webild Studio was smooth and professional. They delivered on time and exceeded our expectations. Highly recommended!", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/professional-headshot-of-a-female-busine-1772593791817-8965e096.png", imageAlt: "Emily Rodriguez"
|
|
},
|
|
{
|
|
id: "4", name: "David Kim", handle: "Operations Manager, CloudSync", testimonial: "The team's attention to detail and commitment to quality is remarkable. Our new website is now our best marketing asset.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/professional-headshot-of-a-male-entrepre-1772593791748-ea91b2ee.png", imageAlt: "David Kim"
|
|
},
|
|
{
|
|
id: "5", name: "Jessica Lee", handle: "VP Product, InnovateLab", testimonial: "Exceptional design paired with technical excellence. They understood our vision and brought it to life beautifully.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/professional-headshot-of-a-creative-dire-1772593790967-10903bef.png", imageAlt: "Jessica Lee"
|
|
},
|
|
{
|
|
id: "6", name: "Robert Martinez", handle: "Founder, DesignHub", testimonial: "Best investment we made for our business. The website generated more qualified leads than all our other marketing channels combined.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/professional-headshot-of-a-business-owne-1772593791880-76aa7bf9.png", imageAlt: "Robert Martinez"
|
|
},
|
|
]}
|
|
speed={40}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted by Leading Companies"
|
|
description="We've partnered with innovative companies across industries"
|
|
tag="Our Partners"
|
|
tagIcon={Users}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Microsoft", "Google", "Apple", "Amazon", "Netflix", "Slack", "Figma", "Shopify"
|
|
]}
|
|
logos={[
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/microsoft-company-logo-clean-professiona-1772593790529-72155e3f.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/google-company-logo-iconic-colorful-and--1772593793242-9fb2b3df.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/apple-company-logo-minimalist-profession-1772593792593-2e4c0cfd.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/amazon-company-logo-professional-recogni-1772593790510-ee0812e4.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/netflix-company-logo-bold-recognizable-s-1772593791642-f959250e.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/slack-company-logo-modern-colorful-and-p-1772593790847-66a48ccc.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/figma-company-logo-modern-design-tool-br-1772593792200-4abb1791.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASl78LMG3D94avT7Hg5dOKDcHb/shopify-company-logo-professional-ecomme-1772593795433-6ae4bb9b.png"
|
|
]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to create something amazing? Let's discuss your next web project and turn your vision into reality."
|
|
animationType="entrance-slide"
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{
|
|
text: "Start Your Project", href: "#"
|
|
},
|
|
{
|
|
text: "Schedule a Call", href: "#"
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Webild Studio"
|
|
copyrightText="© 2025 Webild Studio. All rights reserved."
|
|
socialLinks={[
|
|
{
|
|
icon: Twitter,
|
|
href: "https://twitter.com", ariaLabel: "Follow us on Twitter"
|
|
},
|
|
{
|
|
icon: Linkedin,
|
|
href: "https://linkedin.com", ariaLabel: "Connect with us on LinkedIn"
|
|
},
|
|
{
|
|
icon: Github,
|
|
href: "https://github.com", ariaLabel: "View our code on GitHub"
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|