bender/fe706306-8dcb-4997-b819-758403ce1bba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_3_1780442355121 into main

Browse Source 
Merge version_3_1780442355121 into main
This commit was merged in pull request #3.
This commit is contained in:
bender
2026-06-02 23:19:34 +00:00
parent 971cad5600 0121a99341
commit 79e481e7d0
13 changed files with 1 additions and 964 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/sections/about/AboutText.tsx
View File

@@ -1,37 +0,0 @@
import Button from "@/components/ui/Button";
import TextAnimation from "@/components/ui/TextAnimation";
interface AboutTextProps {
title: string;
primaryButton?: { text: string; href: string };
secondaryButton?: { text: string; href: string };
}
const AboutText = ({
title,
primaryButton,
secondaryButton,
}: AboutTextProps) => {
return (
<section aria-label="About section" className="py-20">
<div className="w-content-width mx-auto flex flex-col gap-2 items-center">
<TextAnimation
text={title}
variant="fade"
gradientText={false}
tag="h2"
className="text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
/>
{(primaryButton || secondaryButton) && (
<div className="flex flex-wrap gap-3 justify-center 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>
</section>
);
};
export default AboutText;

117
src/components/sections/features/FeaturesFlipCards.tsx
View File

@@ -1,117 +0,0 @@
import { useState } from "react";
import { Plus } from "lucide-react";
import TextAnimation from "@/components/ui/TextAnimation";
import ImageOrVideo from "@/components/ui/ImageOrVideo";
import GridOrCarousel from "@/components/ui/GridOrCarousel";
import Button from "@/components/ui/Button";
import ScrollReveal from "@/components/ui/ScrollReveal";
type FeatureItem = {
title: string;
descriptions: string[];
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
interface FeaturesFlipCardsProps {
tag: string;
title: string;
description: string;
primaryButton?: { text: string; href: string };
secondaryButton?: { text: string; href: string };
items: FeatureItem[];
}
const FeatureFlipCard = ({ item }: { item: FeatureItem }) => {
const [isFlipped, setIsFlipped] = useState(false);
return (
<div
className="relative w-full cursor-pointer perspective-[3000px]"
onClick={() => setIsFlipped(!isFlipped)}
>
<div
data-flipped={isFlipped}
className="relative w-full h-full transition-transform duration-500 transform-3d data-[flipped=true]:transform-[rotateY(180deg)]"
>
<div className="flex flex-col gap-3 xl:gap-3.5 2xl:gap-4 p-3 xl:p-3.5 2xl:p-4 card rounded backface-hidden">
<div className="flex items-start justify-between gap-5 p-3 xl:p-3.5 2xl:p-4">
<h3 className="text-3xl font-semibold leading-snug text-balance">{item.title}</h3>
<div className="flex items-center justify-center shrink-0 size-9 primary-button rounded-full">
<Plus className="size-4 text-primary-cta-text" strokeWidth={2} />
</div>
</div>
<div className="relative overflow-hidden aspect-4/5 rounded">
<ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} className="absolute inset-0" />
</div>
</div>
<div className="absolute inset-0 flex flex-col gap-3 xl:gap-3.5 2xl:gap-4 p-3 xl:p-3.5 2xl:p-4 card rounded backface-hidden transform-[rotateY(180deg)]">
<div className="flex items-start justify-between gap-5 p-3 xl:p-3.5 2xl:p-4">
<h3 className="text-3xl font-semibold leading-snug text-balance">{item.title}</h3>
<div className="flex items-center justify-center shrink-0 size-9 primary-button rounded-full">
<Plus className="size-4 rotate-45 text-primary-cta-text" strokeWidth={2} />
</div>
</div>
<div className="flex-1 flex flex-col gap-2 p-3 xl:p-3.5 2xl:p-4 bg-foreground/5 shadow shadow-foreground/5 rounded">
{item.descriptions.map((desc, index) => (
<p key={index} className="text-base md:text-lg leading-snug text-balance">{desc}</p>
))}
</div>
</div>
</div>
</div>
);
};
const FeaturesFlipCards = ({
tag,
title,
description,
primaryButton,
secondaryButton,
items,
}: FeaturesFlipCardsProps) => {
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="slide-up">
<GridOrCarousel>
{items.map((item) => (
<FeatureFlipCard key={item.title} item={item} />
))}
</GridOrCarousel>
</ScrollReveal>
</div>
</section>
);
};
export default FeaturesFlipCards;

82
src/components/sections/features/FeaturesMarqueeCards.tsx
View File

@@ -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-blur">
<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;

128
src/components/sections/hero/HeroSplitTestimonial.tsx
View File

@@ -1,128 +0,0 @@
import { useEffect, useState } from "react";
import { Star } from "lucide-react";
import { motion, AnimatePresence } from "motion/react";
import { cls } from "@/lib/utils";
import Button from "@/components/ui/Button";
import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
import TextAnimation from "@/components/ui/TextAnimation";
import ImageOrVideo from "@/components/ui/ImageOrVideo";
import ScrollReveal from "@/components/ui/ScrollReveal";
type Testimonial = {
name: string;
handle: string;
text: string;
rating: number;
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
type HeroSplitTestimonialProps = {
tag: string;
title: string;
description: string;
primaryButton: { text: string; href: string };
secondaryButton: { text: string; href: string };
testimonials: Testimonial[];
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
const INTERVAL = 5000;
const HeroSplitTestimonial = ({
tag,
title,
description,
primaryButton,
secondaryButton,
imageSrc,
videoSrc,
testimonials,
}: HeroSplitTestimonialProps) => {
const [currentIndex, setCurrentIndex] = useState(0);
useEffect(() => {
if (testimonials.length <= 1) return;
const interval = setInterval(() => {
setCurrentIndex((prev) => (prev + 1) % testimonials.length);
}, INTERVAL);
return () => clearInterval(interval);
}, [currentIndex, testimonials.length]);
const testimonial = testimonials[currentIndex];
return (
<section aria-label="Hero section" className="relative flex items-center h-fit md:h-svh pt-25 pb-20 md:py-0">
<HeroBackgroundSlot />
<div className="flex flex-col md:flex-row items-center gap-12 md:gap-20 w-content-width mx-auto">
<div className="w-full md:w-1/2">
<div className="flex flex-col items-center md:items-start gap-3">
<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="h1"
className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center md:text-left text-balance"
/>
<TextAnimation
text={description}
variant="fade-blur"
gradientText={false}
tag="p"
className="md:max-w-8/10 text-lg md:text-xl leading-snug text-center md:text-left text-balance"
/>
<div className="flex flex-wrap max-md:justify-center gap-3 mt-2 md:mt-3">
<Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
<Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
</div>
</div>
</div>
<ScrollReveal variant="fade-blur" delay={0.2} className="relative w-full md:w-1/2 aspect-3/4 md:aspect-auto md:h-[65vh] md:max-h-[75svh] p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden">
<ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} />
<AnimatePresence mode="wait">
<motion.div
key={currentIndex}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }}
transition={{ duration: 0.3 }}
className="absolute bottom-4 left-4 right-4 xl:bottom-6 xl:right-6 2xl:bottom-8 2xl:right-8 md:left-auto md:max-w-5/10 p-3 xl:p-4 2xl:p-5 card rounded flex flex-col gap-3 xl:gap-4 2xl:gap-5"
>
<div className="flex gap-1.5">
{Array.from({ length: 5 }).map((_, index) => (
<Star
key={index}
className={cls("size-5 text-accent", index < testimonial.rating ? "fill-accent" : "fill-transparent")}
strokeWidth={1.5}
/>
))}
</div>
<p className="text-lg leading-snug text-balance">{testimonial.text}</p>
<div className="flex items-center gap-3">
<ImageOrVideo
imageSrc={testimonial.imageSrc}
videoSrc={testimonial.videoSrc}
className="size-10 md:size-11 2xl:size-12 rounded-full object-cover"
/>
<div className="flex flex-col">
<span className="text-base text-foreground leading-snug font-medium">{testimonial.name}</span>
<span className="text-base text-foreground/75 leading-snug">{testimonial.handle}</span>
</div>
</div>
</motion.div>
</AnimatePresence>
</ScrollReveal>
</div>
</section>
);
};
export default HeroSplitTestimonial;

100
src/components/sections/pricing/PricingCenteredCards.tsx
View File

@@ -1,100 +0,0 @@
import { Check } from "lucide-react";
import Button from "@/components/ui/Button";
import TextAnimation from "@/components/ui/TextAnimation";
import GridOrCarousel from "@/components/ui/GridOrCarousel";
import ScrollReveal from "@/components/ui/ScrollReveal";
type PricingPlan = {
tag: string;
price: string;
description: string;
features: string[];
primaryButton: { text: string; href: string };
secondaryButton?: { text: string; href: string };
};
const PricingCenteredCards = ({
tag,
title,
description,
primaryButton,
secondaryButton,
plans,
}: {
tag: string;
title: string;
description: string;
primaryButton?: { text: string; href: string };
secondaryButton?: { text: string; href: string };
plans: PricingPlan[];
}) => (
<section aria-label="Pricing 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"
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"
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">
<GridOrCarousel>
{plans.map((plan) => (
<div key={plan.tag} className="flex flex-col items-center gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 h-full card rounded text-center">
<div className="px-3 py-1 text-sm card rounded w-fit">
<p>{plan.tag}</p>
</div>
<div className="flex flex-col gap-1">
<span className="text-5xl md:text-6xl font-semibold">{plan.price}</span>
<span className="text-base font-medium">{plan.description}</span>
</div>
<div className="flex flex-col gap-3 w-full">
<Button text={plan.primaryButton.text} href={plan.primaryButton.href} variant="primary" className="w-full" />
{plan.secondaryButton && <Button text={plan.secondaryButton.text} href={plan.secondaryButton.href} variant="secondary" className="w-full" />}
</div>
<div className="w-full h-px bg-foreground/20" />
<div className="flex flex-col gap-3 w-full">
{plan.features.map((feature) => (
<div key={feature} className="flex items-start gap-3">
<div className="flex items-center justify-center shrink-0 size-6 primary-button rounded">
<Check className="size-3 text-primary-cta-text" strokeWidth={2} />
</div>
<span className="text-base text-left">{feature}</span>
</div>
))}
</div>
</div>
))}
</GridOrCarousel>
</ScrollReveal>
</div>
</section>
);
export default PricingCenteredCards;

98
src/components/sections/pricing/PricingMediaCards.tsx
View File

@@ -1,98 +0,0 @@
import { Check } from "lucide-react";
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 PricingPlan = {
tag: string;
price: string;
period: string;
features: string[];
primaryButton: { text: string; href: string };
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
const PricingMediaCards = ({
tag,
title,
description,
primaryButton,
secondaryButton,
plans,
}: {
tag: string;
title: string;
description: string;
primaryButton?: { text: string; href: string };
secondaryButton?: { text: string; href: string };
plans: PricingPlan[];
}) => (
<section aria-label="Pricing section" className="py-20">
<div className="flex flex-col gap-8 md:gap-10">
<div className="flex flex-col items-center gap-2 w-content-width mx-auto">
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
<p>{tag}</p>
</div>
<TextAnimation
text={title}
variant="fade"
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"
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="flex flex-col gap-5 w-content-width mx-auto">
{plans.map((plan) => (
<ScrollReveal
variant="fade-blur"
key={plan.tag}
className="flex flex-col md:flex-row gap-6 md:gap-10 p-6 md:p-10 card rounded"
>
<div className="w-full md:w-1/2 aspect-square md:aspect-4/3 rounded overflow-hidden">
<ImageOrVideo imageSrc={plan.imageSrc} videoSrc={plan.videoSrc} />
</div>
<div className="flex flex-col justify-center gap-2 w-full md:w-1/2">
<div className="px-3 py-1 mb-1 w-fit text-sm card rounded">
<p>{plan.price}{plan.period}</p>
</div>
<h3 className="text-4xl md:text-5xl font-semibold leading-[1.15] text-balance">{plan.tag}</h3>
<div className="flex flex-col gap-3 mt-1">
{plan.features.map((feature) => (
<div key={feature} className="flex items-start gap-3">
<div className="flex items-center justify-center shrink-0 size-6 primary-button rounded">
<Check className="size-3 text-primary-cta-text" strokeWidth={2} />
</div>
<span className="text-base leading-snug">{feature}</span>
</div>
))}
</div>
<Button text={plan.primaryButton.text} href={plan.primaryButton.href} variant="primary" className="w-fit mt-2 md:mt-3" />
</div>
</ScrollReveal>
))}
</div>
</div>
</section>
);
export default PricingMediaCards;

82
src/components/sections/team/TeamGlassCards.tsx
View File

@@ -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 TeamMember = {
name: string;
role: string;
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
const TeamGlassCards = ({
tag,
title,
description,
primaryButton,
secondaryButton,
members,
}: {
tag: string;
title: string;
description: string;
primaryButton?: { text: string; href: string };
secondaryButton?: { text: string; href: string };
members: TeamMember[];
}) => (
<section aria-label="Team section" className="py-20">
<div className="flex flex-col gap-8 md:gap-10">
<div className="flex flex-col items-center gap-2 w-content-width mx-auto">
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
<p>{tag}</p>
</div>
<TextAnimation
text={title}
variant="fade"
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"
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 >
{members.map((member) => (
<div key={member.name} className="relative aspect-4/5 rounded overflow-hidden">
<ImageOrVideo imageSrc={member.imageSrc} videoSrc={member.videoSrc} />
<div
className="absolute inset-x-0 bottom-0 h-1/3 backdrop-blur-xl"
style={{ maskImage: "linear-gradient(to bottom, transparent, black 60%)" }}
aria-hidden="true"
/>
<div className="absolute inset-x-6 bottom-6 xl:inset-x-7 xl:bottom-7 2xl:inset-x-8 2xl:bottom-8 flex flex-col text-background">
<span className="text-2xl font-semibold leading-snug truncate">{member.name}</span>
<span className="text-base leading-snug truncate">{member.role}</span>
</div>
</div>
))}
</GridOrCarousel>
</ScrollReveal>
</div>
</section>
);
export default TeamGlassCards;

113
src/components/sections/testimonial/TestimonialMarqueeCards.tsx
View File

@@ -1,113 +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 Testimonial = {
name: string;
role: string;
quote: string;
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
const TestimonialMarqueeCards = ({
tag,
title,
description,
primaryButton,
secondaryButton,
testimonials,
}: {
tag: string;
title: string;
description: string;
primaryButton?: { text: string; href: string };
secondaryButton?: { text: string; href: string };
testimonials: Testimonial[];
}) => {
const half = Math.ceil(testimonials.length / 2);
const topRow = testimonials.slice(0, half);
const bottomRow = testimonials.slice(half);
return (
<section aria-label="Testimonials section" className="pt-20 pb-10">
<div className="flex flex-col gap-8 md:gap-10">
<div className="flex flex-col items-center gap-2 w-content-width mx-auto">
<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="flex flex-col w-content-width mx-auto">
<div className="overflow-hidden mask-fade-x">
<div className="flex w-max animate-marquee-horizontal mb-5" style={{ animationDuration: "30s" }}>
{[...topRow, ...topRow, ...topRow, ...topRow].map((testimonial, index) => (
<div key={`top-${index}`} className="flex flex-col justify-between gap-4 xl:gap-5 2xl:gap-6 shrink-0 w-72 md:w-80 mr-5 p-6 xl:p-7 2xl:p-8 rounded card">
<p className="text-lg leading-snug line-clamp-3">{testimonial.quote}</p>
<div className="flex items-center gap-3">
<ImageOrVideo
imageSrc={testimonial.imageSrc}
videoSrc={testimonial.videoSrc}
className="size-10 md:size-11 2xl:size-12 rounded-full object-cover"
/>
<div className="flex flex-col min-w-0">
<span className="text-base text-foreground font-semibold leading-snug truncate">{testimonial.name}</span>
<span className="text-base text-foreground/75 leading-snug truncate">{testimonial.role}</span>
</div>
</div>
</div>
))}
</div>
</div>
<div className="overflow-hidden mask-fade-x">
<div className="flex w-max animate-marquee-horizontal-reverse mb-10" style={{ animationDuration: "30s" }}>
{[...bottomRow, ...bottomRow, ...bottomRow, ...bottomRow].map((testimonial, index) => (
<div key={`bottom-${index}`} className="flex flex-col justify-between gap-4 xl:gap-5 2xl:gap-6 shrink-0 w-72 md:w-80 mr-5 p-6 xl:p-7 2xl:p-8 rounded card">
<p className="text-lg leading-snug line-clamp-3">{testimonial.quote}</p>
<div className="flex items-center gap-3">
<ImageOrVideo
imageSrc={testimonial.imageSrc}
videoSrc={testimonial.videoSrc}
className="size-10 md:size-11 2xl:size-12 rounded-full object-cover"
/>
<div className="flex flex-col min-w-0">
<span className="text-base text-foreground font-semibold leading-snug truncate">{testimonial.name}</span>
<span className="text-base text-foreground/75 leading-snug truncate">{testimonial.role}</span>
</div>
</div>
</div>
))}
</div>
</div>
</ScrollReveal>
</div>
</section>
);
};
export default TestimonialMarqueeCards;

81
src/components/ui/BorderGlow.tsx
View File

@@ -1,81 +0,0 @@
"use client";
import { useEffect, useRef } from "react";
import { cls } from "@/lib/utils";
import { animate } from "motion/react";
const spread = 40;
const proximity = 64;
const borderWidth = 1.5;
const BorderGlow = ({ className }: { className?: string }) => {
const ref = useRef<HTMLDivElement>(null);
const rafRef = useRef<number>(0);
useEffect(() => {
const el = ref.current;
if (!el) return;
const onPointerMove = (e: PointerEvent) => {
if (rafRef.current) cancelAnimationFrame(rafRef.current);
rafRef.current = requestAnimationFrame(() => {
const { left, top, width, height } = el.getBoundingClientRect();
const { clientX: x, clientY: y } = e;
const isActive =
x > left - proximity &&
x < left + width + proximity &&
y > top - proximity &&
y < top + height + proximity;
el.style.setProperty("--active", isActive ? "1" : "0");
if (!isActive) return;
const centerX = left + width / 2;
const centerY = top + height / 2;
const currentAngle = parseFloat(el.style.getPropertyValue("--start")) || 0;
const targetAngle = (Math.atan2(y - centerY, x - centerX) * 180) / Math.PI + 90;
const angleDiff = ((targetAngle - currentAngle + 180) % 360) - 180;
animate(currentAngle, currentAngle + angleDiff, {
duration: 2,
ease: [0.16, 1, 0.3, 1],
onUpdate: (v) => el.style.setProperty("--start", String(v)),
});
});
};
document.body.addEventListener("pointermove", onPointerMove, { passive: true });
return () => {
if (rafRef.current) cancelAnimationFrame(rafRef.current);
document.body.removeEventListener("pointermove", onPointerMove);
};
}, []);
const gradient = `radial-gradient(circle, var(--color-accent) 10%, transparent 20%),
radial-gradient(circle at 40% 40%, var(--color-background-accent) 5%, transparent 15%),
repeating-conic-gradient(from 236.84deg at 50% 50%, var(--color-accent) 0%, var(--color-background-accent) 5%, var(--color-accent) 10%)`;
return (
<div
ref={ref}
style={{ "--spread": spread, "--start": 0, "--active": 0, "--border-width": `${borderWidth}px`, "--gradient": gradient } as React.CSSProperties}
className={cls("pointer-events-none absolute inset-0 rounded-[inherit]", className)}
>
<div
className={cls(
"rounded-[inherit]",
'after:content-[""] after:rounded-[inherit] after:absolute after:inset-[calc(-1*var(--border-width))]',
"after:[border:var(--border-width)_solid_transparent]",
"after:[background:var(--gradient)] after:bg-fixed",
"after:opacity-(--active) after:transition-opacity after:duration-300",
"after:[mask-clip:padding-box,border-box] after:mask-intersect",
"after:mask-[linear-gradient(#0000,#0000),conic-gradient(from_calc((var(--start)-var(--spread))*1deg),#00000000_0deg,#fff,#00000000_calc(var(--spread)*2deg))]"
)}
/>
</div>
);
};
export default BorderGlow;

29
src/components/ui/IconTextMarquee.tsx
View File

@@ -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;

11
src/components/ui/Separator.tsx
View File

@@ -1,11 +0,0 @@
import { cls } from "@/lib/utils";
interface SeparatorProps {
className?: string;
}
const Separator = ({ className = "" }: SeparatorProps) => (
<div className={cls("h-px w-full bg-foreground/10", className)} />
);
export default Separator;

85
src/components/ui/TiltedCarousel.tsx
View File

@@ -1,85 +0,0 @@
import { useState, useEffect, useRef } from "react";
import { motion } from "motion/react";
import ImageOrVideo from "@/components/ui/ImageOrVideo";
type TiltedCarouselProps = {
items: ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never })[];
autoPlayInterval?: number;
};
const TiltedCarousel = ({ items, autoPlayInterval = 4000 }: TiltedCarouselProps) => {
const [activeIndex, setActiveIndex] = useState(0);
const [isFirstRender, setIsFirstRender] = useState(true);
const autoPlayRef = useRef<ReturnType<typeof setInterval> | null>(null);
const itemCount = items.length;
useEffect(() => {
if (isFirstRender) {
const timeout = setTimeout(() => setIsFirstRender(false), 800);
return () => clearTimeout(timeout);
}
}, [isFirstRender]);
useEffect(() => {
if (autoPlayRef.current) clearInterval(autoPlayRef.current);
autoPlayRef.current = setInterval(() => {
setActiveIndex((prev) => (prev + 1) % itemCount);
}, autoPlayInterval);
return () => {
if (autoPlayRef.current) clearInterval(autoPlayRef.current);
};
}, [autoPlayInterval, itemCount]);
return (
<div className="relative flex items-center justify-center w-full overflow-hidden">
<div className="w-[70%] md:w-[40%] aspect-square md:aspect-video opacity-0" />
{[-2, -1, 0, 1, 2].map((position) => {
const itemIndex = (activeIndex + position + itemCount) % itemCount;
const item = items[itemIndex];
const isCenter = position === 0;
const distance = Math.abs(position);
const scale = distance === 0 ? 1 : distance === 1 ? 0.88 : 0.8;
const opacity = distance <= 1 ? 1 : 0;
const xPercent = position * 100;
const yPercent = distance === 0 ? 0 : distance === 1 ? 5 : 10;
const rotate = position * 2;
const initialState = distance <= 1 && isFirstRender
? isCenter
? { opacity: 0, y: "25px", scale: 1, x: "0%", rotate: 0 }
: { opacity: 0, scale: 0.88, x: `calc(${xPercent}% + ${position > 0 ? 20 : -20}px)`, y: "5%", rotate }
: { scale, opacity, x: `${xPercent}%`, y: `${yPercent}%`, rotate };
return (
<motion.div
key={itemIndex}
className="absolute w-[70%] md:w-[40%] aspect-square md:aspect-video p-2 xl:p-3 2xl:p-4 card rounded-lg overflow-hidden"
style={{ zIndex: isCenter ? 10 : 5 - distance }}
initial={initialState}
animate={{ scale, opacity, x: `${xPercent}%`, y: `${yPercent}%`, rotate }}
transition={{
duration: 0.8,
ease: [0.65, 0, 0.35, 1],
delay: distance <= 1 && isFirstRender ? (isCenter ? 0.45 : 0.6) : 0,
}}
>
<ImageOrVideo
imageSrc={item.imageSrc}
videoSrc={item.videoSrc}
className="w-full h-full rounded-lg object-cover"
/>
<motion.div
className="absolute inset-0 bg-background/50 backdrop-blur-[1px] pointer-events-none"
initial={{ opacity: isCenter ? 0 : 1 }}
animate={{ opacity: isCenter ? 0 : 1 }}
transition={{ duration: 0.5, ease: "easeInOut" }}
/>
</motion.div>
);
})}
</div>
);
};
export default TiltedCarousel;

2
src/pages/HomePage.tsx
View File

@@ -26,7 +26,7 @@ export default function HomePage() {
text: "Contact Us",
href: "#contact",
}}
imageSrc="https://pixabay.com/get/g8f1a1303908f0ccce5cf8a03fa9e31d0f34acf9d1227be5d9cf94cc3198fb5debdbddb688aac3f9f85e3c6048f42c9660b038f88d284ef763cfb4917b4111dc1_1280.jpg?id=6815304"
imageSrc="https://pixabay.com/get/g9c27070ed7b7c88c715279e463eafc309f03a31a6d415da15121e26df4af03f919c5a8122927edad273f3a1bce1642a1dc02213cae230439cc3b6b8abfd251ab_1280.jpg?id=7528062"
/>
</SectionErrorBoundary>
</div>