Compare commits
18 Commits
version_2_
...
version_3_
| Author | SHA1 | Date | |
|---|---|---|---|
| b8b47b9c8d | |||
| b721108cf0 | |||
| 854b37d63c | |||
| e010d7f7da | |||
| 9197db6e03 | |||
| b402be8284 | |||
| da71c01821 | |||
| d4bc4d2272 | |||
| 6738d73c72 | |||
| 233e9a9801 | |||
| 24f365deb7 | |||
| 7014bc95c3 | |||
| 37896b0993 | |||
| acbae37975 | |||
| d1e19600e3 | |||
| 0515d8127b | |||
| d4728b8cc0 | |||
| 31aa53c417 |
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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 };
|
|
||||||
|
|||||||
@@ -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 };
|
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ export default function HomePage() {
|
|||||||
<SectionErrorBoundary name="hero">
|
<SectionErrorBoundary name="hero">
|
||||||
<HeroSplitVerticalMarquee
|
<HeroSplitVerticalMarquee
|
||||||
tag="Welcome to Paradise"
|
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."
|
description="Indulge in exquisite comfort, bespoke service, and breathtaking views. Your unforgettable escape begins here, where every moment is crafted to perfection."
|
||||||
primaryButton={{
|
primaryButton={{
|
||||||
text: "Explore Rooms",
|
text: "Explore Rooms",
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
Reference in New Issue
Block a user