Merge version_1 into main #2
272
src/app/page.tsx
272
src/app/page.tsx
@@ -25,203 +25,93 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Hero",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Portfolio",
|
||||
id: "portfolio",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Portfolio"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Hero", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Portfolio", id: "portfolio" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Portfolio"
|
||||
button={{ text: "Get in touch", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Creative Portfolio"
|
||||
description="Branding, Web, App, Photography & Motion."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/overhead-view-triangular-prism-with-dark-shadow-white-background_23-2147948840.jpg"
|
||||
imageAlt="Abstract dark hero background"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Creative Portfolio"
|
||||
description="Branding, Web, App, Photography & Motion."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/overhead-view-triangular-prism-with-dark-shadow-white-background_23-2147948840.jpg"
|
||||
imageAlt="Abstract dark hero background"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "About Me",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/unknown-man-posing-with-blue-background-medium-shot_23-2149417616.jpg",
|
||||
alt: "Portrait",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "About Me" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/unknown-man-posing-with-blue-background-medium-shot_23-2149417616.jpg", alt: "Portrait" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Branding Strategy",
|
||||
price: "Identity",
|
||||
variant: "Branding",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/clean-professional-corporate-identity-stationery-mockup_187299-47807.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Web App Design",
|
||||
price: "Interface",
|
||||
variant: "Web & App",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150104482.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Mood Photography",
|
||||
price: "Lens",
|
||||
variant: "Fotografie",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/wooden-frames-with-pouched-numbers-concept-advent-calendar_23-2148335369.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Motion Intro",
|
||||
price: "Graphic",
|
||||
variant: "Motion & Video",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-books-versus-technology_23-2150062999.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Poster Layout",
|
||||
price: "Print",
|
||||
variant: "Branding",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/creativity-layered-style-typography-colorful-background_53876-104216.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "System UI",
|
||||
price: "Platform",
|
||||
variant: "Web & App",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-it-professional-using-tablet-building-ai-algorithms_482257-100475.jpg",
|
||||
},
|
||||
]}
|
||||
title="Project Gallery"
|
||||
description="Explore my latest work across different disciplines."
|
||||
/>
|
||||
</div>
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Branding Strategy", price: "Identity", variant: "Branding", imageSrc: "http://img.b2bpic.net/free-photo/clean-professional-corporate-identity-stationery-mockup_187299-47807.jpg" },
|
||||
{ id: "2", name: "Web App Design", price: "Interface", variant: "Web & App", imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150104482.jpg" },
|
||||
{ id: "3", name: "Mood Photography", price: "Lens", variant: "Fotografie", imageSrc: "http://img.b2bpic.net/free-photo/wooden-frames-with-pouched-numbers-concept-advent-calendar_23-2148335369.jpg" },
|
||||
{ id: "4", name: "Motion Intro", price: "Graphic", variant: "Motion & Video", imageSrc: "http://img.b2bpic.net/free-photo/still-life-books-versus-technology_23-2150062999.jpg" },
|
||||
{ id: "5", name: "Poster Layout", price: "Print", variant: "Branding", imageSrc: "http://img.b2bpic.net/free-photo/creativity-layered-style-typography-colorful-background_53876-104216.jpg" },
|
||||
{ id: "6", name: "System UI", price: "Platform", variant: "Web & App", imageSrc: "http://img.b2bpic.net/free-photo/close-up-it-professional-using-tablet-building-ai-algorithms_482257-100475.jpg" },
|
||||
]}
|
||||
title="Project Gallery"
|
||||
description="Explore my latest work across different disciplines."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Client Feedback"
|
||||
description="Hear what my partners and clients say about working together."
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alex Rivet",
|
||||
handle: "@alexr",
|
||||
testimonial: "Incredible attention to detail and a true creative partner for our branding needs.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/unknown-man-posing-with-blue-background-medium-shot_23-2149417616.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sarah Chen",
|
||||
handle: "@schen_dev",
|
||||
testimonial: "The UI designs delivered were modern, intuitive, and perfectly matched our vision.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/unknown-man-posing-with-blue-background-medium-shot_23-2149417616.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Mark D.",
|
||||
handle: "@mdstudio",
|
||||
testimonial: "Exemplary motion graphics work that elevated our marketing reel significantly.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/unknown-man-posing-with-blue-background-medium-shot_23-2149417616.jpg?_wi=3",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Elena V.",
|
||||
handle: "@elena_v",
|
||||
testimonial: "A pleasure to work with, consistently hitting deadlines with high-quality results.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/unknown-man-posing-with-blue-background-medium-shot_23-2149417616.jpg?_wi=4",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Client Feedback"
|
||||
description="Hear what my partners and clients say about working together."
|
||||
testimonials={[
|
||||
{ id: "1", name: "Alex Rivet", handle: "@alexr", testimonial: "Incredible attention to detail and a true creative partner for our branding needs.", imageSrc: "http://img.b2bpic.net/free-photo/unknown-man-posing-with-blue-background-medium-shot_23-2149417616.jpg" },
|
||||
{ id: "2", name: "Sarah Chen", handle: "@schen_dev", testimonial: "The UI designs delivered were modern, intuitive, and perfectly matched our vision.", imageSrc: "http://img.b2bpic.net/free-photo/unknown-man-posing-with-blue-background-medium-shot_23-2149417616.jpg" },
|
||||
{ id: "3", name: "Mark D.", handle: "@mdstudio", testimonial: "Exemplary motion graphics work that elevated our marketing reel significantly.", imageSrc: "http://img.b2bpic.net/free-photo/unknown-man-posing-with-blue-background-medium-shot_23-2149417616.jpg" },
|
||||
{ id: "4", name: "Elena V.", handle: "@elena_v", testimonial: "A pleasure to work with, consistently hitting deadlines with high-quality results.", imageSrc: "http://img.b2bpic.net/free-photo/unknown-man-posing-with-blue-background-medium-shot_23-2149417616.jpg" },
|
||||
{ id: "5", name: "John S.", handle: "@js", testimonial: "Outstanding work.", imageSrc: "http://img.b2bpic.net/free-photo/unknown-man-posing-with-blue-background-medium-shot_23-2149417616.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
text="Let's collaborate. Contact me at hello@portfolio.com"
|
||||
buttons={[
|
||||
{
|
||||
text: "Email Me",
|
||||
href: "mailto:hello@portfolio.com",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
text="Let's collaborate. Contact me at hello@portfolio.com"
|
||||
buttons={[{ text: "Email Me", href: "mailto:hello@portfolio.com" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Portfolio"
|
||||
columns={[
|
||||
{
|
||||
title: "Links",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Portfolio",
|
||||
href: "#portfolio",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Portfolio"
|
||||
columns={[
|
||||
{ title: "Links", items: [{ label: "About", href: "#about" }, { label: "Portfolio", href: "#portfolio" }] },
|
||||
{ title: "Social", items: [{ label: "Instagram", href: "#" }, { label: "LinkedIn", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user