Merge version_1_1782971433687 into main #2
@@ -12,283 +12,135 @@ import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroBillboardBrand
|
||||
brand="Sajan"
|
||||
description="I design and build conversion websites. Fast, modern web experiences that turn visitors into customers for ambitious small businesses."
|
||||
primaryButton={{
|
||||
text: "View My Work",
|
||||
href: "#work",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Let's Talk",
|
||||
href: "#contact",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-abstract-background-with-gray-cubes_1048-12368.jpg?_wi=1"
|
||||
textAnimation="slide-up"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
brand="Sajan"
|
||||
description="I design and build conversion websites. Fast, modern web experiences that turn visitors into customers for ambitious small businesses."
|
||||
primaryButton={{ text: "View My Work", href: "#work" }}
|
||||
secondaryButton={{ text: "Let's Talk", href: "#contact" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-abstract-background-with-gray-cubes_1048-12368.jpg"
|
||||
textAnimation="slide-up"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutText
|
||||
title="Crafting fast, conversion-focused websites that help small businesses scale in the digital age through React, Next.js, and immersive 3D experiences."
|
||||
textAnimation="fade-blur"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
title="Crafting fast, conversion-focused websites that help small businesses scale in the digital age through React, Next.js, and immersive 3D experiences."
|
||||
textAnimation="fade-blur"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<FeaturesBento
|
||||
tag="My Tech Stack"
|
||||
title="Advanced Development"
|
||||
description="I utilize modern tools to ensure every site I build is performant and reliable."
|
||||
features={[
|
||||
{
|
||||
title: "Frontend Core",
|
||||
description: "High-performance React and Next.js applications built for speed.",
|
||||
bentoComponent: "info-card-marquee",
|
||||
infoCards: [
|
||||
{
|
||||
icon: Zap,
|
||||
label: "Fast",
|
||||
value: "100ms",
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
label: "Scaling",
|
||||
value: "Global",
|
||||
},
|
||||
{
|
||||
icon: Layers,
|
||||
label: "Stack",
|
||||
value: "NextJS",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dark-textured-3d-square-blocks-surface_84443-72948.jpg",
|
||||
imageAlt: "Dark Textured 3D Square Blocks Surface",
|
||||
},
|
||||
{
|
||||
title: "Interactive 3D",
|
||||
description: "Bringing brands to life with Three.js and Framer Motion.",
|
||||
bentoComponent: "orbiting-icons",
|
||||
centerIcon: Globe,
|
||||
orbitIcons: [
|
||||
"Box",
|
||||
"Cpu",
|
||||
"Code",
|
||||
"Star",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-background-with-gray-cubes_1048-12368.jpg?_wi=2",
|
||||
imageAlt: "Dark Textured 3D Square Blocks Surface",
|
||||
},
|
||||
{
|
||||
title: "Conversion Strategy",
|
||||
description: "Tailored interfaces focused on user experience and business outcomes.",
|
||||
bentoComponent: "animated-bar-chart",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/traditional-spanish-food-world-tourism-day_23-2149114032.jpg?_wi=1",
|
||||
imageAlt: "Dark Textured 3D Square Blocks Surface",
|
||||
},
|
||||
]}
|
||||
textAnimation="slide-up"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="My Tech Stack"
|
||||
title="Advanced Development"
|
||||
description="I utilize modern tools to ensure every site I build is performant and reliable."
|
||||
features={[
|
||||
{
|
||||
title: "Frontend Core", description: "High-performance React and Next.js applications built for speed.", bentoComponent: "info-card-marquee", infoCards: [
|
||||
{ icon: "Zap", label: "Fast", value: "100ms" },
|
||||
{ icon: "Globe", label: "Scaling", value: "Global" },
|
||||
{ icon: "Layers", label: "Stack", value: "NextJS" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Interactive 3D", description: "Bringing brands to life with Three.js and Framer Motion.", bentoComponent: "orbiting-icons", centerIcon: "Globe", orbitIcons: ["Box", "Cpu", "Code", "Star"],
|
||||
},
|
||||
{
|
||||
title: "Conversion Strategy", description: "Tailored interfaces focused on user experience and business outcomes.", bentoComponent: "animated-bar-chart"},
|
||||
]}
|
||||
textAnimation="slide-up"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="work" data-section="work">
|
||||
<SectionErrorBoundary name="work">
|
||||
<div id="work" data-section="work">
|
||||
<SectionErrorBoundary name="work">
|
||||
<FeaturesRevealCardsBento
|
||||
tag="Featured Projects"
|
||||
title="Selected Work"
|
||||
description="A showcase of high-end, conversion-focused web solutions for ambitious brands."
|
||||
items={[
|
||||
{
|
||||
title: "Grand Cafe London",
|
||||
description: "Luxury dining experience website.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/traditional-spanish-food-world-tourism-day_23-2149114032.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
title: "DataFlow Analytics",
|
||||
description: "SaaS dashboard for complex enterprise data.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/focus-green-screen-tablet-used-by-employee_482257-121872.jpg",
|
||||
},
|
||||
{
|
||||
title: "Luxe Apparel",
|
||||
description: "Minimalist ecommerce fashion store.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-career-guidance-items-designers_23-2149443518.jpg",
|
||||
},
|
||||
{
|
||||
title: "Brand Strategy Tool",
|
||||
description: "Interactive branding workshop software.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coffee-take-away-order-online-delivery-menu-concept_53876-124758.jpg",
|
||||
},
|
||||
{
|
||||
title: "Local Eats Platform",
|
||||
description: "Community food marketplace solution.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photovoltaics-factory-investors-analyzing-data-using-isolated-screen-tablet_482257-119500.jpg",
|
||||
},
|
||||
{
|
||||
title: "Creative Studio Hub",
|
||||
description: "High-end agency project portfolio.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-young-woman-enjoying-coffee_23-2148756287.jpg",
|
||||
},
|
||||
{
|
||||
title: "Fintech Dashboard",
|
||||
description: "Personalized banking user dashboard.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-couple-having-lunch-luxury-restaurant_23-2150598338.jpg",
|
||||
},
|
||||
]}
|
||||
textAnimation="slide-up"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Featured Projects"
|
||||
title="Selected Work"
|
||||
description="A showcase of high-end, conversion-focused web solutions for ambitious brands."
|
||||
items={[
|
||||
{ title: "Grand Cafe London", description: "Luxury dining experience website.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/traditional-spanish-food-world-tourism-day_23-2149114032.jpg" },
|
||||
{ title: "DataFlow Analytics", description: "SaaS dashboard for complex enterprise data.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/focus-green-screen-tablet-used-by-employee_482257-121872.jpg" },
|
||||
{ title: "Luxe Apparel", description: "Minimalist ecommerce fashion store.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/top-view-career-guidance-items-designers_23-2149443518.jpg" },
|
||||
{ title: "Brand Strategy Tool", description: "Interactive branding workshop software.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/coffee-take-away-order-online-delivery-menu-concept_53876-124758.jpg" },
|
||||
{ title: "Local Eats Platform", description: "Community food marketplace solution.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/photovoltaics-factory-investors-analyzing-data-using-isolated-screen-tablet_482257-119500.jpg" },
|
||||
{ title: "Creative Studio Hub", description: "High-end agency project portfolio.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/stylish-young-woman-enjoying-coffee_23-2148756287.jpg" },
|
||||
{ title: "Fintech Dashboard", description: "Personalized banking user dashboard.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-couple-having-lunch-luxury-restaurant_23-2150598338.jpg" },
|
||||
]}
|
||||
textAnimation="slide-up"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsFeatureCards
|
||||
tag="Results Driven"
|
||||
title=" measurable Impact"
|
||||
description="Delivering tangible results that impact your business goals."
|
||||
metrics={[
|
||||
{
|
||||
value: "120%",
|
||||
title: "Conversion Lift",
|
||||
features: [
|
||||
"Average across clients",
|
||||
"Enhanced UX flows",
|
||||
"Fast page loads",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "85ms",
|
||||
title: "Load Performance",
|
||||
features: [
|
||||
"Optimized assets",
|
||||
"Global CDN",
|
||||
"Code splitting",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "45+",
|
||||
title: "Successful Launches",
|
||||
features: [
|
||||
"Small businesses",
|
||||
"SaaS startups",
|
||||
"Agencies",
|
||||
],
|
||||
},
|
||||
]}
|
||||
textAnimation="fade"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Results Driven"
|
||||
title=" measurable Impact"
|
||||
description="Delivering tangible results that impact your business goals."
|
||||
metrics={[
|
||||
{ value: "120%", title: "Conversion Lift", features: ["Average across clients", "Enhanced UX flows", "Fast page loads"] },
|
||||
{ value: "85ms", title: "Load Performance", features: ["Optimized assets", "Global CDN", "Code splitting"] },
|
||||
{ value: "45+", title: "Successful Launches", features: ["Small businesses", "SaaS startups", "Agencies"] },
|
||||
]}
|
||||
textAnimation="fade"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialMarqueeOverlayCards
|
||||
tag="Client Stories"
|
||||
title="Loved by Businesses"
|
||||
description="Hear what my clients say about our partnership and results."
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alice Green",
|
||||
role: "CEO",
|
||||
company: "EcoHome",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-16027.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mark Vane",
|
||||
role: "Marketing Director",
|
||||
company: "TechStart",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blond-man-surprised_1194-2853.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Julia Smith",
|
||||
role: "Founder",
|
||||
company: "StyleNode",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-hacker_23-2148165939.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Robert Chen",
|
||||
role: "Product Manager",
|
||||
company: "NovaDev",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blond-man-happy-expression_1194-3628.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Sarah Miller",
|
||||
role: "Founder",
|
||||
company: "ZenLabs",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-corporate-man-holding-notepad_23-2148336906.jpg",
|
||||
},
|
||||
]}
|
||||
textAnimation="slide-up"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Client Stories"
|
||||
title="Loved by Businesses"
|
||||
description="Hear what my clients say about our partnership and results."
|
||||
testimonials={[
|
||||
{ name: "Alice Green", role: "CEO", company: "EcoHome", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-16027.jpg" },
|
||||
{ name: "Mark Vane", role: "Marketing Director", company: "TechStart", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blond-man-surprised_1194-2853.jpg" },
|
||||
{ name: "Julia Smith", role: "Founder", company: "StyleNode", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-hacker_23-2148165939.jpg" },
|
||||
{ name: "Robert Chen", role: "Product Manager", company: "NovaDev", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blond-man-happy-expression_1194-3628.jpg" },
|
||||
{ name: "Sarah Miller", role: "Founder", company: "ZenLabs", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-corporate-man-holding-notepad_23-2148336906.jpg" },
|
||||
]}
|
||||
textAnimation="slide-up"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSplitMedia
|
||||
tag="Common Questions"
|
||||
title="Need More Information?"
|
||||
description="Here are common answers to help you get started."
|
||||
items={[
|
||||
{
|
||||
question: "What is your process?",
|
||||
answer: "Discovery, design, development, and conversion-focused testing.",
|
||||
},
|
||||
{
|
||||
question: "What tech do you use?",
|
||||
answer: "I specialize in React, Next.js, Three.js, and Framer Motion.",
|
||||
},
|
||||
{
|
||||
question: "How long for a project?",
|
||||
answer: "Most projects take 4-8 weeks depending on the complexity.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/device-with-copy-space-table-with-food_23-2150917878.jpg"
|
||||
textAnimation="fade-blur"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Common Questions"
|
||||
title="Need More Information?"
|
||||
description="Here are common answers to help you get started."
|
||||
items={[
|
||||
{ question: "What is your process?", answer: "Discovery, design, development, and conversion-focused testing." },
|
||||
{ question: "What tech do you use?", answer: "I specialize in React, Next.js, Three.js, and Framer Motion." },
|
||||
{ question: "How long for a project?", answer: "Most projects take 4-8 weeks depending on the complexity." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/device-with-copy-space-table-with-food_23-2150917878.jpg"
|
||||
textAnimation="fade-blur"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Get in touch"
|
||||
text="Ready to transform your business digital presence? Let's build something extraordinary."
|
||||
primaryButton={{
|
||||
text: "Start Project",
|
||||
href: "mailto:sajan@example.com",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Schedule a Call",
|
||||
href: "#",
|
||||
}}
|
||||
textAnimation="slide-up"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Get in touch"
|
||||
text="Ready to transform your business digital presence? Let's build something extraordinary."
|
||||
primaryButton={{ text: "Start Project", href: "mailto:sajan@example.com" }}
|
||||
secondaryButton={{ text: "Schedule a Call", href: "#" }}
|
||||
textAnimation="slide-up"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user