Files
9d711507-9590-41ad-bbdf-f60…/src/app/page.tsx
2026-03-03 12:09:39 +00:00

221 lines
14 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { Sparkles, Zap, Award, TrendingUp, Users, Target, Quote, Rocket, Mail } from "lucide-react";
export default function HomePage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="small"
sizing="largeSizeMediumTitles"
background="blurBottom"
cardStyle="gradient-mesh"
primaryButtonStyle="flat"
secondaryButtonStyle="layered"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
]}
brandName="Proof Digital"
bottomLeftText="Global Reach"
bottomRightText="hello@proofdigital.com"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
title="Transform Your Digital Vision Into Reality"
description="We are a full-service digital agency specializing in web development, design, and digital transformation. Our expert team delivers innovative solutions that drive growth and engagement."
tag="Digital Innovation"
tagIcon={Sparkles}
tagAnimation="slide-up"
background={{ variant: "glowing-orb" }}
leftCarouselItems={[
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/a-sleek-web-design-portfolio-showcase-fe-1772538617893-756e22f7.png", imageAlt: "Web Design Portfolio"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/mobile-app-development-interface-showing-1772538617113-a09a983a.png", imageAlt: "Mobile App Development"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/digital-strategy-workshop-scene-showing--1772538618185-67545066.png", imageAlt: "Digital Strategy"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/brand-identity-design-showcase-displayin-1772538617400-9c0d70af.png", imageAlt: "Brand Identity Design"},
]}
rightCarouselItems={[
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/user-interface-and-experience-design-moc-1772538617539-7eab0203.png?_wi=1", imageAlt: "UI/UX Design"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/web-development-workspace-showing-code-e-1772538617739-8eb8579f.png", imageAlt: "Web Development"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/e-commerce-platform-interface-displaying-1772538618458-64b0d370.png", imageAlt: "E-commerce Solutions"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/seo-optimization-dashboard-showing-analy-1772538618150-93b5f784.png", imageAlt: "SEO Optimization"},
]}
carouselPosition="right"
buttons={[
{ text: "Start Your Project", href: "/contact" },
{ text: "Explore Our Work", href: "/portfolio" },
]}
buttonAnimation="slide-up"
ariaLabel="Hero section showcasing digital agency services"
/>
</div>
<div id="services" data-section="services">
<FeatureCardTwentySeven
title="Our Services"
description="Trusted by 120+ companies who increased their digital revenue by an average of 35%"
tag="What We Offer"
tagIcon={Zap}
tagAnimation="slide-up"
features={[
{
id: "1", title: "Web Development", description: "Custom websites and web applications built with modern technologies and best practices for optimal performance and scalability.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/professional-web-development-concept-ima-1772538619187-01dd9557.png?_wi=1", imageAlt: "Web Development"},
{
id: "2", title: "UI/UX Design", description: "User-centered design solutions that combine aesthetics with functionality to create engaging digital experiences.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/user-interface-and-experience-design-con-1772538617879-adc7cf56.png?_wi=1", imageAlt: "UI/UX Design"},
{
id: "3", title: "Digital Strategy", description: "Strategic planning and consulting to align your digital initiatives with business goals and market opportunities.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/digital-strategy-consultation-scene-with-1772538618258-45f82cfc.png?_wi=1", imageAlt: "Digital Strategy"},
{
id: "4", title: "Brand Identity", description: "Complete branding solutions from logo design to visual guidelines that establish your unique market presence.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/brand-identity-design-workspace-showing--1772538617285-0010346f.png?_wi=1", imageAlt: "Brand Identity"},
]}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="portfolio" data-section="portfolio">
<ProductCardOne
title="Recent Projects"
description="Explore our portfolio of successful projects across various industries and technologies"
tag="Our Work"
tagIcon={Award}
tagAnimation="slide-up"
products={[
{
id: "1", name: "E-Commerce Platform Redesign", price: "2023", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/modern-e-commerce-website-redesign-showc-1772538619892-4352eb78.png?_wi=1", imageAlt: "E-Commerce Platform"},
{
id: "2", name: "FinTech Mobile Application", price: "2023", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/financial-technology-mobile-application--1772538618009-341adae5.png?_wi=1", imageAlt: "FinTech Application"},
{
id: "3", name: "SaaS Dashboard Interface", price: "2024", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/software-as-a-service-dashboard-interfac-1772538617865-32ca3c81.png?_wi=1", imageAlt: "SaaS Dashboard"},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
title="Our Impact"
description="Proven results that demonstrate our commitment to excellence and client success"
metrics={[
{
id: "1", icon: TrendingUp,
title: "Projects Completed", value: "150+"},
{
id: "2", icon: Users,
title: "Happy Clients", value: "120+"},
{
id: "3", icon: Target,
title: "Success Rate", value: "98%"},
{
id: "4", icon: Zap,
title: "Years Experience", value: "10+"},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
title="What Our Clients Say"
description="Real feedback from businesses we've helped transform their digital presence"
tag="Client Reviews"
tagIcon={Quote}
tagAnimation="slide-up"
testimonials={[
{
id: "1", name: "Sarah Johnson", handle: "@sarahjohnson", testimonial: "Proof Digital transformed our online presence completely. Their team was professional, responsive, and delivered exactly what we needed.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/professional-headshot-portrait-of-a-conf-1772538616642-48480d7d.png?_wi=1", imageAlt: "Sarah Johnson"},
{
id: "2", name: "Michael Chen", handle: "@michaelchen", testimonial: "Working with Proof Digital was a game-changer for our business. The quality of their work exceeded our expectations.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/professional-headshot-portrait-of-an-asi-1772538616428-b9b73312.png?_wi=1", imageAlt: "Michael Chen"},
{
id: "3", name: "Emily Rodriguez", handle: "@emilyrodriguez", testimonial: "Outstanding service and incredible attention to detail. Proof Digital is a true partner in our digital journey.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/professional-headshot-of-a-confident-lat-1772538616215-cee81e6c.png?_wi=1", imageAlt: "Emily Rodriguez"},
{
id: "4", name: "David Kim", handle: "@davidkim", testimonial: "The best digital agency we've worked with. Their strategic insights and execution are unmatched in the industry.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/professional-headshot-of-an-asian-male-i-1772538616949-bfc92c2b.png?_wi=1", imageAlt: "David Kim"},
{
id: "5", name: "Jessica Martinez", handle: "@jessicamartinez", testimonial: "From concept to launch, Proof Digital handled everything with professionalism and expertise. Highly recommended!", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/professional-headshot-of-a-confident-wom-1772538616544-05f319c0.png?_wi=1", imageAlt: "Jessica Martinez"},
{
id: "6", name: "Robert Thompson", handle: "@robertthompson", testimonial: "Proof Digital delivered a stunning website that has dramatically improved our online engagement and conversions.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/professional-headshot-of-a-male-executiv-1772538616322-7e5792f0.png", imageAlt: "Robert Thompson"},
]}
showRating={true}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="cta" data-section="cta">
<ContactCTA
tag="Let's Collaborate"
tagIcon={Rocket}
tagAnimation="slide-up"
title="Ready to Elevate Your Digital Presence?"
description="Let's work together to create something extraordinary. Our team is ready to turn your vision into a powerful digital solution."
buttons={[
{ text: "Get in Touch", href: "/contact" },
{ text: "Schedule Consultation", href: "/contact" },
]}
buttonAnimation="slide-up"
background={{ variant: "radial-gradient" }}
useInvertedBackground={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Proof Digital"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ThemeProvider>
);
}