Update src/app/page.tsx
This commit is contained in:
485
src/app/page.tsx
485
src/app/page.tsx
@@ -29,362 +29,153 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Portfolio",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Webotixs"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Portfolio", id: "products" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Webotixs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
title="Elevating Digital Potential for Global Enterprises"
|
||||
description="Webotixs designs, develops, and automates high-performance digital systems. From custom CRM solutions to conversion-optimized web experiences, we bridge the gap between complex challenges and scalable growth."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Project",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "Our Services",
|
||||
href: "#features",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/network-graphic-overlay-banner-laptop_53876-120748.jpg",
|
||||
imageAlt: "Data Analytics UI",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320705.jpg",
|
||||
imageAlt: "Agency Workspace",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/team-technicians-using-pc-data-center-integrating-ai-automation-tools_482257-126231.jpg",
|
||||
imageAlt: "AI Neural Nodes",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cosmic-environment-with-colorful-neon-laser-lights-perfect-digital-wallpaper_181624-32841.jpg",
|
||||
imageAlt: "Network Security",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-worker-holding-smartphone-with-horizontal-green-screen-business-office-young-adult-working-with-blank-chroma-key-isolated-template-with-mockup-background-mobile-phone-display_482257-40952.jpg",
|
||||
imageAlt: "Growth Analytics",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-investor-looking-stock-trade-sales-computer-using-financial-statistics-plan-business-investment-growth-market-analyst-working-with-real-time-forex-exchange-graphs_482257-40949.jpg",
|
||||
imageAlt: "Startup Dashboard",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Elevating Digital Potential for Global Enterprises"
|
||||
description="Webotixs designs, develops, and automates high-performance digital systems. From custom CRM solutions to conversion-optimized web experiences, we bridge the gap between complex challenges and scalable growth."
|
||||
buttons={[
|
||||
{ text: "Start Project", href: "#contact" },
|
||||
{ text: "Our Services", href: "#features" }
|
||||
]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/network-graphic-overlay-banner-laptop_53876-120748.jpg", imageAlt: "Data Analytics UI" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320705.jpg", imageAlt: "Agency Workspace" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/team-technicians-using-pc-data-center-integrating-ai-automation-tools_482257-126231.jpg", imageAlt: "AI Neural Nodes" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/cosmic-environment-with-colorful-neon-laser-lights-perfect-digital-wallpaper_181624-32841.jpg", imageAlt: "Network Security" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/male-worker-holding-smartphone-with-horizontal-green-screen-business-office-young-adult-working-with-blank-chroma-key-isolated-template-with-mockup-background-mobile-phone-display_482257-40952.jpg", imageAlt: "Growth Analytics" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/male-investor-looking-stock-trade-sales-computer-using-financial-statistics-plan-business-investment-growth-market-analyst-working-with-real-time-forex-exchange-graphs_482257-40949.jpg", imageAlt: "Startup Dashboard" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="Impact by the Numbers"
|
||||
metrics={[
|
||||
{
|
||||
icon: CheckCircle,
|
||||
label: "Projects Completed",
|
||||
value: "250+",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
label: "Global Clients",
|
||||
value: "120+",
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
label: "Conversion Boost",
|
||||
value: "45%",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="Impact by the Numbers"
|
||||
metrics={[
|
||||
{ icon: CheckCircle, label: "Projects Completed", value: "250+" },
|
||||
{ icon: Users, label: "Global Clients", value: "120+" },
|
||||
{ icon: TrendingUp, label: "Conversion Boost", value: "45%" }
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Layout,
|
||||
title: "UI/UX Design",
|
||||
description: "Crafting beautiful, intuitive interfaces that turn passive visitors into loyal customers.",
|
||||
},
|
||||
{
|
||||
icon: Code2,
|
||||
title: "Website Development",
|
||||
description: "Fast, secure, and responsive web systems optimized for modern business requirements.",
|
||||
},
|
||||
{
|
||||
icon: Star,
|
||||
title: "AI Automation",
|
||||
description: "Streamlining workflows through intelligent automation to boost team productivity.",
|
||||
},
|
||||
{
|
||||
icon: Search,
|
||||
title: "SEO Services",
|
||||
description: "Enhancing online visibility with data-driven strategies for global reach.",
|
||||
},
|
||||
{
|
||||
icon: Database,
|
||||
title: "Custom CRM Solutions",
|
||||
description: "Tailored database management systems built specifically for your unique operations.",
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
title: "Global Digital Strategy",
|
||||
description: "Scalable systems ready for markets in the UK, Canada, Australia, and the USA.",
|
||||
},
|
||||
]}
|
||||
title="Our Core Services"
|
||||
description="Comprehensive digital solutions built for scalability and performance."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Layout, title: "UI/UX Design", description: "Crafting beautiful, intuitive interfaces that turn passive visitors into loyal customers." },
|
||||
{ icon: Code2, title: "Website Development", description: "Fast, secure, and responsive web systems optimized for modern business requirements." },
|
||||
{ icon: Star, title: "AI Automation", description: "Streamlining workflows through intelligent automation to boost team productivity." },
|
||||
{ icon: Search, title: "SEO Services", description: "Enhancing online visibility with data-driven strategies for global reach." },
|
||||
{ icon: Database, title: "Custom CRM Solutions", description: "Tailored database management systems built specifically for your unique operations." },
|
||||
{ icon: Globe, title: "Global Digital Strategy", description: "Scalable systems ready for markets in the UK, Canada, Australia, and the USA." }
|
||||
]}
|
||||
title="Our Core Services"
|
||||
description="Comprehensive digital solutions built for scalability and performance."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
textboxLayout="split-description"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "Fintech",
|
||||
name: "Cloud Dashboard System",
|
||||
price: "$12,000",
|
||||
rating: 5,
|
||||
reviewCount: "24",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/homepage-seen-computer-screen_23-2149416723.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
brand: "E-commerce",
|
||||
name: "Scaling Webstore",
|
||||
price: "$8,500",
|
||||
rating: 5,
|
||||
reviewCount: "18",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/smart-home-management-application_23-2148627261.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
brand: "Agency",
|
||||
name: "Automation Tool",
|
||||
price: "$5,000",
|
||||
rating: 4,
|
||||
reviewCount: "12",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/executive-workspace-features-digital-dashboard-with-financial-charts_482257-123845.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
brand: "Startup",
|
||||
name: "Marketing Site",
|
||||
price: "$7,000",
|
||||
rating: 5,
|
||||
reviewCount: "30",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-property-engineer-searching-layout-details-laptop-office_482257-130146.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
brand: "Tech",
|
||||
name: "Data Interface",
|
||||
price: "$15,000",
|
||||
rating: 5,
|
||||
reviewCount: "22",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-computer-peripherals-server-room-desk_482257-118044.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
brand: "Enterprise",
|
||||
name: "CRM Framework",
|
||||
price: "$20,000",
|
||||
rating: 5,
|
||||
reviewCount: "45",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/digital-environment-scene_23-2151873117.jpg",
|
||||
},
|
||||
]}
|
||||
title="Recent Work Highlights"
|
||||
description="See how we empower businesses with professional web and digital system design."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "1", brand: "Fintech", name: "Cloud Dashboard System", price: "$12,000", rating: 5, reviewCount: "24", imageSrc: "http://img.b2bpic.net/free-photo/homepage-seen-computer-screen_23-2149416723.jpg" },
|
||||
{ id: "2", brand: "E-commerce", name: "Scaling Webstore", price: "$8,500", rating: 5, reviewCount: "18", imageSrc: "http://img.b2bpic.net/free-vector/smart-home-management-application_23-2148627261.jpg" },
|
||||
{ id: "3", brand: "Agency", name: "Automation Tool", price: "$5,000", rating: 4, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/executive-workspace-features-digital-dashboard-with-financial-charts_482257-123845.jpg" },
|
||||
{ id: "4", brand: "Startup", name: "Marketing Site", price: "$7,000", rating: 5, reviewCount: "30", imageSrc: "http://img.b2bpic.net/free-photo/woman-property-engineer-searching-layout-details-laptop-office_482257-130146.jpg" },
|
||||
{ id: "5", brand: "Tech", name: "Data Interface", price: "$15,000", rating: 5, reviewCount: "22", imageSrc: "http://img.b2bpic.net/free-photo/close-up-computer-peripherals-server-room-desk_482257-118044.jpg" },
|
||||
{ id: "6", brand: "Enterprise", name: "CRM Framework", price: "$20,000", rating: 5, reviewCount: "45", imageSrc: "http://img.b2bpic.net/free-photo/digital-environment-scene_23-2151873117.jpg" }
|
||||
]}
|
||||
title="Recent Work Highlights"
|
||||
description="See how we empower businesses with professional web and digital system design."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="proof" data-section="proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"TechInnovate",
|
||||
"GlobalConnect",
|
||||
"GrowthSolutions",
|
||||
"DataWave",
|
||||
"NextGen",
|
||||
"PeakPerformance",
|
||||
"DigitalEdge",
|
||||
]}
|
||||
title="Trusted by Industry Leaders"
|
||||
description="Collaborating with fast-growing businesses worldwide."
|
||||
/>
|
||||
</div>
|
||||
<div id="proof" data-section="proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={false}
|
||||
names={["TechInnovate", "GlobalConnect", "GrowthSolutions", "DataWave", "NextGen", "PeakPerformance", "DigitalEdge"]}
|
||||
title="Trusted by Industry Leaders"
|
||||
description="Collaborating with fast-growing businesses worldwide."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={true}
|
||||
testimonial="Webotixs transformed our digital presence. Their AI automation saved our team hundreds of hours, and the new website design looks absolutely incredible."
|
||||
rating={5}
|
||||
author="Sarah Jenkins - CEO, TechInnovate"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-smiling-businessman_23-2147900059.jpg",
|
||||
alt: "Sarah",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/high-angle-buisness-man_23-2148479585.jpg",
|
||||
alt: "Michael",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-young-handsome-man-spectacles_1303-14469.jpg",
|
||||
alt: "Elena",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/solar-panels-industry-technician-high-tech-factory-inspection-quality-control-production_482257-132256.jpg",
|
||||
alt: "David",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-male-personal-shopper-working_23-2148924153.jpg",
|
||||
alt: "Chris",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={true}
|
||||
testimonial="Webotixs transformed our digital presence. Their AI automation saved our team hundreds of hours, and the new website design looks absolutely incredible."
|
||||
rating={5}
|
||||
author="Sarah Jenkins - CEO, TechInnovate"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-smiling-businessman_23-2147900059.jpg", alt: "Sarah" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/high-angle-buisness-man_23-2148479585.jpg", alt: "Michael" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-young-handsome-man-spectacles_1303-14469.jpg", alt: "Elena" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/solar-panels-industry-technician-high-tech-factory-inspection-quality-control-production_482257-132256.jpg", alt: "David" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-male-personal-shopper-working_23-2148924153.jpg", alt: "Chris" }
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Do you serve international clients?",
|
||||
content: "Yes, we proudly serve businesses across the USA, UK, Canada, and Australia.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "How long does a typical project take?",
|
||||
content: "Project timelines vary based on scope; however, most web development projects are completed within 4-8 weeks.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Do you provide ongoing support?",
|
||||
content: "We offer dedicated maintenance and support packages to ensure your systems remain scalable and secure.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Clear answers to help you understand our process."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "1", title: "Do you serve international clients?", content: "Yes, we proudly serve businesses across the USA, UK, Canada, and Australia." },
|
||||
{ id: "2", title: "How long does a typical project take?", content: "Project timelines vary based on scope; however, most web development projects are completed within 4-8 weeks." },
|
||||
{ id: "3", title: "Do you provide ongoing support?", content: "We offer dedicated maintenance and support packages to ensure your systems remain scalable and secure." }
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Clear answers to help you understand our process."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Let's Collaborate"
|
||||
title="Ready to Grow Your Business?"
|
||||
description="Reach out today for a consultation on your next digital transformation project."
|
||||
buttons={[
|
||||
{
|
||||
text: "Message Us",
|
||||
href: "mailto:hello@webotixs.com",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Let's Collaborate"
|
||||
title="Ready to Grow Your Business?"
|
||||
description="Reach out today for a consultation on your next digital transformation project."
|
||||
buttons={[{ text: "Message Us", href: "mailto:hello@webotixs.com" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Webotixs"
|
||||
columns={[
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Web Design",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Development",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Automation",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Agency",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Case Studies",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Webotixs"
|
||||
columns={[
|
||||
{ title: "Services", items: [{ label: "Web Design", href: "#" }, { label: "Development", href: "#" }, { label: "Automation", href: "#" }] },
|
||||
{ title: "Agency", items: [{ label: "About Us", href: "#" }, { label: "Case Studies", href: "#" }, { label: "Contact", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user