Merge version_6 into main #8
@@ -1273,4 +1273,4 @@ export default function RootLayout({
|
|||||||
</ServiceWrapper>
|
</ServiceWrapper>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
416
src/app/page.tsx
416
src/app/page.tsx
@@ -1,225 +1,249 @@
|
|||||||
"use client"
|
"use client";
|
||||||
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import { Sparkles, Mail } from "lucide-react";
|
|
||||||
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
|
|
||||||
import HeroBillboardMetrics from '@/components/sections/hero/HeroBillboardMetrics';
|
|
||||||
import ProductCardSix from '@/components/sections/product/ProductCardSix';
|
|
||||||
import TextAbout from '@/components/sections/about/TextAbout';
|
|
||||||
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
|
|
||||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
||||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="shift-hover"
|
defaultButtonVariant="text-stagger"
|
||||||
defaultTextAnimation="reveal-blur"
|
defaultTextAnimation="entrance-slide"
|
||||||
borderRadius="soft"
|
borderRadius="rounded"
|
||||||
contentWidth="compact"
|
contentWidth="medium"
|
||||||
sizing="mediumSizeLargeTitles"
|
sizing="medium"
|
||||||
background="noiseDiagonalGradient"
|
background="circleGradient"
|
||||||
cardStyle="solid"
|
cardStyle="glass-elevated"
|
||||||
primaryButtonStyle="diagonal-gradient"
|
primaryButtonStyle="gradient"
|
||||||
secondaryButtonStyle="layered"
|
secondaryButtonStyle="glass"
|
||||||
headingFontWeight="semibold"
|
headingFontWeight="normal"
|
||||||
>
|
>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleMinimal
|
<nav className="w-full bg-background/80 backdrop-blur-sm border-b border-border">
|
||||||
brandName="Ben"
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
button={{
|
<div className="flex justify-between h-16">
|
||||||
text: "Get in Touch",
|
<div className="flex items-center">
|
||||||
href: "#contact"
|
<span className="text-xl font-bold text-foreground">Ben</span>
|
||||||
}}
|
</div>
|
||||||
/>
|
<div className="flex items-center">
|
||||||
|
<a href="#contact" className="bg-primary-cta text-primary-cta-foreground px-4 py-2 rounded-md hover:opacity-90 transition-opacity">
|
||||||
|
Get in Touch
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroBillboardMetrics
|
<section className="py-20 px-4">
|
||||||
title="3D Artist & Blender Specialist"
|
<div className="max-w-7xl mx-auto text-center">
|
||||||
description="Crafting immersive digital experiences through advanced 3D modeling, rendering, and animation. Transforming concepts into stunning visual reality."
|
<div className="inline-flex items-center px-3 py-1 rounded-full bg-accent/20 text-accent-foreground text-sm mb-6">
|
||||||
tag="3D Creative"
|
<span>3D Creative</span>
|
||||||
tagIcon={Sparkles}
|
</div>
|
||||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888719283-nfmcx166.jpg"
|
<h1 className="text-4xl md:text-6xl font-bold text-foreground mb-6">
|
||||||
imageAlt="Hero 3D render"
|
3D Artist & Blender Specialist
|
||||||
frameStyle="card"
|
</h1>
|
||||||
metricsLabel="Trusted by studios and brands worldwide"
|
<p className="text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
|
||||||
metrics={[
|
Crafting immersive digital experiences through advanced 3D modeling, rendering, and animation. Transforming concepts into stunning visual reality.
|
||||||
{
|
</p>
|
||||||
id: "1",
|
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
|
||||||
value: "8+",
|
<a href="#gallery" className="bg-primary-cta text-primary-cta-foreground px-6 py-3 rounded-md hover:opacity-90 transition-opacity">
|
||||||
label: "Years in 3D"
|
View Portfolio
|
||||||
},
|
</a>
|
||||||
{
|
<a href="#contact" className="border border-border text-foreground px-6 py-3 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors">
|
||||||
id: "2",
|
Get Started
|
||||||
value: "150+",
|
</a>
|
||||||
label: "Projects Completed"
|
</div>
|
||||||
},
|
<div className="grid grid-cols-3 gap-8 max-w-2xl mx-auto">
|
||||||
{
|
<div className="text-center">
|
||||||
id: "3",
|
<div className="text-2xl font-bold text-foreground">8+</div>
|
||||||
value: "50+",
|
<div className="text-sm text-muted-foreground">Years in 3D</div>
|
||||||
label: "Happy Clients"
|
</div>
|
||||||
}
|
<div className="text-center">
|
||||||
]}
|
<div className="text-2xl font-bold text-foreground">150+</div>
|
||||||
buttons={[
|
<div className="text-sm text-muted-foreground">Projects Completed</div>
|
||||||
{
|
</div>
|
||||||
text: "View Portfolio",
|
<div className="text-center">
|
||||||
href: "#gallery"
|
<div className="text-2xl font-bold text-foreground">50+</div>
|
||||||
},
|
<div className="text-sm text-muted-foreground">Happy Clients</div>
|
||||||
{
|
</div>
|
||||||
text: "Get Started",
|
</div>
|
||||||
href: "#contact"
|
</div>
|
||||||
}
|
</section>
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="gallery" data-section="gallery">
|
<div id="gallery" data-section="gallery">
|
||||||
<ProductCardSix
|
<section className="py-20 px-4">
|
||||||
title="Featured Work"
|
<div className="max-w-7xl mx-auto">
|
||||||
description="Explore my latest 3D renders and creative projects. Each piece showcases technical expertise and artistic vision."
|
<div className="text-center mb-12">
|
||||||
products={[
|
<h2 className="text-3xl font-bold text-foreground mb-4">Featured Work</h2>
|
||||||
{
|
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
|
||||||
id: "1",
|
Explore my latest 3D renders and creative projects. Each piece showcases technical expertise and artistic vision.
|
||||||
name: "Character Modeling",
|
</p>
|
||||||
price: "Portfolio",
|
</div>
|
||||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888720392-ehsyl2xj.jpg",
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
imageAlt: "3D character model",
|
<div className="bg-card rounded-lg overflow-hidden border border-border">
|
||||||
description: "Advanced character sculpting and topology optimization using Blender. Includes rigging setup, UV unwrapping, and texture preparation for animation pipelines."
|
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888720392-ehsyl2xj.jpg" alt="3D character model" className="w-full h-48 object-cover" />
|
||||||
},
|
<div className="p-6">
|
||||||
{
|
<h3 className="text-xl font-semibold text-card-foreground mb-2">Character Modeling</h3>
|
||||||
id: "2",
|
<p className="text-sm text-muted-foreground">
|
||||||
name: "Visual Effects",
|
Advanced character sculpting and topology optimization using Blender. Includes rigging setup, UV unwrapping, and texture preparation for animation pipelines.
|
||||||
price: "Portfolio",
|
</p>
|
||||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888721289-rze89n00.jpg",
|
</div>
|
||||||
imageAlt: "3D animation and effects",
|
</div>
|
||||||
description: "Particle systems, simulations, and motion graphics. Built with Blender's Geometry Nodes and shader effects to create dynamic visual experiences."
|
<div className="bg-card rounded-lg overflow-hidden border border-border">
|
||||||
},
|
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888721289-rze89n00.jpg" alt="3D animation and effects" className="w-full h-48 object-cover" />
|
||||||
{
|
<div className="p-6">
|
||||||
id: "3",
|
<h3 className="text-xl font-semibold text-card-foreground mb-2">Visual Effects</h3>
|
||||||
name: "Product Rendering",
|
<p className="text-sm text-muted-foreground">
|
||||||
price: "Portfolio",
|
Particle systems, simulations, and motion graphics. Built with Blender's Geometry Nodes and shader effects to create dynamic visual experiences.
|
||||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888722652-paaoqfev.jpg",
|
</p>
|
||||||
imageAlt: "3D product render",
|
</div>
|
||||||
description: "High-fidelity product visualization with photorealistic lighting and materials. Optimized for e-commerce and marketing presentations."
|
</div>
|
||||||
}
|
<div className="bg-card rounded-lg overflow-hidden border border-border">
|
||||||
]}
|
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888722652-paaoqfev.jpg" alt="3D product render" className="w-full h-48 object-cover" />
|
||||||
gridVariant="bento-grid"
|
<div className="p-6">
|
||||||
animationType="slide-up"
|
<h3 className="text-xl font-semibold text-card-foreground mb-2">Product Rendering</h3>
|
||||||
textboxLayout="default"
|
<p className="text-sm text-muted-foreground">
|
||||||
useInvertedBackground="noInvert"
|
High-fidelity product visualization with photorealistic lighting and materials. Optimized for e-commerce and marketing presentations.
|
||||||
/>
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="about" data-section="about">
|
<div id="about" data-section="about">
|
||||||
<TextAbout
|
<section className="py-20 px-4">
|
||||||
title="I bring imagination to life through cutting-edge 3D technology and creative storytelling"
|
<div className="max-w-4xl mx-auto text-center">
|
||||||
buttons={[
|
<h2 className="text-3xl md:text-5xl font-bold text-foreground mb-8">
|
||||||
{
|
I bring imagination to life through cutting-edge 3D technology and creative storytelling
|
||||||
text: "View All Work",
|
</h2>
|
||||||
href: "#gallery"
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
},
|
<a href="#gallery" className="bg-primary-cta text-primary-cta-foreground px-6 py-3 rounded-md hover:opacity-90 transition-opacity">
|
||||||
{
|
View All Work
|
||||||
text: "Get Started",
|
</a>
|
||||||
href: "#contact"
|
<a href="#contact" className="border border-border text-foreground px-6 py-3 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors">
|
||||||
}
|
Get Started
|
||||||
]}
|
</a>
|
||||||
useInvertedBackground="noInvert"
|
</div>
|
||||||
/>
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="skills" data-section="skills">
|
<div id="skills" data-section="skills">
|
||||||
<FeatureCardEight
|
<section className="py-20 px-4">
|
||||||
title="Core Competencies"
|
<div className="max-w-7xl mx-auto">
|
||||||
description="Specialized expertise in 3D creation and digital art production"
|
<div className="text-center mb-12">
|
||||||
features={[
|
<h2 className="text-3xl font-bold text-foreground mb-4">Core Competencies</h2>
|
||||||
{
|
<p className="text-xl text-muted-foreground">
|
||||||
id: 1,
|
Specialized expertise in 3D creation and digital art production
|
||||||
title: "3D Modeling",
|
</p>
|
||||||
description: "Advanced character and environment modeling using Blender and industry-standard techniques",
|
</div>
|
||||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888720392-ehsyl2xj.jpg"
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
},
|
<div className="bg-card rounded-lg overflow-hidden border border-border">
|
||||||
{
|
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888720392-ehsyl2xj.jpg" alt="3D Modeling" className="w-full h-48 object-cover" />
|
||||||
id: 2,
|
<div className="p-6">
|
||||||
title: "Rendering & Shading",
|
<h3 className="text-xl font-semibold text-card-foreground mb-2">3D Modeling</h3>
|
||||||
description: "Photorealistic rendering with Cycles and specialized material development",
|
<p className="text-sm text-muted-foreground">
|
||||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888721289-rze89n00.jpg"
|
Advanced character and environment modeling using Blender and industry-standard techniques
|
||||||
},
|
</p>
|
||||||
{
|
</div>
|
||||||
id: 3,
|
</div>
|
||||||
title: "Animation",
|
<div className="bg-card rounded-lg overflow-hidden border border-border">
|
||||||
description: "Smooth character rigging, motion capture, and keyframe animation",
|
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888721289-rze89n00.jpg" alt="Rendering & Shading" className="w-full h-48 object-cover" />
|
||||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888722652-paaoqfev.jpg"
|
<div className="p-6">
|
||||||
}
|
<h3 className="text-xl font-semibold text-card-foreground mb-2">Rendering & Shading</h3>
|
||||||
]}
|
<p className="text-sm text-muted-foreground">
|
||||||
textboxLayout="split"
|
Photorealistic rendering with Cycles and specialized material development
|
||||||
useInvertedBackground="noInvert"
|
</p>
|
||||||
/>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-card rounded-lg overflow-hidden border border-border">
|
||||||
|
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888722652-paaoqfev.jpg" alt="Animation" className="w-full h-48 object-cover" />
|
||||||
|
<div className="p-6">
|
||||||
|
<h3 className="text-xl font-semibold text-card-foreground mb-2">Animation</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Smooth character rigging, motion capture, and keyframe animation
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="contact" data-section="contact">
|
<div id="contact" data-section="contact">
|
||||||
<ContactSplit
|
<section className="py-20 px-4">
|
||||||
tag="Get Started"
|
<div className="max-w-7xl mx-auto">
|
||||||
tagIcon={Mail}
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||||
title="Ready to bring your vision to life?"
|
<div>
|
||||||
description="Interested in collaborating on your next 3D project? Reach out directly or subscribe for updates on my latest work."
|
<div className="inline-flex items-center px-3 py-1 rounded-full bg-accent/20 text-accent-foreground text-sm mb-4">
|
||||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888725581-tp75ftz7.jpg"
|
Get Started
|
||||||
imageAlt="Contact section"
|
</div>
|
||||||
mediaPosition="right"
|
<h2 className="text-3xl font-bold text-foreground mb-4">
|
||||||
inputPlaceholder="your@email.com"
|
Ready to bring your vision to life?
|
||||||
buttonText="Subscribe"
|
</h2>
|
||||||
termsText="We respect your privacy. Unsubscribe anytime."
|
<p className="text-lg text-muted-foreground mb-8">
|
||||||
useInvertedBackground="noInvert"
|
Interested in collaborating on your next 3D project? Reach out directly or subscribe for updates on my latest work.
|
||||||
/>
|
</p>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
placeholder="your@email.com"
|
||||||
|
className="flex-1 px-4 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
||||||
|
/>
|
||||||
|
<button className="bg-primary-cta text-primary-cta-foreground px-6 py-2 rounded-md hover:opacity-90 transition-opacity">
|
||||||
|
Subscribe
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground mt-4">
|
||||||
|
We respect your privacy. Unsubscribe anytime.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888725581-tp75ftz7.jpg" alt="Contact section" className="w-full rounded-lg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterBaseCard
|
<footer className="py-12 px-4 border-t border-border">
|
||||||
logoText="Ben"
|
<div className="max-w-7xl mx-auto">
|
||||||
columns={[
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||||
{
|
<div>
|
||||||
title: "Work",
|
<div className="text-xl font-bold text-foreground mb-4">Ben</div>
|
||||||
items: [
|
</div>
|
||||||
{
|
<div>
|
||||||
label: "Portfolio",
|
<h3 className="font-semibold text-foreground mb-3">Work</h3>
|
||||||
href: "#gallery"
|
<ul className="space-y-2">
|
||||||
},
|
<li><a href="#gallery" className="text-muted-foreground hover:text-foreground transition-colors">Portfolio</a></li>
|
||||||
{
|
<li><a href="#skills" className="text-muted-foreground hover:text-foreground transition-colors">Services</a></li>
|
||||||
label: "Services",
|
</ul>
|
||||||
href: "#skills"
|
</div>
|
||||||
}
|
<div>
|
||||||
]
|
<h3 className="font-semibold text-foreground mb-3">About</h3>
|
||||||
},
|
<ul className="space-y-2">
|
||||||
{
|
<li><a href="#about" className="text-muted-foreground hover:text-foreground transition-colors">Bio</a></li>
|
||||||
title: "About",
|
<li><a href="#contact" className="text-muted-foreground hover:text-foreground transition-colors">Contact</a></li>
|
||||||
items: [
|
</ul>
|
||||||
{
|
</div>
|
||||||
label: "Bio",
|
<div>
|
||||||
href: "#about"
|
<h3 className="font-semibold text-foreground mb-3">Connect</h3>
|
||||||
},
|
<ul className="space-y-2">
|
||||||
{
|
<li><a href="mailto:ben@example.com" className="text-muted-foreground hover:text-foreground transition-colors">Email</a></li>
|
||||||
label: "Contact",
|
<li><a href="#" className="text-muted-foreground hover:text-foreground transition-colors">ArtStation</a></li>
|
||||||
href: "#contact"
|
</ul>
|
||||||
}
|
</div>
|
||||||
]
|
</div>
|
||||||
},
|
<div className="mt-8 pt-8 border-t border-border text-center text-muted-foreground">
|
||||||
{
|
© 2025 Ben - 3D Artist & Blender Specialist
|
||||||
title: "Connect",
|
</div>
|
||||||
items: [
|
</div>
|
||||||
{
|
</footer>
|
||||||
label: "Email",
|
|
||||||
href: "mailto:ben@example.com"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "ArtStation",
|
|
||||||
href: "#"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
copyrightText="© 2025 Ben - 3D Artist & Blender Specialist"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user