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 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="fade-blur"
+            gradientText={true}
+            tag="h2"
+            className="text-6xl font-medium text-center text-balance"
+          />
+
+          <TextAnimation
+            text={description}
+            variant="fade-blur"
+            gradientText={false}
+            tag="p"
+            className="md:max-w-6/10 text-lg leading-tight text-center"
+          />
+
+          {(primaryButton || secondaryButton) && (
+            <div className="flex flex-wrap justify-center gap-3 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-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 w-full md:w-4/10 2xl:w-3/10 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-xl font-medium">{item.title}</h3>
+                  <p className="text-base leading-tight">{item.description}</p>
+                </div>
+                {index < items.length - 1 && (
+                  <div className="mt-5 border-b border-accent/40" />
+                )}
+              </div>
+              );
+            })}
+          </div>
+
+          <div className="p-3 xl:p-4 2xl:p-5 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="slide-up"
+              gradientText={true}
+              tag="h2"
+              className="text-6xl font-medium text-balance text-primary-cta-text"
+            />
+
+            <TextAnimation
+              text={description}
+              variant="slide-up"
+              gradientText={false}
+              tag="p"
+              className="text-base md:text-lg leading-tight text-primary-cta-text"
+            />
+
+            {(primaryButton || secondaryButton) && (
+              <div className="flex flex-wrap justify-center gap-3 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/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-8 md:px-12 md:py-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 py-8 md:py-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="slide-up"
+              gradientText={false}
+              tag="p"
+              className="text-3xl md:text-4xl font-medium leading-tight"
+            />
+
+            <div className="flex items-center gap-2">
+              <span className="text-base">{author}</span>
+              <span className="text-accent">•</span>
+              <span className="text-base">{role}</span>
+            </div>
+          </div>
+        </div>
+
+        <ScrollReveal variant="slide-up" className="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/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-3 items-center">
+        <TextAnimation
+          text={title}
+          variant="slide-up"
+          gradientText={false}
+          tag="h2"
+          className="text-2xl md:text-5xl font-medium text-center leading-tight text-balance"
+        />
+
+        {(primaryButton || secondaryButton) && (
+          <div className="flex flex-wrap gap-3 justify-center 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-30 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="fade-blur"
+              gradientText={true}
+              tag="h2"
+              className="text-7xl font-medium"
+            />
+          </div>
+
+          <div className="flex flex-col gap-5 w-full md:w-1/2">
+            {descriptions.map((desc, index) => (
+              <TextAnimation
+                key={index}
+                text={desc}
+                variant="fade-blur"
+                gradientText={false}
+                tag="p"
+                className="text-base md:text-2xl leading-tight"
+              />
+            ))}
+
+            {(primaryButton || secondaryButton) && (
+              <div className="flex flex-wrap max-md:justify-center gap-5">
+                {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/10" />
+      </div>
+    </section>
+  );
+};
+
+export default AboutTextSplit;