Merge version_8 into main
Merge version_8 into main
This commit was merged in pull request #10.
This commit is contained in:
@@ -4,13 +4,13 @@
|
||||
/* Base units */
|
||||
/* --vw is set by ThemeProvider */
|
||||
|
||||
--background: #ffffff;
|
||||
--card: #fafafa;
|
||||
--foreground: #000000;
|
||||
--primary-cta: #ffcc00;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #e5e5e5;
|
||||
--background-accent: #f5f5f5;
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #fffffae6;
|
||||
--primary-cta: #fde047;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
@@ -495,7 +495,7 @@ html {
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-inter-tight), sans-serif;
|
||||
font-family: var(--font-ibm-plex-sans), sans-serif;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overscroll-behavior: none;
|
||||
@@ -508,5 +508,5 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-inter-tight), sans-serif;
|
||||
font-family: var(--font-ibm-plex-sans), sans-serif;
|
||||
}
|
||||
@@ -1273,4 +1273,4 @@ export default function RootLayout({
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
206
src/app/page.tsx
206
src/app/page.tsx
@@ -1,149 +1,143 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
|
||||
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
||||
import MediaSplitTabsAbout from "@/components/sections/about/MediaSplitTabsAbout";
|
||||
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
||||
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
||||
import FooterSocial from "@/components/sections/footer/FooterSocial";
|
||||
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() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Gallery", id: "gallery" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Skills", id: "skills" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
button={{ text: "Get in Touch", href: "contact" }}
|
||||
<NavbarStyleMinimal
|
||||
brandName="Ben"
|
||||
button={{
|
||||
text: "Get in Touch",
|
||||
href: "#contact"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
<HeroBillboardMetrics
|
||||
title="3D Artist & Blender Specialist"
|
||||
description="Crafting immersive digital experiences through advanced 3D modeling, rendering, and animation. Transforming concepts into stunning visual reality."
|
||||
tag="3D Creative"
|
||||
buttons={[
|
||||
{ text: "View Portfolio", href: "gallery" },
|
||||
{ text: "Get Started", href: "contact" },
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888719283-nfmcx166.jpg"
|
||||
imageAlt="3D Artist Portfolio"
|
||||
imageAlt="Hero 3D render"
|
||||
frameStyle="card"
|
||||
metricsLabel="Trusted by studios and brands worldwide"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "8+",
|
||||
label: "Years in 3D"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "150+",
|
||||
label: "Projects Completed"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "50+",
|
||||
label: "Happy Clients"
|
||||
}
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "View Portfolio",
|
||||
href: "#gallery"
|
||||
},
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#about"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery" data-section="gallery">
|
||||
<ProductCardOne
|
||||
<ProductCardSix
|
||||
title="Featured Work"
|
||||
description="Explore my latest 3D renders and creative projects. Each piece showcases technical expertise and artistic vision."
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Character Modeling",
|
||||
price: "Advanced",
|
||||
price: "Portfolio",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888720392-ehsyl2xj.jpg",
|
||||
imageAlt: "3D character model",
|
||||
imageAlt: "3D character model"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Visual Effects",
|
||||
price: "Dynamic",
|
||||
price: "Portfolio",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888721289-rze89n00.jpg",
|
||||
imageAlt: "3D animation and effects",
|
||||
imageAlt: "3D animation and effects"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Product Rendering",
|
||||
price: "Photorealistic",
|
||||
price: "Portfolio",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888722652-paaoqfev.jpg",
|
||||
imageAlt: "3D product render",
|
||||
},
|
||||
imageAlt: "3D product render"
|
||||
}
|
||||
]}
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaSplitTabsAbout
|
||||
<TextAbout
|
||||
title="I bring imagination to life through cutting-edge 3D technology and creative storytelling"
|
||||
tabs={[
|
||||
{
|
||||
id: "vision",
|
||||
label: "Vision",
|
||||
description: "Bringing concepts to life through innovative 3D visualization and artistic storytelling.",
|
||||
},
|
||||
{
|
||||
id: "expertise",
|
||||
label: "Expertise",
|
||||
description: "Specialized in Blender, character modeling, photorealistic rendering, and animation pipelines.",
|
||||
},
|
||||
{
|
||||
id: "approach",
|
||||
label: "Approach",
|
||||
description: "Combining technical excellence with creative vision to deliver stunning visual results.",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888725581-tp75ftz7.jpg"
|
||||
imageAlt="About section"
|
||||
imagePosition="right"
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="skills" data-section="skills">
|
||||
<MetricCardEleven
|
||||
<FeatureCardEight
|
||||
title="Core Competencies"
|
||||
description="Specialized expertise in 3D creation and digital art production"
|
||||
metrics={[
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
value: "8+",
|
||||
title: "Years in 3D",
|
||||
description: "Professional experience in 3D creation",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888720392-ehsyl2xj.jpg",
|
||||
imageAlt: "3D Modeling",
|
||||
id: 1,
|
||||
title: "3D Modeling",
|
||||
description: "Advanced character and environment modeling using Blender and industry-standard techniques",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888720392-ehsyl2xj.jpg"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "150+",
|
||||
title: "Projects Completed",
|
||||
description: "High-quality deliverables across industries",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888721289-rze89n00.jpg",
|
||||
imageAlt: "Rendering & Shading",
|
||||
id: 2,
|
||||
title: "Rendering & Shading",
|
||||
description: "Photorealistic rendering with Cycles and specialized material development",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888721289-rze89n00.jpg"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "50+",
|
||||
title: "Happy Clients",
|
||||
description: "Satisfied clients worldwide",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888722652-paaoqfev.jpg",
|
||||
imageAlt: "Animation",
|
||||
},
|
||||
id: 3,
|
||||
title: "Animation",
|
||||
description: "Smooth character rigging, motion capture, and keyframe animation",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888722652-paaoqfev.jpg"
|
||||
}
|
||||
]}
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
</div>
|
||||
@@ -153,45 +147,63 @@ export default function LandingPage() {
|
||||
tag="Get Started"
|
||||
title="Ready to bring your vision to life?"
|
||||
description="Interested in collaborating on your next 3D project? Reach out directly or subscribe for updates on my latest work."
|
||||
useInvertedBackground="noInvert"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888725581-tp75ftz7.jpg"
|
||||
imageAlt="Contact section"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="your@email.com"
|
||||
buttonText="Subscribe"
|
||||
termsText="We respect your privacy. Unsubscribe anytime."
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSocial
|
||||
<FooterBaseCard
|
||||
logoText="Ben"
|
||||
columns={[
|
||||
{
|
||||
title: "Work",
|
||||
items: [
|
||||
{ label: "Portfolio", href: "gallery" },
|
||||
{ label: "Services", href: "skills" },
|
||||
],
|
||||
{
|
||||
label: "Portfolio",
|
||||
href: "#gallery"
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#skills"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "About",
|
||||
items: [
|
||||
{ label: "Bio", href: "about" },
|
||||
{ label: "Contact", href: "contact" },
|
||||
],
|
||||
{
|
||||
label: "Bio",
|
||||
href: "#about"
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
{ label: "Email", href: "mailto:ben@example.com" },
|
||||
{ label: "ArtStation", href: "https://artstation.com" },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Email",
|
||||
href: "mailto:ben@example.com"
|
||||
},
|
||||
{
|
||||
label: "ArtStation",
|
||||
href: "#"
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 Ben - 3D Artist & Blender Specialist"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user