Merge version_1 into main #1
277
src/app/page.tsx
277
src/app/page.tsx
@@ -30,18 +30,9 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Work",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Process",
|
||||
id: "#features",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
{ name: "Work", id: "#about" },
|
||||
{ name: "Process", id: "#features" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="KREATIV"
|
||||
/>
|
||||
@@ -49,63 +40,26 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="DISTORTED VISIONS"
|
||||
description="Creative experiments in digital space. Where raw aesthetic meets function."
|
||||
buttons={[
|
||||
{
|
||||
text: "View Projects",
|
||||
href: "#about",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "View Projects", href: "#about" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/ultraviolet-make-up-portrait-girl-painted-fluorescent-powder-halloween-concept_613910-17592.jpg"
|
||||
imageAlt="Experimental abstract art"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/abstract-cover-art-illustration_23-2151904514.jpg",
|
||||
alt: "Creative collaborator 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-view-camera-shutter_23-2150473150.jpg",
|
||||
alt: "Creative collaborator 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-transparent-sheet_23-2149417585.jpg",
|
||||
alt: "Creative collaborator 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/low-angle-unknown-man-posing-yellow-light_23-2149417613.jpg",
|
||||
alt: "Creative collaborator 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/ultraviolet-make-up-portrait-girl-painted-fluorescent-powder-halloween-concept_613910-17592.jpg",
|
||||
alt: "Creative collaborator 5",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/abstract-cover-art-illustration_23-2151904514.jpg", alt: "Creative collaborator 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/3d-view-camera-shutter_23-2150473150.jpg", alt: "Creative collaborator 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-transparent-sheet_23-2149417585.jpg", alt: "Creative collaborator 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/low-angle-unknown-man-posing-yellow-light_23-2149417613.jpg", alt: "Creative collaborator 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/ultraviolet-make-up-portrait-girl-painted-fluorescent-powder-halloween-concept_613910-17592.jpg", alt: "Creative collaborator 5" }
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "DIGITAL GLITCH",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "EXPERIMENTAL LAYOUTS",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "BOLD TYPOGRAPHY",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "RAW AESTHETIC",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "NEON ENERGY",
|
||||
},
|
||||
{ type: "text", text: "DIGITAL GLITCH" },
|
||||
{ type: "text", text: "EXPERIMENTAL LAYOUTS" },
|
||||
{ type: "text", text: "BOLD TYPOGRAPHY" },
|
||||
{ type: "text", text: "RAW AESTHETIC" },
|
||||
{ type: "text", text: "NEON ENERGY" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -114,58 +68,22 @@ export default function LandingPage() {
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Rethinking the",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/colorful-light-prisms-effect_23-2148898156.jpg",
|
||||
alt: "Creative process",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: "Everyday Aesthetic.",
|
||||
},
|
||||
{ type: "text", content: "Rethinking the" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/colorful-light-prisms-effect_23-2148898156.jpg", alt: "Creative process" },
|
||||
{ type: "text", content: "Everyday Aesthetic." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Distortion",
|
||||
author: "Studio",
|
||||
description: "Applying subtle artifacts to classic layouts.",
|
||||
tags: [
|
||||
"art",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-distorted-textured-pattern-background_23-2147951280.jpg",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Typography",
|
||||
author: "Studio",
|
||||
description: "Oversized forms that define the space.",
|
||||
tags: [
|
||||
"type",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/splashes-pink-white-foam_23-2147797862.jpg",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Interactivity",
|
||||
author: "Studio",
|
||||
description: "Micro-gestures that change the mood.",
|
||||
tags: [
|
||||
"code",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-studio_23-2149417587.jpg",
|
||||
},
|
||||
{ id: "f1", title: "Distortion", author: "Studio", description: "Applying subtle artifacts to classic layouts.", tags: ["art"], imageSrc: "http://img.b2bpic.net/free-photo/abstract-distorted-textured-pattern-background_23-2147951280.jpg" },
|
||||
{ id: "f2", title: "Typography", author: "Studio", description: "Oversized forms that define the space.", tags: ["type"], imageSrc: "http://img.b2bpic.net/free-photo/splashes-pink-white-foam_23-2147797862.jpg" },
|
||||
{ id: "f3", title: "Interactivity", author: "Studio", description: "Micro-gestures that change the mood.", tags: ["code"], imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-studio_23-2149417587.jpg" }
|
||||
]}
|
||||
title="Experimental Method"
|
||||
description="A deliberate approach to challenging visual norms and digital interaction."
|
||||
@@ -174,39 +92,13 @@ export default function LandingPage() {
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "12+",
|
||||
title: "Projects",
|
||||
items: [
|
||||
"Conceptual",
|
||||
"Brand",
|
||||
"Web",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "99%",
|
||||
title: "Originality",
|
||||
items: [
|
||||
"Zero",
|
||||
"Stock",
|
||||
"Media",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "4",
|
||||
title: "Years",
|
||||
items: [
|
||||
"Constant",
|
||||
"Creative",
|
||||
"Iterating",
|
||||
],
|
||||
},
|
||||
{ id: "m1", value: "12+", title: "Projects", items: ["Conceptual", "Brand", "Web"] },
|
||||
{ id: "m2", value: "99%", title: "Originality", items: ["Zero", "Stock", "Media"] },
|
||||
{ id: "m3", value: "4", title: "Years", items: ["Constant", "Creative", "Iterating"] }
|
||||
]}
|
||||
title="Impact Data"
|
||||
description="Numbers behind the creative experimentation."
|
||||
@@ -215,50 +107,16 @@ export default function LandingPage() {
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
textboxLayout="default"
|
||||
animationType="blur-reveal"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alex R.",
|
||||
role: "Creative Lead",
|
||||
company: "VibeLab",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lateral-portrait-redhead-woman_23-2148321288.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Sam K.",
|
||||
role: "Founder",
|
||||
company: "StudioX",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-man-posing_23-2148916393.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Jordan P.",
|
||||
role: "Designer",
|
||||
company: "NeonCo",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-standing-universe-texture-projection_23-2149512085.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Taylor B.",
|
||||
role: "Brand Mgr",
|
||||
company: "Flux",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-holding-drawing_23-2150040122.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Casey J.",
|
||||
role: "Developer",
|
||||
company: "CodeArt",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-middle-aged-woman-white-hoodie_23-2149051799.jpg",
|
||||
},
|
||||
{ id: "t1", name: "Alex R.", role: "Creative Lead", company: "VibeLab", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/lateral-portrait-redhead-woman_23-2148321288.jpg" },
|
||||
{ id: "t2", name: "Sam K.", role: "Founder", company: "StudioX", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-man-posing_23-2148916393.jpg" },
|
||||
{ id: "t3", name: "Jordan P.", role: "Designer", company: "NeonCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-standing-universe-texture-projection_23-2149512085.jpg" },
|
||||
{ id: "t4", name: "Taylor B.", role: "Brand Mgr", company: "Flux", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-holding-drawing_23-2150040122.jpg" },
|
||||
{ id: "t5", name: "Casey J.", role: "Developer", company: "CodeArt", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-middle-aged-woman-white-hoodie_23-2149051799.jpg" }
|
||||
]}
|
||||
title="Client Voices"
|
||||
description="What they say about the creative edge."
|
||||
@@ -267,28 +125,16 @@ export default function LandingPage() {
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
faqsAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Are you taking new projects?",
|
||||
content: "Always open to experimental collaborations.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "What is your turnaround?",
|
||||
content: "Depends on the experimental depth required.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Can you handle code?",
|
||||
content: "Yes, I integrate custom logic for interactions.",
|
||||
},
|
||||
{ id: "q1", title: "Are you taking new projects?", content: "Always open to experimental collaborations." },
|
||||
{ id: "q2", title: "What is your turnaround?", content: "Depends on the experimental depth required." },
|
||||
{ id: "q3", title: "Can you handle code?", content: "Yes, I integrate custom logic for interactions." }
|
||||
]}
|
||||
title="Inquiries"
|
||||
description="Common questions about the process."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -298,25 +144,10 @@ export default function LandingPage() {
|
||||
title="Start Something"
|
||||
description="Send a brief. Let's make something sharp."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email",
|
||||
required: true,
|
||||
},
|
||||
{ name: "name", type: "text", placeholder: "Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email", required: true }
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Project description...",
|
||||
required: true,
|
||||
rows: 4,
|
||||
}}
|
||||
textarea={{ name: "message", placeholder: "Project description...", required: true, rows: 4 }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/artistic-background-wallpaper-with-color-halftone-effect_58702-9399.jpg"
|
||||
/>
|
||||
</div>
|
||||
@@ -325,32 +156,8 @@ export default function LandingPage() {
|
||||
<FooterBaseReveal
|
||||
logoText="KREATIV"
|
||||
columns={[
|
||||
{
|
||||
title: "Explore",
|
||||
items: [
|
||||
{
|
||||
label: "Work",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Socials",
|
||||
items: [
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "GitHub",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Explore", items: [{ label: "Work", href: "#about" }, { label: "Contact", href: "#contact" }] },
|
||||
{ title: "Socials", items: [{ label: "Twitter", href: "#" }, { label: "GitHub", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user