Merge version_2 into main #1
286
src/app/page.tsx
286
src/app/page.tsx
@@ -2,16 +2,17 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import { Mail, Github, Twitter, Linkedin } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -32,68 +33,35 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Products",
|
||||
id: "#products",
|
||||
},
|
||||
name: "Products", id: "#products"},
|
||||
{
|
||||
name: "How It Works",
|
||||
id: "#how-it-works",
|
||||
},
|
||||
name: "How It Works", id: "#how-it-works"},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
name: "About", id: "#about"},
|
||||
]}
|
||||
brandName="Stalkr"
|
||||
button={{
|
||||
text: "Order Now",
|
||||
href: "#contact",
|
||||
}}
|
||||
text: "Order Now", href: "#contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Tap. Connect. Instantly."
|
||||
description="Smart tags that link your world. Scan to reveal what matters — no apps, no friction, no delay."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Products",
|
||||
href: "#products",
|
||||
},
|
||||
text: "Explore Products", href: "#products"},
|
||||
{
|
||||
text: "Create Your Custom Tag",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Create Your Custom Tag", href: "#contact"},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-female-wearing-blue-jean-jacket-standing-against-white-wall_181624-37780.jpg",
|
||||
imageAlt: "Smart QR tag on leather collar",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-female-wearing-blue-jean-jacket-standing-against-white-wall_181624-37780.jpg", imageAlt: "Smart QR tag on leather collar"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-with-penny-board_23-2148950660.jpg",
|
||||
imageAlt: "Scanning tag on backpack",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-bride-wearing-pendant-necklace-with-black-cord_181624-15666.jpg",
|
||||
imageAlt: "Custom engraved metal tag",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-with-card-mobile_1208-203.jpg",
|
||||
imageAlt: "Smartphone contact display",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-with-dog_1303-4592.jpg",
|
||||
imageAlt: "Happy pet walking",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sharp-spike-with-abstract-ferromagnetic-mirrored-metal_23-2148253664.jpg",
|
||||
imageAlt: "Smart tag technology detail",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-with-penny-board_23-2148950660.jpg", imageAlt: "Scanning tag on backpack"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -105,26 +73,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "No App Required",
|
||||
description: "Anyone with a smartphone can scan. No downloads, no logins. Works on every device instantly.",
|
||||
tag: "Convenience",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/fantastic-elements-about-seo_1045-252.jpg",
|
||||
},
|
||||
id: "f1", title: "No App Required", description: "Anyone with a smartphone can scan. No downloads, no logins. Works on every device instantly.", tag: "Convenience", imageSrc: "http://img.b2bpic.net/free-vector/fantastic-elements-about-seo_1045-252.jpg"},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Instant Connection",
|
||||
description: "The moment your tag is scanned, your contact details appear. You connect in seconds.",
|
||||
tag: "Speed",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/employee-disinfecting-electronic-device_23-2148727585.jpg",
|
||||
},
|
||||
id: "f2", title: "Instant Connection", description: "The moment your tag is scanned, your contact details appear. You connect in seconds.", tag: "Speed", imageSrc: "http://img.b2bpic.net/free-photo/employee-disinfecting-electronic-device_23-2148727585.jpg"},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Medical Info Ready",
|
||||
description: "Store allergies, blood group, and emergency contacts. Visible instantly to whoever finds your child or pet.",
|
||||
tag: "Safety",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-public-transport-arrangement_23-2148967330.jpg",
|
||||
},
|
||||
id: "f3", title: "Medical Info Ready", description: "Store allergies, blood group, and emergency contacts. Visible instantly to whoever finds your child or pet.", tag: "Safety", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-public-transport-arrangement_23-2148967330.jpg"},
|
||||
]}
|
||||
title="Why Stalkr"
|
||||
description="Everything you need, nothing you don't. Built for real life."
|
||||
@@ -138,26 +91,10 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "01",
|
||||
description: "You set it up once. Ready in 2-3 days.",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "02",
|
||||
description: "Attach to a bag, wrist, or collar.",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "03",
|
||||
description: "Someone scans. Contact appears instantly.",
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
value: "04",
|
||||
description: "You connect in seconds. They come home.",
|
||||
},
|
||||
{ id: "m1", value: "01", description: "You set it up once. Ready in 2-3 days." },
|
||||
{ id: "m2", value: "02", description: "Attach to a bag, wrist, or collar." },
|
||||
{ id: "m3", value: "03", description: "Someone scans. Contact appears instantly." },
|
||||
{ id: "m4", value: "04", description: "You connect in seconds. They come home." },
|
||||
]}
|
||||
title="How It Works"
|
||||
description="Simple, instant, always ready. No complex setup."
|
||||
@@ -169,9 +106,7 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
title="Our Story"
|
||||
description={[
|
||||
"Some kids walk on two legs. Some run on four. But both have a habit of wandering a little too far.",
|
||||
"We built Stalkr to quietly protect what matters most — making it easier to help, without delay.",
|
||||
]}
|
||||
"Some kids walk on two legs. Some run on four. But both have a habit of wandering a little too far.", "We built Stalkr to quietly protect what matters most — making it easier to help, without delay."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -182,60 +117,9 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "Stalkr",
|
||||
name: "QR Collar Tag",
|
||||
price: "₹499",
|
||||
rating: 5,
|
||||
reviewCount: "120",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-emo-kid-with-accessories_23-2149645181.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "Stalkr",
|
||||
name: "QR Bag Tag",
|
||||
price: "₹399",
|
||||
rating: 5,
|
||||
reviewCount: "85",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-hand-holding-smartphone_23-2149340930.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "Stalkr",
|
||||
name: "Social Connect Card",
|
||||
price: "₹599",
|
||||
rating: 4,
|
||||
reviewCount: "40",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/ordered-composition-baking-tools_23-2150096569.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "Stalkr",
|
||||
name: "Custom Metal Tag",
|
||||
price: "₹799",
|
||||
rating: 5,
|
||||
reviewCount: "15",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/african-man-guy-black-suit-students-with-talet-girl-white-blouse_1157-41615.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
brand: "Stalkr",
|
||||
name: "Kid Safety Band",
|
||||
price: "₹449",
|
||||
rating: 5,
|
||||
reviewCount: "60",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-with-dog_1303-4608.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
brand: "Stalkr",
|
||||
name: "Travel Luggage Tag",
|
||||
price: "₹349",
|
||||
rating: 4,
|
||||
reviewCount: "30",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/glass-cups-composition_52683-103094.jpg",
|
||||
},
|
||||
{ id: "p1", brand: "Stalkr", name: "QR Collar Tag", price: "₹499", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/side-view-emo-kid-with-accessories_23-2149645181.jpg" },
|
||||
{ id: "p2", brand: "Stalkr", name: "QR Bag Tag", price: "₹399", rating: 5, reviewCount: "85", imageSrc: "http://img.b2bpic.net/free-photo/top-view-hand-holding-smartphone_23-2149340930.jpg" },
|
||||
{ id: "p3", brand: "Stalkr", name: "Social Connect Card", price: "₹599", rating: 4, reviewCount: "40", imageSrc: "http://img.b2bpic.net/free-photo/ordered-composition-baking-tools_23-2150096569.jpg" },
|
||||
]}
|
||||
title="Our Collection"
|
||||
description="Smart tags for every kind of family."
|
||||
@@ -248,28 +132,7 @@ export default function LandingPage() {
|
||||
testimonial="Stalkr feels like the village I never had in this city. It gives me peace of mind every time my kids go out to play."
|
||||
rating={5}
|
||||
author="Priya Sharma, Parent"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/hands-taking-photos-with-camera_23-2148880347.jpg",
|
||||
alt: "Priya",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/glad-beautiful-woman-poses-with-favorite-pug-dog-appetizing-pancakes-bed-start-day-with-eating-something-delicious-wears-sleepmask-pajama-isolated-beige-background-morning-time_273609-60230.jpg",
|
||||
alt: "Momo",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/mother-with-two-daughters_1303-8849.jpg",
|
||||
alt: "David",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/concentrated-young-lady-designer-sitting-office-night_171337-15594.jpg",
|
||||
alt: "Sarah",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-child-hugging-their-parents_1098-890.jpg",
|
||||
alt: "John",
|
||||
},
|
||||
]}
|
||||
avatars={[{ src: "http://img.b2bpic.net/free-photo/hands-taking-photos-with-camera_23-2148880347.jpg", alt: "Priya" }]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="blur-reveal"
|
||||
/>
|
||||
@@ -280,21 +143,8 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq1",
|
||||
title: "Payment Policy",
|
||||
content: "Prepaid orders only. Processed after payment.",
|
||||
},
|
||||
{
|
||||
id: "faq2",
|
||||
title: "Shipping",
|
||||
content: "Pan-India delivery via trusted couriers. 2-3 business days.",
|
||||
},
|
||||
{
|
||||
id: "faq3",
|
||||
title: "Exchanges",
|
||||
content: "Defective items only. Request within 48 hours.",
|
||||
},
|
||||
{ id: "faq1", title: "Payment Policy", content: "Prepaid orders only. Processed after payment." },
|
||||
{ id: "faq2", title: "Shipping", content: "Pan-India delivery via trusted couriers. 2-3 business days." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/equalizer-music-control-icon-graphic-with-people-studio-shoot_53876-121493.jpg"
|
||||
title="Important to Know"
|
||||
@@ -305,78 +155,26 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Custom Orders"
|
||||
description="Didn't find your style? Tell us what you have in mind and we'll build it for you."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "details",
|
||||
placeholder: "Tell us about your custom design...",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/closeup-belt_53876-33678.jpg"
|
||||
<ContactSplit
|
||||
tag="Get In Touch"
|
||||
title="Let's Build Something Together"
|
||||
description="Have a custom request or need help with your order? Send us a message."
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={true}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/closeup-belt_53876-33678.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Products",
|
||||
items: [
|
||||
{
|
||||
label: "Smart Collar Tag",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Custom Orders",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Help",
|
||||
items: [
|
||||
{
|
||||
label: "How It Works",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Policies",
|
||||
items: [
|
||||
{
|
||||
label: "Payment",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Shipping",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Stalkr"
|
||||
<FooterCard
|
||||
logoText="Stalkr"
|
||||
copyrightText="© 2025 | Stalkr Tech"
|
||||
socialLinks={[
|
||||
{ icon: Mail, href: "mailto:hello@stalkr.com", ariaLabel: "Email" },
|
||||
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
|
||||
{ icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
|
||||
{ icon: Github, href: "#", ariaLabel: "Github" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #ffffff;
|
||||
--card: #f9f9f9;
|
||||
--foreground: #000612;
|
||||
--background: #f5faff;
|
||||
--card: #f1f8ff;
|
||||
--foreground: #001122;
|
||||
--primary-cta: #15479c;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #000612;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #c4c4c4;
|
||||
--accent: #a8cce8;
|
||||
--background-accent: #7ba3cf;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user