Merge version_1 into main #2
267
src/app/page.tsx
267
src/app/page.tsx
@@ -32,21 +32,13 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
name: "Services", id: "services"},
|
||||
{
|
||||
name: "Work",
|
||||
id: "portfolio",
|
||||
},
|
||||
name: "Work", id: "portfolio"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="KODRA LAB"
|
||||
/>
|
||||
@@ -55,45 +47,28 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="We Build Digital Experiences That Feel Alive"
|
||||
description="KODRA LAB is a futuristic digital agency shaping the next generation of brands through innovative design, strategic development, and creative direction."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start a Project",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Start a Project", href: "#contact"},
|
||||
{
|
||||
text: "Explore Work",
|
||||
href: "#portfolio",
|
||||
},
|
||||
text: "Explore Work", href: "#portfolio"},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-background-with-glowing-flowing-waves-with-particles_1048-18189.jpg?_wi=1",
|
||||
imageAlt: "Abstract tech background",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-background-with-glowing-flowing-waves-with-particles_1048-18189.jpg", imageAlt: "Abstract tech background"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-science-background-with-low-poly-plexus-design_1048-13265.jpg?_wi=1",
|
||||
imageAlt: "Glass geometric shapes",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-science-background-with-low-poly-plexus-design_1048-13265.jpg", imageAlt: "Glass geometric shapes"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-technology-background-with-low-poly-connecting-lines-dots_1048-8641.jpg?_wi=1",
|
||||
imageAlt: "Digital light trails",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-technology-background-with-low-poly-connecting-lines-dots_1048-8641.jpg", imageAlt: "Digital light trails"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-301813.jpg?_wi=1",
|
||||
imageAlt: "Cybernetic energy gradients",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-301813.jpg", imageAlt: "Cybernetic energy gradients"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-crop-black-kitchen-cabinet-fronts-warm-light-moody-details_169016-71061.jpg?_wi=1",
|
||||
imageAlt: "Soft fluid gradients",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-crop-black-kitchen-cabinet-fronts-warm-light-moody-details_169016-71061.jpg", imageAlt: "Soft fluid gradients"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/collection-futuristic-infographic-elements_52683-17111.jpg?_wi=1",
|
||||
imageAlt: "Digital interface data",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/collection-futuristic-infographic-elements_52683-17111.jpg", imageAlt: "Digital interface data"},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
@@ -106,9 +81,7 @@ export default function LandingPage() {
|
||||
description="At KODRA LAB, we don't just build websites—we craft digital ecosystems. Our approach blends cutting-edge technology with high-end aesthetics, ensuring your brand stands out in an increasingly crowded digital landscape."
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#services",
|
||||
},
|
||||
text: "Learn More", href: "#services"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/detail-pink-leaf_23-2148211941.jpg"
|
||||
imageAlt="KODRA LAB concept"
|
||||
@@ -119,54 +92,31 @@ export default function LandingPage() {
|
||||
<FeatureCardNine
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
animationType="blur-reveal"
|
||||
features={[
|
||||
{
|
||||
title: "Web Design & Development",
|
||||
description: "Custom coded platforms with fluid animations and peak performance.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-background-with-glowing-flowing-waves-with-particles_1048-18189.jpg?_wi=2",
|
||||
},
|
||||
title: "Web Design & Development", description: "Custom coded platforms with fluid animations and peak performance.", phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-background-with-glowing-flowing-waves-with-particles_1048-18189.jpg"},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-science-background-with-low-poly-plexus-design_1048-13265.jpg?_wi=2",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-background-with-glowing-flowing-waves-with-particles_1048-18189.jpg?_wi=3",
|
||||
imageAlt: "abstract tech blue violet background",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-science-background-with-low-poly-plexus-design_1048-13265.jpg"}
|
||||
},
|
||||
{
|
||||
title: "Social Media Design",
|
||||
description: "Visual campaigns and storytelling that capture attention instantly.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-technology-background-with-low-poly-connecting-lines-dots_1048-8641.jpg?_wi=2",
|
||||
},
|
||||
title: "Social Media Design", description: "Visual campaigns and storytelling that capture attention instantly.", phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-technology-background-with-low-poly-connecting-lines-dots_1048-8641.jpg"},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-301813.jpg?_wi=2",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-science-background-with-low-poly-plexus-design_1048-13265.jpg?_wi=3",
|
||||
imageAlt: "abstract glassmorphism dark background",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-301813.jpg"}
|
||||
},
|
||||
{
|
||||
title: "Branding",
|
||||
description: "Core identity development that speaks louder than words.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-crop-black-kitchen-cabinet-fronts-warm-light-moody-details_169016-71061.jpg?_wi=2",
|
||||
},
|
||||
title: "Branding", description: "Core identity development that speaks louder than words.", phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-crop-black-kitchen-cabinet-fronts-warm-light-moody-details_169016-71061.jpg"},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/collection-futuristic-infographic-elements_52683-17111.jpg?_wi=2",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-technology-background-with-low-poly-connecting-lines-dots_1048-8641.jpg?_wi=3",
|
||||
imageAlt: "digital network dark background blue",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/collection-futuristic-infographic-elements_52683-17111.jpg"}
|
||||
},
|
||||
{
|
||||
title: "Brand Restyling",
|
||||
description: "Modernizing legacy brands for the next digital frontier.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-science-background-with-low-poly-plexus-design_1048-13265.jpg?_wi=4",
|
||||
},
|
||||
title: "Brand Restyling", description: "Modernizing legacy brands for the next digital frontier.", phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-science-background-with-low-poly-plexus-design_1048-13265.jpg"},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-technology-background-with-low-poly-connecting-lines-dots_1048-8641.jpg?_wi=4",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-301813.jpg?_wi=3",
|
||||
imageAlt: "energy glow abstract blue purple",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-technology-background-with-low-poly-connecting-lines-dots_1048-8641.jpg"}
|
||||
},
|
||||
]}
|
||||
showStepNumbers={true}
|
||||
@@ -183,59 +133,23 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "Tech",
|
||||
name: "Digital Interface Project",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
reviewCount: "12",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-background-with-glowing-flowing-waves-with-particles_1048-18189.jpg?_wi=4",
|
||||
},
|
||||
id: "1", brand: "Tech", name: "Digital Interface Project", price: "Featured", rating: 5,
|
||||
reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-background-with-glowing-flowing-waves-with-particles_1048-18189.jpg"},
|
||||
{
|
||||
id: "2",
|
||||
brand: "Design",
|
||||
name: "Brand Identity System",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
reviewCount: "8",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-science-background-with-low-poly-plexus-design_1048-13265.jpg?_wi=5",
|
||||
},
|
||||
id: "2", brand: "Design", name: "Brand Identity System", price: "Featured", rating: 5,
|
||||
reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-science-background-with-low-poly-plexus-design_1048-13265.jpg"},
|
||||
{
|
||||
id: "3",
|
||||
brand: "Creative",
|
||||
name: "Motion Campaign",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
reviewCount: "15",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-technology-background-with-low-poly-connecting-lines-dots_1048-8641.jpg?_wi=5",
|
||||
},
|
||||
id: "3", brand: "Creative", name: "Motion Campaign", price: "Featured", rating: 5,
|
||||
reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/3d-technology-background-with-low-poly-connecting-lines-dots_1048-8641.jpg"},
|
||||
{
|
||||
id: "4",
|
||||
brand: "Web",
|
||||
name: "SaaS Platform UI",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
reviewCount: "22",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-301813.jpg?_wi=4",
|
||||
},
|
||||
id: "4", brand: "Web", name: "SaaS Platform UI", price: "Featured", rating: 5,
|
||||
reviewCount: "22", imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-301813.jpg"},
|
||||
{
|
||||
id: "5",
|
||||
brand: "Social",
|
||||
name: "Visual Stories",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
reviewCount: "9",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-crop-black-kitchen-cabinet-fronts-warm-light-moody-details_169016-71061.jpg?_wi=3",
|
||||
},
|
||||
id: "5", brand: "Social", name: "Visual Stories", price: "Featured", rating: 5,
|
||||
reviewCount: "9", imageSrc: "http://img.b2bpic.net/free-photo/vertical-crop-black-kitchen-cabinet-fronts-warm-light-moody-details_169016-71061.jpg"},
|
||||
{
|
||||
id: "6",
|
||||
brand: "Restyle",
|
||||
name: "Icon System Design",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
reviewCount: "7",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/collection-futuristic-infographic-elements_52683-17111.jpg?_wi=3",
|
||||
},
|
||||
id: "6", brand: "Restyle", name: "Icon System Design", price: "Featured", rating: 5,
|
||||
reviewCount: "7", imageSrc: "http://img.b2bpic.net/free-vector/collection-futuristic-infographic-elements_52683-17111.jpg"},
|
||||
]}
|
||||
title="Selected Works"
|
||||
description="Precision-engineered creative projects."
|
||||
@@ -249,29 +163,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "s1",
|
||||
icon: Search,
|
||||
title: "Discovery",
|
||||
value: "01",
|
||||
},
|
||||
id: "s1", icon: Search,
|
||||
title: "Discovery", value: "01"},
|
||||
{
|
||||
id: "s2",
|
||||
icon: Palette,
|
||||
title: "Design",
|
||||
value: "02",
|
||||
},
|
||||
id: "s2", icon: Palette,
|
||||
title: "Design", value: "02"},
|
||||
{
|
||||
id: "s3",
|
||||
icon: Code,
|
||||
title: "Build",
|
||||
value: "03",
|
||||
},
|
||||
id: "s3", icon: Code,
|
||||
title: "Build", value: "03"},
|
||||
{
|
||||
id: "s4",
|
||||
icon: Rocket,
|
||||
title: "Launch",
|
||||
value: "04",
|
||||
},
|
||||
id: "s4", icon: Rocket,
|
||||
title: "Launch", value: "04"},
|
||||
]}
|
||||
title="The Workflow"
|
||||
description="How we turn abstract ideas into alive digital experiences."
|
||||
@@ -281,36 +183,21 @@ export default function LandingPage() {
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
cardAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Client A",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-portrait_1296-491.jpg",
|
||||
},
|
||||
id: "1", name: "Client A", imageSrc: "http://img.b2bpic.net/free-photo/man-portrait_1296-491.jpg"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Client B",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/talented-writer-is-ready-present-his-new-book-he-is-doing-last-notes_613910-14617.jpg",
|
||||
},
|
||||
id: "2", name: "Client B", imageSrc: "http://img.b2bpic.net/free-photo/talented-writer-is-ready-present-his-new-book-he-is-doing-last-notes_613910-14617.jpg"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Client C",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bearded-young-man-casual-shirt-standing-with-laptop-hands_93675-134479.jpg",
|
||||
},
|
||||
id: "3", name: "Client C", imageSrc: "http://img.b2bpic.net/free-photo/bearded-young-man-casual-shirt-standing-with-laptop-hands_93675-134479.jpg"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Client D",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5362.jpg",
|
||||
},
|
||||
id: "4", name: "Client D", imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5362.jpg"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Client E",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-sits-dark-room-front-blank-laptop-screen_169016-48879.jpg",
|
||||
},
|
||||
id: "5", name: "Client E", imageSrc: "http://img.b2bpic.net/free-photo/man-sits-dark-room-front-blank-laptop-screen_169016-48879.jpg"},
|
||||
]}
|
||||
cardTitle="What Partners Say"
|
||||
cardTag="Testimonials"
|
||||
cardAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -318,14 +205,11 @@ export default function LandingPage() {
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "rotated-rays-animated",
|
||||
}}
|
||||
variant: "rotated-rays-animated"}}
|
||||
text="Ready to build something unforgettable?"
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "mailto:hello@kodralab.com",
|
||||
},
|
||||
text: "Contact Us", href: "mailto:hello@kodralab.com"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -335,50 +219,31 @@ export default function LandingPage() {
|
||||
logoText="KODRA LAB"
|
||||
columns={[
|
||||
{
|
||||
title: "Links",
|
||||
items: [
|
||||
title: "Links", items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
label: "About", href: "#about"},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
label: "Services", href: "#services"},
|
||||
{
|
||||
label: "Portfolio",
|
||||
href: "#portfolio",
|
||||
},
|
||||
label: "Portfolio", href: "#portfolio"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
title: "Social", items: [
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
label: "Twitter", href: "#"},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
label: "Instagram", href: "#"},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
label: "LinkedIn", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
label: "Privacy Policy", href: "#"},
|
||||
{
|
||||
label: "Terms of Use",
|
||||
href: "#",
|
||||
},
|
||||
label: "Terms of Use", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user