Files
822ff8ab-155d-4cec-bccf-a2e…/src/app/page.tsx
2026-03-11 14:11:59 +00:00

202 lines
9.3 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
import TextAbout from "@/components/sections/about/TextAbout";
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Clock, TrendingUp, Zap } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="compact"
sizing="largeSmall"
background="blurBottom"
cardStyle="outline"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Abdul Rafay"
navItems={[
{ name: "Work", id: "projects" },
{ name: "Services", id: "services" },
{ name: "About", id: "about" },
{ name: "Contact", id: "contact" }
]}
button={{
text: "Start a Project", href: "#contact"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
title="I Build Intelligent Systems for the Internet"
description="Help businesses automate 80% of manual tasks while reducing operational costs by up to 60%. AI workflows and automation systems that scale your operations without scaling your team."
background={{ variant: "glowing-orb" }}
kpis={[
{ value: "50+", label: "Automation Systems Built" },
{ value: "10x", label: "Average Speed Improvement" },
{ value: "99.8%", label: "System Uptime" }
]}
enableKpiAnimation={true}
tag="Automation Expert"
tagAnimation="slide-up"
buttons={[
{ text: "View My Work", href: "#projects" },
{ text: "Start a Project", href: "#contact" }
]}
buttonAnimation="slide-up"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/a-sleek-ai-automation-dashboard-interfac-1773232935194-8f25812e.png"
imageAlt="Automation Dashboard Interface"
imagePosition="right"
mediaAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<TextAbout
tag="About Abdul Rafay"
tagAnimation="slide-up"
title="I design and build intelligent systems that automate business operations, streamline workflows, and transform ideas into scalable digital products. My focus: build systems that work smarter than people."
useInvertedBackground={false}
buttons={[
{ text: "Explore My Work", href: "#projects" }
]}
buttonAnimation="slide-up"
/>
</div>
<div id="services" data-section="services">
<FeatureCardTwelve
title="What I Build"
description="Specialized solutions designed to eliminate manual work, streamline operations, and drive measurable business growth."
tag="Services"
tagAnimation="slide-up"
features={[
{
id: "ai-automation", label: "AI Automation", title: "AI Automation Systems", items: [
"Custom AI workflows for business processes", "Intelligent lead qualification and routing", "Automated customer support systems", "Smart business intelligence dashboards"
],
buttons: [
{ text: "Learn More", href: "#contact" }
]
},
{
id: "web-development", label: "Web Solutions", title: "High-Performance Websites", items: [
"Modern conversion-focused design", "Lightning-fast performance optimization", "Scalable architecture for growth", "Mobile-first responsive development"
],
buttons: [
{ text: "View Portfolio", href: "#projects" }
]
},
{
id: "workflows", label: "Workflows", title: "Automation Workflows", items: [
"Lead pipeline automation systems", "CRM integration and optimization", "Automated follow-up sequences", "Business process automation"
],
buttons: [
{ text: "Explore", href: "#contact" }
]
},
{
id: "integrations", label: "Integration", title: "AI Tools & Integrations", items: [
"Custom API integrations", "AI model implementation", "Software ecosystem connectivity", "Advanced automation tooling"
],
buttons: [
{ text: "Get Started", href: "#contact" }
]
}
]}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
buttonAnimation="slide-up"
/>
</div>
<div id="projects" data-section="projects">
<ProductCardOne
title="Projects & Systems"
description="Intelligent systems and high-performance products that drive real business results."
tag="Portfolio"
tagAnimation="slide-up"
products={[
{
id: "1", name: "Automation Dashboard", price: "Custom", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/screenshot-of-a-sophisticated-automation-1773232936102-44b60f1d.png", imageAlt: "Automation Dashboard System"
},
{
id: "2", name: "AI Content Generator", price: "Custom", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/modern-web-interface-for-an-ai-content-g-1773232936048-fda19c95.png", imageAlt: "AI Content Generation Tool"
},
{
id: "3", name: "Modern Business Website", price: "Custom", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AndPFbpHqBEtlv0fG4wek8eWPV/screenshot-of-a-high-end-modern-business-1773232935942-84f134d4.png", imageAlt: "High-Performance Business Website"
}
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
title="Impact & Results"
description="Measurable outcomes from automation systems and digital solutions."
tag="Results"
tagAnimation="slide-up"
metrics={[
{
id: "1", icon: Zap,
title: "Efficiency Gain", value: "85%+"
},
{
id: "2", icon: TrendingUp,
title: "Revenue Increase", value: "3-5x"
},
{
id: "3", icon: Clock,
title: "Time Saved", value: "40+ hrs/mo"
}
]}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
tag="Let's Build Something Powerful"
tagAnimation="slide-up"
title="Ready to Automate Your Business?"
description="If you want to automate your operations, streamline workflows, or build a high-performance digital product, let's work together to transform your vision into reality."
buttons={[
{ text: "Send Message", href: "https://mail.google.com/mail/u/0/#inbox?compose=CllgCKCJDpcNVLgLjnmzlfjhpdVpzlhHMczkBTgTPMlCJWbKpnvxftQMXCJXsLrmzvsghmMqHjV", onClick: () => window.open("https://mail.google.com/mail/u/0/#inbox?compose=CllgCKCJDpcNVLgLjnmzlfjhpdVpzlhHMczkBTgTPMlCJWbKpnvxftQMXCJXsLrmzvsghmMqHjV", "_blank") }
]}
buttonAnimation="slide-up"
background={{ variant: "animated-grid" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Abdul Rafay"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ThemeProvider>
);
}