Initial commit

src/components/sections/about/AboutFeaturesSplit.tsx

@@ -0,0 +1,90 @@
+import type { LucideIcon } from "lucide-react";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import { resolveIcon } from "@/utils/resolve-icon";
+
+type AboutFeaturesSplitProps = {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+  items: { icon: string | LucideIcon; title: string; description: string }[];
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+const AboutFeaturesSplit = ({
+  tag,
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  items,
+  imageSrc,
+  videoSrc,
+}: AboutFeaturesSplitProps) => {
+  return (
+    <section aria-label="About section" className="py-20">
+      <div className="flex flex-col gap-8 md:gap-10 mx-auto w-content-width">
+        <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="flex flex-col md:flex-row md:items-stretch gap-5">
+          <div className="flex flex-col justify-center gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 w-full md:w-4/10 2xl:w-35/100 card rounded">
+            {items.map((item, index) => {
+              const ItemIcon = resolveIcon(item.icon);
+              return (
+              <div key={item.title}>
+                <div className="flex flex-col gap-2">
+                  <div className="flex items-center justify-center shrink-0 mb-1 size-10 primary-button rounded">
+                    <ItemIcon className="h-2/5 w-2/5 text-primary-cta-text" strokeWidth={1.5} />
+                  </div>
+                  <h3 className="text-2xl font-semibold">{item.title}</h3>
+                  <p className="text-base leading-snug">{item.description}</p>
+                </div>
+                {index < items.length - 1 && (
+                  <div className="mt-4 xl:mt-5 2xl:mt-6 border-b border-accent/40" />
+                )}
+              </div>
+              );
+            })}
+          </div>
+
+          <div className="p-px w-full md:w-6/10 2xl:w-7/10 h-80 md:h-auto card rounded overflow-hidden">
+            <div className="relative size-full">
+              <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="absolute inset-0 object-cover rounded" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default AboutFeaturesSplit;

src/components/sections/about/AboutMediaOverlay.tsx

@@ -0,0 +1,72 @@
+import { motion } from "motion/react";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+
+type AboutMediaOverlayProps = {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+const AboutMediaOverlay = ({
+  tag,
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  imageSrc,
+  videoSrc,
+}: AboutMediaOverlayProps) => {
+  return (
+    <section aria-label="About section" className="py-20">
+      <div className="relative flex items-center justify-center py-8 md:py-12 mx-auto w-content-width rounded overflow-hidden">
+        <div className="absolute inset-0">
+          <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} />
+          <div className="absolute inset-0 bg-foreground/40 backdrop-blur-xs pointer-events-none select-none" />
+        </div>
+
+        <div className="relative z-10 flex items-center justify-center px-5 py-10 mx-auto min-h-100 md:min-h-120 md:w-1/2 w-content-width">
+          <div className="flex flex-col items-center gap-2 text-center">
+            <motion.span
+              initial={{ opacity: 0, y: 10 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: "-15%" }}
+              transition={{ duration: 0.4, ease: "easeOut" }}
+              className="mb-1 px-3 py-1 text-sm card rounded"
+            >
+              {tag}
+            </motion.span>
+
+            <TextAnimation
+              text={title}
+              variant="fade"
+              gradientText={true}
+              tag="h2"
+              className="text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-balance text-primary-cta-text"
+            />
+
+            <TextAnimation
+              text={description}
+              variant="fade"
+              gradientText={false}
+              tag="p"
+              className="text-lg md:text-xl leading-snug text-balance text-primary-cta-text"
+            />
+
+            {(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>
+      </div>
+    </section>
+  );
+};
+
+export default AboutMediaOverlay;

src/components/sections/about/AboutParallax.tsx

@@ -0,0 +1,87 @@
+import { useRef } from "react";
+import { motion, useScroll, useTransform } from "motion/react";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+
+type AboutParallaxProps = {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+  badge?: string;
+} & ({ frontImageSrc: string; frontVideoSrc?: never } | { frontVideoSrc: string; frontImageSrc?: never }) &
+  ({ backImageSrc: string; backVideoSrc?: never } | { backVideoSrc: string; backImageSrc?: never });
+
+const AboutParallax = ({ tag, title, description, primaryButton, secondaryButton, frontImageSrc, frontVideoSrc, backImageSrc, backVideoSrc, badge }: AboutParallaxProps) => {
+  const sectionRef = useRef<HTMLDivElement>(null);
+  const { scrollYProgress } = useScroll({
+    target: sectionRef,
+    offset: ["start end", "end start"],
+  });
+
+  const fgY = useTransform(scrollYProgress, [0, 1], ["120px", "-120px"]);
+  const bgY = useTransform(scrollYProgress, [0, 1], ["-60px", "60px"]);
+  const bgScale = useTransform(scrollYProgress, [0, 1], [1, 1.15]);
+
+  return (
+    <section
+      ref={sectionRef}
+      aria-label="About section"
+      className="relative py-20"
+    >
+      <div className="mx-auto w-content-width">
+        <div className="flex flex-col md:flex-row items-center gap-8 md:gap-16">
+          <div className="w-full md:w-45/100 flex flex-col gap-3">
+            <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="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-balance"
+            />
+            <TextAnimation
+              text={description}
+              variant="slide-up"
+              gradientText={false}
+              tag="p"
+              className="md:max-w-8/10 text-lg md:text-xl leading-snug text-balance"
+            />
+            {(primaryButton || secondaryButton) && (
+              <div className="flex flex-wrap 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-full md:w-55/100 relative h-100 md:h-125 xl:h-150 2xl:h-175">
+            <div className="absolute top-0 right-0 w-75/100 h-full overflow-hidden rounded-none">
+              <motion.div className="w-full h-full" style={{ y: bgY, scale: bgScale }}>
+                <ImageOrVideo imageSrc={backImageSrc} videoSrc={backVideoSrc} className="rounded-none" />
+              </motion.div>
+              {badge && (
+                <span className="absolute top-2 right-2 xl:top-3 xl:right-3 2xl:top-4 2xl:right-4 px-3 py-1.5 text-xs text-foreground font-medium card rounded-none">
+                  {badge}
+                </span>
+              )}
+            </div>
+
+            <motion.div
+              className="absolute top-15/100 left-0 w-65/100 h-70/100 z-10 overflow-hidden rounded-none"
+              style={{ y: fgY }}
+            >
+              <ImageOrVideo imageSrc={frontImageSrc} videoSrc={frontVideoSrc} className="rounded-none" />
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default AboutParallax;

src/components/sections/about/AboutTestimonial.tsx

@@ -0,0 +1,58 @@
+import { Quote } from "lucide-react";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+
+type AboutTestimonialProps = {
+  tag: string;
+  quote: string;
+  author: string;
+  role: string;
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+const AboutTestimonial = ({
+  tag,
+  quote,
+  author,
+  role,
+  imageSrc,
+  videoSrc,
+}: AboutTestimonialProps) => {
+  return (
+    <section aria-label="Testimonial section" className="py-20">
+      <div className="grid grid-cols-1 md:grid-cols-5 gap-5 mx-auto w-content-width">
+        <div className="relative md:col-span-3 p-10 md:p-20 card rounded">
+          <div className="absolute flex items-center justify-center -top-7 -left-7 md:-top-8 md:-left-8 size-14 md:size-16 primary-button rounded">
+            <Quote className="h-5/10 text-primary-cta-text" strokeWidth={1.5} />
+          </div>
+
+          <div className="relative flex flex-col justify-center gap-5 h-full">
+            <div className="w-fit px-3 py-1 mb-1 text-sm card rounded">
+              <p>{tag}</p>
+            </div>
+
+            <TextAnimation
+              text={quote}
+              variant="fade-blur"
+              gradientText={false}
+              tag="h1"
+              className="text-4xl md:text-5xl leading-[1.15] font-semibold text-balance"
+            />
+
+            <div className="flex items-center gap-2 min-w-0">
+              <span className="text-base font-medium truncate">{author}</span>
+              <span className="text-accent shrink-0">•</span>
+              <span className="text-base font-medium truncate">{role}</span>
+            </div>
+          </div>
+        </div>
+
+        <ScrollReveal variant="slide-up" className="p-px md:col-span-2 aspect-square md:aspect-auto md:h-full card rounded overflow-hidden">
+          <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} />
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+};
+
+export default AboutTestimonial;

src/components/sections/about/AboutTestimonialParallax.tsx

@@ -0,0 +1,105 @@
+import { useRef } from "react";
+import { useScroll, useTransform, motion } from "motion/react";
+import type { LucideIcon } from "lucide-react";
+import { Quote } from "lucide-react";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import TextAnimation from "@/components/ui/TextAnimation";
+import { useButtonClick } from "@/hooks/useButtonClick";
+import { resolveIcon } from "@/utils/resolve-icon";
+
+type SocialLink = {
+  icon: string | LucideIcon;
+  label: string;
+  href?: string;
+  onClick?: () => void;
+};
+
+type AboutTestimonialParallaxProps = {
+  tag: string;
+  quote: string;
+  author: string;
+  role: string;
+  socialLinks?: SocialLink[];
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+const SocialLinkButton = ({ icon, label, href, onClick }: SocialLink) => {
+  const Icon = resolveIcon(icon);
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <a
+      href={href}
+      onClick={handleClick}
+      className="flex items-center justify-center gap-2 h-9 px-3 text-sm rounded-full cursor-pointer backdrop-blur-xl bg-primary-cta-text/15 border border-primary-cta-text/20 text-primary-cta-text font-medium hover:bg-primary-cta-text/25 transition-all duration-300 ease-out"
+    >
+      <Icon className="size-4" strokeWidth={1.5} />
+      <span>{label}</span>
+    </a>
+  );
+};
+
+const AboutTestimonialParallax = ({
+  tag,
+  quote,
+  author,
+  role,
+  imageSrc,
+  videoSrc,
+  socialLinks,
+}: AboutTestimonialParallaxProps) => {
+  const imageRef = useRef<HTMLDivElement>(null);
+
+  const { scrollYProgress } = useScroll({
+    target: imageRef,
+    offset: ["start end", "end start"],
+  });
+  const imageScale = useTransform(scrollYProgress, [0, 0.6], [1.3, 1]);
+
+  return (
+    <section aria-label="About section" className="py-20">
+      <div className="grid grid-cols-1 md:grid-cols-5 gap-5 mx-auto w-content-width">
+        <div className="relative md:col-span-3 p-10 md:p-20 card rounded">
+          <div className="absolute flex items-center justify-center -top-7 -left-7 md:-top-8 md:-left-8 size-14 md:size-16 primary-button rounded">
+            <Quote className="h-5/10 text-primary-cta-text" strokeWidth={1.5} />
+          </div>
+
+          <div className="relative flex flex-col justify-center gap-5 h-full">
+            <div className="w-fit px-3 py-1 mb-1 text-sm card rounded">
+              <p>{tag}</p>
+            </div>
+
+            <TextAnimation
+              text={quote}
+              variant="fade-blur"
+              gradientText={false}
+              tag="h1"
+              className="text-4xl md:text-5xl leading-[1.15] font-semibold text-balance"
+            />
+
+            <div className="flex items-center gap-2 min-w-0">
+              <span className="text-base font-medium truncate">{author}</span>
+              <span className="text-accent shrink-0">•</span>
+              <span className="text-base font-medium truncate">{role}</span>
+            </div>
+          </div>
+        </div>
+
+        <div ref={imageRef} className="p-px md:col-span-2 aspect-square md:aspect-auto md:h-full card rounded overflow-hidden relative">
+          <motion.div style={{ scale: imageScale }} className="w-full h-full origin-center">
+            <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} />
+          </motion.div>
+
+          {socialLinks && socialLinks.length > 0 && (
+            <div className="absolute inset-x-0 bottom-0 flex flex-wrap items-end justify-center gap-3 p-6 xl:p-7 2xl:p-8">
+              {socialLinks.map((link, index) => (
+                <SocialLinkButton key={index} {...link} />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default AboutTestimonialParallax;

src/components/sections/about/AboutText.tsx

@@ -0,0 +1,37 @@
+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-blur"
+          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;

src/components/sections/about/AboutTextSplit.tsx

@@ -0,0 +1,58 @@
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+
+interface AboutTextSplitProps {
+  title: string;
+  descriptions: string[];
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+}
+
+const AboutTextSplit = ({
+  title,
+  descriptions,
+  primaryButton,
+  secondaryButton,
+}: AboutTextSplitProps) => {
+  return (
+    <section aria-label="About section" className="py-20">
+      <div className="flex flex-col gap-20 mx-auto w-content-width">
+        <div className="flex flex-col md:flex-row gap-3 md:gap-15">
+          <div className="w-full md:w-1/2">
+            <TextAnimation
+              text={title}
+              variant="slide-up"
+              gradientText={true}
+              tag="h2"
+              className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-balance"
+            />
+          </div>
+
+          <div className="flex flex-col gap-2 w-full md:w-1/2">
+            {descriptions.map((desc, index) => (
+              <TextAnimation
+                key={index}
+                text={desc}
+                variant="slide-up"
+                gradientText={false}
+                tag="p"
+                className="text-xl md:text-2xl leading-snug text-balance"
+              />
+            ))}
+
+            {(primaryButton || secondaryButton) && (
+              <div className="flex flex-wrap 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>
+
+        <div className="w-full border-b border-foreground/5" />
+      </div>
+    </section>
+  );
+};
+
+export default AboutTextSplit;