Merge version_1 into main #3
@@ -1,15 +1,62 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
||||
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
||||
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import Link from "next/link";
|
||||
import { Mail, HelpCircle, Star } from "lucide-react";
|
||||
|
||||
export default function AccountPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "Loyalty", id: "/loyalty" },
|
||||
{ name: "Track Order", id: "/tracking" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
items: [
|
||||
{ label: "Shop", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/shop?category=new" },
|
||||
{ label: "Best Sellers", href: "/shop?category=bestsellers" },
|
||||
{ label: "Collections", href: "/shop?category=all" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Loyalty Program", href: "/loyalty" },
|
||||
{ label: "My Account", href: "/account" },
|
||||
{ label: "Track Order", href: "/tracking" },
|
||||
{ label: "Rewards", href: "/loyalty" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "#" },
|
||||
{ label: "Contact Us", href: "/contact" },
|
||||
{ label: "Customer Support", href: "#" },
|
||||
{ label: "WhatsApp Support", href: "https://wa.me/919999999999" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms & Conditions", href: "#" },
|
||||
{ label: "Return Policy", href: "#" },
|
||||
{ label: "Shipping Info", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Care Instructions", href: "#" },
|
||||
{ label: "Quality Promise", href: "#" },
|
||||
{ label: "Feedback", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
@@ -17,7 +64,7 @@ export default function AccountPage() {
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="large"
|
||||
background="fluid"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
@@ -25,173 +72,45 @@ export default function AccountPage() {
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "Loyalty", id: "/loyalty" },
|
||||
{ name: "Track Order", id: "/tracking" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
navItems={navItems}
|
||||
brandName="StylePro"
|
||||
bottomLeftText="Premium Men's Fashion"
|
||||
bottomRightText="support@stylepro.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="account-newsletter" data-section="account-newsletter">
|
||||
<ContactSplit
|
||||
tag="Account Newsletter"
|
||||
title="Manage Your Account Preferences"
|
||||
description="Update your email preferences, notification settings, and stay informed about your loyalty rewards, order status, and exclusive offers."
|
||||
tagIcon={Mail}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "fluid" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/contact-us-landing-page-business_23-2148281751.jpg?_wi=4"
|
||||
imageAlt="Account management banner"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Update Preferences"
|
||||
termsText="We respect your privacy. Manage your preferences anytime from your account dashboard."
|
||||
onSubmit={(email) => console.log("Email preferences updated:", email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="loyalty-testimonials" data-section="loyalty-testimonials">
|
||||
<TestimonialCardSixteen
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Akshay Sharma",
|
||||
role: "Loyal Customer",
|
||||
company: "Bangalore",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-successful-happy-smiling-young-woman-beige-jacket-glasses-standing-lobby-office-reception-greeting-business-client-with-pleasant-grin-inviting-company_197531-30568.jpg?_wi=3",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Priya Kapoor",
|
||||
role: "Fashion Enthusiast",
|
||||
company: "Mumbai",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-caucasian-blonde-female-white-shirt-posing-brown-background_181624-29671.jpg?_wi=3",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Rohan Verma",
|
||||
role: "Regular Shopper",
|
||||
company: "Delhi",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-caucasian-man-with-beard-with-arms-crossed-gesture-relaxed-with-serious-expression-face-simple-natural-looking-camera_839833-13410.jpg?_wi=3",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "50K+",
|
||||
label: "Account Members",
|
||||
},
|
||||
{
|
||||
value: "100K+",
|
||||
label: "Orders Tracked",
|
||||
},
|
||||
{
|
||||
value: "4.9/5",
|
||||
label: "Avg Rating",
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
title="Account Benefits & Rewards"
|
||||
description="See how our customers benefit from their StylePro accounts with our loyalty program and exclusive features."
|
||||
tag="Member Stories"
|
||||
tagIcon={Star}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="account-faq" data-section="account-faq">
|
||||
<FaqSplitMedia
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How do I reset my account password?",
|
||||
content: "Visit the login page and click 'Forgot Password'. Enter your registered email address and follow the reset link sent to your inbox. You'll receive a secure password reset email within 5 minutes.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "How can I view my loyalty rewards status?",
|
||||
content: "Log into your account dashboard to see your current loyalty card status (e.g., 3/6 visits). The progress bar updates automatically after each purchase. You can also scan your QR code in-store.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Can I link multiple email addresses to my account?",
|
||||
content: "Currently, each StylePro account is linked to one email address. However, you can update your email anytime in Account Settings. Your loyalty progress remains unchanged after the update.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/work-environment-call-center-office_23-2149256142.jpg?_wi=3"
|
||||
imageAlt="Customer support team"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="left"
|
||||
faqsAnimation="slide-up"
|
||||
title="Account & Loyalty FAQs"
|
||||
description="Find answers to common questions about managing your StylePro account and loyalty rewards."
|
||||
tag="Account Help"
|
||||
tagIcon={HelpCircle}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="smooth"
|
||||
/>
|
||||
<div id="account-content" data-section="account-content" className="min-h-screen bg-gradient-to-b from-background to-card">
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
<h1 className="text-4xl font-bold mb-8">My Account</h1>
|
||||
<div className="bg-card rounded-lg p-8 shadow-lg">
|
||||
<h2 className="text-2xl font-semibold mb-4">Welcome to Your Account</h2>
|
||||
<p className="text-foreground mb-6">Manage your profile, orders, and loyalty rewards.</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="p-4 border border-primary-cta rounded-lg">
|
||||
<h3 className="text-lg font-semibold mb-2">Your Orders</h3>
|
||||
<p className="text-foreground/75">View your order history and tracking information</p>
|
||||
</div>
|
||||
<div className="p-4 border border-primary-cta rounded-lg">
|
||||
<h3 className="text-lg font-semibold mb-2">Loyalty Card</h3>
|
||||
<p className="text-foreground/75">Track your loyalty points and rewards</p>
|
||||
</div>
|
||||
<div className="p-4 border border-primary-cta rounded-lg">
|
||||
<h3 className="text-lg font-semibold mb-2">Profile Settings</h3>
|
||||
<p className="text-foreground/75">Update your personal information</p>
|
||||
</div>
|
||||
<div className="p-4 border border-primary-cta rounded-lg">
|
||||
<h3 className="text-lg font-semibold mb-2">Saved Items</h3>
|
||||
<p className="text-foreground/75">View your wishlist and saved products</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Shop", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/shop?category=new" },
|
||||
{ label: "Best Sellers", href: "/shop?category=bestsellers" },
|
||||
{ label: "Collections", href: "/shop?category=all" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Loyalty Program", href: "/loyalty" },
|
||||
{ label: "My Account", href: "/account" },
|
||||
{ label: "Track Order", href: "/tracking" },
|
||||
{ label: "Rewards", href: "/loyalty" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "#" },
|
||||
{ label: "Contact Us", href: "/contact" },
|
||||
{ label: "Customer Support", href: "#" },
|
||||
{ label: "WhatsApp Support", href: "https://wa.me/919999999999" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms & Conditions", href: "#" },
|
||||
{ label: "Return Policy", href: "#" },
|
||||
{ label: "Shipping Info", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Care Instructions", href: "#" },
|
||||
{ label: "Quality Promise", href: "#" },
|
||||
{ label: "Feedback", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="StylePro"
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
@@ -1,15 +1,64 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
||||
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
||||
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import Link from "next/link";
|
||||
import { Mail, HelpCircle, Star } from "lucide-react";
|
||||
import { Mail } from "lucide-react";
|
||||
|
||||
export default function ContactPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "Loyalty", id: "/loyalty" },
|
||||
{ name: "Track Order", id: "/tracking" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
items: [
|
||||
{ label: "Shop", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/shop?category=new" },
|
||||
{ label: "Best Sellers", href: "/shop?category=bestsellers" },
|
||||
{ label: "Collections", href: "/shop?category=all" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Loyalty Program", href: "/loyalty" },
|
||||
{ label: "My Account", href: "/account" },
|
||||
{ label: "Track Order", href: "/tracking" },
|
||||
{ label: "Rewards", href: "/loyalty" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "#" },
|
||||
{ label: "Contact Us", href: "/contact" },
|
||||
{ label: "Customer Support", href: "#" },
|
||||
{ label: "WhatsApp Support", href: "https://wa.me/919999999999" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms & Conditions", href: "#" },
|
||||
{ label: "Return Policy", href: "#" },
|
||||
{ label: "Shipping Info", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Care Instructions", href: "#" },
|
||||
{ label: "Quality Promise", href: "#" },
|
||||
{ label: "Feedback", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
@@ -17,7 +66,7 @@ export default function ContactPage() {
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="large"
|
||||
background="fluid"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
@@ -25,188 +74,36 @@ export default function ContactPage() {
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "Loyalty", id: "/loyalty" },
|
||||
{ name: "Track Order", id: "/tracking" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
navItems={navItems}
|
||||
brandName="StylePro"
|
||||
bottomLeftText="Premium Men's Fashion"
|
||||
bottomRightText="support@stylepro.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-newsletter" data-section="contact-newsletter">
|
||||
<div id="contact-form" data-section="contact-form">
|
||||
<ContactSplit
|
||||
tag="Newsletter"
|
||||
title="Stay Updated on New Collections"
|
||||
description="Subscribe to get exclusive offers, new arrivals, and loyalty rewards updates delivered to your email."
|
||||
tag="Contact Us"
|
||||
title="Get in Touch"
|
||||
description="Have a question or feedback? We'd love to hear from you. Reach out through the form below or contact us directly."
|
||||
tagIcon={Mail}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "fluid" }}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/contact-us-landing-page-business_23-2148281751.jpg?_wi=5"
|
||||
imageAlt="Newsletter signup banner"
|
||||
imageSrc="http://img.b2bpic.net/free-vector/contact-us-landing-page-business_23-2148281751.jpg"
|
||||
imageAlt="Contact us banner"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Subscribe"
|
||||
termsText="We respect your privacy. Unsubscribe anytime. Expect emails about new collections and loyalty rewards."
|
||||
onSubmit={(email) => console.log("Subscribed:", email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-faq" data-section="contact-faq">
|
||||
<FaqSplitMedia
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How can I contact customer support?",
|
||||
content: "You can reach us via WhatsApp anytime. Click the WhatsApp button on any page to ask product questions, place manual orders, or get support. Our team responds within 1 hour during business hours (9 AM - 9 PM IST).",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "What are your business hours?",
|
||||
content: "StylePro operates 7 days a week from 9 AM to 9 PM IST. WhatsApp support is available 24/7 for order status and urgent queries. Email responses are typically within 24 hours.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "How do I report an issue with my order?",
|
||||
content: "Contact us immediately via WhatsApp with your order ID. Provide details of the issue (damaged item, wrong size, etc.) and photos if applicable. We'll resolve the issue within 48 hours or offer a replacement/refund.",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Can I schedule a store visit?",
|
||||
content: "Yes! WhatsApp us to schedule a personal styling appointment at our physical store. We offer free consultations and can hold items for you. Appointments available by request during business hours.",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Do you offer customization services?",
|
||||
content: "Yes, we offer basic customization like hemming, alterations, and monogramming for selected items. Contact us via WhatsApp for details and turnaround time (usually 3-5 business days).",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
title: "How can I provide feedback or suggestions?",
|
||||
content: "We'd love to hear from you! Send feedback via WhatsApp, email, or the Feedback option in your account dashboard. All suggestions are reviewed and help us improve our services.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/work-environment-call-center-office_23-2149256142.jpg?_wi=4"
|
||||
imageAlt="Customer support representative"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="left"
|
||||
faqsAnimation="slide-up"
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to common questions about shopping, loyalty rewards, and order tracking."
|
||||
tag="Support"
|
||||
tagIcon={HelpCircle}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="smooth"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-testimonials" data-section="contact-testimonials">
|
||||
<TestimonialCardSixteen
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Akshay Sharma",
|
||||
role: "Tech Professional",
|
||||
company: "Bangalore",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-successful-happy-smiling-young-woman-beige-jacket-glasses-standing-lobby-office-reception-greeting-business-client-with-pleasant-grin-inviting-company_197531-30568.jpg?_wi=4",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Priya Kapoor",
|
||||
role: "Fashion Enthusiast",
|
||||
company: "Mumbai",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-caucasian-blonde-female-white-shirt-posing-brown-background_181624-29671.jpg?_wi=4",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Rohan Verma",
|
||||
role: "Business Owner",
|
||||
company: "Delhi",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-caucasian-man-with-beard-with-arms-crossed-gesture-relaxed-with-serious-expression-face-simple-natural-looking-camera_839833-13410.jpg?_wi=4",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "50K+",
|
||||
label: "Happy Customers",
|
||||
},
|
||||
{
|
||||
value: "100K+",
|
||||
label: "Orders Delivered",
|
||||
},
|
||||
{
|
||||
value: "4.9/5",
|
||||
label: "Avg Rating",
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
title="What Our Customers Love"
|
||||
description="Real feedback from our growing community of satisfied customers across India."
|
||||
tag="Customer Reviews"
|
||||
tagIcon={Star}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
buttonText="Send Message"
|
||||
termsText="We'll get back to you within 24 hours during business days."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Shop", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/shop?category=new" },
|
||||
{ label: "Best Sellers", href: "/shop?category=bestsellers" },
|
||||
{ label: "Collections", href: "/shop?category=all" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Loyalty Program", href: "/loyalty" },
|
||||
{ label: "My Account", href: "/account" },
|
||||
{ label: "Track Order", href: "/tracking" },
|
||||
{ label: "Rewards", href: "/loyalty" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "#" },
|
||||
{ label: "Contact Us", href: "/contact" },
|
||||
{ label: "Customer Support", href: "#" },
|
||||
{ label: "WhatsApp Support", href: "https://wa.me/919999999999" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms & Conditions", href: "#" },
|
||||
{ label: "Return Policy", href: "#" },
|
||||
{ label: "Shipping Info", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Care Instructions", href: "#" },
|
||||
{ label: "Quality Promise", href: "#" },
|
||||
{ label: "Feedback", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="StylePro"
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
@@ -17,9 +17,9 @@ export default function HomePage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "Loyalty", id: "loyalty" },
|
||||
{ name: "Track Order", id: "tracking" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Loyalty", id: "/loyalty" },
|
||||
{ name: "Track Order", id: "/tracking" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
@@ -33,16 +33,16 @@ export default function HomePage() {
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Loyalty Program", href: "loyalty" },
|
||||
{ label: "My Account", href: "#" },
|
||||
{ label: "Track Order", href: "tracking" },
|
||||
{ label: "Rewards", href: "loyalty" },
|
||||
{ label: "Loyalty Program", href: "/loyalty" },
|
||||
{ label: "My Account", href: "/account" },
|
||||
{ label: "Track Order", href: "/tracking" },
|
||||
{ label: "Rewards", href: "/loyalty" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "#" },
|
||||
{ label: "Contact Us", href: "contact" },
|
||||
{ label: "Contact Us", href: "/contact" },
|
||||
{ label: "Customer Support", href: "#" },
|
||||
{ label: "WhatsApp Support", href: "https://wa.me/919999999999" },
|
||||
],
|
||||
@@ -72,7 +72,7 @@ export default function HomePage() {
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="large"
|
||||
background="fluid"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
@@ -94,7 +94,7 @@ export default function HomePage() {
|
||||
tag="New Collection"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "fluid" }}
|
||||
background={{ variant: "plain" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-suit-standing-near-table-shop_171337-18958.jpg"
|
||||
imageAlt="Premium men's clothing showcase"
|
||||
imagePosition="right"
|
||||
@@ -102,20 +102,24 @@ export default function HomePage() {
|
||||
testimonials={[
|
||||
{
|
||||
name: "Rahul Singh", handle: "Mumbai Customer", testimonial: "Best quality and amazing service! Love the loyalty rewards program.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-dj-grey-suit-with-headphones-neck_114579-15958.jpg"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-dj-grey-suit-with-headphones-neck_114579-15958.jpg"
|
||||
},
|
||||
{
|
||||
name: "Amit Patel", handle: "Delhi Customer", testimonial: "Quick delivery and perfect fit. Highly recommended!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-smiling-hipster-model-sexy-unshaven-man-dressed-sweater-jeans-clothes-fashion-male-posing-near-blue-wall-studiolooking-camera_158538-26860.jpg"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-smiling-hipster-model-sexy-unshaven-man-dressed-sweater-jeans-clothes-fashion-male-posing-near-blue-wall-studiolooking-camera_158538-26860.jpg"
|
||||
},
|
||||
{
|
||||
name: "Vikram Kumar", handle: "Bangalore Customer", testimonial: "Stylish collections and great customer support via WhatsApp.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-joyful-female-photographer-having-fun_1262-18854.jpg"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-joyful-female-photographer-having-fun_1262-18854.jpg"
|
||||
},
|
||||
{
|
||||
name: "Sanjay Gupta", handle: "Pune Customer", testimonial: "The loyalty card system is a game-changer. Worth every purchase!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-senior-businessman-laughing-looking-camera-office-portrait_1163-4926.jpg"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-senior-businessman-laughing-looking-camera-office-portrait_1163-4926.jpg"
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Shop Now", href: "/shop" },
|
||||
{ text: "Learn About Loyalty", href: "loyalty" },
|
||||
{ text: "Learn About Loyalty", href: "/loyalty" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
@@ -134,16 +138,20 @@ export default function HomePage() {
|
||||
products={[
|
||||
{
|
||||
id: "1", brand: "StylePro", name: "Classic White Shirt", price: "₹1,299", rating: 5,
|
||||
reviewCount: "2.4k", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-hipster-lambersexual-modelmodern-man-dressed-white-shirt-fashion-male-posing-street-background-sunglasses-outdoors-sunset_158538-20630.jpg", imageAlt: "Classic white premium shirt"},
|
||||
reviewCount: "2.4k", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-hipster-lambersexual-modelmodern-man-dressed-white-shirt-fashion-male-posing-street-background-sunglasses-outdoors-sunset_158538-20630.jpg", imageAlt: "Classic white premium shirt"
|
||||
},
|
||||
{
|
||||
id: "2", brand: "StylePro", name: "Premium Blue Denim", price: "₹2,499", rating: 5,
|
||||
reviewCount: "3.1k", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-hipster-male-student-sitting-bench-park_158538-12990.jpg", imageAlt: "Premium blue denim jeans"},
|
||||
reviewCount: "3.1k", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-hipster-male-student-sitting-bench-park_158538-12990.jpg", imageAlt: "Premium blue denim jeans"
|
||||
},
|
||||
{
|
||||
id: "3", brand: "StylePro", name: "Formal Black Pants", price: "₹1,899", rating: 5,
|
||||
reviewCount: "1.8k", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-black-shirt-jeans-standing-front-glass-door_23-2148164479.jpg", imageAlt: "Formal black dress pants"},
|
||||
reviewCount: "1.8k", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-black-shirt-jeans-standing-front-glass-door_23-2148164479.jpg", imageAlt: "Formal black dress pants"
|
||||
},
|
||||
{
|
||||
id: "4", brand: "StylePro", name: "Casual Crew Neck Tee", price: "₹599", rating: 5,
|
||||
reviewCount: "4.2k", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-hipster-lambersexual-model_158538-17997.jpg", imageAlt: "Casual crew neck t-shirt"},
|
||||
reviewCount: "4.2k", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-hipster-lambersexual-model_158538-17997.jpg", imageAlt: "Casual crew neck t-shirt"
|
||||
},
|
||||
]}
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
@@ -164,15 +172,23 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Make a Purchase", description: "Buy online or visit our store. Every transaction adds 1 visit to your loyalty card.", imageSrc: "http://img.b2bpic.net/free-photo/curious-young-man-opening-shopping-nets_23-2148316599.jpg"},
|
||||
id: 1,
|
||||
title: "Make a Purchase", description: "Buy online or visit our store. Every transaction adds 1 visit to your loyalty card.", imageSrc: "http://img.b2bpic.net/free-photo/curious-young-man-opening-shopping-nets_23-2148316599.jpg"
|
||||
},
|
||||
{
|
||||
id: "2", title: "Track Progress", description: "Watch your progress from 1/6 to 6/6 visits. Digital card with QR code for in-store scanning.", imageSrc: "http://img.b2bpic.net/free-vector/admin-app-dashboard-flat-style_23-2147863335.jpg"},
|
||||
id: 2,
|
||||
title: "Track Progress", description: "Watch your progress from 1/6 to 6/6 visits. Digital card with QR code for in-store scanning.", imageSrc: "http://img.b2bpic.net/free-vector/admin-app-dashboard-flat-style_23-2147863335.jpg"
|
||||
},
|
||||
{
|
||||
id: "3", title: "Earn Rewards", description: "Complete 6 visits and unlock your free item reward. Automatically credited to your account.", imageSrc: "http://img.b2bpic.net/free-photo/gifts-wooden-table_1252-128.jpg"},
|
||||
id: 3,
|
||||
title: "Earn Rewards", description: "Complete 6 visits and unlock your free item reward. Automatically credited to your account.", imageSrc: "http://img.b2bpic.net/free-photo/gifts-wooden-table_1252-128.jpg"
|
||||
},
|
||||
{
|
||||
id: "4", title: "Claim Your Gift", description: "Redeem your reward at checkout or in-store. No expiration, unlimited rewards cycles.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-cute-africanamerican-girl-winning-smartphone-game-shouting-joy-making-fist-pump-g_1258-131037.jpg"},
|
||||
id: 4,
|
||||
title: "Claim Your Gift", description: "Redeem your reward at checkout or in-store. No expiration, unlimited rewards cycles.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-cute-africanamerican-girl-winning-smartphone-game-shouting-joy-making-fist-pump-g_1258-131037.jpg"
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Start Your Loyalty Journey", href: "loyalty" }]}
|
||||
buttons={[{ text: "Start Your Loyalty Journey", href: "/loyalty" }]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
@@ -220,13 +236,16 @@ export default function HomePage() {
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Akshay Sharma", role: "Tech Professional", company: "Bangalore", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-successful-happy-smiling-young-woman-beige-jacket-glasses-standing-lobby-office-reception-greeting-business-client-with-pleasant-grin-inviting-company_197531-30568.jpg"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-successful-happy-smiling-young-woman-beige-jacket-glasses-standing-lobby-office-reception-greeting-business-client-with-pleasant-grin-inviting-company_197531-30568.jpg"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Priya Kapoor", role: "Fashion Enthusiast", company: "Mumbai", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-caucasian-blonde-female-white-shirt-posing-brown-background_181624-29671.jpg"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-caucasian-blonde-female-white-shirt-posing-brown-background_181624-29671.jpg"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Rohan Verma", role: "Business Owner", company: "Delhi", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-caucasian-man-with-beard-with-arms-crossed-gesture-relaxed-with-serious-expression-face-simple-natural-looking-camera_839833-13410.jpg"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-caucasian-man-with-beard-with-arms-crossed-gesture-relaxed-with-serious-expression-face-simple-natural-looking-camera_839833-13410.jpg"
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "50K+", label: "Happy Customers" },
|
||||
@@ -249,17 +268,23 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "How does the loyalty card system work?", content: "Every purchase (online or in-store) counts as 1 visit. After 5 purchases, your 6th purchase is FREE. Your progress is automatically tracked across all channels. Scan your QR code in-store or log into your account online to see your current status."},
|
||||
id: "1", title: "How does the loyalty card system work?", content: "Every purchase (online or in-store) counts as 1 visit. After 5 purchases, your 6th purchase is FREE. Your progress is automatically tracked across all channels. Scan your QR code in-store or log into your account online to see your current status."
|
||||
},
|
||||
{
|
||||
id: "2", title: "Can I use my loyalty card in both online and offline purchases?", content: "Yes! Your loyalty card works everywhere. Online orders automatically update your progress. For in-store purchases, simply provide your phone number or have the shopkeeper scan your QR code. The system instantly updates your loyalty status."},
|
||||
id: "2", title: "Can I use my loyalty card in both online and offline purchases?", content: "Yes! Your loyalty card works everywhere. Online orders automatically update your progress. For in-store purchases, simply provide your phone number or have the shopkeeper scan your QR code. The system instantly updates your loyalty status."
|
||||
},
|
||||
{
|
||||
id: "3", title: "How do I track my online order?", content: "After placing an order, you'll receive a tracking ID. Visit our Track Order page, enter your tracking ID, and see real-time updates: Order Placed → Packed → Shipped → Out for Delivery → Delivered. We integrate with major courier services for automatic updates."},
|
||||
id: "3", title: "How do I track my online order?", content: "After placing an order, you'll receive a tracking ID. Visit our Track Order page, enter your tracking ID, and see real-time updates: Order Placed → Packed → Shipped → Out for Delivery → Delivered. We integrate with major courier services for automatic updates."
|
||||
},
|
||||
{
|
||||
id: "4", title: "What payment options are available?", content: "We accept Cash on Delivery (COD), UPI, Debit/Credit Cards, and digital wallets. Choose your preferred method at checkout. For small towns with limited connectivity, we support offline payment confirmations via WhatsApp."},
|
||||
id: "4", title: "What payment options are available?", content: "We accept Cash on Delivery (COD), UPI, Debit/Credit Cards, and digital wallets. Choose your preferred method at checkout. For small towns with limited connectivity, we support offline payment confirmations via WhatsApp."
|
||||
},
|
||||
{
|
||||
id: "5", title: "How can I contact customer support?", content: "You can reach us via WhatsApp anytime. Click the WhatsApp button on any page to ask product questions, place manual orders, or get support. Our team responds within 1 hour during business hours."},
|
||||
id: "5", title: "How can I contact customer support?", content: "You can reach us via WhatsApp anytime. Click the WhatsApp button on any page to ask product questions, place manual orders, or get support. Our team responds within 1 hour during business hours."
|
||||
},
|
||||
{
|
||||
id: "6", title: "Are there any terms for the loyalty rewards?", content: "No expiration dates! Your loyalty progress never expires. Rewards can be redeemed anytime. You can continue earning unlimited reward cycles. Redeem in-store or online without any hassle."},
|
||||
id: "6", title: "Are there any terms for the loyalty rewards?", content: "No expiration dates! Your loyalty progress never expires. Rewards can be redeemed anytime. You can continue earning unlimited reward cycles. Redeem in-store or online without any hassle."
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/work-environment-call-center-office_23-2149256142.jpg"
|
||||
imageAlt="Customer support team help service"
|
||||
@@ -277,7 +302,7 @@ export default function HomePage() {
|
||||
description="Subscribe to get exclusive offers, new arrivals, and loyalty rewards updates delivered to your email."
|
||||
tagIcon={Mail}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "fluid" }}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/contact-us-landing-page-business_23-2148281751.jpg"
|
||||
imageAlt="Newsletter signup banner"
|
||||
|
||||
@@ -4,18 +4,16 @@ import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
||||
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
|
||||
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import { TrendingUp, CreditCard, Banknote, Smartphone, Sparkles, Mail } from "lucide-react";
|
||||
import { ShoppingBag, Star } from "lucide-react";
|
||||
|
||||
export default function ShopPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "Loyalty", id: "loyalty" },
|
||||
{ name: "Track Order", id: "tracking" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Loyalty", id: "/loyalty" },
|
||||
{ name: "Track Order", id: "/tracking" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
@@ -29,16 +27,16 @@ export default function ShopPage() {
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Loyalty Program", href: "loyalty" },
|
||||
{ label: "My Account", href: "#" },
|
||||
{ label: "Track Order", href: "tracking" },
|
||||
{ label: "Rewards", href: "loyalty" },
|
||||
{ label: "Loyalty Program", href: "/loyalty" },
|
||||
{ label: "My Account", href: "/account" },
|
||||
{ label: "Track Order", href: "/tracking" },
|
||||
{ label: "Rewards", href: "/loyalty" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "#" },
|
||||
{ label: "Contact Us", href: "contact" },
|
||||
{ label: "Contact Us", href: "/contact" },
|
||||
{ label: "Customer Support", href: "#" },
|
||||
{ label: "WhatsApp Support", href: "https://wa.me/919999999999" },
|
||||
],
|
||||
@@ -68,7 +66,7 @@ export default function ShopPage() {
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="large"
|
||||
background="fluid"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
@@ -85,140 +83,52 @@ export default function ShopPage() {
|
||||
|
||||
<div id="all-products" data-section="all-products">
|
||||
<ProductCardTwo
|
||||
title="Complete Collection"
|
||||
description="Browse our entire range of premium men's clothing. Every item is carefully selected for quality and style."
|
||||
tag="All Products"
|
||||
tagIcon={TrendingUp}
|
||||
title="All Products"
|
||||
description="Browse our complete collection of premium men's fashion. Every item selected for quality and style."
|
||||
tag="Complete Collection"
|
||||
tagIcon={ShoppingBag}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "StylePro",
|
||||
name: "Classic White Shirt",
|
||||
price: "₹1,299",
|
||||
rating: 5,
|
||||
reviewCount: "2.4k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-hipster-lambersexual-modelmodern-man-dressed-white-shirt-fashion-male-posing-street-background-sunglasses-outdoors-sunset_158538-20630.jpg?_wi=2",
|
||||
imageAlt: "Classic white premium shirt",
|
||||
id: "1", brand: "StylePro", name: "Classic White Shirt", price: "₹1,299", rating: 5,
|
||||
reviewCount: "2.4k", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-hipster-lambersexual-modelmodern-man-dressed-white-shirt-fashion-male-posing-street-background-sunglasses-outdoors-sunset_158538-20630.jpg", imageAlt: "Classic white premium shirt"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
brand: "StylePro",
|
||||
name: "Premium Blue Denim",
|
||||
price: "₹2,499",
|
||||
rating: 5,
|
||||
reviewCount: "3.1k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-hipster-male-student-sitting-bench-park_158538-12990.jpg?_wi=2",
|
||||
imageAlt: "Premium blue denim jeans",
|
||||
id: "2", brand: "StylePro", name: "Premium Blue Denim", price: "₹2,499", rating: 5,
|
||||
reviewCount: "3.1k", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-hipster-male-student-sitting-bench-park_158538-12990.jpg", imageAlt: "Premium blue denim jeans"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
brand: "StylePro",
|
||||
name: "Formal Black Pants",
|
||||
price: "₹1,899",
|
||||
rating: 5,
|
||||
reviewCount: "1.8k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-black-shirt-jeans-standing-front-glass-door_23-2148164479.jpg?_wi=2",
|
||||
imageAlt: "Formal black dress pants",
|
||||
id: "3", brand: "StylePro", name: "Formal Black Pants", price: "₹1,899", rating: 5,
|
||||
reviewCount: "1.8k", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-black-shirt-jeans-standing-front-glass-door_23-2148164479.jpg", imageAlt: "Formal black dress pants"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
brand: "StylePro",
|
||||
name: "Casual Crew Neck Tee",
|
||||
price: "₹599",
|
||||
rating: 5,
|
||||
reviewCount: "4.2k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-hipster-lambersexual-model_158538-17997.jpg?_wi=2",
|
||||
imageAlt: "Casual crew neck t-shirt",
|
||||
id: "4", brand: "StylePro", name: "Casual Crew Neck Tee", price: "₹599", rating: 5,
|
||||
reviewCount: "4.2k", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-hipster-lambersexual-model_158538-17997.jpg", imageAlt: "Casual crew neck t-shirt"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
brand: "StylePro",
|
||||
name: "Navy Blue Formal Shirt",
|
||||
price: "₹1,499",
|
||||
rating: 5,
|
||||
reviewCount: "1.9k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-hipster-lambersexual-modelmodern-man-dressed-white-shirt-fashion-male-posing-street-background-sunglasses-outdoors-sunset_158538-20630.jpg?_wi=3",
|
||||
imageAlt: "Navy blue formal shirt",
|
||||
id: "5", brand: "StylePro", name: "Oxford Cotton Shirt", price: "₹1,599", rating: 5,
|
||||
reviewCount: "1.9k", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-hipster-lambersexual-modelmodern-man-dressed-white-shirt-fashion-male-posing-street-background-sunglasses-outdoors-sunset_158538-20630.jpg", imageAlt: "Oxford cotton shirt premium"
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
brand: "StylePro",
|
||||
name: "Charcoal Grey Jeans",
|
||||
price: "₹2,299",
|
||||
rating: 5,
|
||||
reviewCount: "2.7k",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-hipster-male-student-sitting-bench-park_158538-12990.jpg?_wi=3",
|
||||
imageAlt: "Charcoal grey denim jeans",
|
||||
id: "6", brand: "StylePro", name: "Slim Fit Black Jeans", price: "₹2,199", rating: 5,
|
||||
reviewCount: "2.7k", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-hipster-male-student-sitting-bench-park_158538-12990.jpg", imageAlt: "Slim fit black jeans"
|
||||
},
|
||||
{
|
||||
id: "7", brand: "StylePro", name: "Navy Formal Blazer", price: "₹3,499", rating: 5,
|
||||
reviewCount: "892", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-black-shirt-jeans-standing-front-glass-door_23-2148164479.jpg", imageAlt: "Navy formal blazer jacket"
|
||||
},
|
||||
{
|
||||
id: "8", brand: "StylePro", name: "Premium Polo Shirt", price: "₹1,099", rating: 5,
|
||||
reviewCount: "3.2k", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-hipster-lambersexual-model_158538-17997.jpg", imageAlt: "Premium polo shirt"
|
||||
},
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="checkout-payment" data-section="checkout-payment">
|
||||
<PricingCardTwo
|
||||
title="Choose Your Payment Method"
|
||||
description="Select the best payment option for your shopping experience."
|
||||
tag="Payment Options"
|
||||
tagIcon={CreditCard}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "1",
|
||||
badge: "Cash on Delivery",
|
||||
badgeIcon: Banknote,
|
||||
price: "₹0",
|
||||
subtitle: "Pay when you receive your order",
|
||||
buttons=[{ text: "Select Method", href: "#" }],
|
||||
features: ["No hidden charges", "Verify before payment", "Same day confirmation"],
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
badge: "Digital Payment",
|
||||
badgeIcon: Smartphone,
|
||||
price: "Instant",
|
||||
subtitle: "UPI, Credit/Debit Card & Wallet",
|
||||
buttons=[{ text: "Select Method", href: "#" }],
|
||||
features: ["Fastest checkout", "Secure transactions", "Real-time confirmation"],
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
badge: "Premium Checkout",
|
||||
badgeIcon: Sparkles,
|
||||
price: "Flexible",
|
||||
subtitle: "All methods + Extra loyalty points",
|
||||
buttons=[{ text: "Select Method", href: "#" }],
|
||||
features: ["Maximum flexibility", "Priority support", "Double loyalty points"],
|
||||
},
|
||||
]}
|
||||
carouselMode="buttons"
|
||||
animationType="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="newsletter-shop" data-section="newsletter-shop">
|
||||
<ContactSplit
|
||||
tag="Newsletter"
|
||||
title="Get Exclusive Shopping Offers"
|
||||
description="Subscribe to our newsletter and receive exclusive discounts on new arrivals and member-only sales."
|
||||
tagIcon={Mail}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "fluid" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/contact-us-landing-page-business_23-2148281751.jpg?_wi=2"
|
||||
imageAlt="Newsletter signup banner"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Subscribe"
|
||||
termsText="Get notified about new collections, special offers, and loyalty rewards. We respect your privacy."
|
||||
buttons={[{ text: "View Recommendations", href: "/" }]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,14 +1,63 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
||||
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import { HelpCircle, Mail } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Package } from "lucide-react";
|
||||
|
||||
export default function TrackingPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "Loyalty", id: "/loyalty" },
|
||||
{ name: "Track Order", id: "/tracking" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
items: [
|
||||
{ label: "Shop", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/shop?category=new" },
|
||||
{ label: "Best Sellers", href: "/shop?category=bestsellers" },
|
||||
{ label: "Collections", href: "/shop?category=all" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Loyalty Program", href: "/loyalty" },
|
||||
{ label: "My Account", href: "/account" },
|
||||
{ label: "Track Order", href: "/tracking" },
|
||||
{ label: "Rewards", href: "/loyalty" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "#" },
|
||||
{ label: "Contact Us", href: "/contact" },
|
||||
{ label: "Customer Support", href: "#" },
|
||||
{ label: "WhatsApp Support", href: "https://wa.me/919999999999" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms & Conditions", href: "#" },
|
||||
{ label: "Return Policy", href: "#" },
|
||||
{ label: "Shipping Info", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Care Instructions", href: "#" },
|
||||
{ label: "Quality Promise", href: "#" },
|
||||
{ label: "Feedback", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
@@ -16,207 +65,70 @@ export default function TrackingPage() {
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="large"
|
||||
background="fluid"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
{/* Navbar */}
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/products" },
|
||||
{ name: "Loyalty", id: "/loyalty" },
|
||||
{ name: "Track Order", id: "/tracking" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
navItems={navItems}
|
||||
brandName="StylePro"
|
||||
bottomLeftText="Premium Men's Fashion"
|
||||
bottomRightText="support@stylepro.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How does the loyalty card system work?",
|
||||
content: "Every purchase (online or in-store) counts as 1 visit. After 5 purchases, your 6th purchase is FREE. Your progress is automatically tracked across all channels. Scan your QR code in-store or log into your account online to see your current status.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Can I use my loyalty card in both online and offline purchases?",
|
||||
content: "Yes! Your loyalty card works everywhere. Online orders automatically update your progress. For in-store purchases, simply provide your phone number or have the shopkeeper scan your QR code. The system instantly updates your loyalty status.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "How do I track my online order?",
|
||||
content: "After placing an order, you'll receive a tracking ID. Visit our Track Order page, enter your tracking ID, and see real-time updates: Order Placed → Packed → Shipped → Out for Delivery → Delivered. We integrate with major courier services for automatic updates.",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "What payment options are available?",
|
||||
content: "We accept Cash on Delivery (COD), UPI, Debit/Credit Cards, and digital wallets. Choose your preferred method at checkout. For small towns with limited connectivity, we support offline payment confirmations via WhatsApp.",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "How can I contact customer support?",
|
||||
content: "You can reach us via WhatsApp anytime. Click the WhatsApp button on any page to ask product questions, place manual orders, or get support. Our team responds within 1 hour during business hours.",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
title: "Are there any terms for the loyalty rewards?",
|
||||
content: "No expiration dates! Your loyalty progress never expires. Rewards can be redeemed anytime. You can continue earning unlimited reward cycles. Redeem in-store or online without any hassle.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/work-environment-call-center-office_23-2149256142.jpg?_wi=2"
|
||||
imageAlt="customer support team help service"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="left"
|
||||
faqsAnimation="slide-up"
|
||||
animationType="smooth"
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to common questions about shopping, loyalty rewards, and order tracking."
|
||||
tag="Support"
|
||||
tagIcon={HelpCircle}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<div id="tracking-content" data-section="tracking-content" className="min-h-screen bg-gradient-to-b from-background to-card">
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Package className="w-8 h-8 text-primary-cta" />
|
||||
<h1 className="text-4xl font-bold">Track Your Order</h1>
|
||||
</div>
|
||||
<div className="bg-card rounded-lg p-8 shadow-lg">
|
||||
<form className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Tracking ID</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter your tracking ID"
|
||||
className="w-full px-4 py-3 border border-primary-cta/30 rounded-lg focus:outline-none focus:border-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Email Address</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
className="w-full px-4 py-3 border border-primary-cta/30 rounded-lg focus:outline-none focus:border-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full px-6 py-3 bg-primary-cta text-white font-semibold rounded-lg hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Track Package
|
||||
</button>
|
||||
</form>
|
||||
<div className="mt-8 pt-8 border-t border-primary-cta/20">
|
||||
<h2 className="text-xl font-semibold mb-4">Order Status</h2>
|
||||
<div className="space-y-3 text-foreground/75">
|
||||
<p>• Order Placed: Track when your order is confirmed</p>
|
||||
<p>• Packed: See when your items are being prepared</p>
|
||||
<p>• Shipped: Get notified when it's on the way</p>
|
||||
<p>• Out for Delivery: Know when to expect it</p>
|
||||
<p>• Delivered: Confirmation upon receipt</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Newsletter Section */}
|
||||
<div id="newsletter" data-section="newsletter">
|
||||
<ContactSplit
|
||||
tag="Newsletter"
|
||||
title="Stay Updated on New Collections"
|
||||
description="Subscribe to get exclusive offers, new arrivals, and loyalty rewards updates delivered to your email."
|
||||
tagIcon={Mail}
|
||||
tagAnimation="slide-up"
|
||||
background={{
|
||||
variant: "fluid",
|
||||
}}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/contact-us-landing-page-business_23-2148281751.jpg?_wi=3"
|
||||
imageAlt="newsletter subscription email marketing"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Subscribe"
|
||||
termsText="We respect your privacy. Unsubscribe anytime. Expect emails about new collections and loyalty rewards."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="StylePro"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Shop",
|
||||
href: "/shop",
|
||||
},
|
||||
{
|
||||
label: "New Arrivals",
|
||||
href: "/shop?category=new",
|
||||
},
|
||||
{
|
||||
label: "Best Sellers",
|
||||
href: "/shop?category=bestsellers",
|
||||
},
|
||||
{
|
||||
label: "Collections",
|
||||
href: "/shop?category=all",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Loyalty Program",
|
||||
href: "/loyalty",
|
||||
},
|
||||
{
|
||||
label: "My Account",
|
||||
href: "/account",
|
||||
},
|
||||
{
|
||||
label: "Track Order",
|
||||
href: "/tracking",
|
||||
},
|
||||
{
|
||||
label: "Rewards",
|
||||
href: "/loyalty",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact Us",
|
||||
href: "/contact",
|
||||
},
|
||||
{
|
||||
label: "Customer Support",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "WhatsApp Support",
|
||||
href: "https://wa.me/919999999999",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms & Conditions",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Return Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Shipping Info",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Size Guide",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Care Instructions",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Quality Promise",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Feedback",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
@@ -1,51 +1,43 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import useSvgTextLogo from "./useSvgTextLogo";
|
||||
import { cls } from "@/lib/utils";
|
||||
import React from "react";
|
||||
|
||||
interface SvgTextLogoProps {
|
||||
logoText: string;
|
||||
adjustHeightFactor?: number;
|
||||
verticalAlign?: "top" | "center";
|
||||
text: string;
|
||||
className?: string;
|
||||
fontSize?: number;
|
||||
fontWeight?: string;
|
||||
fontFamily?: string;
|
||||
fill?: string;
|
||||
letterSpacing?: number;
|
||||
textAnchor?: "start" | "middle" | "end";
|
||||
dominantBaseline?: "hanging" | "middle" | "baseline" | "auto";
|
||||
}
|
||||
|
||||
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
|
||||
logoText,
|
||||
adjustHeightFactor,
|
||||
verticalAlign = "top",
|
||||
className = "",
|
||||
}) {
|
||||
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
|
||||
|
||||
const SvgTextLogo = ({
|
||||
text,
|
||||
className = "", fontSize = 48,
|
||||
fontWeight = "bold", fontFamily = "Poppins, sans-serif", fill = "currentColor", letterSpacing = 0,
|
||||
textAnchor = "middle", dominantBaseline = "middle"}: SvgTextLogoProps) => {
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={viewBox}
|
||||
className={cls("w-full", className)}
|
||||
style={{ aspectRatio: aspectRatio }}
|
||||
preserveAspectRatio="none"
|
||||
role="img"
|
||||
aria-label={`${logoText} logo`}
|
||||
viewBox={`0 0 ${text.length * fontSize * 0.6} ${fontSize * 1.5}`}
|
||||
className={className}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<text
|
||||
ref={textRef}
|
||||
x="0"
|
||||
y={verticalAlign === "center" ? "50%" : "0"}
|
||||
className="font-bold fill-current"
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
letterSpacing: "-0.02em",
|
||||
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
|
||||
}}
|
||||
x={`${text.length * fontSize * 0.3}`}
|
||||
y={`${fontSize * 0.75}`}
|
||||
fontSize={fontSize}
|
||||
fontWeight={fontWeight}
|
||||
fontFamily={fontFamily}
|
||||
fill={fill}
|
||||
textAnchor={textAnchor}
|
||||
dominantBaseline={dominantBaseline}
|
||||
letterSpacing={letterSpacing}
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
|
||||
export default SvgTextLogo;
|
||||
export default SvgTextLogo;
|
||||
Reference in New Issue
Block a user