Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| d0d7ff822e | |||
| b9221bdbb1 | |||
| bf7c3554a1 | |||
| 1fdc719af7 | |||
| 03d2289e66 | |||
| 470a5784d1 | |||
| fe9a010c0c | |||
| 11c52158f5 | |||
| 964ee93b41 | |||
| a43593e4fb | |||
| e47bb2a178 | |||
| 4564e82333 | |||
| 7bfe10fa94 | |||
| 21accc8540 |
242
src/app/checkout/page.tsx
Normal file
242
src/app/checkout/page.tsx
Normal file
@@ -0,0 +1,242 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
|
import ReactLenis from "lenis/react";
|
||||||
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||||
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||||
|
import ButtonElasticEffect from '@/components/button/ButtonElasticEffect/ButtonElasticEffect';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
export default function CheckoutPage() {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
fullName: '',
|
||||||
|
email: '',
|
||||||
|
address: '',
|
||||||
|
city: '',
|
||||||
|
zip: '',
|
||||||
|
cardName: '',
|
||||||
|
cardNumber: '',
|
||||||
|
expDate: '',
|
||||||
|
cvv: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||||
|
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
console.log("Checkout form submitted:", formData);
|
||||||
|
// In a real app, process payment and redirect to order confirmation
|
||||||
|
window.location.href = "/order-confirmation";
|
||||||
|
};
|
||||||
|
|
||||||
|
const footerColumns = [
|
||||||
|
{
|
||||||
|
title: "Quick Links", items: [
|
||||||
|
{ label: "Home", href: "/" },
|
||||||
|
{ label: "About Us", href: "/#about" },
|
||||||
|
{ label: "Services", href: "/#services" },
|
||||||
|
{ label: "Team", href: "/#team" },
|
||||||
|
{ label: "Shopping Cart", href: "/shopping-cart" },
|
||||||
|
{ label: "Checkout", href: "/checkout" },
|
||||||
|
{ label: "Order Confirmation", href: "/order-confirmation" }
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Resources", items: [
|
||||||
|
{ label: "FAQ", href: "/#faq" },
|
||||||
|
{ label: "Contact Us", href: "/#contact" },
|
||||||
|
{ label: "Privacy Policy", href: "#" },
|
||||||
|
{ label: "Terms of Service", href: "#" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Connect", items: [
|
||||||
|
{ label: "info@fcplus.com", href: "mailto:info@fcplus.com" },
|
||||||
|
{ label: "+1 (555) 123-4567", href: "tel:+15551234567" },
|
||||||
|
{ label: "456 Gentleman's Way", href: "#" },
|
||||||
|
{ label: "Fashion District, NY 10018", href: "#" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ name: "Home", id: "/" },
|
||||||
|
{ name: "About", id: "/#about" },
|
||||||
|
{ name: "Services", id: "/#services" },
|
||||||
|
{ name: "Team", id: "/#team" },
|
||||||
|
{ name: "Testimonials", id: "/#testimonials" },
|
||||||
|
{ name: "FAQ", id: "/#faq" },
|
||||||
|
{ name: "Contact", id: "/#contact" },
|
||||||
|
{ name: "Cart", id: "/shopping-cart" },
|
||||||
|
{ name: "Checkout", id: "/checkout" },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeProvider
|
||||||
|
defaultButtonVariant="bounce-effect"
|
||||||
|
defaultTextAnimation="background-highlight"
|
||||||
|
borderRadius="soft"
|
||||||
|
contentWidth="compact"
|
||||||
|
sizing="largeSmallSizeLargeTitles"
|
||||||
|
background="floatingGradient"
|
||||||
|
cardStyle="gradient-bordered"
|
||||||
|
primaryButtonStyle="flat"
|
||||||
|
secondaryButtonStyle="layered"
|
||||||
|
headingFontWeight="bold"
|
||||||
|
>
|
||||||
|
<ReactLenis root>
|
||||||
|
<div id="nav" data-section="nav">
|
||||||
|
<NavbarLayoutFloatingOverlay
|
||||||
|
navItems={navItems}
|
||||||
|
brandName="FCplus Center"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<main className="min-h-screen py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto">
|
||||||
|
<h1 className="text-4xl font-bold text-center mb-12">Checkout</h1>
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-8 p-8 border rounded-lg shadow-lg bg-card">
|
||||||
|
{/* Shipping Information */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-2xl font-semibold mb-4">Shipping Information</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="fullName" className="block text-sm font-medium text-foreground">Full Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="fullName"
|
||||||
|
name="fullName"
|
||||||
|
value={formData.fullName}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label htmlFor="email" className="block text-sm font-medium text-foreground">Email Address</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<label htmlFor="address" className="block text-sm font-medium text-foreground">Address</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="address"
|
||||||
|
name="address"
|
||||||
|
value={formData.address}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label htmlFor="city" className="block text-sm font-medium text-foreground">City</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="city"
|
||||||
|
name="city"
|
||||||
|
value={formData.city}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label htmlFor="zip" className="block text-sm font-medium text-foreground">ZIP Code</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="zip"
|
||||||
|
name="zip"
|
||||||
|
value={formData.zip}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Payment Information */}
|
||||||
|
<section>
|
||||||
|
<h2 className="text-2xl font-semibold mb-4">Payment Information</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<label htmlFor="cardName" className="block text-sm font-medium text-foreground">Name on Card</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="cardName"
|
||||||
|
name="cardName"
|
||||||
|
value={formData.cardName}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<label htmlFor="cardNumber" className="block text-sm font-medium text-foreground">Card Number</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="cardNumber"
|
||||||
|
name="cardNumber"
|
||||||
|
value={formData.cardNumber}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label htmlFor="expDate" className="block text-sm font-medium text-foreground">Expiration Date (MM/YY)</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="expDate"
|
||||||
|
name="expDate"
|
||||||
|
value={formData.expDate}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label htmlFor="cvv" className="block text-sm font-medium text-foreground">CVV</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="cvv"
|
||||||
|
name="cvv"
|
||||||
|
value={formData.cvv}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<ButtonElasticEffect
|
||||||
|
text="Pay Now"
|
||||||
|
type="submit"
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="footer" data-section="footer">
|
||||||
|
<FooterMedia
|
||||||
|
imageSrc="http://img.b2bpic.net/free-photo/blue-suit-hangers-dark-background_107420-101413.jpg"
|
||||||
|
imageAlt="Blue suits on hangers in a dark setting"
|
||||||
|
logoText="FCplus Center"
|
||||||
|
columns={footerColumns}
|
||||||
|
copyrightText="© 2024 FCplus Center. All rights reserved."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ReactLenis>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -11,8 +11,8 @@ import { Open_Sans } from "next/font/google";
|
|||||||
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: 'FCplus Center | Expert Financial Consulting & Planning',
|
title: 'FCplus Center | Exquisite Man Suit Wear & Tailoring',
|
||||||
description: 'FCplus Center offers personalized financial planning, investment management, and wealth strategies to help individuals and businesses achieve their financial goals with confidence.',
|
description: 'FCplus Center offers exceptional man suit wear, custom tailoring, and personalized styling to help gentlemen define their distinguished look with premium fabrics and impeccable fits.',
|
||||||
keywords: ["financial consulting, financial planning, investment management, wealth management, retirement planning, estate planning, tax optimization, debt management"],
|
keywords: ["financial consulting, financial planning, investment management, wealth management, retirement planning, estate planning, tax optimization, debt management"],
|
||||||
openGraph: {
|
openGraph: {
|
||||||
"title": "FCplus Center | Expert Financial Consulting & Planning",
|
"title": "FCplus Center | Expert Financial Consulting & Planning",
|
||||||
|
|||||||
114
src/app/page.tsx
114
src/app/page.tsx
@@ -12,7 +12,7 @@ import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|||||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||||
import TeamCardSix from '@/components/sections/team/TeamCardSix';
|
import TeamCardSix from '@/components/sections/team/TeamCardSix';
|
||||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||||
import { ShieldCheck, TrendingUp } from "lucide-react";
|
import { Scissors, ShieldCheck, Shirt, TrendingUp } from "lucide-react";
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
return (
|
return (
|
||||||
@@ -33,11 +33,13 @@ export default function LandingPage() {
|
|||||||
<NavbarLayoutFloatingOverlay
|
<NavbarLayoutFloatingOverlay
|
||||||
navItems={[
|
navItems={[
|
||||||
{
|
{
|
||||||
name: "Home", id: "#home"},
|
name: "Home", id: "/"},
|
||||||
{
|
{
|
||||||
name: "About", id: "#about"},
|
name: "About", id: "#about"},
|
||||||
{
|
{
|
||||||
name: "Services", id: "#services"},
|
name: "Services", id: "#services"},
|
||||||
|
{
|
||||||
|
name: "Product", id: "/product/1"},
|
||||||
{
|
{
|
||||||
name: "Team", id: "#team"},
|
name: "Team", id: "#team"},
|
||||||
{
|
{
|
||||||
@@ -56,23 +58,23 @@ export default function LandingPage() {
|
|||||||
background={{
|
background={{
|
||||||
variant: "downward-rays-static"}}
|
variant: "downward-rays-static"}}
|
||||||
imagePosition="right"
|
imagePosition="right"
|
||||||
title="Empowering Your Future Through Financial Clarity"
|
title="Elevate Your Style: Discover Exquisite Man Suit Wear at FCplus Center"
|
||||||
description="FCplus Center provides expert financial consulting and planning services to help you achieve your goals with confidence and peace of mind. Let us guide you towards financial freedom."
|
description="FCplus Center is your premier destination for exceptional man suit wear, offering tailored fits, premium fabrics, and personalized styling to define your distinguished look."
|
||||||
buttons={[
|
buttons={[
|
||||||
{
|
{
|
||||||
text: "Get Started", href: "#contact"},
|
text: "Explore Suits", href: "#services"},
|
||||||
{
|
{
|
||||||
text: "Learn More", href: "#about"},
|
text: "Book a Consultation", href: "#contact"},
|
||||||
]}
|
]}
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/businesspeople-discussing-interesting-idea_1098-1198.jpg"
|
imageSrc="http://img.b2bpic.net/free-photo/stylish-man-in-blue-suit_1303-10022.jpg"
|
||||||
imageAlt="Modern financial office with a team collaborating"
|
imageAlt="Stylish man in a blue suit"
|
||||||
mediaAnimation="slide-up"
|
mediaAnimation="slide-up"
|
||||||
fixedMediaHeight={true}
|
fixedMediaHeight={true}
|
||||||
avatars={[
|
avatars={[
|
||||||
{
|
{
|
||||||
src: "http://img.b2bpic.net/free-photo/close-up-shot-handsome-african-student-with-beard-dressed-denim-shirt-smiling-happily-showing-his-white-teeth-having-joyful-contented-look_273609-1853.jpg", alt: "Happy client John Doe"},
|
src: "http://img.b2bpic.net/free-photo/close-up-shot-handsome-african-student-with-beard-dressed-denim-shirt-smiling-happily-showing-his-white-teeth-having-joyful-contented-look_273609-1853.jpg", alt: "Satisfied client John Doe"},
|
||||||
{
|
{
|
||||||
src: "http://img.b2bpic.net/free-photo/smiling-young-beautiful-girl-looking-straight-ahead-wearing-white-t-shirt-isolated-pink_141793-86615.jpg", alt: "Satisfied client Jane Smith"},
|
src: "http://img.b2bpic.net/free-photo/smiling-young-beautiful-girl-looking-straight-ahead-wearing-white-t-shirt-isolated-pink_141793-86615.jpg", alt: "Happy client Jane Smith"},
|
||||||
{
|
{
|
||||||
src: "http://img.b2bpic.net/free-photo/people-technology-close-up-shot-happy-face-attractive-bearded-man-sitting-front-laptop-screen-smiling-joyfully-while-messaging-friends-online-via-social-networks_273609-6655.jpg", alt: "Trusted client David Lee"},
|
src: "http://img.b2bpic.net/free-photo/people-technology-close-up-shot-happy-face-attractive-bearded-man-sitting-front-laptop-screen-smiling-joyfully-while-messaging-friends-online-via-social-networks_273609-6655.jpg", alt: "Trusted client David Lee"},
|
||||||
{
|
{
|
||||||
@@ -80,20 +82,20 @@ export default function LandingPage() {
|
|||||||
{
|
{
|
||||||
src: "http://img.b2bpic.net/free-photo/handsome-man-outdoors-portrait_158595-3551.jpg", alt: "Partner client Alex Green"},
|
src: "http://img.b2bpic.net/free-photo/handsome-man-outdoors-portrait_158595-3551.jpg", alt: "Partner client Alex Green"},
|
||||||
]}
|
]}
|
||||||
avatarText="Trusted by over 500+ clients worldwide."
|
avatarText="Trusted by thousands of gentlemen worldwide."
|
||||||
marqueeItems={[
|
marqueeItems={[
|
||||||
{
|
{
|
||||||
type: "text", text: "Strategic Financial Planning"},
|
type: "text", text: "Custom Tailoring Excellence"},
|
||||||
{
|
{
|
||||||
type: "text-icon", text: "Wealth Growth", icon: TrendingUp,
|
type: "text-icon", text: "Ready-to-Wear Collections", icon: Shirt,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text", text: "Secure Retirement Solutions"},
|
type: "text", text: "Personalized Styling Advice"},
|
||||||
{
|
{
|
||||||
type: "text-icon", text: "Personalized Guidance", icon: ShieldCheck,
|
type: "text-icon", text: "Premium Fabric Selection", icon: Scissors,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text", text: "Future-Proofing Your Assets"},
|
type: "text", text: "Impeccable Fit & Alterations"},
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -103,11 +105,11 @@ export default function LandingPage() {
|
|||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
heading={[
|
heading={[
|
||||||
{
|
{
|
||||||
type: "text", content: "Your Trusted Partner in Financial Growth"},
|
type: "text", content: "Crafting Your Perfect Look with Precision and Passion"},
|
||||||
]}
|
]}
|
||||||
buttons={[
|
buttons={[
|
||||||
{
|
{
|
||||||
text: "Our Approach", href: "#services"},
|
text: "Our Craft", href: "#services"},
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -119,20 +121,20 @@ export default function LandingPage() {
|
|||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
features={[
|
features={[
|
||||||
{
|
{
|
||||||
id: "f1", title: "Financial Planning", subtitle: "Personalized strategies for your future.", category: "Core Service", value: "Strategic"},
|
id: "f1", title: "Custom Tailoring", subtitle: "Perfect fit, unique style for every occasion.", category: "Bespoke", value: "Precision"},
|
||||||
{
|
{
|
||||||
id: "f2", title: "Investment Management", subtitle: "Grow your wealth with expert guidance.", category: "Core Service", value: "Growth"},
|
id: "f2", title: "Ready-to-Wear", subtitle: "Curated collections for immediate elegance.", category: "Collections", value: "Versatility"},
|
||||||
{
|
{
|
||||||
id: "f3", title: "Retirement Planning", subtitle: "Secure your golden years with confidence.", category: "Core Service", value: "Security"},
|
id: "f3", title: "Style Consultation", subtitle: "Expert advice to refine your wardrobe and image.", category: "Guidance", value: "Elegance"},
|
||||||
{
|
{
|
||||||
id: "f4", title: "Estate Planning", subtitle: "Protect your legacy for generations.", category: "Specialized", value: "Legacy"},
|
id: "f4", title: "Fabric Selection", subtitle: "Finest materials for lasting comfort and luxury.", category: "Luxury", value: "Quality"},
|
||||||
{
|
{
|
||||||
id: "f5", title: "Tax Optimization", subtitle: "Minimize liabilities, maximize returns.", category: "Specialized", value: "Efficiency"},
|
id: "f5", title: "Alterations & Fitting", subtitle: "Ensuring impeccable comfort and a perfect silhouette.", category: "Fit", value: "Perfection"},
|
||||||
{
|
{
|
||||||
id: "f6", title: "Debt Management", subtitle: "Pathways to a debt-free future.", category: "Support", value: "Freedom"},
|
id: "f6", title: "Accessories", subtitle: "Complete your ensemble with sophisticated details.", category: "Details", value: "Refinement"},
|
||||||
]}
|
]}
|
||||||
title="Our Comprehensive Financial Services"
|
title="Our Comprehensive Man Suit Wear Services"
|
||||||
description="FCplus Center offers a full spectrum of financial services, meticulously designed to meet your individual and business needs. From planning for major life events to daily money management, we are here to support you."
|
description="FCplus Center offers a full range of services designed to provide you with the perfect suit, from bespoke tailoring to ready-to-wear collections and expert styling advice."
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -143,16 +145,16 @@ export default function LandingPage() {
|
|||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
metrics={[
|
metrics={[
|
||||||
{
|
{
|
||||||
id: "m1", value: "15+", title: "Years of Experience", description: "Serving clients with dedication and proven expertise.", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machine_23-2151599336.jpg", imageAlt: "Clock icon"},
|
id: "m1", value: "15+", title: "Years of Craftsmanship", description: "Serving gentlemen with dedication and proven expertise in tailoring.", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machine_23-2151599336.jpg", imageAlt: "Clock icon"},
|
||||||
{
|
{
|
||||||
id: "m2", value: "500+", title: "Satisfied Clients", description: "Building lasting relationships based on trust and results.", imageSrc: "http://img.b2bpic.net/free-photo/senior-couple-showing-thumbs-up_1187-751.jpg", imageAlt: "Group of happy people icon"},
|
id: "m2", value: "500+", title: "Satisfied Gentlemen", description: "Building lasting relationships based on trust and style.", imageSrc: "http://img.b2bpic.net/free-photo/senior-couple-showing-thumbs-up_1187-751.jpg", imageAlt: "Group of happy people icon"},
|
||||||
{
|
{
|
||||||
id: "m3", value: "$100M+", title: "Assets Under Management", description: "Trusted with significant investments and financial futures.", imageSrc: "http://img.b2bpic.net/free-photo/gold-aesthetic-wallpaper-with-machine_23-2149872250.jpg", imageAlt: "Money bag icon"},
|
id: "m3", value: "10000+", title: "Suits Tailored & Sold", description: "Crafting exceptional suits for every gentleman's wardrobe.", imageSrc: "http://img.b2bpic.net/free-photo/elegant-hangers-with-different-suits-store_181624-12297.jpg", imageAlt: "Suits on hangers"},
|
||||||
{
|
{
|
||||||
id: "m4", value: "98%", title: "Client Satisfaction", description: "Our commitment to excellence drives outstanding feedback.", imageSrc: "http://img.b2bpic.net/free-photo/review-increase-rating-ranking-evaluation-classification-concept-businessman-draw-five-yellow-star-increase-rating-his-company_1212-719.jpg", imageAlt: "Star rating icon"},
|
id: "m4", value: "98%", title: "Client Satisfaction", description: "Our commitment to excellence ensures outstanding feedback and repeat business.", imageSrc: "http://img.b2bpic.net/free-photo/review-increase-rating-ranking-evaluation-classification-concept-businessman-draw-five-yellow-star-increase-rating-his-company_1212-719.jpg", imageAlt: "Star rating icon"},
|
||||||
]}
|
]}
|
||||||
title="Experience the FCplus Difference"
|
title="The FCplus Center Difference in Menswear"
|
||||||
description="Our track record speaks for itself. We are proud of the tangible results and the strong relationships we've built with our clients over the years."
|
description="Our dedication to quality and customer satisfaction sets us apart. We take pride in helping you look your best for any occasion."
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -164,21 +166,21 @@ export default function LandingPage() {
|
|||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
members={[
|
members={[
|
||||||
{
|
{
|
||||||
id: "t1", name: "Sarah Johnson", role: "Lead Financial Advisor", imageSrc: "http://img.b2bpic.net/free-photo/elderly-businessman-entrepreneur-sitting-workspace-looking-camera_482257-8143.jpg", imageAlt: "Portrait of Sarah Johnson"},
|
id: "t1", name: "David Lee", role: "Master Tailor", imageSrc: "http://img.b2bpic.net/free-photo/tailor-measuring-man_53876-130419.jpg", imageAlt: "Portrait of David Lee, Master Tailor"},
|
||||||
{
|
{
|
||||||
id: "t2", name: "Michael Chen", role: "Investment Strategist", imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-businesswoman-relaxing-cafe-after-work-thinking-something-while-reading-newspaper_637285-256.jpg", imageAlt: "Portrait of Michael Chen"},
|
id: "t2", name: "Sophia Martinez", role: "Head Style Consultant", imageSrc: "http://img.b2bpic.net/free-photo/fashion-designer-looking-clothes_23-2147775577.jpg", imageAlt: "Portrait of Sophia Martinez, Head Style Consultant"},
|
||||||
{
|
{
|
||||||
id: "t3", name: "Emily Rodriguez", role: "Wealth Management Expert", imageSrc: "http://img.b2bpic.net/free-photo/stylish-corporate-woman-young-lady-boss-suit-looking-confident-happy-posing-outdoors-stree_1258-119447.jpg", imageAlt: "Portrait of Emily Rodriguez"},
|
id: "t3", name: "Ethan Brown", role: "Bespoke Suit Specialist", imageSrc: "http://img.b2bpic.net/free-photo/handsome-elegant-young-man-with-braces-posing_158595-5026.jpg", imageAlt: "Portrait of Ethan Brown, Bespoke Suit Specialist"},
|
||||||
]}
|
]}
|
||||||
title="Meet Our Expert Financial Advisors"
|
title="Meet Our Expert Tailors & Style Consultants"
|
||||||
description="Our dedicated team combines extensive knowledge with a personalized approach, ensuring you receive the best guidance for your financial journey. We are here to empower your decisions."
|
description="Our passionate team brings years of expertise in men's fashion and tailoring to ensure your experience at FCplus Center is unparalleled."
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="testimonials" data-section="testimonials">
|
<div id="testimonials" data-section="testimonials">
|
||||||
<TestimonialCardFifteen
|
<TestimonialCardFifteen
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
testimonial="FCplus Center transformed my financial outlook. Their clear strategies and consistent support helped me achieve goals I thought were out of reach. Truly a partner you can trust!"
|
testimonial="FCplus Center helped me find the perfect suit for my wedding. The quality and fit were impeccable, and I received so many compliments. Truly a partner for defining your style!"
|
||||||
rating={5}
|
rating={5}
|
||||||
author="Mark D."
|
author="Mark D."
|
||||||
avatars={[
|
avatars={[
|
||||||
@@ -206,16 +208,16 @@ export default function LandingPage() {
|
|||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
faqs={[
|
faqs={[
|
||||||
{
|
{
|
||||||
id: "q1", title: "What services does FCplus Center offer?", content: "FCplus Center provides comprehensive financial planning, investment management, retirement planning, estate planning, tax optimization, and debt management services tailored to your unique needs."},
|
id: "q1", title: "What types of suits does FCplus Center offer?", content: "We offer a wide range of suits, including bespoke custom suits, ready-to-wear collections, and formal wear for various occasions. Our selection includes classic business suits, tuxedos, and casual blazers."},
|
||||||
{
|
{
|
||||||
id: "q2", title: "How do I get started with FCplus Center?", content: "Getting started is easy! Simply contact us to schedule a free initial consultation. We'll discuss your financial goals and how we can help you achieve them."},
|
id: "q2", title: "How does your custom tailoring process work?", content: "Our custom tailoring begins with a detailed consultation to discuss your style preferences and measurements. Our master tailors then craft a suit that fits you perfectly, with fittings along the way to ensure every detail is precise."},
|
||||||
{
|
{
|
||||||
id: "q3", title: "Is my financial information secure with FCplus Center?", content: "Absolutely. We utilize industry-leading security protocols and confidentiality measures to ensure that all your personal and financial information is protected with the highest level of care."},
|
id: "q3", title: "Do you provide styling advice and accessories?", content: "Yes, our experienced style consultants are available to help you choose the ideal suit, shirt, tie, and accessories to complete your look. We offer personalized recommendations to match your style and occasion."},
|
||||||
{
|
{
|
||||||
id: "q4", title: "Do you offer services for businesses as well as individuals?", content: "Yes, our expertise extends to both individual and business clients. We can assist with corporate financial strategy, employee retirement plans, and business succession planning."},
|
id: "q4", title: "What is your return or exchange policy?", content: "Ready-to-wear items can be returned or exchanged within 30 days with a receipt and original tags. Custom-tailored suits are made specifically for you and are non-refundable, but we offer complimentary alterations to ensure your complete satisfaction."},
|
||||||
]}
|
]}
|
||||||
title="Frequently Asked Questions"
|
title="Common Questions About Our Menswear & Services"
|
||||||
description="Find quick answers to the most common questions about our services, processes, and how we can help you achieve financial success."
|
description="Find answers to frequently asked questions about our suit collections, tailoring process, styling services, and more."
|
||||||
faqsAnimation="slide-up"
|
faqsAnimation="slide-up"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -223,8 +225,8 @@ export default function LandingPage() {
|
|||||||
<div id="contact" data-section="contact">
|
<div id="contact" data-section="contact">
|
||||||
<ContactSplitForm
|
<ContactSplitForm
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
title="Let's Build Your Financial Future"
|
title="Define Your Style: Visit FCplus Center Today"
|
||||||
description="Reach out to us today for a personalized consultation. Our team is ready to answer your questions and help you take the first step towards financial freedom and clarity."
|
description="Step into FCplus Center for an unparalleled suit shopping experience. Our consultants are ready to help you discover the perfect attire. Visit us at 456 Gentleman's Way, Suite 101, Fashion District, NY 10018."
|
||||||
inputs={[
|
inputs={[
|
||||||
{
|
{
|
||||||
name: "name", type: "text", placeholder: "Your Name", required: true,
|
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||||||
@@ -237,8 +239,8 @@ export default function LandingPage() {
|
|||||||
name: "message", placeholder: "Your Message", rows: 4,
|
name: "message", placeholder: "Your Message", rows: 4,
|
||||||
required: false,
|
required: false,
|
||||||
}}
|
}}
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-view-city-buildings_23-2149071418.jpg"
|
imageSrc="http://img.b2bpic.net/free-photo/man-fitting-suit-store_107420-101416.jpg"
|
||||||
imageAlt="Modern financial office building exterior"
|
imageAlt="Man fitting a suit in a store"
|
||||||
mediaPosition="left"
|
mediaPosition="left"
|
||||||
buttonText="Send Message"
|
buttonText="Send Message"
|
||||||
/>
|
/>
|
||||||
@@ -246,20 +248,22 @@ export default function LandingPage() {
|
|||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterMedia
|
<FooterMedia
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/blur-pattaya-city_1203-2862.jpg"
|
imageSrc="http://img.b2bpic.net/free-photo/blue-suit-hangers-dark-background_107420-101413.jpg"
|
||||||
imageAlt="Abstract financial graphic background"
|
imageAlt="Blue suits on hangers in a dark setting"
|
||||||
logoText="FCplus Center"
|
logoText="FCplus Center"
|
||||||
columns={[
|
columns={[
|
||||||
{
|
{
|
||||||
title: "Quick Links", items: [
|
title: "Quick Links", items: [
|
||||||
{
|
{
|
||||||
label: "Home", href: "#home"},
|
label: "Home", href: "/"},
|
||||||
{
|
{
|
||||||
label: "About Us", href: "#about"},
|
label: "About Us", href: "#about"},
|
||||||
{
|
{
|
||||||
label: "Services", href: "#services"},
|
label: "Services", href: "#services"},
|
||||||
{
|
{
|
||||||
label: "Team", href: "#team"},
|
label: "Product", href: "/product/1"},
|
||||||
|
{
|
||||||
|
label: "Team", href: "#team"}
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -281,9 +285,9 @@ export default function LandingPage() {
|
|||||||
{
|
{
|
||||||
label: "+1 (555) 123-4567", href: "tel:+15551234567"},
|
label: "+1 (555) 123-4567", href: "tel:+15551234567"},
|
||||||
{
|
{
|
||||||
label: "123 Financial Ave, Suite 400", href: "#"},
|
label: "456 Gentleman's Way", href: "#"},
|
||||||
{
|
{
|
||||||
label: "City, State, 12345", href: "#"},
|
label: "Fashion District, NY 10018", href: "#"},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
@@ -293,4 +297,4 @@ export default function LandingPage() {
|
|||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
163
src/app/product-catalog/page.tsx
Normal file
163
src/app/product-catalog/page.tsx
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
|
import ReactLenis from "lenis/react";
|
||||||
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||||
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||||
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||||
|
|
||||||
|
const productData = [
|
||||||
|
{
|
||||||
|
id: "p1", brand: "Classic Tailors", name: "Charcoal Business Suit", price: "$799", rating: 4.5,
|
||||||
|
reviewCount: "120", imageSrc: "https://img.b2bpic.net/free-photo/men-s-suit-hanger_107420-101414.jpg", imageAlt: "Charcoal Business Suit"},
|
||||||
|
{
|
||||||
|
id: "p2", brand: "Modern Fits", name: "Navy Slim Fit Tuxedo", price: "$1200", rating: 4.8,
|
||||||
|
reviewCount: "85", imageSrc: "https://img.b2bpic.net/free-photo/stylish-man-in-suit_158595-3561.jpg", imageAlt: "Navy Slim Fit Tuxedo"},
|
||||||
|
{
|
||||||
|
id: "p3", brand: "Elegant Wear", name: "Grey Plaid Formal Suit", price: "$899", rating: 4.2,
|
||||||
|
reviewCount: "95", imageSrc: "https://img.b2bpic.net/free-photo/black-classic-suit-blue-background_23-2147772659.jpg", imageAlt: "Grey Plaid Formal Suit"},
|
||||||
|
{
|
||||||
|
id: "p4", brand: "Gentleman's Choice", name: "Brown Tweed Casual Blazer", price: "$450", rating: 4.0,
|
||||||
|
reviewCount: "60", imageSrc: "https://img.b2bpic.net/free-photo/business-gentleman-wearing-suit_158595-4560.jpg", imageAlt: "Brown Tweed Casual Blazer"},
|
||||||
|
{
|
||||||
|
id: "p5", brand: "Trendsetter", name: "Light Blue Summer Suit", price: "$720", rating: 4.3,
|
||||||
|
reviewCount: "110", imageSrc: "https://img.b2bpic.net/free-photo/man-fitting-suit-store_107420-101416.jpg", imageAlt: "Light Blue Summer Suit"},
|
||||||
|
{
|
||||||
|
id: "p6", brand: "Exclusive Tailoring", name: "Black Tie Evening Suit", price: "$1500", rating: 4.9,
|
||||||
|
reviewCount: "75", imageSrc: "https://img.b2bpic.net/free-photo/fashion-men-suits_1203-9121.jpg", imageAlt: "Black Tie Evening Suit"}
|
||||||
|
];
|
||||||
|
|
||||||
|
// Placeholder for client-side filtering component logic
|
||||||
|
function ProductFilters() {
|
||||||
|
return (
|
||||||
|
<div className="w-full lg:w-1/4 p-4 lg:pr-8 border-b lg:border-r border-gray-200 lg:border-b-0">
|
||||||
|
<h3 className="text-2xl font-semibold mb-6 text-foreground">Filter Products</h3>
|
||||||
|
<div className="mb-6">
|
||||||
|
<h4 className="text-lg font-medium text-foreground mb-3">Size</h4>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{['XS', 'S', 'M', 'L', 'XL', 'XXL'].map(size => (
|
||||||
|
<button key={size} className="px-4 py-2 text-sm bg-card text-foreground rounded-full border border-accent hover:bg-primary-cta hover:text-primary-cta-text transition-colors">
|
||||||
|
{size}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mb-6">
|
||||||
|
<h4 className="text-lg font-medium text-foreground mb-3">Color</h4>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{['Blue', 'Black', 'Grey', 'Brown', 'Navy'].map(color => (
|
||||||
|
<button key={color} className="px-4 py-2 text-sm bg-card text-foreground rounded-full border border-accent hover:bg-primary-cta hover:text-primary-cta-text transition-colors">
|
||||||
|
{color}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mb-6">
|
||||||
|
<h4 className="text-lg font-medium text-foreground mb-3">Price Range</h4>
|
||||||
|
<input type="range" min="0" max="2000" defaultValue="1000" className="w-full accent-primary-cta" />
|
||||||
|
<div className="flex justify-between text-sm text-foreground mt-2">
|
||||||
|
<span>$0</span>
|
||||||
|
<span>$2000+</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button className="w-full py-3 bg-primary-cta text-primary-cta-text rounded-lg hover:opacity-90 transition-opacity font-medium">
|
||||||
|
Apply Filters
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ProductCatalogPage() {
|
||||||
|
return (
|
||||||
|
<ThemeProvider
|
||||||
|
defaultButtonVariant="bounce-effect"
|
||||||
|
defaultTextAnimation="background-highlight"
|
||||||
|
borderRadius="soft"
|
||||||
|
contentWidth="compact"
|
||||||
|
sizing="largeSmallSizeLargeTitles"
|
||||||
|
background="floatingGradient"
|
||||||
|
cardStyle="gradient-bordered"
|
||||||
|
primaryButtonStyle="flat"
|
||||||
|
secondaryButtonStyle="layered"
|
||||||
|
headingFontWeight="bold"
|
||||||
|
>
|
||||||
|
<ReactLenis root>
|
||||||
|
<div id="nav" data-section="nav">
|
||||||
|
<NavbarLayoutFloatingOverlay
|
||||||
|
navItems={[
|
||||||
|
{ name: "Home", id: "#home" },
|
||||||
|
{ name: "About", id: "#about" },
|
||||||
|
{ name: "Services", id: "#services" },
|
||||||
|
{ name: "Team", id: "#team" },
|
||||||
|
{ name: "Testimonials", id: "#testimonials" },
|
||||||
|
{ name: "FAQ", id: "#faq" },
|
||||||
|
{ name: "Contact", id: "#contact" },
|
||||||
|
{ name: "Product Catalog", id: "/product-catalog" }
|
||||||
|
]}
|
||||||
|
brandName="FCplus Center"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="product-catalog" data-section="product-catalog" className="min-h-screen py-24 lg:py-32 flex flex-col items-center bg-background text-foreground">
|
||||||
|
<div className="container mx-auto px-4 max-w-[var(--width-content-width)]">
|
||||||
|
<h1 className="text-5xl md:text-6xl font-extrabold text-center mb-16 leading-tight">
|
||||||
|
Our Exquisite Suit Collections
|
||||||
|
</h1>
|
||||||
|
<div className="flex flex-col lg:flex-row gap-8">
|
||||||
|
<ProductFilters />
|
||||||
|
<div className="lg:w-3/4">
|
||||||
|
<ProductCardTwo
|
||||||
|
title="Discover Your Perfect Suit"
|
||||||
|
description="Browse our curated selection of fine man suits, tailored for every occasion and style preference."
|
||||||
|
products={productData}
|
||||||
|
gridVariant="three-columns-all-equal-width"
|
||||||
|
animationType="slide-up"
|
||||||
|
useInvertedBackground={false}
|
||||||
|
textboxLayout="default"
|
||||||
|
className="!p-0"
|
||||||
|
containerClassName="!px-0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="footer" data-section="footer">
|
||||||
|
<FooterMedia
|
||||||
|
imageSrc="http://img.b2bpic.net/free-photo/blue-suit-hangers-dark-background_107420-101413.jpg"
|
||||||
|
imageAlt="Blue suits on hangers in a dark setting"
|
||||||
|
logoText="FCplus Center"
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
title: "Quick Links", items: [
|
||||||
|
{ label: "Home", href: "#home" },
|
||||||
|
{ label: "About Us", href: "#about" },
|
||||||
|
{ label: "Services", href: "#services" },
|
||||||
|
{ label: "Team", href: "#team" },
|
||||||
|
{ label: "Product Catalog", href: "/product-catalog"}
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Resources", items: [
|
||||||
|
{ label: "FAQ", href: "#faq" },
|
||||||
|
{ label: "Contact Us", href: "#contact" },
|
||||||
|
{ label: "Privacy Policy", href: "#" },
|
||||||
|
{ label: "Terms of Service", href: "#" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Connect", items: [
|
||||||
|
{ label: "info@fcplus.com", href: "mailto:info@fcplus.com" },
|
||||||
|
{ label: "+1 (555) 123-4567", href: "tel:+15551234567" },
|
||||||
|
{ label: "456 Gentleman's Way", href: "#" },
|
||||||
|
{ label: "Fashion District, NY 10018", href: "#" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
copyrightText="© 2024 FCplus Center. All rights reserved."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ReactLenis>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
94
src/app/product/[id]/page.tsx
Normal file
94
src/app/product/[id]/page.tsx
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
|
import ReactLenis from "lenis/react";
|
||||||
|
import ProductDetailCard from '@/components/ecommerce/productDetail/ProductDetailCard';
|
||||||
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||||
|
import { Star } from "lucide-react";
|
||||||
|
|
||||||
|
export default function ProductDetailPage() {
|
||||||
|
const handleAddToCart = () => {
|
||||||
|
alert("Product added to cart!");
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBuyNow = () => {
|
||||||
|
alert("Proceeding to checkout!");
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSizeChange = (value: string) => {
|
||||||
|
console.log("Selected size:", value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleColorChange = (value: string) => {
|
||||||
|
console.log("Selected color:", value);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeProvider
|
||||||
|
defaultButtonVariant="bounce-effect"
|
||||||
|
defaultTextAnimation="background-highlight"
|
||||||
|
borderRadius="soft"
|
||||||
|
contentWidth="compact"
|
||||||
|
sizing="largeSmallSizeLargeTitles"
|
||||||
|
background="floatingGradient"
|
||||||
|
cardStyle="gradient-bordered"
|
||||||
|
primaryButtonStyle="flat"
|
||||||
|
secondaryButtonStyle="layered"
|
||||||
|
headingFontWeight="bold"
|
||||||
|
>
|
||||||
|
<ReactLenis root>
|
||||||
|
<div id="nav" data-section="nav">
|
||||||
|
<NavbarLayoutFloatingOverlay
|
||||||
|
navItems={[
|
||||||
|
{ name: "Home", id: "/" },
|
||||||
|
{ name: "About", id: "#about" },
|
||||||
|
{ name: "Services", id: "#services" },
|
||||||
|
{ name: "Product", id: "/product/1" },
|
||||||
|
{ name: "Team", id: "#team" },
|
||||||
|
{ name: "Testimonials", id: "#testimonials" },
|
||||||
|
{ name: "FAQ", id: "#faq" },
|
||||||
|
{ name: "Contact", id: "#contact" }
|
||||||
|
]}
|
||||||
|
brandName="FCplus Center"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="product-detail" data-section="product-detail">
|
||||||
|
<ProductDetailCard
|
||||||
|
layout="page"
|
||||||
|
name="Classic Blue Suit"
|
||||||
|
price="$599.00"
|
||||||
|
description="Elegantly crafted from premium Italian wool, this classic blue suit offers a timeless silhouette and unparalleled comfort. Perfect for business, formal events, or any occasion requiring a sharp, sophisticated look. Features a two-button closure, notched lapels, and flat-front trousers."
|
||||||
|
showRating={true}
|
||||||
|
rating={4.5}
|
||||||
|
ratingIcon={Star}
|
||||||
|
images={[
|
||||||
|
{ src: "http://img.b2bpic.net/free-photo/stylish-man-in-blue-suit_1303-10022.jpg", alt: "Classic Blue Suit front view" },
|
||||||
|
{ src: "http://img.b2bpic.net/free-photo/handsome-elegant-young-man-with-braces-posing_158595-5026.jpg", alt: "Man in suit close-up" },
|
||||||
|
{ src: "http://img.b2bpic.net/free-photo/man-fitting-suit-store_107420-101416.jpg", alt: "Man fitting suit in store" },
|
||||||
|
{ src: "http://img.b2bpic.net/free-photo/blue-suit-hangers-dark-background_107420-101413.jpg", alt: "Blue suit fabric detail" }
|
||||||
|
]}
|
||||||
|
variants={[
|
||||||
|
{
|
||||||
|
label: "Size", options: ["38S", "40S", "40R", "42R", "42L", "44L"],
|
||||||
|
selected: "40R", onChange: handleSizeChange
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Color", options: ["Blue", "Charcoal", "Black"],
|
||||||
|
selected: "Blue", onChange: handleColorChange
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
quantity={{
|
||||||
|
label: "Quantity", options: ["1", "2", "3", "4", "5"],
|
||||||
|
selected: "1", onChange: (value) => console.log("Selected quantity:", value)
|
||||||
|
}}
|
||||||
|
buttons={[
|
||||||
|
{ text: "Add to Cart", onClick: handleAddToCart },
|
||||||
|
{ text: "Buy Now", onClick: handleBuyNow }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ReactLenis>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
124
src/app/shopping-cart/page.tsx
Normal file
124
src/app/shopping-cart/page.tsx
Normal file
@@ -0,0 +1,124 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
|
import ReactLenis from "lenis/react";
|
||||||
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||||
|
import ProductCart from '@/components/ecommerce/cart/ProductCart';
|
||||||
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||||
|
|
||||||
|
export default function ShoppingCartPage() {
|
||||||
|
const dummyCartItems = [
|
||||||
|
{
|
||||||
|
id: "suit1", name: "Classic Blue Suit", variants: ["Size 40R", "Slim Fit"],
|
||||||
|
price: "$499.99", quantity: 1,
|
||||||
|
imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-in-blue-suit_1303-10022.jpg", imageAlt: "Classic Blue Suit"},
|
||||||
|
{
|
||||||
|
id: "tie1", name: "Silk Necktie - Burgundy", variants: ["One Size"],
|
||||||
|
price: "$49.99", quantity: 2,
|
||||||
|
imageSrc: "http://img.b2bpic.net/free-photo/red-silk-necktie_23-2148405096.jpg", imageAlt: "Burgundy Silk Necktie"},
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleQuantityChange = (id: string, quantity: number) => {
|
||||||
|
console.log(`Changed quantity for ${id} to ${quantity}`);
|
||||||
|
// In a real app, this would update cart state
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveItem = (id: string) => {
|
||||||
|
console.log(`Removed item ${id}`);
|
||||||
|
// In a real app, this would remove item from cart state
|
||||||
|
};
|
||||||
|
|
||||||
|
const footerColumns = [
|
||||||
|
{
|
||||||
|
title: "Quick Links", items: [
|
||||||
|
{ label: "Home", href: "/" },
|
||||||
|
{ label: "About Us", href: "/#about" },
|
||||||
|
{ label: "Services", href: "/#services" },
|
||||||
|
{ label: "Team", href: "/#team" },
|
||||||
|
{ label: "Shopping Cart", href: "/shopping-cart" },
|
||||||
|
{ label: "Checkout", href: "/checkout" },
|
||||||
|
{ label: "Order Confirmation", href: "/order-confirmation" }
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Resources", items: [
|
||||||
|
{ label: "FAQ", href: "/#faq" },
|
||||||
|
{ label: "Contact Us", href: "/#contact" }, { label: "Privacy Policy", href: "#" },
|
||||||
|
{ label: "Terms of Service", href: "#" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Connect", items: [
|
||||||
|
{ label: "info@fcplus.com", href: "mailto:info@fcplus.com" },
|
||||||
|
{ label: "+1 (555) 123-4567", href: "tel:+15551234567" },
|
||||||
|
{ label: "456 Gentleman's Way", href: "#" },
|
||||||
|
{ label: "Fashion District, NY 10018", href: "#" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ name: "Home", id: "/" },
|
||||||
|
{ name: "About", id: "/#about" },
|
||||||
|
{ name: "Services", id: "/#services" },
|
||||||
|
{ name: "Team", id: "/#team" },
|
||||||
|
{ name: "Testimonials", id: "/#testimonials" },
|
||||||
|
{ name: "FAQ", id: "/#faq" },
|
||||||
|
{ name: "Contact", id: "/#contact" },
|
||||||
|
{ name: "Cart", id: "/shopping-cart" },
|
||||||
|
{ name: "Checkout", id: "/checkout" },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeProvider
|
||||||
|
defaultButtonVariant="bounce-effect"
|
||||||
|
defaultTextAnimation="background-highlight"
|
||||||
|
borderRadius="soft"
|
||||||
|
contentWidth="compact"
|
||||||
|
sizing="largeSmallSizeLargeTitles"
|
||||||
|
background="floatingGradient"
|
||||||
|
cardStyle="gradient-bordered"
|
||||||
|
primaryButtonStyle="flat"
|
||||||
|
secondaryButtonStyle="layered"
|
||||||
|
headingFontWeight="bold"
|
||||||
|
>
|
||||||
|
<ReactLenis root>
|
||||||
|
<div id="nav" data-section="nav">
|
||||||
|
<NavbarLayoutFloatingOverlay
|
||||||
|
navItems={navItems}
|
||||||
|
brandName="FCplus Center"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<main className="min-h-screen py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto flex flex-col items-center justify-center">
|
||||||
|
<div className="w-full max-w-3xl">
|
||||||
|
<h1 className="text-4xl font-bold text-center mb-12">Your Shopping Cart</h1>
|
||||||
|
<ProductCart
|
||||||
|
isOpen={true}
|
||||||
|
onClose={() => console.log("Cart closed")}
|
||||||
|
items={dummyCartItems}
|
||||||
|
onQuantityChange={handleQuantityChange}
|
||||||
|
onRemove={handleRemoveItem}
|
||||||
|
total="$599.97"
|
||||||
|
buttons={[
|
||||||
|
{ text: "Continue Shopping", href: "/" },
|
||||||
|
{ text: "Proceed to Checkout", href: "/checkout" },
|
||||||
|
]}
|
||||||
|
title="Your Items"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="footer" data-section="footer">
|
||||||
|
<FooterMedia
|
||||||
|
imageSrc="http://img.b2bpic.net/free-photo/blue-suit-hangers-dark-background_107420-101413.jpg"
|
||||||
|
imageAlt="Blue suits on hangers in a dark setting"
|
||||||
|
logoText="FCplus Center"
|
||||||
|
columns={footerColumns}
|
||||||
|
copyrightText="© 2024 FCplus Center. All rights reserved."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ReactLenis>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user