Merge version_1 into main #1
318
src/app/page.tsx
318
src/app/page.tsx
@@ -16,228 +16,118 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Works",
|
||||
id: "works",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Creative Studio"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Works", id: "works" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Creative Studio"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="CREATIVE PORTFOLIO"
|
||||
description="Crafting meaningful digital experiences through visual design and strategic thinking. Let's build something exceptional together."
|
||||
buttons={[
|
||||
{
|
||||
text: "View Projects",
|
||||
href: "#works",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/flat-lay-top-view-office-table-desk-workspace-background_1150-6664.jpg"
|
||||
imageAlt="Creative designer workspace"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="CREATIVE PORTFOLIO"
|
||||
description="Crafting meaningful digital experiences through visual design and strategic thinking. Let's build something exceptional together."
|
||||
buttons={[{ text: "View Projects", href: "#works" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/flat-lay-top-view-office-table-desk-workspace-background_1150-6664.jpg"
|
||||
imageAlt="creative designer desk workspace"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={true}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "About ",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/female-web-designer-office-with-laptop_23-2149749876.jpg",
|
||||
alt: "Creative expert",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: " The Studio",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={true}
|
||||
heading={[
|
||||
{ type: "text", content: "About " },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/female-web-designer-office-with-laptop_23-2149749876.jpg", alt: "portrait professional graphic designer" },
|
||||
{ type: "text", content: " The Studio" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="works" data-section="works">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "w1",
|
||||
name: "Corporate Identity",
|
||||
price: "2024",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/printer-icon-computer-page-digital-paper-concept_53876-124304.jpg",
|
||||
},
|
||||
{
|
||||
id: "w2",
|
||||
name: "Editorial Design",
|
||||
price: "2024",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/couple-taking-photos-light-movie-projector_23-2149377353.jpg",
|
||||
},
|
||||
{
|
||||
id: "w3",
|
||||
name: "Luxury Packaging",
|
||||
price: "2023",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendered-abstract-design-elements-arrangement_23-2148996799.jpg",
|
||||
},
|
||||
{
|
||||
id: "w4",
|
||||
name: "SaaS Platform UI",
|
||||
price: "2023",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0ftu4z",
|
||||
},
|
||||
{
|
||||
id: "w5",
|
||||
name: "Street Photography",
|
||||
price: "2022",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-taking-photos-ceramic-kitchenware_23-2149060844.jpg",
|
||||
},
|
||||
{
|
||||
id: "w6",
|
||||
name: "Motion Graphics",
|
||||
price: "2022",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/videographer-editor-creates-ai-art-materials-using-text-video-software_482257-126484.jpg",
|
||||
},
|
||||
]}
|
||||
title="Selected Works"
|
||||
description="A collection of recent projects spanning branding, digital design, and artistic illustration."
|
||||
/>
|
||||
</div>
|
||||
<div id="works" data-section="works">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "w1", name: "Corporate Identity", price: "2024", imageSrc: "http://img.b2bpic.net/free-photo/printer-icon-computer-page-digital-paper-concept_53876-124304.jpg" },
|
||||
{ id: "w2", name: "Editorial Design", price: "2024", imageSrc: "http://img.b2bpic.net/free-photo/couple-taking-photos-light-movie-projector_23-2149377353.jpg" },
|
||||
{ id: "w3", name: "Luxury Packaging", price: "2023", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendered-abstract-design-elements-arrangement_23-2148996799.jpg" },
|
||||
{ id: "w4", name: "SaaS Platform UI", price: "2023", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0ftu4z" },
|
||||
{ id: "w5", name: "Street Photography", price: "2022", imageSrc: "http://img.b2bpic.net/free-photo/woman-taking-photos-ceramic-kitchenware_23-2149060844.jpg" },
|
||||
{ id: "w6", name: "Motion Graphics", price: "2022", imageSrc: "http://img.b2bpic.net/free-photo/videographer-editor-creates-ai-art-materials-using-text-video-software_482257-126484.jpg" },
|
||||
]}
|
||||
title="Selected Works"
|
||||
description="A collection of recent projects spanning branding, digital design, and artistic illustration."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Emma Watson",
|
||||
role: "Creative Lead",
|
||||
company: "DesignCo",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/shot-beautiful-young-businesswoman-wearing-blue-chiffon-shirt-while-standing-with-folded-arms-gray-marble-wall_158595-6769.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mark Miller",
|
||||
role: "Marketing Director",
|
||||
company: "TechFlow",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-young-man-walking-european-city-street_158595-4722.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Sarah Lee",
|
||||
role: "Owner",
|
||||
company: "Boutique Art",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-stylish-laughing-model-black-casual-summer-clothes-cap-with-natural-makeup-gray_158538-11828.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "David Clark",
|
||||
role: "Product Manager",
|
||||
company: "Innovate",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-redhead-bearded-male-dressed-suit-posing-grey-background_613910-11594.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Linda J.",
|
||||
role: "Brand Specialist",
|
||||
company: "Visionary",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-drawing_23-2149445987.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Feedback"
|
||||
description="Don't just take our word for it—here is what our collaborators have to say about the creative process and results."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Emma Watson", role: "Creative Lead", company: "DesignCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/shot-beautiful-young-businesswoman-wearing-blue-chiffon-shirt-while-standing-with-folded-arms-gray-marble-wall_158595-6769.jpg" },
|
||||
{ id: "t2", name: "Mark Miller", role: "Marketing Director", company: "TechFlow", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/confident-young-man-walking-european-city-street_158595-4722.jpg" },
|
||||
{ id: "t3", name: "Sarah Lee", role: "Owner", company: "Boutique Art", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-stylish-laughing-model-black-casual-summer-clothes-cap-with-natural-makeup-gray_158538-11828.jpg" },
|
||||
{ id: "t4", name: "David Clark", role: "Product Manager", company: "Innovate", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-redhead-bearded-male-dressed-suit-posing-grey-background_613910-11594.jpg" },
|
||||
{ id: "t5", name: "Linda J.", role: "Brand Specialist", company: "Visionary", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-drawing_23-2149445987.jpg" },
|
||||
]}
|
||||
title="Client Feedback"
|
||||
description="Don't just take our word for it—here is what our collaborators have to say about the creative process and results."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
tag="Let's Connect"
|
||||
title="Start Your Project"
|
||||
description="Ready to bring your ideas to life? Fill out the form and let's start a conversation about your project goals."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Let's Connect"
|
||||
title="Start Your Project"
|
||||
description="Ready to bring your ideas to life? Fill out the form and let's start a conversation about your project goals."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "Works",
|
||||
href: "#works",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="CREATIVE STUDIO"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="CREATIVE STUDIO"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{ label: "Works", href: "#works" },
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "Twitter", href: "#" },
|
||||
{ label: "Instagram", href: "#" },
|
||||
{ label: "LinkedIn", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user