Merge version_1 into main #2
390
src/app/page.tsx
390
src/app/page.tsx
@@ -26,247 +26,167 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Projects",
|
||||
id: "projects",
|
||||
},
|
||||
{
|
||||
name: "Stack",
|
||||
id: "stack",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="CREATIVE"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "Projects", id: "projects"},
|
||||
{
|
||||
name: "Stack", id: "stack"},
|
||||
{
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="CREATIVE"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboardSplit
|
||||
background={{
|
||||
variant: "canvas-reveal",
|
||||
}}
|
||||
logoText="CREATIVE DEVELOPER"
|
||||
description="Crafting high-end digital experiences using Three.js, GSAP, and Next.js."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Work",
|
||||
href: "#projects",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
layoutOrder="default"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/minimalist-smartphone-mockup-with-dramatic-lighting_9975-134422.jpg?_wi=1"
|
||||
mediaAnimation="blur-reveal"
|
||||
frameStyle="card"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboardSplit
|
||||
background={{
|
||||
variant: "canvas-reveal"}}
|
||||
logoText="CREATIVE DEVELOPER"
|
||||
description="Crafting high-end digital experiences using Three.js, GSAP, and Next.js."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Work", href: "#projects"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
layoutOrder="default"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/minimalist-smartphone-mockup-with-dramatic-lighting_9975-134422.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
frameStyle="card"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardFour
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "3D Experience",
|
||||
price: "Interactive",
|
||||
variant: "WebGL",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "SaaS Platform",
|
||||
price: "High-perf",
|
||||
variant: "Next.js",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Mobile App",
|
||||
price: "Responsive",
|
||||
variant: "React",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=3",
|
||||
},
|
||||
]}
|
||||
title="Interactive Projects"
|
||||
description="A showcase of high-end digital solutions."
|
||||
/>
|
||||
</div>
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardFour
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "3D Experience", price: "Interactive", variant: "WebGL", imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg"},
|
||||
{
|
||||
id: "2", name: "SaaS Platform", price: "High-perf", variant: "Next.js", imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg"},
|
||||
{
|
||||
id: "3", name: "Mobile App", price: "Responsive", variant: "React", imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg"},
|
||||
]}
|
||||
title="Interactive Projects"
|
||||
description="A showcase of high-end digital solutions."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="stack" data-section="stack">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "React Three Fiber",
|
||||
description: "3D core implementation.",
|
||||
icon: Zap,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=4",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=5",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-smartphone-mockup-with-dramatic-lighting_9975-134422.jpg?_wi=2",
|
||||
imageAlt: "futuristic crystalline 3d abstract",
|
||||
},
|
||||
{
|
||||
title: "GSAP ScrollTrigger",
|
||||
description: "Premium animations.",
|
||||
icon: Award,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=6",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=7",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=8",
|
||||
imageAlt: "bento grid design template",
|
||||
},
|
||||
{
|
||||
title: "Tailwind CSS",
|
||||
description: "Rapid styling.",
|
||||
icon: Star,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=9",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=10",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-smartphone-mockup-with-dramatic-lighting_9975-134422.jpg?_wi=3",
|
||||
imageAlt: "futuristic crystalline 3d abstract",
|
||||
},
|
||||
]}
|
||||
title="Technical Mastery"
|
||||
description="Floating ecosystem of modern web technologies."
|
||||
/>
|
||||
</div>
|
||||
<div id="stack" data-section="stack">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "React Three Fiber", description: "3D core implementation.", icon: Zap,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "GSAP ScrollTrigger", description: "Premium animations.", icon: Award,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Tailwind CSS", description: "Rapid styling.", icon: Star,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Technical Mastery"
|
||||
description="Floating ecosystem of modern web technologies."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Transparent Pricing"
|
||||
description="Flexible plans for high-end project development."
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
title: "Consultation",
|
||||
price: "$150",
|
||||
period: "/hr",
|
||||
features: [
|
||||
"Architecture Review",
|
||||
"Tech Stack Advice",
|
||||
"Performance Audit",
|
||||
],
|
||||
button: {
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=11",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
title: "Web Experience",
|
||||
price: "$2,500",
|
||||
period: "/project",
|
||||
features: [
|
||||
"3D Scene Dev",
|
||||
"GSAP Motion",
|
||||
"React Integration",
|
||||
],
|
||||
button: {
|
||||
text: "Start Project",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=12",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Transparent Pricing"
|
||||
description="Flexible plans for high-end project development."
|
||||
plans={[
|
||||
{
|
||||
id: "p1", title: "Consultation", price: "$150", period: "/hr", features: [
|
||||
"Architecture Review", "Tech Stack Advice", "Performance Audit"],
|
||||
button: {
|
||||
text: "Book Now", href: "#contact"},
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg"},
|
||||
{
|
||||
id: "p2", title: "Web Experience", price: "$2,500", period: "/project", features: [
|
||||
"3D Scene Dev", "GSAP Motion", "React Integration"],
|
||||
button: {
|
||||
text: "Start Project", href: "#contact"},
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Let's Connect"
|
||||
description="Ready to build something amazing?"
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Project details...",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="left"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/minimalist-smartphone-mockup-with-dramatic-lighting_9975-134422.jpg?_wi=4"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Let's Connect"
|
||||
description="Ready to build something amazing?"
|
||||
inputs={[
|
||||
{
|
||||
name: "name", type: "text", placeholder: "Your Name"},
|
||||
{
|
||||
name: "email", type: "email", placeholder: "Your Email"},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message", placeholder: "Project details...", rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="left"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/minimalist-smartphone-mockup-with-dramatic-lighting_9975-134422.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Portfolio",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Stack",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "GitHub",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="CREATIVE"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Portfolio", href: "#"},
|
||||
{
|
||||
label: "Stack", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "GitHub", href: "#"},
|
||||
{
|
||||
label: "LinkedIn", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="CREATIVE"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user