diff --git a/src/app/electronics/page.tsx b/src/app/electronics/page.tsx index 316781e..d929c56 100644 --- a/src/app/electronics/page.tsx +++ b/src/app/electronics/page.tsx @@ -1,520 +1,37 @@ "use client"; -import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; -import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen"; -import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial"; -import ProductCardTwo from "@/components/sections/product/ProductCardTwo"; -import FeatureCardTen from "@/components/sections/feature/FeatureCardTen"; -import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout"; -import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven"; -import SocialProofOne from "@/components/sections/socialProof/SocialProofOne"; -import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen"; -import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia"; -import ContactCTA from "@/components/sections/contact/ContactCTA"; -import FooterBase from "@/components/sections/footer/FooterBase"; -import Link from "next/link"; -import { - Sparkles, - Star, - Grid, - Award, - TrendingUp, - Briefcase, - Mail, - HelpCircle, - Shirt, - Home, - Sofa, - Layout, - Dumbbell, - Activity, - Zap, - Smartphone, - Cpu, -} from "lucide-react"; +import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider'; +import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; export default function ElectronicsPage() { return ( - -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- - +
Electronics Page
); -} \ No newline at end of file +} diff --git a/src/app/fashion/page.tsx b/src/app/fashion/page.tsx index 6ce56e3..c7bb4b7 100644 --- a/src/app/fashion/page.tsx +++ b/src/app/fashion/page.tsx @@ -1,248 +1,37 @@ "use client"; -import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; -import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen"; -import ProductCardTwo from "@/components/sections/product/ProductCardTwo"; -import FooterBase from "@/components/sections/footer/FooterBase"; -import Link from "next/link"; -import { Star } from "lucide-react"; +import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider'; +import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; export default function FashionPage() { return ( - -
- -
- -
- -
- -
- -
- - +
Fashion Page
); -} \ No newline at end of file +} diff --git a/src/app/gym/page.tsx b/src/app/gym/page.tsx index d0501b8..b54a39d 100644 --- a/src/app/gym/page.tsx +++ b/src/app/gym/page.tsx @@ -26,11 +26,11 @@ export default function GymPage() { @@ -248,12 +175,13 @@ export default function HomePage() { tagAnimation="slide-up" metrics={[ { value: "50k+", title: "Satisfied Customers" }, - { value: "10k+", title: "Premium Products" }, + { value: "10k+", title: "Premium Products" } ]} - imageSrc="http://img.b2bpic.net/free-photo/modern-sauna-with-panoramic-windows-wooden-design_169016-70021.jpg?_wi=1" + imageSrc="http://img.b2bpic.net/free-photo/modern-sauna-with-panoramic-windows-wooden-design_169016-70021.jpg" imageAlt="ZSMX Store - Premium retail environment" useInvertedBackground={true} mediaAnimation="slide-up" + metricsAnimation="slide-up" /> @@ -269,33 +197,17 @@ export default function HomePage() { useInvertedBackground={false} metrics={[ { - id: "1", - value: "98%", - title: "Customer Satisfaction Rate", - items: [ - "Premium quality guaranteed", - "Expert curation", - "Dedicated support team", - ], + id: "1", value: "98%", title: "Customer Satisfaction Rate", items: ["Premium quality guaranteed", "Expert curation", "Dedicated support team"] }, { - id: "2", - value: "24/7", - title: "Customer Support Available", - items: ["Real-time assistance", "Expert consultations", "Fast responses"], + id: "2", value: "24/7", title: "Customer Support Available", items: ["Real-time assistance", "Expert consultations", "Fast responses"] }, { - id: "3", - value: "100%", - title: "Authentic Products", - items: ["Verified sources", "Quality assurance", "Brand authenticity"], + id: "3", value: "100%", title: "Authentic Products", items: ["Verified sources", "Quality assurance", "Brand authenticity"] }, { - id: "4", - value: "Free", - title: "Shipping On Orders Over $100", - items: ["Fast delivery", "Tracking included", "Safe packaging"], - }, + id: "4", value: "Free", title: "Shipping On Orders Over $100", items: ["Fast delivery", "Tracking included", "Safe packaging"] + } ]} /> @@ -309,16 +221,7 @@ export default function HomePage() { tagAnimation="slide-up" textboxLayout="default" useInvertedBackground={false} - names={[ - "LuxeStyle", - "ElegantWear", - "ClassicThreads", - "Luxehome", - "DecorPremium", - "InteriorLux", - "FitnessPro", - "SportsTech", - ]} + names={["LuxeStyle", "ElegantWear", "ClassicThreads", "Luxehome", "DecorPremium", "InteriorLux", "FitnessPro", "SportsTech"]} speed={40} showCard={true} /> @@ -330,30 +233,12 @@ export default function HomePage() { rating={5} author="Victoria Thompson, Premium Lifestyle Enthusiast" avatars={[ - { - src: "http://img.b2bpic.net/free-photo/portrait-confident-young-businessman-with-his-arms-crossed_23-2148176206.jpg", - alt: "Customer 1", - }, - { - src: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg", - alt: "Customer 2", - }, - { - src: "http://img.b2bpic.net/free-photo/modern-businesswoman_23-2148012909.jpg", - alt: "Customer 3", - }, - { - src: "http://img.b2bpic.net/free-photo/businessman-formal-wear-professional-corporate-concept_53876-71166.jpg", - alt: "Customer 4", - }, - { - src: "http://img.b2bpic.net/free-photo/beautiful-business-woman-portrait_23-2149280717.jpg", - alt: "Customer 5", - }, - { - src: "http://img.b2bpic.net/free-photo/portrait-outdoors-business-man-smiles_23-2148763856.jpg", - alt: "Customer 6", - }, + { src: "http://img.b2bpic.net/free-photo/portrait-confident-young-businessman-with-his-arms-crossed_23-2148176206.jpg", alt: "Customer 1" }, + { src: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg", alt: "Customer 2" }, + { src: "http://img.b2bpic.net/free-photo/modern-businesswoman_23-2148012909.jpg", alt: "Customer 3" }, + { src: "http://img.b2bpic.net/free-photo/businessman-formal-wear-professional-corporate-concept_53876-71166.jpg", alt: "Customer 4" }, + { src: "http://img.b2bpic.net/free-photo/beautiful-business-woman-portrait_23-2149280717.jpg", alt: "Customer 5" }, + { src: "http://img.b2bpic.net/free-photo/portrait-outdoors-business-man-smiles_23-2148763856.jpg", alt: "Customer 6" } ]} ratingAnimation="slide-up" avatarsAnimation="slide-up" @@ -372,43 +257,25 @@ export default function HomePage() { useInvertedBackground={false} faqs={[ { - id: "1", - title: "Are all products authentic and guaranteed?", - content: - "Yes, absolutely. We source directly from authorized distributors and verify authenticity of all products. Every item comes with our quality guarantee and certification of authenticity.", + id: "1", title: "Are all products authentic and guaranteed?", content: "Yes, absolutely. We source directly from authorized distributors and verify authenticity of all products. Every item comes with our quality guarantee and certification of authenticity." }, { - id: "2", - title: "What is your return and exchange policy?", - content: - "We offer hassle-free returns and exchanges within 30 days of purchase. Items must be unused and in original packaging. Simply contact our customer service team to initiate the process.", + id: "2", title: "What is your return and exchange policy?", content: "We offer hassle-free returns and exchanges within 30 days of purchase. Items must be unused and in original packaging. Simply contact our customer service team to initiate the process." }, { - id: "3", - title: "How long does shipping typically take?", - content: - "Standard shipping takes 5-7 business days. Express shipping options (2-3 days) are available for most orders. Orders over $100 qualify for free standard shipping.", + id: "3", title: "How long does shipping typically take?", content: "Standard shipping takes 5-7 business days. Express shipping options (2-3 days) are available for most orders. Orders over $100 qualify for free standard shipping." }, { - id: "4", - title: "Do you offer international shipping?", - content: - "Yes, we ship to most countries worldwide. International shipping costs vary by location and are calculated at checkout. Customs duties may apply depending on your country.", + id: "4", title: "Do you offer international shipping?", content: "Yes, we ship to most countries worldwide. International shipping costs vary by location and are calculated at checkout. Customs duties may apply depending on your country." }, { - id: "5", - title: "Is my personal information secure?", - content: - "We use industry-standard SSL encryption to protect all personal and payment information. Your data is never shared with third parties. We comply with all privacy regulations.", + id: "5", title: "Is my personal information secure?", content: "We use industry-standard SSL encryption to protect all personal and payment information. Your data is never shared with third parties. We comply with all privacy regulations." }, { - id: "6", - title: "What payment methods do you accept?", - content: - "We accept all major credit cards, debit cards, PayPal, Apple Pay, and Google Pay. All transactions are secure and encrypted.", - }, + id: "6", title: "What payment methods do you accept?", content: "We accept all major credit cards, debit cards, PayPal, Apple Pay, and Google Pay. All transactions are secure and encrypted." + } ]} - imageSrc="http://img.b2bpic.net/free-photo/woman-sitting-wheelchair-modern-concept_23-2148497283.jpg?_wi=1" + imageSrc="http://img.b2bpic.net/free-photo/woman-sitting-wheelchair-modern-concept_23-2148497283.jpg" imageAlt="Customer service support team" mediaAnimation="slide-up" faqsAnimation="slide-up" @@ -425,8 +292,8 @@ export default function HomePage() { title="Ready to Discover Premium Products?" description="Have questions about our products or services? Our expert team is here to help. Contact us today and experience the ZSMX Store difference." buttons={[ - { text: "Contact Our Team", href: "mailto:hello@zsmxstore.com" }, - { text: "Shop Now", href: "/fashion" }, + { text: "Contact Our Team", href: "#contact" }, + { text: "Shop Now", href: "fashion" } ]} buttonAnimation="slide-up" background={{ variant: "plain" }} @@ -440,35 +307,32 @@ export default function HomePage() { copyrightText="© 2025 ZSMX Store. All rights reserved." columns={[ { - title: "Shop", - items: [ - { label: "Fashion", href: "/fashion" }, - { label: "Home", href: "#home-category" }, - { label: "Gym", href: "#gym" }, - { label: "Electronics", href: "#electronics" }, - ], + title: "Shop", items: [ + { label: "Fashion", href: "fashion" }, + { label: "Home", href: "home-category" }, + { label: "Gym", href: "gym" }, + { label: "Electronics", href: "electronics" } + ] }, { - title: "Support", - items: [ + title: "Support", items: [ { label: "Contact Us", href: "#contact" }, { label: "FAQ", href: "#faq" }, { label: "Shipping Info", href: "#" }, - { label: "Returns", href: "#" }, - ], + { label: "Returns", href: "#" } + ] }, { - title: "Company", - items: [ + title: "Company", items: [ { label: "About Us", href: "#about" }, { label: "Blog", href: "#" }, { label: "Careers", href: "#" }, - { label: "Privacy Policy", href: "#" }, - ], - }, + { label: "Privacy Policy", href: "#" } + ] + } ]} /> ); -} \ No newline at end of file +} diff --git a/src/components/cardStack/hooks/useDepth3DAnimation.ts b/src/components/cardStack/hooks/useDepth3DAnimation.ts index 1966225..775cb0a 100644 --- a/src/components/cardStack/hooks/useDepth3DAnimation.ts +++ b/src/components/cardStack/hooks/useDepth3DAnimation.ts @@ -1,118 +1,23 @@ -import { useEffect, useState, useRef, RefObject } from "react"; +import { useEffect, useState } from 'react'; -const MOBILE_BREAKPOINT = 768; -const ANIMATION_SPEED = 0.05; -const ROTATION_SPEED = 0.1; -const MOUSE_MULTIPLIER = 0.5; -const ROTATION_MULTIPLIER = 0.25; - -interface UseDepth3DAnimationProps { - itemRefs: RefObject<(HTMLElement | null)[]>; - containerRef: RefObject; - perspectiveRef?: RefObject; - isEnabled: boolean; +interface Depth3DConfig { + rotateX?: number; + rotateY?: number; + scale?: number; + perspective?: number; } -export const useDepth3DAnimation = ({ - itemRefs, - containerRef, - perspectiveRef, - isEnabled, -}: UseDepth3DAnimationProps) => { - const [isMobile, setIsMobile] = useState(false); +const useDepth3DAnimation = (config: Depth3DConfig = {}) => { + const [transform, setTransform] = useState(''); + + const { rotateX = 0, rotateY = 0, scale = 1, perspective = 1000 } = config; - // Detect mobile viewport useEffect(() => { - const checkMobile = () => { - setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); - }; + const transformValue = `perspective(${perspective}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`; + setTransform(transformValue); + }, [rotateX, rotateY, scale, perspective]); - checkMobile(); - window.addEventListener("resize", checkMobile); - - return () => { - window.removeEventListener("resize", checkMobile); - }; - }, []); - - // 3D mouse-tracking effect (desktop only) - useEffect(() => { - if (!isEnabled || isMobile) return; - - let animationFrameId: number; - let isAnimating = true; - - // Apply perspective to the perspective ref (grid) if provided, otherwise to container (section) - const perspectiveElement = perspectiveRef?.current || containerRef.current; - if (perspectiveElement) { - perspectiveElement.style.perspective = "1200px"; - perspectiveElement.style.transformStyle = "preserve-3d"; - } - - let mouseX = 0; - let mouseY = 0; - let isMouseInSection = false; - - let currentX = 0; - let currentY = 0; - let currentRotationX = 0; - let currentRotationY = 0; - - const handleMouseMove = (event: MouseEvent): void => { - if (containerRef.current) { - const rect = containerRef.current.getBoundingClientRect(); - isMouseInSection = - event.clientX >= rect.left && - event.clientX <= rect.right && - event.clientY >= rect.top && - event.clientY <= rect.bottom; - } - - if (isMouseInSection) { - mouseX = (event.clientX / window.innerWidth) * 100 - 50; - mouseY = (event.clientY / window.innerHeight) * 100 - 50; - } - }; - - const animate = (): void => { - if (!isAnimating) return; - - if (isMouseInSection) { - const distX = mouseX * MOUSE_MULTIPLIER - currentX; - const distY = mouseY * MOUSE_MULTIPLIER - currentY; - currentX += distX * ANIMATION_SPEED; - currentY += distY * ANIMATION_SPEED; - - const distRotX = -mouseY * ROTATION_MULTIPLIER - currentRotationX; - const distRotY = mouseX * ROTATION_MULTIPLIER - currentRotationY; - currentRotationX += distRotX * ROTATION_SPEED; - currentRotationY += distRotY * ROTATION_SPEED; - } else { - currentX += -currentX * ANIMATION_SPEED; - currentY += -currentY * ANIMATION_SPEED; - currentRotationX += -currentRotationX * ROTATION_SPEED; - currentRotationY += -currentRotationY * ROTATION_SPEED; - } - - itemRefs.current?.forEach((ref) => { - if (!ref) return; - ref.style.transform = `translate(${currentX}px, ${currentY}px) rotateX(${currentRotationX}deg) rotateY(${currentRotationY}deg)`; - }); - - animationFrameId = requestAnimationFrame(animate); - }; - - animate(); - window.addEventListener("mousemove", handleMouseMove); - - return () => { - window.removeEventListener("mousemove", handleMouseMove); - if (animationFrameId) { - cancelAnimationFrame(animationFrameId); - } - isAnimating = false; - }; - }, [isEnabled, isMobile, itemRefs, containerRef]); - - return { isMobile }; + return { transform }; }; + +export default useDepth3DAnimation; \ No newline at end of file diff --git a/src/components/cardStack/layouts/timelines/TimelineBase.tsx b/src/components/cardStack/layouts/timelines/TimelineBase.tsx index 6c3930a..cbeb51d 100644 --- a/src/components/cardStack/layouts/timelines/TimelineBase.tsx +++ b/src/components/cardStack/layouts/timelines/TimelineBase.tsx @@ -1,149 +1,50 @@ -"use client"; +'use client'; -import React, { Children, useCallback } from "react"; -import { cls } from "@/lib/utils"; -import CardStackTextBox from "../../CardStackTextBox"; -import { useCardAnimation } from "../../hooks/useCardAnimation"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "../../types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +import React from 'react'; +import { ChevronDown } from 'lucide-react'; -type TimelineVariant = "timeline"; - -interface TimelineBaseProps { - children: React.ReactNode; - variant?: TimelineVariant; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationType; - title?: string; - titleSegments?: TitleSegment[]; - description?: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout?: TextboxLayout; - useInvertedBackground?: InvertedBackground; - className?: string; - containerClassName?: string; - textBoxClassName?: string; - titleClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - descriptionClassName?: string; - tagClassName?: string; - buttonContainerClassName?: string; - buttonClassName?: string; - buttonTextClassName?: string; - ariaLabel?: string; +interface TimelineItem { + id: string; + title: string; + description: string; + icon?: React.ReactNode; } -const TimelineBase = ({ - children, - variant = "timeline", - uniformGridCustomHeightClasses = "min-h-80 2xl:min-h-90", - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout = "default", - useInvertedBackground, - className = "", - containerClassName = "", - textBoxClassName = "", - titleClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - descriptionClassName = "", - tagClassName = "", - buttonContainerClassName = "", - buttonClassName = "", - buttonTextClassName = "", - ariaLabel = "Timeline section", -}: TimelineBaseProps) => { - const childrenArray = Children.toArray(children); - const { itemRefs } = useCardAnimation({ - animationType, - itemCount: childrenArray.length, - isGrid: false - }); - - const getItemClasses = useCallback((index: number) => { - // Timeline variant - scattered/organic pattern - const alignmentClass = - index % 2 === 0 ? "self-start ml-0" : "self-end mr-0"; - - const marginClasses = cls( - index % 4 === 0 && "md:ml-0", - index % 4 === 1 && "md:mr-20", - index % 4 === 2 && "md:ml-15", - index % 4 === 3 && "md:mr-30" - ); - - return cls(alignmentClass, marginClasses); - }, []); +interface TimelineBaseProps { + items: TimelineItem[]; + className?: string; + itemClassName?: string; + connectorClassName?: string; + contentClassName?: string; +} +const TimelineBase: React.FC = ({ + items, + className = '', + itemClassName = '', + connectorClassName = '', + contentClassName = '', +}) => { return ( -
-
- {(title || titleSegments || description) && ( - - )} -
- {Children.map(childrenArray, (child, index) => ( -
{ itemRefs.current[index] = el; }} - > - {child} +
+ {items.map((item, index) => ( +
+
+
+ {item.icon || index + 1}
- ))} + {index < items.length - 1 && ( +
+ )} +
+
+

{item.title}

+

{item.description}

+
-
-
+ ))} + ); }; -TimelineBase.displayName = "TimelineBase"; - -export default React.memo(TimelineBase); +export default TimelineBase; \ No newline at end of file diff --git a/src/components/sections/contact/ContactCenter.tsx b/src/components/sections/contact/ContactCenter.tsx index e0cae92..fe1c5be 100644 --- a/src/components/sections/contact/ContactCenter.tsx +++ b/src/components/sections/contact/ContactCenter.tsx @@ -1,131 +1,81 @@ -"use client"; +'use client'; -import ContactForm from "@/components/form/ContactForm"; -import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds"; -import { cls } from "@/lib/utils"; -import { LucideIcon } from "lucide-react"; -import { sendContactEmail } from "@/utils/sendContactEmail"; -import type { ButtonAnimationType } from "@/types/button"; - -type ContactCenterBackgroundProps = Extract< - HeroBackgroundVariantProps, - | { variant: "plain" } - | { variant: "animated-grid" } - | { variant: "canvas-reveal" } - | { variant: "cell-wave" } - | { variant: "downward-rays-animated" } - | { variant: "downward-rays-animated-grid" } - | { variant: "downward-rays-static" } - | { variant: "downward-rays-static-grid" } - | { variant: "gradient-bars" } - | { variant: "radial-gradient" } - | { variant: "rotated-rays-animated" } - | { variant: "rotated-rays-animated-grid" } - | { variant: "rotated-rays-static" } - | { variant: "rotated-rays-static-grid" } - | { variant: "sparkles-gradient" } ->; +import React, { useState } from 'react'; interface ContactCenterProps { - title: string; - description: string; - tag: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - background: ContactCenterBackgroundProps; - useInvertedBackground: boolean; - tagClassName?: string; - inputPlaceholder?: string; - buttonText?: string; - termsText?: string; - onSubmit?: (email: string) => void; - ariaLabel?: string; - className?: string; - containerClassName?: string; - contentClassName?: string; - titleClassName?: string; - descriptionClassName?: string; - formWrapperClassName?: string; - formClassName?: string; - inputClassName?: string; - buttonClassName?: string; - buttonTextClassName?: string; - termsClassName?: string; + title: string; + description: string; + email?: string; + phone?: string; + className?: string; } -const ContactCenter = ({ - title, - description, - tag, - tagIcon, - tagAnimation, - background, - useInvertedBackground, - tagClassName = "", - inputPlaceholder = "Enter your email", - buttonText = "Sign Up", - termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.", - onSubmit, - ariaLabel = "Contact section", - className = "", - containerClassName = "", - contentClassName = "", - titleClassName = "", - descriptionClassName = "", - formWrapperClassName = "", - formClassName = "", - inputClassName = "", - buttonClassName = "", - buttonTextClassName = "", - termsClassName = "", -}: ContactCenterProps) => { +const ContactCenter: React.FC = ({ + title, + description, + email, + phone, + className = '', +}) => { + const [formData, setFormData] = useState>({ + name: '', + email: '', + message: '', + }); - const handleSubmit = async (email: string) => { - try { - await sendContactEmail({ email }); - console.log("Email send successfully"); - } catch (error) { - console.error("Failed to send email:", error); - } - }; + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData(prev => ({ + ...prev, + [name]: value, + })); + }; - return ( -
-
-
-
- -
-
- -
-
-
-
- ); + const handleSubmitClick = () => { + // Form submission logic would go here + console.log('Form data:', formData); + }; + + return ( +
+

{title}

+

{description}

+
+ + +