Update src/pages/shop/ShopPage.tsx

src/components/sections/faq/FaqSimple.tsx

@@ -1,107 +0,0 @@
-import { useState } from "react";
-import { motion, AnimatePresence } from "motion/react";
-import { Plus } from "lucide-react";
-import ScrollReveal from "@/components/ui/ScrollReveal";
-import Button from "@/components/ui/Button";
-import TextAnimation from "@/components/ui/TextAnimation";
-import { cls } from "@/lib/utils";
-
-type FaqItem = {
-  question: string;
-  answer: string;
-};
-
-const FaqSimple = ({
-  tag,
-  title,
-  description,
-  primaryButton,
-  secondaryButton,
-  items,
-}: {
-  tag: string;
-  title: string;
-  description: string;
-  primaryButton?: { text: string; href: string };
-  secondaryButton?: { text: string; href: string };
-  items: FaqItem[];
-}) => {
-  const [activeIndex, setActiveIndex] = useState<number | null>(null);
-
-  const handleToggle = (index: number) => {
-    setActiveIndex(activeIndex === index ? null : index);
-  };
-
-  return (
-    <section aria-label="FAQ section" className="py-20">
-      <div className="w-content-width mx-auto flex flex-col gap-8 md:gap-10">
-        <div className="flex flex-col items-center gap-2">
-          <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
-            <p>{tag}</p>
-          </div>
-
-          <TextAnimation
-            text={title}
-            variant="fade-blur"
-            gradientText={true}
-            tag="h2"
-            className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
-          />
-
-          <TextAnimation
-            text={description}
-            variant="fade-blur"
-            gradientText={false}
-            tag="p"
-            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
-          />
-
-          {(primaryButton || secondaryButton) && (
-            <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
-              {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary" />}
-              {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />}
-            </div>
-          )}
-        </div>
-
-        <ScrollReveal variant="fade" className="flex flex-col gap-3 xl:gap-3.5 2xl:gap-4">
-          {items.map((item, index) => (
-            <div
-              key={index}
-              onClick={() => handleToggle(index)}
-              className="p-3 xl:p-3.5 2xl:p-4 rounded card cursor-pointer select-none"
-            >
-              <div className="flex items-center justify-between gap-3 xl:gap-3.5 2xl:gap-4">
-                <h3 className="text-lg md:text-xl font-medium leading-snug">{item.question}</h3>
-                <div className="flex shrink-0 items-center justify-center size-8 md:size-9 rounded primary-button">
-                  <Plus
-                    className={cls(
-                      "size-3.5 md:size-4 text-primary-cta-text transition-transform duration-300",
-                      activeIndex === index && "rotate-45"
-                    )}
-                    strokeWidth={2}
-                  />
-                </div>
-              </div>
-              <AnimatePresence initial={false}>
-                {activeIndex === index && (
-                  <motion.div
-                    initial={{ height: 0, opacity: 0 }}
-                    animate={{ height: "auto", opacity: 1 }}
-                    exit={{ height: 0, opacity: 0 }}
-                    transition={{ duration: 0.3, ease: "easeOut" }}
-                    className="overflow-hidden"
-                  >
-                    <p className="pt-1 text-base leading-snug">{item.answer}</p>
-                  </motion.div>
-                )}
-              </AnimatePresence>
-            </div>
-          ))}
-        </ScrollReveal>
-      </div>
-    </section>
-  );
-};
-
-export default FaqSimple;

src/components/sections/faq/FaqSplitMedia.tsx

@@ -1,122 +0,0 @@
-import { useState } from "react";
-import { motion, AnimatePresence } from "motion/react";
-import { Plus } from "lucide-react";
-import ScrollReveal from "@/components/ui/ScrollReveal";
-import Button from "@/components/ui/Button";
-import TextAnimation from "@/components/ui/TextAnimation";
-import ImageOrVideo from "@/components/ui/ImageOrVideo";
-import { cls } from "@/lib/utils";
-
-type FaqItem = {
-  question: string;
-  answer: string;
-};
-
-type FaqSplitMediaProps = {
-  tag: string;
-  title: string;
-  description: string;
-  primaryButton?: { text: string; href: string };
-  secondaryButton?: { text: string; href: string };
-  items: FaqItem[];
-} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
-
-const FaqSplitMedia = ({
-  tag,
-  title,
-  description,
-  primaryButton,
-  secondaryButton,
-  items,
-  imageSrc,
-  videoSrc,
-}: FaqSplitMediaProps) => {
-  const [activeIndex, setActiveIndex] = useState<number | null>(null);
-
-  const handleToggle = (index: number) => {
-    setActiveIndex(activeIndex === index ? null : index);
-  };
-
-  return (
-    <section aria-label="FAQ section" className="py-20">
-      <div className="w-content-width mx-auto flex flex-col gap-8 md:gap-10">
-        <div className="flex flex-col items-center gap-2">
-          <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
-            <p>{tag}</p>
-          </div>
-
-          <TextAnimation
-            text={title}
-            variant="slide-up"
-            gradientText={true}
-            tag="h2"
-            className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
-          />
-
-          <TextAnimation
-            text={description}
-            variant="slide-up"
-            gradientText={false}
-            tag="p"
-            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
-          />
-
-          {(primaryButton || secondaryButton) && (
-            <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
-              {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>}
-              {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />}
-            </div>
-          )}
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-5 gap-5">
-          <ScrollReveal variant="slide-up" className="card relative md:col-span-2 h-80 md:h-auto rounded overflow-hidden">
-            <ImageOrVideo
-              imageSrc={imageSrc}
-              videoSrc={videoSrc}
-              className="absolute inset-0 size-full object-cover"
-            />
-          </ScrollReveal>
-
-          <ScrollReveal variant="slide-up" delay={0.1} className="md:col-span-3 flex flex-col gap-3 xl:gap-3.5 2xl:gap-4">
-            {items.map((item, index) => (
-              <div
-                key={index}
-                onClick={() => handleToggle(index)}
-                className="p-3 xl:p-3.5 2xl:p-4 rounded card cursor-pointer select-none"
-              >
-                <div className="flex items-center justify-between gap-3 xl:gap-3.5 2xl:gap-4">
-                  <h3 className="text-lg md:text-xl font-medium leading-snug">{item.question}</h3>
-                  <div className="flex shrink-0 items-center justify-center size-8 md:size-9 rounded primary-button">
-                    <Plus
-                      className={cls(
-                        "size-3.5 md:size-4 text-primary-cta-text transition-transform duration-300",
-                        activeIndex === index && "rotate-45"
-                      )}
-                      strokeWidth={2}
-                    />
-                  </div>
-                </div>
-                <AnimatePresence initial={false}>
-                  {activeIndex === index && (
-                    <motion.div
-                      initial={{ height: 0, opacity: 0 }}
-                      animate={{ height: "auto", opacity: 1 }}
-                      exit={{ height: 0, opacity: 0 }}
-                      transition={{ duration: 0.3, ease: "easeOut" }}
-                      className="overflow-hidden"
-                    >
-                      <p className="pt-1 text-base leading-snug">{item.answer}</p>
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </div>
-            ))}
-          </ScrollReveal>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default FaqSplitMedia;

src/components/sections/faq/FaqTwoColumn.tsx

@@ -1,122 +0,0 @@
-import { useState } from "react";
-import { motion, AnimatePresence } from "motion/react";
-import { Plus } from "lucide-react";
-import ScrollReveal from "@/components/ui/ScrollReveal";
-import Button from "@/components/ui/Button";
-import TextAnimation from "@/components/ui/TextAnimation";
-import { cls } from "@/lib/utils";
-
-type FaqItem = {
-  question: string;
-  answer: string;
-};
-
-const FaqTwoColumn = ({
-  tag,
-  title,
-  description,
-  primaryButton,
-  secondaryButton,
-  items,
-}: {
-  tag: string;
-  title: string;
-  description: string;
-  primaryButton?: { text: string; href: string };
-  secondaryButton?: { text: string; href: string };
-  items: FaqItem[];
-}) => {
-  const [activeIndex, setActiveIndex] = useState<number | null>(null);
-
-  const handleToggle = (index: number) => {
-    setActiveIndex(activeIndex === index ? null : index);
-  };
-
-  const halfLength = Math.ceil(items.length / 2);
-  const firstColumn = items.slice(0, halfLength);
-  const secondColumn = items.slice(halfLength);
-
-  const renderAccordionItem = (item: FaqItem, index: number) => (
-    <div
-      key={index}
-      onClick={() => handleToggle(index)}
-      className="p-3 xl:p-3.5 2xl:p-4 rounded card cursor-pointer select-none"
-    >
-      <div className="flex items-center justify-between gap-3 xl:gap-3.5 2xl:gap-4">
-        <h3 className="text-lg md:text-xl font-medium leading-snug">{item.question}</h3>
-        <div className="flex shrink-0 items-center justify-center size-8 md:size-9 rounded primary-button">
-          <Plus
-            className={cls(
-              "size-3.5 md:size-4 text-primary-cta-text transition-transform duration-300",
-              activeIndex === index && "rotate-45"
-            )}
-            strokeWidth={2}
-          />
-        </div>
-      </div>
-      <AnimatePresence initial={false}>
-        {activeIndex === index && (
-          <motion.div
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: "auto", opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-            transition={{ duration: 0.3, ease: "easeOut" }}
-            className="overflow-hidden"
-          >
-            <p className="pt-1 text-base leading-snug">{item.answer}</p>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-
-  return (
-    <section aria-label="FAQ section" className="py-20">
-      <div className="w-content-width mx-auto flex flex-col gap-8 md:gap-10">
-        <div className="flex flex-col items-center gap-2">
-          <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
-            <p>{tag}</p>
-          </div>
-
-          <TextAnimation
-            text={title}
-            variant="fade-blur"
-            gradientText={true}
-            tag="h2"
-            className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
-          />
-
-          <TextAnimation
-            text={description}
-            variant="fade-blur"
-            gradientText={false}
-            tag="p"
-            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
-          />
-
-          {(primaryButton || secondaryButton) && (
-            <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
-              {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>}
-              {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />}
-            </div>
-          )}
-        </div>
-
-        <ScrollReveal variant="slide-up" className="card rounded p-6 xl:p-10">
-          <div className="flex flex-col md:flex-row gap-3 xl:gap-3.5 2xl:gap-4">
-            <div className="flex flex-1 flex-col gap-3 xl:gap-3.5 2xl:gap-4">
-              {firstColumn.map((item, index) => renderAccordionItem(item, index))}
-            </div>
-            {secondColumn.length > 0 && (
-              <div className="flex flex-1 flex-col gap-3 xl:gap-3.5 2xl:gap-4">
-                {secondColumn.map((item, index) => renderAccordionItem(item, index + halfLength))}
-              </div>
-            )}
-          </div>
-        </ScrollReveal>
-      </div>
-    </section>
-  );
-};
-
-export default FaqTwoColumn;

src/components/sections/features/FeaturesMarqueeCards.tsx

@@ -1,82 +0,0 @@
-import Button from "@/components/ui/Button";
-import TextAnimation from "@/components/ui/TextAnimation";
-import ImageOrVideo from "@/components/ui/ImageOrVideo";
-import ScrollReveal from "@/components/ui/ScrollReveal";
-
-type FeatureItem = {
-  title?: string;
-  description?: string;
-} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
-
-interface FeaturesMarqueeCardsProps {
-  tag: string;
-  title: string;
-  description: string;
-  primaryButton?: { text: string; href: string };
-  secondaryButton?: { text: string; href: string };
-  items: FeatureItem[];
-}
-
-const FeaturesMarqueeCards = ({
-  tag,
-  title,
-  description,
-  primaryButton,
-  secondaryButton,
-  items,
-}: FeaturesMarqueeCardsProps) => {
-  const duplicated = [...items, ...items, ...items, ...items];
-
-  return (
-    <section aria-label="Features section" className="pt-20 pb-10">
-      <div className="flex flex-col gap-8 md:gap-10">
-        <div className="flex flex-col items-center w-content-width mx-auto gap-2">
-          <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
-            <p>{tag}</p>
-          </div>
-
-          <TextAnimation
-            text={title}
-            variant="fade-blur"
-            gradientText={true}
-            tag="h2"
-            className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
-          />
-
-          <TextAnimation
-            text={description}
-            variant="fade-blur"
-            gradientText={false}
-            tag="p"
-            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
-          />
-
-          {(primaryButton || secondaryButton) && (
-            <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
-              {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary" />}
-              {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />}
-            </div>
-          )}
-        </div>
-
-        <ScrollReveal variant="fade">
-          <div className="w-content-width mx-auto overflow-hidden mask-fade-x-medium">
-            <div className="flex w-max animate-marquee-horizontal" style={{ animationDuration: "60s" }}>
-              {duplicated.map((item, i) => (
-                <div key={i} className="shrink-0 w-60 md:w-75 2xl:w-80 aspect-4/5 mb-10 mr-3 md:mr-5 p-2 xl:p-3 2xl:p-4 card rounded-lg overflow-hidden">
-                  <ImageOrVideo
-                    imageSrc={item.imageSrc}
-                    videoSrc={item.videoSrc}
-                    className="w-full h-full rounded-lg object-cover"
-                  />
-                </div>
-              ))}
-            </div>
-          </div>
-        </ScrollReveal>
-      </div>
-    </section>
-  );
-};
-
-export default FeaturesMarqueeCards;

src/components/sections/features/FeaturesMediaGrid.tsx

@@ -1,82 +0,0 @@
-import Button from "@/components/ui/Button";
-import TextAnimation from "@/components/ui/TextAnimation";
-import ImageOrVideo from "@/components/ui/ImageOrVideo";
-import GridOrCarousel from "@/components/ui/GridOrCarousel";
-import ScrollReveal from "@/components/ui/ScrollReveal";
-
-type FeatureItem = {
-  title: string;
-  description: string;
-} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
-
-interface FeaturesMediaGridProps {
-  tag: string;
-  title: string;
-  description: string;
-  primaryButton?: { text: string; href: string };
-  secondaryButton?: { text: string; href: string };
-  items: FeatureItem[];
-}
-
-const FeaturesMediaGrid = ({
-  tag,
-  title,
-  description,
-  primaryButton,
-  secondaryButton,
-  items,
-}: FeaturesMediaGridProps) => {
-
-  return (
-    <section aria-label="Features section" className="py-20">
-      <div className="flex flex-col gap-8 md:gap-10">
-        <div className="flex flex-col items-center w-content-width mx-auto gap-2">
-          <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
-            <p>{tag}</p>
-          </div>
-
-          <TextAnimation
-            text={title}
-            variant="fade-blur"
-            gradientText={true}
-            tag="h2"
-            className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
-          />
-
-          <TextAnimation
-            text={description}
-            variant="fade-blur"
-            gradientText={false}
-            tag="p"
-            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
-          />
-
-          {(primaryButton || secondaryButton) && (
-            <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
-              {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary" />}
-              {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />}
-            </div>
-          )}
-        </div>
-
-        <ScrollReveal variant="fade-blur">
-          <GridOrCarousel>
-            {items.map((item) => (
-              <div key={item.title} className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 h-full">
-                <div className="aspect-square overflow-hidden">
-                  <ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} className="rounded-none" />
-                </div>
-                <div className="flex flex-col gap-1">
-                  <h3 className="text-3xl font-semibold leading-snug text-balance">{item.title}</h3>
-                  <p className="text-base leading-snug text-balance">{item.description}</p>
-                </div>
-              </div>
-            ))}
-          </GridOrCarousel>
-        </ScrollReveal>
-      </div>
-    </section>
-  );
-};
-
-export default FeaturesMediaGrid;

src/components/sections/features/FeaturesRevealCardsBento.tsx

@@ -1,109 +0,0 @@
-import Button from "@/components/ui/Button";
-import TextAnimation from "@/components/ui/TextAnimation";
-import ImageOrVideo from "@/components/ui/ImageOrVideo";
-import ScrollReveal from "@/components/ui/ScrollReveal";
-import { cls } from "@/lib/utils";
-
-type FeatureItem = {
-  title: string;
-  description: string;
-  href: string;
-} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
-
-interface FeaturesRevealCardsBentoProps {
-  tag: string;
-  title: string;
-  description: string;
-  primaryButton?: { text: string; href: string };
-  secondaryButton?: { text: string; href: string };
-  items: [FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem];
-}
-
-const FeaturesRevealCardsBento = ({ tag, title, description, primaryButton, secondaryButton, items }: FeaturesRevealCardsBentoProps) => {
-  const gridClasses = [
-    "md:col-span-2",
-    "md:col-span-4",
-    "md:col-span-3",
-    "md:col-span-3",
-    "md:col-span-2",
-    "md:col-span-2",
-    "md:col-span-2",
-  ];
-
-  const staggerDelays = [
-    0,
-    0.1,
-    0,
-    0.1,
-    0,
-    0.1,
-    0.2,
-  ];
-
-  return (
-    <section aria-label="Features reveal cards bento section" className="py-20">
-      <div className="flex flex-col gap-8 md:gap-10">
-        <div className="flex flex-col items-center w-content-width mx-auto gap-2">
-          <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
-            <p>{tag}</p>
-          </div>
-
-          <TextAnimation
-            text={title}
-            variant="slide-up"
-            gradientText={true}
-            tag="h2"
-            className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
-          />
-
-          <TextAnimation
-            text={description}
-            variant="slide-up"
-            gradientText={false}
-            tag="p"
-            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
-          />
-
-          {(primaryButton || secondaryButton) && (
-            <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
-              {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>}
-              {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />}
-            </div>
-          )}
-        </div>
-
-        <div className="w-content-width mx-auto grid grid-cols-1 md:grid-cols-6 gap-3">
-          {items.map((item, index) => (
-            <ScrollReveal key={item.title} variant="fade" delay={staggerDelays[index]} className={cls("col-span-1 group", gridClasses[index])}>
-              <a href={item.href} className="block relative overflow-hidden rounded">
-                <div className="h-80 xl:h-100 2xl:h-120 overflow-hidden">
-                  <ImageOrVideo
-                    imageSrc={item.imageSrc}
-                    videoSrc={item.videoSrc}
-                    className="rounded group-hover:scale-105 transition-transform duration-500"
-                  />
-                </div>
-                <div className="absolute -inset-x-px -bottom-px h-2/5 backdrop-blur-xl mask-fade-top-overlay" aria-hidden="true" />
-                <div className="absolute inset-x-3 bottom-3 2xl:inset-x-4 2xl:bottom-4 z-10">
-                  <div className="relative flex flex-col gap-1 md:gap-0 md:group-hover:gap-1 p-3 2xl:p-4 transition-all duration-400">
-                    <div className="absolute inset-0 -z-10 card rounded translate-y-0 opacity-100 md:translate-y-full md:opacity-0 transition-all duration-400 ease-out md:group-hover:translate-y-0 md:group-hover:opacity-100" />
-                    <h3 className="text-2xl font-semibold leading-snug text-foreground md:text-white transition-colors duration-400 md:group-hover:text-foreground">
-                      {item.title}
-                    </h3>
-                    <div className="grid grid-rows-[1fr] md:grid-rows-[0fr] transition-all duration-400 ease-out md:group-hover:grid-rows-[1fr]">
-                      <p className="overflow-hidden text-base leading-snug text-foreground opacity-100 md:opacity-0 transition-opacity duration-400 md:group-hover:opacity-100">
-                        {item.description}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </a>
-            </ScrollReveal>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default FeaturesRevealCardsBento;

src/components/sections/footer/FooterMinimal.tsx

@@ -1,57 +0,0 @@
-import type { LucideIcon } from "lucide-react";
-import { useButtonClick } from "@/hooks/useButtonClick";
-import AutoFillText from "@/components/ui/AutoFillText";
-import { resolveIcon } from "@/utils/resolve-icon";
-
-type SocialLink = {
-  icon: string | LucideIcon;
-  href?: string;
-  onClick?: () => void;
-};
-
-const SocialLinkItem = ({ icon, href, onClick }: SocialLink) => {
-  const Icon = resolveIcon(icon);
-  const handleClick = useButtonClick(href, onClick);
-
-  return (
-    <button
-      onClick={handleClick}
-      className="flex items-center justify-center size-10 rounded-full primary-button text-primary-cta-text cursor-pointer"
-    >
-      <Icon className="size-4" strokeWidth={1.5} />
-    </button>
-  );
-};
-
-const FooterMinimal = ({
-  brand,
-  copyright,
-  socialLinks,
-}: {
-  brand: string;
-  copyright: string;
-  socialLinks?: SocialLink[];
-}) => {
-  return (
-    <footer aria-label="Site footer" className="relative w-full py-20">
-      <div className="flex flex-col w-content-width mx-auto px-10 pb-5 rounded-lg card">
-        <AutoFillText className="font-semibold" paddingY="py-5">{brand}</AutoFillText>
-
-        <div className="h-px w-full mb-5 bg-foreground/50" />
-
-        <div className="flex flex-col gap-3 items-center justify-between md:flex-row">
-          <span className="text-base opacity-75">{copyright}</span>
-          {socialLinks && socialLinks.length > 0 && (
-            <div className="flex items-center gap-3">
-              {socialLinks.map((link, index) => (
-                <SocialLinkItem key={index} icon={link.icon} href={link.href} onClick={link.onClick} />
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-    </footer>
-  );
-};
-
-export default FooterMinimal;

src/components/ui/GridLinesBackground.tsx

@@ -1,16 +0,0 @@
-import { cls } from "@/lib/utils";
-
-type GridLinesBackgroundProps = {
-  position: "fixed" | "absolute";
-};
-
-const GridLinesBackground = ({ position }: GridLinesBackgroundProps) => {
-  return (
-    <div
-      className={cls(position, "inset-0 -z-10 overflow-hidden bg-background pointer-events-none select-none mask-[radial-gradient(circle_at_center,white_0%,transparent_90%)] bg-[linear-gradient(to_right,color-mix(in_srgb,var(--color-background-accent)_17.5%,transparent)_1px,transparent_1px),linear-gradient(to_bottom,color-mix(in_srgb,var(--color-background-accent)_17.5%,transparent)_1px,transparent_1px)] bg-size-[10vw_10vw]")}
-      aria-hidden="true"
-    />
-  );
-};
-
-export default GridLinesBackground;

src/components/ui/IconTextMarquee.tsx

@@ -1,29 +0,0 @@
-import type { LucideIcon } from "lucide-react";
-import { cls } from "@/lib/utils";
-import { resolveIcon } from "@/utils/resolve-icon";
-
-const IconTextMarquee = ({ centerIcon, texts }: { centerIcon: string | LucideIcon; texts: string[] }) => {
-  const CenterIcon = resolveIcon(centerIcon);
-  const items = [...texts, ...texts];
-
-  return (
-    <div className="relative flex flex-col h-full w-full overflow-hidden" style={{ maskImage: "radial-gradient(ellipse at center, black 0%, black 30%, transparent 70%)" }}>
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col gap-2 w-full opacity-60">
-        {Array.from({ length: 10 }).map((_, row) => (
-          <div key={row} className={cls("flex gap-2", row % 2 === 0 ? "animate-marquee-horizontal" : "animate-marquee-horizontal-reverse")}>
-            {items.map((text, i) => (
-              <div key={i} className="flex items-center justify-center px-4 py-2 card rounded">
-                <p className="text-sm leading-snug">{text}</p>
-              </div>
-            ))}
-          </div>
-        ))}
-      </div>
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10 flex items-center justify-center size-16 primary-button backdrop-blur-sm rounded">
-        <CenterIcon className="size-6 text-primary-cta-text" strokeWidth={1.5} />
-      </div>
-    </div>
-  );
-};
-
-export default IconTextMarquee;

src/components/ui/LoopCarousel.tsx

@@ -1,76 +0,0 @@
-import { Children, useCallback, useEffect, useState, type ReactNode } from "react";
-import useEmblaCarousel from "embla-carousel-react";
-import type { EmblaCarouselType } from "embla-carousel";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { cls } from "@/lib/utils";
-
-interface LoopCarouselProps {
-  children: ReactNode;
-}
-
-const LoopCarousel = ({ children }: LoopCarouselProps) => {
-  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: "center", containScroll: "trimSnaps" });
-  const [selectedIndex, setSelectedIndex] = useState(0);
-
-  const items = Children.toArray(children);
-
-  const onSelect = useCallback((api: EmblaCarouselType) => {
-    setSelectedIndex(api.selectedScrollSnap());
-  }, []);
-
-  const scrollPrev = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
-  const scrollNext = useCallback(() => emblaApi?.scrollNext(), [emblaApi]);
-
-  useEffect(() => {
-    if (!emblaApi) return;
-
-    onSelect(emblaApi);
-    emblaApi.on("select", onSelect).on("reInit", onSelect);
-
-    return () => {
-      emblaApi.off("select", onSelect).off("reInit", onSelect);
-    };
-  }, [emblaApi, onSelect]);
-
-  return (
-    <div className="relative w-full md:w-content-width mx-auto">
-      <div ref={emblaRef} className="overflow-hidden w-full mask-fade-x-medium">
-        <div className="flex w-full">
-          {items.map((child, index) => (
-            <div key={index} className="shrink-0 w-content-width md:w-[clamp(18rem,50vw,48rem)] mr-3 md:mr-6">
-              <div
-                className={cls(
-                  "transition-all duration-500 ease-out",
-                  selectedIndex === index ? "opacity-100 scale-100" : "opacity-70 scale-90"
-                )}
-              >
-                {child}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="absolute inset-y-0 left-0 right-0 flex items-center justify-between w-content-width mx-auto pointer-events-none">
-        <button
-          onClick={scrollPrev}
-          type="button"
-          aria-label="Previous slide"
-          className="flex items-center justify-center h-9 aspect-square primary-button rounded cursor-pointer pointer-events-auto"
-        >
-          <ChevronLeft className="h-2/5 aspect-square text-primary-cta-text" />
-        </button>
-        <button
-          onClick={scrollNext}
-          type="button"
-          aria-label="Next slide"
-          className="flex items-center justify-center h-9 aspect-square primary-button rounded cursor-pointer pointer-events-auto"
-        >
-          <ChevronRight className="h-2/5 aspect-square text-primary-cta-text" />
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default LoopCarousel;

src/components/ui/TextAnimation.tsx

@@ -1,96 +0,0 @@
-import { useState, useEffect } from "react";
-import { motion } from "motion/react";
-import { cls } from "@/lib/utils";
-
-type Variant = "slide-up" | "fade-blur" | "fade";
-
-interface TextAnimationProps {
-  text: string;
-  variant: Variant;
-  gradientText: boolean;
-  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div";
-  className?: string;
-}
-
-const VARIANTS = {
-  "slide-up": {
-    hidden: { opacity: 0, y: "50%" },
-    visible: { opacity: 1, y: 0 },
-  },
-  "fade-blur": {
-    hidden: { opacity: 0, filter: "blur(10px)" },
-    visible: { opacity: 1, filter: "none" },
-  },
-  "fade": {
-    hidden: { opacity: 0 },
-    visible: { opacity: 1 },
-  },
-};
-
-const EASING: Record<Variant, [number, number, number, number]> = {
-  "slide-up": [0.25, 0.46, 0.45, 0.94],
-  "fade-blur": [0.45, 0, 0.55, 1],
-  "fade": [0.45, 0, 0.55, 1],
-};
-
-const TextAnimation = ({ text, variant, gradientText, tag = "p", className = "" }: TextAnimationProps) => {
-  const Tag = motion[tag] as typeof motion.p;
-  const words = text.split(" ");
-  const [animationComplete, setAnimationComplete] = useState(false);
-  const [reverted, setReverted] = useState(false);
-
-  const gradientClass = gradientText
-    ? "bg-gradient-to-r from-foreground to-primary-cta bg-clip-text text-transparent pb-[0.1em] -mb-[0.1em]"
-    : "";
-
-  useEffect(() => {
-    if (animationComplete && !reverted) {
-      const delay = variant === "fade-blur" && gradientText ? 0 : 700;
-      const timer = setTimeout(() => {
-        setReverted(true);
-      }, delay);
-      return () => clearTimeout(timer);
-    }
-  }, [animationComplete, reverted, variant, gradientText]);
-
-  if (reverted) {
-    return (
-      <Tag
-        className={cls("leading-[1.2]", gradientClass, className)}
-        initial={false}
-      >
-        {text}
-      </Tag>
-    );
-  }
-
-  return (
-    <Tag
-      className={cls(
-        "leading-[1.2] transition-all duration-700",
-        animationComplete && gradientClass,
-        className
-      )}
-      initial="hidden"
-      whileInView="visible"
-      viewport={{ once: true, margin: "-20%" }}
-      transition={{ staggerChildren: 0.04 }}
-      onAnimationComplete={() => setAnimationComplete(true)}
-    >
-      {words.map((word, i) => (
-        <span key={i}>
-          {i > 0 && " "}
-          <motion.span
-            className="inline-block"
-            variants={VARIANTS[variant]}
-            transition={{ duration: 0.6, ease: EASING[variant] }}
-          >
-            {word}
-          </motion.span>
-        </span>
-      ))}
-    </Tag>
-  );
-};
-
-export default TextAnimation;

src/components/ui/TextLink.tsx

@@ -1,33 +0,0 @@
-"use client";
-
-import { useButtonClick } from "@/hooks/useButtonClick";
-import { cls } from "@/lib/utils";
-
-interface TextLinkProps {
-  text: string;
-  href?: string;
-  onClick?: () => void;
-  className?: string;
-}
-
-const TextLink = ({ text, href = "#", onClick, className = "" }: TextLinkProps) => {
-  const handleClick = useButtonClick(href, onClick);
-
-  return (
-    <a
-      href={href}
-      onClick={handleClick}
-      className={cls(
-        "relative text-sm text-foreground cursor-pointer",
-        "after:absolute after:bottom-0 after:left-0 after:h-px after:w-full after:bg-current",
-        "after:scale-x-0 after:origin-right after:transition-transform after:duration-300",
-        "hover:after:scale-x-100 hover:after:origin-left",
-        className
-      )}
-    >
-      {text}
-    </a>
-  );
-};
-
-export default TextLink;

src/hooks/useProductCatalog.ts

@@ -1,136 +0,0 @@
-import { useState, useMemo, useCallback } from "react";
-import useProducts from "./useProducts";
-
-type SortOption = "Newest" | "Price: Low-High" | "Price: High-Low";
-
-type CatalogProduct = {
-  id: string;
-  name: string;
-  price: string;
-  imageSrc: string;
-  imageAlt?: string;
-  rating?: number;
-  reviewCount?: string;
-  category?: string;
-  onProductClick?: () => void;
-};
-
-type ProductVariant = {
-  label: string;
-  options: string[];
-  selected: string;
-  onChange: (value: string) => void;
-};
-
-type UseProductCatalogOptions = {
-  onProductClick?: (productId: string) => void;
-};
-
-const useProductCatalog = (options: UseProductCatalogOptions = {}) => {
-  const { onProductClick } = options;
-  const { products: fetchedProducts, isLoading } = useProducts();
-
-  const [search, setSearch] = useState("");
-  const [category, setCategory] = useState("All");
-  const [sort, setSort] = useState<SortOption>("Newest");
-
-  const handleProductClick = useCallback(
-    (productId: string) => {
-      onProductClick?.(productId);
-    },
-    [onProductClick]
-  );
-
-  const catalogProducts: CatalogProduct[] = useMemo(() => {
-    if (fetchedProducts.length === 0) return [];
-
-    return fetchedProducts.map((product) => ({
-      id: product.id,
-      name: product.name,
-      price: product.price,
-      imageSrc: product.imageSrc,
-      imageAlt: product.imageAlt || product.name,
-      rating: product.rating || 0,
-      reviewCount: product.reviewCount,
-      category: product.brand,
-      onProductClick: () => handleProductClick(product.id),
-    }));
-  }, [fetchedProducts, handleProductClick]);
-
-  const categories = useMemo(() => {
-    const categorySet = new Set<string>();
-    catalogProducts.forEach((product) => {
-      if (product.category) {
-        categorySet.add(product.category);
-      }
-    });
-    return Array.from(categorySet).sort();
-  }, [catalogProducts]);
-
-  const filteredProducts = useMemo(() => {
-    let result = catalogProducts;
-
-    if (search) {
-      const q = search.toLowerCase();
-      result = result.filter(
-        (p) =>
-          p.name.toLowerCase().includes(q) ||
-          (p.category?.toLowerCase().includes(q) ?? false)
-      );
-    }
-
-    if (category !== "All") {
-      result = result.filter((p) => p.category === category);
-    }
-
-    if (sort === "Price: Low-High") {
-      result = [...result].sort(
-        (a, b) =>
-          parseFloat(a.price.replace("$", "").replace(",", "")) -
-          parseFloat(b.price.replace("$", "").replace(",", ""))
-      );
-    } else if (sort === "Price: High-Low") {
-      result = [...result].sort(
-        (a, b) =>
-          parseFloat(b.price.replace("$", "").replace(",", "")) -
-          parseFloat(a.price.replace("$", "").replace(",", ""))
-      );
-    }
-
-    return result;
-  }, [catalogProducts, search, category, sort]);
-
-  const filters: ProductVariant[] = useMemo(
-    () => [
-      {
-        label: "Category",
-        options: ["All", ...categories],
-        selected: category,
-        onChange: setCategory,
-      },
-      {
-        label: "Sort",
-        options: ["Newest", "Price: Low-High", "Price: High-Low"] as SortOption[],
-        selected: sort,
-        onChange: (value) => setSort(value as SortOption),
-      },
-    ],
-    [categories, category, sort]
-  );
-
-  return {
-    products: filteredProducts,
-    isLoading,
-    search,
-    setSearch,
-    category,
-    setCategory,
-    sort,
-    setSort,
-    filters,
-    categories,
-  };
-};
-
-export default useProductCatalog;
-export type { SortOption, CatalogProduct, ProductVariant };

src/hooks/useProductDetail.ts

@@ -1,209 +0,0 @@
-import { useState, useMemo, useCallback } from "react";
-import useProduct from "./useProduct";
-import type { ExtendedCartItem } from "./useCart";
-
-type ProductImage = {
-  src: string;
-  alt: string;
-};
-
-type ProductMeta = {
-  salePrice?: string;
-  ribbon?: string;
-  inventoryStatus?: string;
-  inventoryQuantity?: number;
-  sku?: string;
-};
-
-type ProductVariant = {
-  label: string;
-  options: string[];
-  selected: string;
-  onChange: (value: string) => void;
-};
-
-const useProductDetail = (productId: string) => {
-  const { product, isLoading, error } = useProduct(productId);
-  const [selectedQuantity, setSelectedQuantity] = useState(1);
-  const [selectedVariants, setSelectedVariants] = useState<Record<string, string>>({});
-
-  const images = useMemo<ProductImage[]>(() => {
-    if (!product) return [];
-
-    if (product.images && product.images.length > 0) {
-      return product.images.map((src, index) => ({
-        src,
-        alt: product.imageAlt || `${product.name} - Image ${index + 1}`,
-      }));
-    }
-    return [
-      {
-        src: product.imageSrc,
-        alt: product.imageAlt || product.name,
-      },
-    ];
-  }, [product]);
-
-  const meta = useMemo<ProductMeta>(() => {
-    if (!product?.metadata) return {};
-
-    const metadata = product.metadata;
-
-    let salePrice: string | undefined;
-    const onSaleValue = metadata.onSale;
-    const onSale =
-      String(onSaleValue) === "true" || onSaleValue === 1 || String(onSaleValue) === "1";
-    const salePriceValue = metadata.salePrice;
-
-    if (onSale && salePriceValue !== undefined && salePriceValue !== null) {
-      if (typeof salePriceValue === "number") {
-        salePrice = `$${salePriceValue.toFixed(2)}`;
-      } else {
-        const salePriceStr = String(salePriceValue);
-        salePrice = salePriceStr.startsWith("$") ? salePriceStr : `$${salePriceStr}`;
-      }
-    }
-
-    let inventoryQuantity: number | undefined;
-    if (metadata.inventoryQuantity !== undefined) {
-      const qty = metadata.inventoryQuantity;
-      inventoryQuantity = typeof qty === "number" ? qty : parseInt(String(qty), 10);
-    }
-
-    return {
-      salePrice,
-      ribbon: metadata.ribbon ? String(metadata.ribbon) : undefined,
-      inventoryStatus: metadata.inventoryStatus ? String(metadata.inventoryStatus) : undefined,
-      inventoryQuantity,
-      sku: metadata.sku ? String(metadata.sku) : undefined,
-    };
-  }, [product]);
-
-  const variants = useMemo<ProductVariant[]>(() => {
-    if (!product) return [];
-
-    const variantList: ProductVariant[] = [];
-
-    if (product.metadata?.variantOptions) {
-      try {
-        const variantOptionsStr = String(product.metadata.variantOptions);
-        const parsedOptions = JSON.parse(variantOptionsStr);
-
-        if (Array.isArray(parsedOptions)) {
-          parsedOptions.forEach((option: { name?: string; values?: string | string[] }) => {
-            if (option.name && option.values) {
-              const values =
-                typeof option.values === "string"
-                  ? option.values.split(",").map((v: string) => v.trim())
-                  : Array.isArray(option.values)
-                    ? option.values.map((v) => String(v).trim())
-                    : [String(option.values)];
-
-              if (values.length > 0) {
-                const optionLabel = option.name;
-                const currentSelected = selectedVariants[optionLabel] || values[0];
-
-                variantList.push({
-                  label: optionLabel,
-                  options: values,
-                  selected: currentSelected,
-                  onChange: (value) => {
-                    setSelectedVariants((prev) => ({
-                      ...prev,
-                      [optionLabel]: value,
-                    }));
-                  },
-                });
-              }
-            }
-          });
-        }
-      } catch {
-        // Failed to parse variantOptions
-      }
-    }
-
-    if (variantList.length === 0 && product.brand) {
-      variantList.push({
-        label: "Brand",
-        options: [product.brand],
-        selected: product.brand,
-        onChange: () => {},
-      });
-    }
-
-    if (variantList.length === 0 && product.variant) {
-      const variantOptions = product.variant.includes("/")
-        ? product.variant.split("/").map((v) => v.trim())
-        : [product.variant];
-
-      const variantLabel = "Variant";
-      const currentSelected = selectedVariants[variantLabel] || variantOptions[0];
-
-      variantList.push({
-        label: variantLabel,
-        options: variantOptions,
-        selected: currentSelected,
-        onChange: (value) => {
-          setSelectedVariants((prev) => ({
-            ...prev,
-            [variantLabel]: value,
-          }));
-        },
-      });
-    }
-
-    return variantList;
-  }, [product, selectedVariants]);
-
-  const quantityVariant = useMemo<ProductVariant>(
-    () => ({
-      label: "Quantity",
-      options: Array.from({ length: 10 }, (_, i) => String(i + 1)),
-      selected: String(selectedQuantity),
-      onChange: (value) => setSelectedQuantity(parseInt(value, 10)),
-    }),
-    [selectedQuantity]
-  );
-
-  const createCartItem = useCallback((): ExtendedCartItem | null => {
-    if (!product) return null;
-
-    const variantStrings = Object.entries(selectedVariants).map(
-      ([label, value]) => `${label}: ${value}`
-    );
-
-    if (variantStrings.length === 0 && product.variant) {
-      variantStrings.push(`Variant: ${product.variant}`);
-    }
-
-    const variantId = Object.values(selectedVariants).join("-") || "default";
-
-    return {
-      id: `${product.id}-${variantId}-${selectedQuantity}`,
-      productId: product.id,
-      name: product.name,
-      variants: variantStrings,
-      price: product.price,
-      quantity: selectedQuantity,
-      imageSrc: product.imageSrc,
-      imageAlt: product.imageAlt || product.name,
-    };
-  }, [product, selectedVariants, selectedQuantity]);
-
-  return {
-    product,
-    isLoading,
-    error,
-    images,
-    meta,
-    variants,
-    quantityVariant,
-    selectedQuantity,
-    selectedVariants,
-    createCartItem,
-  };
-};
-
-export default useProductDetail;
-export type { ProductImage, ProductMeta, ProductVariant };

src/pages/HomePage.tsx

@@ -16,7 +16,7 @@ export default function HomePage() {
     <SectionErrorBoundary name="hero">
           <HeroSplitVerticalMarquee
       tag="Welcome to Paradise"
-      title="Unrivaled Luxury at The Grand Oasis"
+      title="Luxury at The Grand Oasis"
       description="Indulge in exquisite comfort, bespoke service, and breathtaking views. Your unforgettable escape begins here, where every moment is crafted to perfection."
       primaryButton={{
         text: "Explore Rooms",

src/pages/blog/BlogPage.tsx

@@ -1,13 +0,0 @@
-import BlogSimpleCards from "@/components/sections/blog/BlogSimpleCards";
-
-const BlogPage = () => {
-  return (
-    <BlogSimpleCards
-      tag="Blog"
-      title="Latest Articles"
-      description="Stay updated with our latest insights and news"
-    />
-  );
-};
-
-export default BlogPage;

src/pages/shop/ProductPage.tsx

@@ -1,79 +0,0 @@
-import { ReactLenis } from "lenis/react";
-import { useParams, useNavigate } from "react-router-dom";
-import { Loader2 } from "lucide-react";
-import ProductDetailCard from "@/components/ecommerce/ProductDetailCard";
-import ProductCart from "@/components/ecommerce/ProductCart";
-import useProductDetail from "@/hooks/useProductDetail";
-import useCart from "@/hooks/useCart";
-import useCheckout from "@/hooks/useCheckout";
-
-const ProductPage = () => {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-
-  const { product, isLoading, images, createCartItem, selectedQuantity } = useProductDetail(id || "");
-  const { items: cartItems, isOpen: cartOpen, setIsOpen: setCartOpen, addItem, updateQuantity, removeItem, total: cartTotal, getCheckoutItems } = useCart();
-  const { buyNow, checkout } = useCheckout();
-
-  if (isLoading) {
-    return (
-      <section className="w-content-width mx-auto py-20">
-        <div className="flex justify-center">
-          <Loader2 className="size-8 animate-spin text-foreground" strokeWidth={1.5} />
-        </div>
-      </section>
-    );
-  }
-
-  if (!product) {
-    return (
-      <section className="w-content-width mx-auto py-20 text-center">
-        <p className="text-foreground mb-4">Product not found</p>
-        <button onClick={() => navigate("/shop")} className="primary-button px-6 py-2 rounded-theme text-primary-cta-text">
-          Back to Shop
-        </button>
-      </section>
-    );
-  }
-
-  const handleAddToCart = () => {
-    const item = createCartItem();
-    if (item) addItem(item);
-  };
-
-  const handleBuyNow = () => {
-    buyNow(product, selectedQuantity);
-  };
-
-  const handleCheckout = async () => {
-    if (cartItems.length === 0) return;
-    const url = new URL(window.location.href);
-    url.searchParams.set("success", "true");
-    await checkout(getCheckoutItems(), { successUrl: url.toString() });
-  };
-
-  return (
-    <ReactLenis root>
-      <ProductDetailCard
-        name={product.name}
-        price={product.price}
-        description={product.description}
-        images={images.map((img) => img.src)}
-        rating={product.rating}
-        onAddToCart={handleAddToCart}
-        onBuyNow={handleBuyNow}
-      />
-      <ProductCart
-        isOpen={cartOpen}
-        onClose={() => setCartOpen(false)}
-        items={cartItems}
-        total={`$${cartTotal}`}
-        onQuantityChange={updateQuantity}
-        onRemove={removeItem}
-        onCheckout={handleCheckout}
-      />
-    </ReactLenis>
-  );
-};
-
-export default ProductPage;

src/pages/shop/ShopPage.tsx

@@ -1,31 +0,0 @@
-import { useNavigate } from "react-router-dom";
-import { Loader2 } from "lucide-react";
-import ProductCatalog from "@/components/ecommerce/ProductCatalog";
-import useProductCatalog from "@/hooks/useProductCatalog";
-
-const ShopPage = () => {
-  const navigate = useNavigate();
-  const { products, isLoading, search, setSearch } = useProductCatalog({
-    onProductClick: (productId) => navigate(`/shop/${productId}`),
-  });
-
-  if (isLoading) {
-    return (
-      <section className="w-content-width mx-auto py-20">
-        <div className="flex justify-center">
-          <Loader2 className="size-8 animate-spin text-foreground" strokeWidth={1.5} />
-        </div>
-      </section>
-    );
-  }
-
-  return (
-    <ProductCatalog
-      products={products}
-      searchValue={search}
-      onSearchChange={setSearch}
-    />
-  );
-};
-
-export default ShopPage;