Files
77a2a8c7-2e7f-4369-8166-c96…/src/app/page.tsx
2026-04-20 23:23:18 +00:00

234 lines
9.4 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import TextAbout from '@/components/sections/about/TextAbout';
import { CheckCircle, TrendingUp, Zap } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="largeSmall"
background="floatingGradient"
cardStyle="outline"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "About", id: "about"},
{
name: "Features", id: "features"},
{
name: "Testimonials", id: "testimonials"},
{
name: "FAQ", id: "faq"},
{
name: "Contact", id: "contact"},
]}
brandName="Crestova Digital"
/>
</div>
<div id="hero" data-section="hero">
<HeroCentered
background={{
variant: "plain"}}
title="Custom Built Websites for Modern Businesses"
description="Crestova Digital transforms your business vision into professional, high-converting custom websites tailored to your unique identity."
avatars={[
{
src: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg", alt: "professional headshot portrait"},
{
src: "http://img.b2bpic.net/free-photo/handsome-cheerful-young-man-searches-job-browses-webpage-modern-cell-phone-checks-information-internet-sits-cafeteria-enjoys-sweet-dessert-fresh-drink_273609-29263.jpg", alt: "young startup founder portrait"},
{
src: "http://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg", alt: "marketing expert professional headshot"},
{
src: "http://img.b2bpic.net/free-photo/closeup-smiling-senior-business-man-relaxing_1262-2369.jpg", alt: "project manager professional portrait"},
{
src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "Positive confident businesswoman wearing formal suit, standing with arms folded"},
]}
avatarText="Trusted by 50+ growing businesses"
buttons={[
{
text: "Get Started", href: "#contact"},
{
text: "Learn More", href: "#about"},
]}
marqueeItems={[
{
type: "text", text: "Next.js Development"},
{
type: "text", text: "UI/UX Design"},
{
type: "text", text: "E-commerce Solutions"},
{
type: "text", text: "Performance Scaling"},
{
type: "text", text: "SEO Strategy"},
]}
/>
</div>
<div id="about" data-section="about">
<TextAbout
useInvertedBackground={false}
title="Bridging Innovation and Your Business Goals"
buttons={[
{
text: "View Our Services", href: "#features"},
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyOne
useInvertedBackground={false}
title="Everything Your Business Needs to Scale"
description="Our development process ensures your website is more than just a digital presence—it's a high-performance business tool."
accordionItems={[
{
id: "f1", title: "Custom Web Development", content: "Built from the ground up to match your brand and specific operational requirements."},
{
id: "f2", title: "Responsive Performance", content: "Fully optimized for desktop, tablet, and mobile devices to reach all your customers."},
{
id: "f3", title: "SEO Optimized Foundation", content: "Built with modern standards to ensure your site is discoverable by search engines."},
]}
imageSrc="http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884875.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
metrics={[
{
id: "m1", value: "150+", title: "Projects Completed", description: "Successful custom website launches.", icon: CheckCircle,
},
{
id: "m2", value: "99.9%", title: "Uptime Reliability", description: "Always-on performance for your business.", icon: Zap,
},
{
id: "m3", value: "40%", title: "Avg Traffic Growth", description: "Increased engagement post-launch.", icon: TrendingUp,
},
]}
title="Proven Results for Our Clients"
description="We measure success through the growth and success of the businesses we serve."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TeamCardEleven
title="Meet Our Leadership Team"
description="The passionate experts driving Crestova Digital's vision and your success."
textboxLayout="split"
useInvertedBackground={false}
animationType="slide-up"
groups={[
{
id: "g1", groupTitle: "Executive Leadership", members: [
{ id: "m1", title: "Sarah Johnson", subtitle: "CEO", detail: "Visionary leader with 15+ years in digital strategy.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg" },
{ id: "m2", title: "Michael Chen", subtitle: "CTO", detail: "Tech architect focused on high-performance solutions.", imageSrc: "http://img.b2bpic.net/free-photo/authentic-small-youthful-marketing-agency_23-2150167349.jpg" }
]
}
]}
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={[
"Innovation Corp", "Digital Edge", "Future Solutions", "Growth Partners", "Tech Alliance", "Web Pioneers", "Market Leaders"]}
title="Trusted by Growing Brands"
description="We are proud to support a diverse range of companies across multiple industries."
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "q1", title: "How long does a website take?", content: "Timelines depend on complexity, but most sites are completed within 4-8 weeks."},
{
id: "q2", title: "Do you provide support?", content: "Yes, we offer ongoing maintenance and support plans to keep your site updated."},
{
id: "q3", title: "What platforms do you use?", content: "We specialize in modern stacks, focusing on scalable, secure, and fast technologies like React/Next.js."},
]}
title="Common Questions"
description="Find quick answers to common questions about our web development process."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{
variant: "plain"}}
tag="Let's Connect"
title="Ready to build your digital presence?"
description="Contact our team today for a free consultation and project scope."
buttons={[
{
text: "Send a Message", href: "#"},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Services", items: [
{
label: "Custom Websites", href: "#"},
{
label: "UX/UI Design", href: "#"},
{
label: "Maintenance", href: "#"},
],
},
{
title: "Company", items: [
{
label: "About", href: "#"},
{
label: "Contact", href: "#"},
{
label: "Privacy Policy", href: "#"},
],
},
]}
bottomLeftText="© 2024 Crestova Digital."
bottomRightText="All Rights Reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}