development/e6f7ffc7-710c-4cc3-8b2e-526b748c7de0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: development:version_6
Branches Tags
development:main development:version_8 development:version_7 development:version_6 development:version_5 development:version_4 development:version_3 development:version_2 development:version_1
..
compare: development:main
Branches Tags
development:main development:version_8 development:version_7 development:version_6 development:version_5 development:version_4 development:version_3 development:version_2 development:version_1

14 Commits
version_6 ... main

Author SHA1 Message Date
development
eb05bb99fd Merge version_8 into main 
Merge version_8 into main
 2025-12-28 14:23:24 +00:00
development
6b571e5497 Update src/app/page.tsx 2025-12-28 14:23:19 +00:00
development
c604dbbe29 Update src/app/layout.tsx 2025-12-28 14:23:18 +00:00
development
fcf41ae025 Update src/app/globals.css 2025-12-28 14:23:17 +00:00
development
802103b562 Merge version_7 into main 
Merge version_7 into main
 2025-12-28 03:26:16 +00:00
development
fafeb0ec7a Update src/app/page.tsx 2025-12-28 03:26:11 +00:00
development
90ca81fef4 Merge version_6 into main 
Merge version_6 into main
 2025-12-28 03:07:11 +00:00
development
b1fb03bf44 Merge version_6 into main 
Merge version_6 into main
 2025-12-28 03:05:20 +00:00
development
81eb1f1a78 Merge version_5 into main 
Merge version_5 into main
 2025-12-28 03:03:05 +00:00
development
6db37304a7 Merge version_5 into main 
Merge version_5 into main
 2025-12-28 03:01:50 +00:00
development
7f604e9169 Merge version_5 into main 
Merge version_5 into main
 2025-12-28 03:00:21 +00:00
development
f1eae01368 Merge version_4 into main 
Merge version_4 into main
 2025-12-28 02:47:59 +00:00
development
480a43b49f Merge version_3 into main 
Merge version_3 into main
 2025-12-28 02:40:01 +00:00
development
ffaf0eaaeb Merge version_2 into main 
Merge version_2 into main
 2025-12-28 02:31:15 +00:00
3 changed files with 189 additions and 229 deletions
Expand all files Collapse all files

18
src/app/globals.css
View File

@@ -4,13 +4,13 @@
/* Base units */ /* Base units */
/* --vw is set by ThemeProvider */ /* --vw is set by ThemeProvider */
--background: #ffffff; --background: #0a0a0a;
--card: #fafafa; --card: #1a1a1a;
--foreground: #000000; --foreground: #fffffae6;
--primary-cta: #ffcc00; --primary-cta: #fde047;
--secondary-cta: #ffffff; --secondary-cta: #1a1a1a;
--accent: #e5e5e5; --accent: #737373;
--background-accent: #f5f5f5; --background-accent: #737373;
/* text sizing - set by ThemeProvider */ /* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
@@ -495,7 +495,7 @@ html {
body { body {
background-color: var(--background); background-color: var(--background);
color: var(--foreground); color: var(--foreground);
font-family: var(--font-inter-tight), sans-serif; font-family: var(--font-ibm-plex-sans), sans-serif;
position: relative; position: relative;
min-height: 100vh; min-height: 100vh;
overscroll-behavior: none; overscroll-behavior: none;
@@ -508,5 +508,5 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: var(--font-inter-tight), sans-serif; font-family: var(--font-ibm-plex-sans), sans-serif;
} }

2
src/app/layout.tsx
View File

@@ -1273,4 +1273,4 @@ export default function RootLayout({
</ServiceWrapper> </ServiceWrapper>
</html> </html>
); );
} }

398
src/app/page.tsx
View File

@@ -1,249 +1,209 @@
"use client"; "use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
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="text-stagger" defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide" defaultTextAnimation="reveal-blur"
borderRadius="rounded" borderRadius="soft"
contentWidth="medium" contentWidth="compact"
sizing="medium" sizing="mediumSizeLargeTitles"
background="circleGradient" background="noiseDiagonalGradient"
cardStyle="glass-elevated" cardStyle="solid"
primaryButtonStyle="gradient" primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass" secondaryButtonStyle="layered"
headingFontWeight="normal" headingFontWeight="semibold"
> >
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<nav className="w-full bg-background/80 backdrop-blur-sm border-b border-border"> <NavbarStyleMinimal
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> brandName="Ben"
<div className="flex justify-between h-16"> button={{
<div className="flex items-center"> text: "Get in Touch",
<span className="text-xl font-bold text-foreground">Ben</span> href: "#contact"
</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">
<section className="py-20 px-4"> <HeroBillboardMetrics
<div className="max-w-7xl mx-auto text-center"> title="3D Artist & Blender Specialist"
<div className="inline-flex items-center px-3 py-1 rounded-full bg-accent/20 text-accent-foreground text-sm mb-6"> description="Crafting immersive digital experiences through advanced 3D modeling, rendering, and animation. Transforming concepts into stunning visual reality."
<span>3D Creative</span> tag="3D Creative"
</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: "Learn More",
</div> href: "#about"
</div> }
</section> ]}
/>
</div> </div>
<div id="gallery" data-section="gallery"> <div id="gallery" data-section="gallery">
<section className="py-20 px-4"> <ProductCardSix
<div className="max-w-7xl mx-auto"> title="Featured Work"
<div className="text-center mb-12"> description="Explore my latest 3D renders and creative projects. Each piece showcases technical expertise and artistic vision."
<h2 className="text-3xl font-bold text-foreground mb-4">Featured Work</h2> products={[
<p className="text-xl text-muted-foreground max-w-2xl mx-auto"> {
Explore my latest 3D renders and creative projects. Each piece showcases technical expertise and artistic vision. id: "1",
</p> name: "Character Modeling",
</div> price: "Portfolio",
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888720392-ehsyl2xj.jpg",
<div className="bg-card rounded-lg overflow-hidden border border-border"> imageAlt: "3D character model"
<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> },
<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" /> id: "3",
<div className="p-6"> name: "Product Rendering",
<h3 className="text-xl font-semibold text-card-foreground mb-2">Visual Effects</h3> price: "Portfolio",
<p className="text-sm text-muted-foreground"> imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888722652-paaoqfev.jpg",
Particle systems, simulations, and motion graphics. Built with Blender's Geometry Nodes and shader effects to create dynamic visual experiences. imageAlt: "3D product render"
</p> }
</div> ]}
</div> gridVariant="uniform-all-items-equal"
<div className="bg-card rounded-lg overflow-hidden border border-border"> animationType="slide-up"
<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" /> textboxLayout="default"
<div className="p-6"> useInvertedBackground="noInvert"
<h3 className="text-xl font-semibold text-card-foreground mb-2">Product Rendering</h3> />
<p className="text-sm text-muted-foreground">
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">
<section className="py-20 px-4"> <TextAbout
<div className="max-w-4xl mx-auto text-center"> title="I bring imagination to life through cutting-edge 3D technology and creative storytelling"
<h2 className="text-3xl md:text-5xl font-bold text-foreground mb-8"> useInvertedBackground="noInvert"
I bring imagination to life through cutting-edge 3D technology and creative storytelling />
</h2>
<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
</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">
Get Started
</a>
</div>
</div>
</section>
</div> </div>
<div id="skills" data-section="skills"> <div id="skills" data-section="skills">
<section className="py-20 px-4"> <FeatureCardEight
<div className="max-w-7xl mx-auto"> title="Core Competencies"
<div className="text-center mb-12"> description="Specialized expertise in 3D creation and digital art production"
<h2 className="text-3xl font-bold text-foreground mb-4">Core Competencies</h2> features={[
<p className="text-xl text-muted-foreground"> {
Specialized expertise in 3D creation and digital art production id: 1,
</p> title: "3D Modeling",
</div> description: "Advanced character and environment modeling using Blender and industry-standard techniques",
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888720392-ehsyl2xj.jpg"
<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" /> {
<div className="p-6"> id: 2,
<h3 className="text-xl font-semibold text-card-foreground mb-2">3D Modeling</h3> title: "Rendering & Shading",
<p className="text-sm text-muted-foreground"> description: "Photorealistic rendering with Cycles and specialized material development",
Advanced character and environment modeling using Blender and industry-standard techniques imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888721289-rze89n00.jpg"
</p> },
</div> {
</div> id: 3,
<div className="bg-card rounded-lg overflow-hidden border border-border"> title: "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" /> description: "Smooth character rigging, motion capture, and keyframe animation",
<div className="p-6"> imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888722652-paaoqfev.jpg"
<h3 className="text-xl font-semibold text-card-foreground mb-2">Rendering & Shading</h3> }
<p className="text-sm text-muted-foreground"> ]}
Photorealistic rendering with Cycles and specialized material development textboxLayout="default"
</p> useInvertedBackground="noInvert"
</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">
<section className="py-20 px-4"> <ContactSplit
<div className="max-w-7xl mx-auto"> tag="Get Started"
<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">
<footer className="py-12 px-4 border-t border-border"> <FooterBaseCard
<div className="max-w-7xl mx-auto"> logoText="Ben"
<div className="grid grid-cols-1 md:grid-cols-4 gap-8"> columns={[
<div> {
<div className="text-xl font-bold text-foreground mb-4">Ben</div> title: "Work",
</div> items: [
<div> {
<h3 className="font-semibold text-foreground mb-3">Work</h3> label: "Portfolio",
<ul className="space-y-2"> href: "#gallery"
<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> {
</ul> label: "Services",
</div> href: "#skills"
<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> {
<li><a href="#contact" className="text-muted-foreground hover:text-foreground transition-colors">Contact</a></li> title: "About",
</ul> items: [
</div> {
<div> label: "Bio",
<h3 className="font-semibold text-foreground mb-3">Connect</h3> href: "#about"
<ul className="space-y-2"> },
<li><a href="mailto:ben@example.com" className="text-muted-foreground hover:text-foreground transition-colors">Email</a></li> {
<li><a href="#" className="text-muted-foreground hover:text-foreground transition-colors">ArtStation</a></li> label: "Contact",
</ul> href: "#contact"
</div> }
</div> ]
<div className="mt-8 pt-8 border-t border-border text-center text-muted-foreground"> },
© 2025 Ben - 3D Artist & Blender Specialist {
</div> title: "Connect",
</div> items: [
</footer> {
label: "Email",
href: "mailto:ben@example.com"
},
{
label: "ArtStation",
href: "#"
}
]
}
]}
copyrightText="© 2025 Ben - 3D Artist & Blender Specialist"
/>
</div> </div>
</ThemeProvider> </ThemeProvider>
); );
} }