Initial commit

src/components/sections/contact/ContactSplitForm.tsx

@@ -0,0 +1,142 @@
+import { useState } from "react";
+import { motion } from "motion/react";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+
+type InputField = {
+  name: string;
+  type: string;
+  placeholder: string;
+  required?: boolean;
+};
+
+type TextareaField = {
+  name: string;
+  placeholder: string;
+  rows?: number;
+  required?: boolean;
+};
+
+type ContactSplitFormProps = {
+  tag: string;
+  title: string;
+  description: string;
+  inputs: InputField[];
+  textarea?: TextareaField;
+  buttonText: string;
+  onSubmit?: (data: Record<string, string>) => void;
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+const ContactSplitForm = ({
+  tag,
+  title,
+  description,
+  inputs,
+  textarea,
+  buttonText,
+  onSubmit,
+  imageSrc,
+  videoSrc,
+}: ContactSplitFormProps) => {
+  const [formData, setFormData] = useState<Record<string, string>>(() => {
+    const initial: Record<string, string> = {};
+    inputs.forEach((input) => {
+      initial[input.name] = "";
+    });
+    if (textarea) {
+      initial[textarea.name] = "";
+    }
+    return initial;
+  });
+
+  const handleSubmit = (e: React.SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (onSubmit) {
+      onSubmit(formData);
+      const reset: Record<string, string> = {};
+      inputs.forEach((input) => {
+        reset[input.name] = "";
+      });
+      if (textarea) {
+        reset[textarea.name] = "";
+      }
+      setFormData(reset);
+    }
+  };
+
+  return (
+    <section aria-label="Contact section" className="py-20">
+      <div className="w-content-width mx-auto">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: "-15%" }}
+          transition={{ duration: 0.6, ease: "easeOut" }}
+          className="grid grid-cols-1 md:grid-cols-2 gap-5"
+        >
+          <div className="p-5 md:p-10 card rounded">
+            <form onSubmit={handleSubmit} className="flex flex-col gap-5">
+              <div className="flex flex-col items-center gap-1 text-center">
+                <span className="card rounded px-3 py-1 text-sm">{tag}</span>
+
+                <TextAnimation
+                  text={title}
+                  variant="slide-up"
+                  tag="h2"
+                  className="text-4xl font-medium text-balance"
+                />
+
+                <TextAnimation
+                  text={description}
+                  variant="slide-up"
+                  tag="p"
+                  className="text-sm md:text-base leading-tight text-balance"
+                />
+              </div>
+
+              <div className="flex flex-col gap-3">
+                {inputs.map((input) => (
+                  <input
+                    key={input.name}
+                    type={input.type}
+                    placeholder={input.placeholder}
+                    value={formData[input.name] || ""}
+                    onChange={(e) => setFormData({ ...formData, [input.name]: e.target.value })}
+                    required={input.required}
+                    aria-label={input.placeholder}
+                    className="w-full px-5 py-3 text-base bg-transparent placeholder:opacity-75 focus:outline-none card rounded"
+                  />
+                ))}
+
+                {textarea && (
+                  <textarea
+                    placeholder={textarea.placeholder}
+                    value={formData[textarea.name] || ""}
+                    onChange={(e) => setFormData({ ...formData, [textarea.name]: e.target.value })}
+                    required={textarea.required}
+                    rows={textarea.rows || 5}
+                    aria-label={textarea.placeholder}
+                    className="w-full px-5 py-3 text-base bg-transparent placeholder:opacity-75 focus:outline-none resize-none card rounded"
+                  />
+                )}
+
+                <button
+                  type="submit"
+                  className="w-full h-9 px-5 text-sm rounded text-primary-cta-text cursor-pointer primary-button"
+                >
+                  {buttonText}
+                </button>
+              </div>
+            </form>
+          </div>
+
+          <div className="h-100 md:h-auto card rounded overflow-hidden">
+            <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} />
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default ContactSplitForm;

src/components/sections/features/FeaturesRevealCards.tsx

@@ -0,0 +1,105 @@
+import { motion } from "motion/react";
+import { Info } 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";
+
+type FeatureItem = {
+  title: string;
+  description: string;
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+interface FeaturesRevealCardsProps {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+  items: FeatureItem[];
+}
+
+const FeaturesRevealCards = ({
+  tag,
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  items,
+}: FeaturesRevealCardsProps) => {
+  return (
+    <section aria-label="Features section" className="py-20">
+      <div className="flex flex-col gap-8">
+        <div className="flex flex-col items-center w-content-width mx-auto gap-3 md:gap-2">
+          <span className="px-3 py-1 text-sm card rounded">{tag}</span>
+
+          <TextAnimation
+            text={title}
+            variant="slide-up"
+            tag="h2"
+            className="text-6xl font-medium text-center text-balance"
+          />
+
+          <TextAnimation
+            text={description}
+            variant="slide-up"
+            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-1 md:mt-2">
+              {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary" animate />}
+              {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animate delay={0.1} />}
+            </div>
+          )}
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: "-15%" }}
+          transition={{ duration: 0.6, ease: "easeOut" }}
+        >
+          <GridOrCarousel>
+            {items.map((item, index) => (
+              <div key={item.title} className="group relative overflow-hidden aspect-6/7 rounded">
+                <ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} className="absolute inset-0" />
+
+                <div className="absolute top-5 left-5 z-20 perspective-[1000px]">
+                  <div className="relative size-8 transform-3d transition-transform duration-400 group-hover:rotate-y-180">
+                    <div className="absolute inset-0 flex items-center justify-center rounded bg-background backface-hidden">
+                      <span className="text-sm font-medium text-foreground">{index + 1}</span>
+                    </div>
+                    <div className="absolute inset-0 flex items-center justify-center rounded bg-background backface-hidden rotate-y-180">
+                      <Info className="h-1/2 w-1/2 text-foreground" strokeWidth={1.5} />
+                    </div>
+                  </div>
+                </div>
+
+                <div className="absolute inset-x-0 bottom-0 h-2/5 backdrop-blur-xl mask-fade-top-overlay" aria-hidden="true" />
+
+                <div className="absolute inset-x-0 bottom-0 z-10 p-1">
+                  <div className="relative flex flex-col gap-1 p-3">
+                    <div className="absolute inset-0 -z-10 card rounded translate-y-full opacity-0 transition-all duration-400 ease-out group-hover:translate-y-0 group-hover:opacity-100" />
+
+                    <h3 className="text-2xl font-semibold leading-tight text-background transition-colors duration-400 group-hover:text-foreground">
+                      {item.title}
+                    </h3>
+                    <div className="grid grid-rows-[0fr] transition-all duration-400 ease-out group-hover:grid-rows-[1fr]">
+                      <p className="overflow-hidden text-sm leading-tight text-foreground opacity-0 transition-opacity duration-400 group-hover:opacity-100">
+                        {item.description}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </GridOrCarousel>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default FeaturesRevealCards;

src/components/sections/footer/FooterMinimal.tsx

@@ -0,0 +1,55 @@
+import type { LucideIcon } from "lucide-react";
+import { useButtonClick } from "@/hooks/useButtonClick";
+import AutoFillText from "@/components/ui/AutoFillText";
+
+type SocialLink = {
+  icon: LucideIcon;
+  href?: string;
+  onClick?: () => void;
+};
+
+const SocialLinkItem = ({ icon: Icon, href, onClick }: SocialLink) => {
+  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-medium" paddingY="py-5">{brand}</AutoFillText>
+
+        <div className="h-px w-full mb-5 bg-foreground/50" />
+
+        <div className="flex flex-col gap-3 items-center justify-between md:flex-row">
+          <span className="text-base opacity-75">{copyright}</span>
+          {socialLinks && socialLinks.length > 0 && (
+            <div className="flex items-center gap-3">
+              {socialLinks.map((link, index) => (
+                <SocialLinkItem key={index} icon={link.icon} href={link.href} onClick={link.onClick} />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default FooterMinimal;

src/components/sections/hero/HeroSplit.tsx

@@ -0,0 +1,64 @@
+import { motion } from "motion/react";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+
+type HeroSplitProps = {
+  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 HeroSplit = ({
+  tag,
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  imageSrc,
+  videoSrc,
+}: HeroSplitProps) => {
+  return (
+    <section aria-label="Hero section" className="flex items-center h-fit md:h-svh pt-25 pb-20 md:py-0">
+      <div className="flex flex-col md:flex-row items-center gap-10 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 md:gap-5">
+            <span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
+
+            <TextAnimation
+              text={title}
+              variant="fade"
+              tag="h1"
+              className="text-7xl 2xl:text-8xl font-medium text-center md:text-left text-balance"
+            />
+
+            <TextAnimation
+              text={description}
+              variant="fade"
+              tag="p"
+              className="max-w-8/10 text-lg md:text-xl leading-tight text-center md:text-left"
+            />
+
+            <div className="flex flex-wrap max-md:justify-center gap-3 mt-2">
+              <Button text={primaryButton.text} href={primaryButton.href} variant="primary" animate />
+              <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animate delay={0.1} />
+            </div>
+          </div>
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, ease: "easeOut", delay: 0.2 }}
+          className="w-full md:w-1/2 h-100 md:h-[65vh] md:max-h-[75svh] p-5 card rounded overflow-hidden"
+        >
+          <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} />
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroSplit;

src/components/sections/pricing/PricingHighlightedCards.tsx

@@ -0,0 +1,105 @@
+import { motion } from "motion/react";
+import { Check } from "lucide-react";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import { cls } from "@/lib/utils";
+
+type PricingPlan = {
+  tag: string;
+  price: string;
+  description: string;
+  features: string[];
+  highlight?: string;
+  primaryButton: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+};
+
+const PricingHighlightedCards = ({
+  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">
+      <div className="flex flex-col items-center w-content-width mx-auto gap-3 md:gap-2">
+        <span className="px-3 py-1 text-sm card rounded">{tag}</span>
+
+        <TextAnimation
+          text={title}
+          variant="slide-up"
+          tag="h2"
+          className="text-6xl font-medium text-center text-balance"
+        />
+
+        <TextAnimation
+          text={description}
+          variant="slide-up"
+          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-1 md:mt-2">
+            {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary" animate />}
+            {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animate delay={0.1} />}
+          </div>
+        )}
+      </div>
+
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, margin: "-15%" }}
+        transition={{ duration: 0.6, ease: "easeOut" }}
+      >
+        <GridOrCarousel>
+          {plans.map((plan) => (
+            <div key={plan.tag} className="flex flex-col h-full">
+              <div className={cls("px-5 py-2 text-sm", plan.highlight ? "text-center primary-button rounded-t text-primary-cta-text" : "invisible")}>
+                {plan.highlight || "placeholder"}
+              </div>
+
+              <div className={cls("flex flex-col items-center gap-5 p-5 flex-1 card text-center", plan.highlight ? "rounded-t-none rounded-b" : "rounded")}>
+                <div className="flex flex-col gap-1">
+                  <span className="text-5xl font-medium">{plan.price}</span>
+                  <span className="text-xl font-medium">{plan.tag}</span>
+                </div>
+
+                <div className="h-px w-full 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 className="flex flex-col gap-3 w-full mt-auto">
+                  <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>
+            </div>
+          ))}
+        </GridOrCarousel>
+      </motion.div>
+    </div>
+  </section>
+);
+
+export default PricingHighlightedCards;

src/components/sections/testimonial/TestimonialMetricsCards.tsx

@@ -0,0 +1,126 @@
+import { motion } from "motion/react";
+import { Star } from "lucide-react";
+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 { cls } from "@/lib/utils";
+
+type Testimonial = {
+  name: string;
+  role: string;
+  company: string;
+  rating: number;
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+type Metric = {
+  value: string;
+  label: string;
+};
+
+const TestimonialMetricsCards = ({
+  tag,
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  testimonials,
+  metrics,
+}: {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+  testimonials: Testimonial[];
+  metrics: [Metric, Metric, Metric];
+}) => {
+  return (
+    <section aria-label="Testimonials section" className="py-20">
+      <div className="flex flex-col gap-8">
+        <div className="flex flex-col items-center gap-3 md:gap-2 w-content-width mx-auto">
+          <span className="px-3 py-1 text-sm card rounded">{tag}</span>
+
+          <TextAnimation
+            text={title}
+            variant="slide-up"
+            tag="h2"
+            className="text-6xl font-medium text-center text-balance"
+          />
+
+          <TextAnimation
+            text={description}
+            variant="slide-up"
+            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-1 md:mt-2">
+              {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary" animate />}
+              {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animate delay={0.1} />}
+            </div>
+          )}
+        </div>
+
+        <div className="flex flex-col gap-5">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: "-15%" }}
+            transition={{ duration: 0.6, ease: "easeOut" }}
+          >
+            <GridOrCarousel carouselThreshold={4}>
+              {testimonials.map((testimonial) => (
+                <div key={testimonial.name} className="relative aspect-3/4 rounded overflow-hidden">
+                  <ImageOrVideo imageSrc={testimonial.imageSrc} videoSrc={testimonial.videoSrc} />
+
+                  <div className="absolute inset-x-5 bottom-5 flex flex-col gap-2 p-5 card rounded backdrop-blur-sm">
+                    <div className="flex gap-1 mb-1">
+                      {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>
+
+                    <span className="text-2xl font-medium leading-tight">{testimonial.name}</span>
+
+                    <div className="flex flex-col">
+                      <span className="text-base leading-tight">{testimonial.role}</span>
+                      <span className="text-base leading-tight opacity-75">{testimonial.company}</span>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </GridOrCarousel>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: "-15%" }}
+            transition={{ duration: 0.6, ease: "easeOut" }}
+            className="flex flex-col md:flex-row items-center justify-between w-content-width mx-auto p-8 md:py-16 card rounded"
+          >
+            {metrics.map((metric, index) => (
+              <div key={metric.label} className="flex flex-col md:flex-row items-center w-full md:flex-1">
+                <div className={cls("flex flex-col items-center flex-1 gap-1 text-center md:py-0", index === 0 ? "pb-5" : index === 2 ? "pt-5" : "py-5")}>
+                  <span className="text-5xl font-medium">{metric.value}</span>
+                  <span className="text-base">{metric.label}</span>
+                </div>
+                {index < 2 && (
+                  <div className="w-full h-px md:h-20 md:w-px bg-foreground/20" />
+                )}
+              </div>
+            ))}
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default TestimonialMetricsCards;

src/components/ui/AnimatedBarChart.tsx

@@ -0,0 +1,46 @@
+import { useState, useEffect } from "react";
+import { cls } from "@/lib/utils";
+
+const BARS = [
+  { height: 100, hoverHeight: 40 },
+  { height: 84, hoverHeight: 100 },
+  { height: 62, hoverHeight: 75 },
+  { height: 90, hoverHeight: 50 },
+  { height: 70, hoverHeight: 90 },
+  { height: 50, hoverHeight: 60 },
+  { height: 75, hoverHeight: 85 },
+  { height: 80, hoverHeight: 70 },
+];
+
+const AnimatedBarChart = () => {
+  const [active, setActive] = useState(2);
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    const interval = setInterval(() => setActive((p) => (p + 1) % BARS.length), 3000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div
+      className="hidden md:block h-full w-full"
+      style={{ maskImage: "linear-gradient(to bottom, black 40%, transparent)" }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div className="flex items-end gap-4 h-full w-full">
+        {BARS.map((bar, i) => (
+          <div
+            key={i}
+            className="relative w-full rounded bg-background-accent transition-all duration-500"
+            style={{ height: `${isHovered ? bar.hoverHeight : bar.height}%` }}
+          >
+            <div className={cls("absolute inset-0 rounded primary-button transition-opacity duration-500", active === i ? "opacity-100" : "opacity-0")} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default AnimatedBarChart;

src/components/ui/AutoFillText.tsx

@@ -0,0 +1,67 @@
+import { useRef, useEffect, useState } from "react";
+import { cls } from "@/lib/utils";
+
+const AutoFillText = ({
+  children,
+  className = "",
+  paddingY = "py-10",
+}: {
+  children: string;
+  className?: string;
+  paddingY?: string;
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const textRef = useRef<HTMLHeadingElement>(null);
+  const [fontSize, setFontSize] = useState<number | null>(null);
+
+  const hasDescenders = /[gjpqy]/.test(children);
+  const lineHeight = hasDescenders ? 1.2 : 0.8;
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const text = textRef.current;
+    if (!container || !text) return;
+
+    const calculateSize = () => {
+      const containerWidth = container.offsetWidth;
+      if (containerWidth === 0) return;
+
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+
+      const styles = getComputedStyle(text);
+      ctx.font = `${styles.fontWeight} 100px ${styles.fontFamily}`;
+      const textWidth = ctx.measureText(children).width;
+
+      if (textWidth > 0) {
+        setFontSize((containerWidth / textWidth) * 100);
+      }
+    };
+
+    calculateSize();
+
+    const observer = new ResizeObserver(calculateSize);
+    observer.observe(container);
+
+    return () => observer.disconnect();
+  }, [children]);
+
+  return (
+    <div ref={containerRef} className={cls("w-full min-w-0 flex-1", !hasDescenders && paddingY)}>
+      <h2
+        ref={textRef}
+        className={cls(
+          "whitespace-nowrap transition-opacity duration-150",
+          fontSize ? "opacity-100" : "opacity-0",
+          className
+        )}
+        style={{ fontSize: fontSize ? `${fontSize}px` : undefined, lineHeight }}
+      >
+        {children}
+      </h2>
+    </div>
+  );
+};
+
+export default AutoFillText;

src/components/ui/Button.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { motion } from "motion/react";
+import { cls } from "@/lib/utils";
+import { useButtonClick } from "@/hooks/useButtonClick";
+
+interface ButtonProps {
+  text: string;
+  variant?: "primary" | "secondary";
+  href?: string;
+  onClick?: () => void;
+  animate?: boolean;
+  delay?: number;
+  className?: string;
+}
+
+const Button = ({ text, variant = "primary", href, onClick, animate = false, delay = 0, className = "" }: ButtonProps) => {
+  const handleClick = useButtonClick(href, onClick);
+
+  const classes = cls(
+    "flex items-center justify-center h-9 px-6 text-sm rounded cursor-pointer",
+    variant === "primary" ? "primary-button text-primary-cta-text" : "secondary-button text-secondary-cta-text",
+    className
+  );
+
+  const button = href
+    ? <a href={href} onClick={handleClick} className={classes}>{text}</a>
+    : <button onClick={handleClick} className={classes}>{text}</button>;
+
+  if (!animate) return button;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: "-15%" }}
+      transition={{ duration: 0.6, delay, ease: "easeOut" }}
+    >
+      {button}
+    </motion.div>
+  );
+};
+
+export default Button;

src/components/ui/ChatMarquee.tsx

@@ -0,0 +1,43 @@
+import type { LucideIcon } from "lucide-react";
+import { Send } from "lucide-react";
+import { cls } from "@/lib/utils";
+
+type Exchange = { userMessage: string; aiResponse: string };
+
+const ChatMarquee = ({ aiIcon: AiIcon, userIcon: UserIcon, exchanges, placeholder }: { aiIcon: LucideIcon; userIcon: LucideIcon; exchanges: Exchange[]; placeholder: string }) => {
+  const messages = exchanges.flatMap((e) => [{ content: e.userMessage, isUser: true }, { content: e.aiResponse, isUser: false }]);
+  const duplicated = [...messages, ...messages];
+
+  return (
+    <div className="relative flex flex-col h-full w-full overflow-hidden">
+      <div className="flex-1 overflow-hidden mask-fade-y">
+        <div className="flex flex-col px-4 animate-marquee-vertical">
+          {duplicated.map((msg, i) => (
+            <div key={i} className={cls("flex items-end gap-2 mb-4 shrink-0", msg.isUser ? "flex-row-reverse" : "flex-row")}>
+              {msg.isUser ? (
+                <div className="flex items-center justify-center h-8 w-8 primary-button rounded shrink-0">
+                  <UserIcon className="h-3 w-3 text-primary-cta-text" />
+                </div>
+              ) : (
+                <div className="flex items-center justify-center h-8 w-8 card rounded shrink-0">
+                  <AiIcon className="h-3 w-3" />
+                </div>
+              )}
+              <div className={cls("max-w-3/4 px-4 py-3 text-sm leading-tight", msg.isUser ? "primary-button rounded-2xl rounded-br-none text-primary-cta-text" : "card rounded-2xl rounded-bl-none")}>
+                {msg.content}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="flex items-center gap-2 p-2 pl-4 card rounded">
+        <p className="flex-1 text-sm text-foreground/75 truncate">{placeholder}</p>
+        <div className="flex items-center justify-center h-7 w-7 primary-button rounded">
+          <Send className="h-3 w-3 text-primary-cta-text" strokeWidth={1.75} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatMarquee;

src/components/ui/ChecklistTimeline.tsx

@@ -0,0 +1,47 @@
+import { Check, Loader } from "lucide-react";
+import { cls } from "@/lib/utils";
+
+type Item = { label: string; detail: string };
+
+const DELAYS = [
+  ["delay-150", "delay-200", "delay-[250ms]"],
+  ["delay-[350ms]", "delay-[400ms]", "delay-[450ms]"],
+  ["delay-[550ms]", "delay-[600ms]", "delay-[650ms]"],
+];
+
+const ChecklistTimeline = ({ heading, subheading, items, completedLabel }: { heading: string; subheading: string; items: [Item, Item, Item]; completedLabel: string }) => (
+  <div className="group relative flex items-center justify-center h-full w-full overflow-hidden">
+    <div className="absolute inset-0 flex items-center justify-center">
+      {[1, 0.8, 0.6].map((s) => <div key={s} className="absolute h-full aspect-square rounded-full border border-background-accent/30" style={{ transform: `scale(${s})` }} />)}
+    </div>
+    <div className="relative flex flex-col gap-3 p-4 max-w-full w-8/10 mask-fade-y">
+      <div className="flex items-center gap-2 p-3 card shadow rounded">
+        <Loader className="h-4 w-4 text-primary transition-transform duration-1000 group-hover:rotate-360" strokeWidth={1.5} />
+        <p className="text-xs truncate">{heading}</p>
+        <p className="text-xs text-foreground/75 ml-auto whitespace-nowrap">{subheading}</p>
+      </div>
+      {items.map((item, i) => (
+        <div key={i} className="flex items-center gap-2 px-3 py-2 card shadow rounded">
+          <div className="relative flex items-center justify-center h-6 w-6 card shadow rounded">
+            <div className="absolute h-2 w-2 primary-button rounded transition-opacity duration-300 group-hover:opacity-0" />
+            <div className={cls("absolute inset-0 flex items-center justify-center primary-button rounded opacity-0 scale-75 transition-all duration-300 group-hover:opacity-100 group-hover:scale-100", DELAYS[i][0])}>
+              <Check className="h-3 w-3 text-primary-cta-text" strokeWidth={2} />
+            </div>
+          </div>
+          <div className="flex-1 flex items-center justify-between gap-4 min-w-0">
+            <p className={cls("text-xs truncate opacity-0 transition-opacity duration-300 group-hover:opacity-100", DELAYS[i][1])}>{item.label}</p>
+            <p className={cls("text-xs text-foreground/75 whitespace-nowrap opacity-0 translate-y-1 transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0", DELAYS[i][2])}>{item.detail}</p>
+          </div>
+        </div>
+      ))}
+      <div className="relative flex items-center justify-center p-3 primary-button rounded">
+        <div className="absolute flex gap-2 transition-opacity duration-500 delay-900 group-hover:opacity-0">
+          {[0, 1, 2].map((j) => <div key={j} className="h-2 w-2 rounded bg-primary-cta-text" />)}
+        </div>
+        <p className="text-xs text-primary-cta-text truncate opacity-0 transition-opacity duration-500 delay-900 group-hover:opacity-100">{completedLabel}</p>
+      </div>
+    </div>
+  </div>
+);
+
+export default ChecklistTimeline;

src/components/ui/GridOrCarousel.tsx

@@ -0,0 +1,64 @@
+import { Children, type ReactNode } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cls } from "@/lib/utils";
+import { useCarouselControls } from "@/hooks/useCarouselControls";
+
+interface GridOrCarouselProps {
+  children: ReactNode;
+  carouselThreshold?: 2 | 3 | 4;
+}
+
+const GridOrCarousel = ({ children, carouselThreshold = 4 }: GridOrCarouselProps) => {
+  const [emblaRef, emblaApi] = useEmblaCarousel({ dragFree: true });
+  const { prevDisabled, nextDisabled, scrollPrev, scrollNext, scrollProgress } = useCarouselControls(emblaApi);
+
+  const items = Children.toArray(children);
+  const count = items.length;
+
+  if (count <= carouselThreshold) {
+    return (
+      <div className={cls(
+        "grid grid-cols-1 gap-5 mx-auto w-content-width",
+        count === 2 && "md:grid-cols-2",
+        count === 3 && "md:grid-cols-3",
+        count === 4 && "md:grid-cols-4"
+      )}>
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-5 w-full">
+      <div ref={emblaRef} className="overflow-hidden w-full cursor-grab">
+        <div className="flex gap-4">
+          <div className="shrink-0 w-carousel-padding" />
+          {items.map((child, i) => (
+            <div key={i} className={cls("shrink-0", carouselThreshold === 2 ? "w-carousel-item-2" : carouselThreshold === 3 ? "w-carousel-item-3" : "w-carousel-item-4")}>{child}</div>
+          ))}
+          <div className="shrink-0 w-carousel-padding" />
+        </div>
+      </div>
+      <div className="flex w-full">
+        <div className="shrink-0 w-carousel-padding-controls" />
+        <div className="flex justify-between items-center w-full">
+          <div className="relative h-2 w-1/2 card rounded overflow-hidden">
+            <div className="absolute top-0 bottom-0 -left-full w-full primary-button rounded" style={{ transform: `translate3d(${scrollProgress}%,0px,0px)` }} />
+          </div>
+          <div className="flex items-center gap-3">
+            <button onClick={scrollPrev} disabled={prevDisabled} type="button" aria-label="Previous" className="flex items-center justify-center h-8 aspect-square secondary-button rounded cursor-pointer disabled:opacity-50">
+              <ChevronLeft className="h-2/5 aspect-square text-secondary-cta-text" />
+            </button>
+            <button onClick={scrollNext} disabled={nextDisabled} type="button" aria-label="Next" className="flex items-center justify-center h-8 aspect-square secondary-button rounded cursor-pointer disabled:opacity-50">
+              <ChevronRight className="h-2/5 aspect-square text-secondary-cta-text" />
+            </button>
+          </div>
+        </div>
+        <div className="shrink-0 w-carousel-padding-controls" />
+      </div>
+    </div>
+  );
+};
+
+export default GridOrCarousel;

src/components/ui/HoverPattern.tsx

@@ -0,0 +1,61 @@
+import { useRef, useState, useEffect } from "react";
+import { motion, useMotionValue, useMotionTemplate } from "motion/react";
+import { cls } from "@/lib/utils";
+
+const CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+const randomChars = () => Array.from({ length: 1500 }, () => CHARS[Math.floor(Math.random() * 62)]).join("");
+
+interface HoverPatternProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const HoverPattern = ({ children, className = "" }: HoverPatternProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+  const [chars, setChars] = useState(randomChars);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  useEffect(() => {
+    if (isMobile && ref.current) {
+      x.set(ref.current.offsetWidth / 2);
+      y.set(ref.current.offsetHeight / 2);
+    }
+  }, [isMobile, x, y]);
+
+  const mask = useMotionTemplate`radial-gradient(${isMobile ? 110 : 250}px at ${x}px ${y}px, white, transparent)`;
+  const base = "absolute inset-0 rounded-[inherit] transition-opacity duration-300";
+
+  return (
+    <div
+      ref={ref}
+      className={cls("group/pattern relative", className)}
+      onMouseMove={isMobile ? undefined : (e) => {
+        if (!ref.current) return;
+        const rect = ref.current.getBoundingClientRect();
+        x.set(e.clientX - rect.left);
+        y.set(e.clientY - rect.top);
+        setChars(randomChars());
+      }}
+    >
+      {children}
+      <div className="pointer-events-none absolute inset-0 rounded-[inherit]">
+        <div className={cls(base, isMobile ? "opacity-25" : "opacity-0 group-hover/pattern:opacity-25")} style={{ background: "linear-gradient(white, transparent)" }} />
+        <motion.div className={cls(base, "bg-linear-to-r from-accent to-accent/50 backdrop-blur-xl", isMobile ? "opacity-100" : "opacity-0 group-hover/pattern:opacity-100")} style={{ maskImage: mask, WebkitMaskImage: mask }} />
+        <motion.div className={cls(base, "mix-blend-overlay", isMobile ? "opacity-100" : "opacity-0 group-hover/pattern:opacity-100")} style={{ maskImage: mask, WebkitMaskImage: mask }}>
+          <p className="absolute inset-0 h-full whitespace-pre-wrap wrap-break-word font-mono text-xs font-bold text-white">{chars}</p>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default HoverPattern;

src/components/ui/IconTextMarquee.tsx

@@ -0,0 +1,27 @@
+import type { LucideIcon } from "lucide-react";
+import { cls } from "@/lib/utils";
+
+const IconTextMarquee = ({ centerIcon: CenterIcon, texts }: { centerIcon: LucideIcon; texts: string[] }) => {
+  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-tight">{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 h-16 w-16 primary-button backdrop-blur-sm rounded">
+        <CenterIcon className="h-6 w-6 text-primary-cta-text" strokeWidth={1.5} />
+      </div>
+    </div>
+  );
+};
+
+export default IconTextMarquee;

src/components/ui/ImageOrVideo.tsx

@@ -0,0 +1,41 @@
+import { cls } from "@/lib/utils";
+
+interface ImageOrVideoProps {
+  imageSrc?: string;
+  videoSrc?: string;
+  className?: string;
+}
+
+const ImageOrVideo = ({
+  imageSrc,
+  videoSrc,
+  className = "",
+}: ImageOrVideoProps) => {
+  if (videoSrc) {
+    return (
+      <video
+        src={videoSrc}
+        aria-label={videoSrc}
+        className={cls("w-full h-full min-h-0 object-cover rounded", className)}
+        autoPlay
+        loop
+        muted
+        playsInline
+      />
+    );
+  }
+
+  if (imageSrc) {
+    return (
+      <img
+        src={imageSrc}
+        alt={imageSrc}
+        className={cls("w-full h-full min-h-0 object-cover rounded", className)}
+      />
+    );
+  }
+
+  return null;
+};
+
+export default ImageOrVideo;

src/components/ui/InfoCardMarquee.tsx

@@ -0,0 +1,27 @@
+import type { LucideIcon } from "lucide-react";
+
+type Item = { icon: LucideIcon; label: string; value: string };
+
+const InfoCardMarquee = ({ items }: { items: Item[] }) => {
+  const duplicated = [...items, ...items, ...items, ...items];
+
+  return (
+    <div className="h-full overflow-hidden mask-fade-y">
+      <div className="flex flex-col animate-marquee-vertical">
+        {duplicated.map((item, i) => (
+          <div key={i} className="flex items-center justify-between gap-4 p-3 mb-4 card rounded">
+            <div className="flex items-center gap-3">
+              <div className="flex items-center justify-center h-10 w-10 secondary-button rounded">
+                <item.icon className="h-4 w-4 text-secondary-cta-text" strokeWidth={1.5} />
+              </div>
+              <p className="text-base truncate">{item.label}</p>
+            </div>
+            <p className="text-base">{item.value}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default InfoCardMarquee;

src/components/ui/LoopCarousel.tsx

@@ -0,0 +1,76 @@
+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" });
+  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">
+        <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-8 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-8 aspect-square primary-button rounded cursor-pointer pointer-events-auto"
+        >
+          <ChevronRight className="h-2/5 aspect-square text-primary-cta-text" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default LoopCarousel;

src/components/ui/MediaStack.tsx

@@ -0,0 +1,32 @@
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import { cls } from "@/lib/utils";
+
+type Item = { imageSrc?: string; videoSrc?: string };
+
+const MediaStack = ({ items }: { items: [Item, Item, Item] }) => (
+  <div className="group/stack relative flex items-center justify-center h-full w-full rounded select-none card">
+    <div className={cls(
+      "absolute z-1 overflow-hidden p-1 w-3/5 aspect-4/3 rounded primary-button",
+      "translate-x-[12%] -translate-y-[8%] rotate-8 transition-all duration-500",
+      "group-hover/stack:translate-x-[22%] group-hover/stack:-translate-y-[14%] group-hover/stack:rotate-12"
+    )}>
+      <ImageOrVideo imageSrc={items[2].imageSrc} videoSrc={items[2].videoSrc} className="h-full rounded" />
+    </div>
+    <div className={cls(
+      "absolute z-2 overflow-hidden p-1 w-3/5 aspect-4/3 rounded primary-button",
+      "-translate-x-[12%] -translate-y-[8%] -rotate-8 transition-all duration-500",
+      "group-hover/stack:-translate-x-[22%] group-hover/stack:-translate-y-[14%] group-hover/stack:-rotate-12"
+    )}>
+      <ImageOrVideo imageSrc={items[1].imageSrc} videoSrc={items[1].videoSrc} className="h-full rounded" />
+    </div>
+    <div className={cls(
+      "absolute z-30 overflow-hidden p-1 w-3/5 aspect-4/3 rounded primary-button",
+      "translate-y-[10%] transition-all duration-500",
+      "group-hover/stack:translate-y-[20%]"
+    )}>
+      <ImageOrVideo imageSrc={items[0].imageSrc} videoSrc={items[0].videoSrc} className="h-full rounded" />
+    </div>
+  </div>
+);
+
+export default MediaStack;

src/components/ui/NavbarCentered.tsx

@@ -0,0 +1,122 @@
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { Plus, ArrowRight } from "lucide-react";
+import { cls } from "@/lib/utils";
+import Button from "@/components/ui/Button";
+
+interface NavbarCenteredProps {
+  logo: string;
+  navItems: { name: string; href: string }[];
+  ctaButton: { text: string; href: string };
+}
+
+const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, href: string, onClose?: () => void) => {
+  if (href.startsWith("#")) {
+    e.preventDefault();
+    const element = document.getElementById(href.slice(1));
+    element?.scrollIntoView({ behavior: "smooth", block: "start" });
+  }
+  onClose?.();
+};
+
+const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => setIsScrolled(window.scrollY > 50);
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <>
+      <nav
+        className={cls(
+          "fixed z-1000 top-0 left-0 w-full transition-all duration-500 ease-in-out",
+          isScrolled ? "h-15 bg-background/80 backdrop-blur-sm" : "h-20 bg-background/0 backdrop-blur-0"
+        )}
+      >
+        <div className="relative flex items-center justify-between h-full w-content-width mx-auto">
+          <a href="/" className="text-xl font-medium text-foreground">{logo}</a>
+
+          <div className="hidden md:flex absolute left-1/2 items-center gap-6 -translate-x-1/2">
+            {navItems.map((item) => (
+              <a
+                key={item.name}
+                href={item.href}
+                onClick={(e) => handleNavClick(e, item.href)}
+                className="text-base text-foreground hover:opacity-70 transition-opacity"
+              >
+                {item.name}
+              </a>
+            ))}
+          </div>
+
+          <div className="hidden md:block">
+            <Button text={ctaButton.text} href={ctaButton.href} variant="primary" />
+          </div>
+
+          <button
+            className="flex md:hidden items-center justify-center shrink-0 h-8 w-8 bg-foreground rounded cursor-pointer"
+            onClick={() => setMenuOpen(!menuOpen)}
+            aria-label="Toggle menu"
+            aria-expanded={menuOpen}
+          >
+            <Plus
+              className={cls("w-1/2 h-1/2 text-background transition-transform duration-300", menuOpen ? "rotate-45" : "rotate-0")}
+              strokeWidth={1.5}
+            />
+          </button>
+        </div>
+      </nav>
+
+      <AnimatePresence>
+        {menuOpen && (
+          <motion.div
+            initial={{ y: "-135%" }}
+            animate={{ y: 0 }}
+            exit={{ y: "-135%" }}
+            transition={{ type: "spring", damping: 26, stiffness: 170 }}
+            className="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 card rounded"
+          >
+            <div className="flex items-center justify-between mb-6">
+              <p className="text-xl text-foreground">Menu</p>
+              <button
+                className="flex items-center justify-center shrink-0 h-8 w-8 bg-foreground rounded cursor-pointer"
+                onClick={() => setMenuOpen(false)}
+                aria-label="Close menu"
+              >
+                <Plus className="w-1/2 h-1/2 text-background rotate-45" strokeWidth={1.5} />
+              </button>
+            </div>
+
+            <div className="flex flex-col gap-4">
+              {navItems.map((item, index) => (
+                <div key={item.name}>
+                  <a
+                    href={item.href}
+                    onClick={(e) => handleNavClick(e, item.href, () => setMenuOpen(false))}
+                    className="flex items-center justify-between py-2 text-base font-medium text-foreground"
+                  >
+                    {item.name}
+                    <ArrowRight className="h-4 w-4 text-foreground" strokeWidth={1.5} />
+                  </a>
+                  {index < navItems.length - 1 && (
+                    <div className="h-px bg-linear-to-r from-transparent via-foreground/20 to-transparent" />
+                  )}
+                </div>
+              ))}
+            </div>
+
+            <div className="mt-6">
+              <Button text={ctaButton.text} href={ctaButton.href} variant="primary" className="w-full" />
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </>
+  );
+};
+
+export default NavbarCentered;

src/components/ui/OrbitingIcons.tsx

@@ -0,0 +1,30 @@
+import type { LucideIcon } from "lucide-react";
+
+const OrbitingIcons = ({ centerIcon: CenterIcon, items }: { centerIcon: LucideIcon; items: LucideIcon[] }) => (
+  <div
+    className="relative flex items-center justify-center h-full overflow-hidden"
+    style={{ perspective: "2000px", maskImage: "linear-gradient(to bottom, transparent, black 10%, black 90%, transparent), linear-gradient(to right, transparent, black 10%, black 90%, transparent)", maskComposite: "intersect" }}
+  >
+    <div className="flex items-center justify-center w-full h-full" style={{ transform: "rotateY(20deg) rotateX(20deg) rotateZ(-20deg)" }}>
+      <div className="absolute h-60 w-60 opacity-85 border border-background-accent shadow rounded-full" />
+      <div className="absolute h-80 w-80 opacity-75 border border-background-accent shadow rounded-full" />
+      <div className="absolute h-100 w-100 opacity-65 border border-background-accent shadow rounded-full" />
+      <div className="absolute flex items-center justify-center h-40 w-40 border border-background-accent shadow rounded-full">
+        <div className="flex items-center justify-center h-20 w-20 primary-button rounded-full">
+          <CenterIcon className="h-10 w-10 text-primary-cta-text" strokeWidth={1.25} />
+        </div>
+        {items.map((Icon, i) => (
+          <div
+            key={i}
+            className="absolute flex items-center justify-center h-10 w-10 rounded shadow card -ml-5 -mt-5"
+            style={{ top: "50%", left: "50%", animation: "orbit 12s linear infinite", "--initial-position": `${(360 / items.length) * i}deg`, "--translate-position": "160px" } as React.CSSProperties}
+          >
+            <Icon className="h-4 w-4" strokeWidth={1.5} />
+          </div>
+        ))}
+      </div>
+    </div>
+  </div>
+);
+
+export default OrbitingIcons;

src/components/ui/TextAnimation.tsx

@@ -0,0 +1,60 @@
+import { motion } from "motion/react";
+
+type Variant = "slide-up" | "fade-blur" | "fade";
+
+interface TextAnimationProps {
+  text: string;
+  variant: Variant;
+  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: "blur(0px)" },
+  },
+  "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, tag = "p", className = "" }: TextAnimationProps) => {
+  const Tag = motion[tag] as typeof motion.p;
+  const words = text.split(" ");
+
+  return (
+    <Tag
+      className={className}
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, margin: "-20%" }}
+      transition={{ staggerChildren: 0.04 }}
+    >
+      {words.map((word, i) => (
+        <motion.span
+          key={i}
+          className="inline-block"
+          variants={VARIANTS[variant]}
+          transition={{ duration: 0.6, ease: EASING[variant] }}
+        >
+          {word}
+          {i < words.length - 1 && "\u00A0"}
+        </motion.span>
+      ))}
+    </Tag>
+  );
+};
+
+export default TextAnimation;

src/components/ui/TiltedStackCards.tsx

@@ -0,0 +1,28 @@
+import type { LucideIcon } from "lucide-react";
+import { cls } from "@/lib/utils";
+
+type Item = { icon: LucideIcon; title: string; subtitle: string; detail: string };
+
+const POS = ["-translate-y-14 hover:-translate-y-20", "translate-x-16 hover:-translate-y-4", "translate-x-32 translate-y-16 hover:translate-y-10"];
+
+const TiltedStackCards = ({ items }: { items: [Item, Item, Item] }) => (
+  <div
+    className="h-full grid place-items-center [grid-template-areas:'stack']"
+    style={{ maskImage: "linear-gradient(to bottom, transparent, black 10%, black 90%, transparent), linear-gradient(to right, black, black 80%, transparent)", maskComposite: "intersect" }}
+  >
+    {items.map((item, i) => (
+      <div key={i} className={cls("flex flex-col justify-between gap-2 p-6 w-80 h-36 card rounded transition-all duration-500 -skew-y-[8deg] [grid-area:stack] 2xl:w-90", POS[i])}>
+        <div className="flex items-center gap-2">
+          <div className="flex items-center justify-center h-5 w-5 rounded primary-button">
+            <item.icon className="h-3 w-3 text-primary-cta-text" strokeWidth={1.5} />
+          </div>
+          <p className="text-base">{item.title}</p>
+        </div>
+        <p className="text-lg whitespace-nowrap">{item.subtitle}</p>
+        <p className="text-base">{item.detail}</p>
+      </div>
+    ))}
+  </div>
+);
+
+export default TiltedStackCards;

src/components/ui/Transition.tsx

@@ -0,0 +1,37 @@
+import { motion } from "motion/react";
+import type { ReactNode } from "react";
+
+interface TransitionProps {
+  children: ReactNode;
+  className?: string;
+  transitionType?: "full" | "fade";
+  whileInView?: boolean;
+}
+
+const Transition = ({
+  children,
+  className = "flex flex-col w-full gap-6",
+  transitionType = "full",
+  whileInView = true,
+}: TransitionProps) => {
+  const initial = transitionType === "full"
+    ? { opacity: 0, y: 20 }
+    : { opacity: 0 };
+
+  const target = transitionType === "full"
+    ? { opacity: 1, y: 0 }
+    : { opacity: 1 };
+
+  return (
+    <motion.div
+      initial={initial}
+      {...(whileInView ? { whileInView: target, viewport: { once: true, margin: "-15%" } } : { animate: target })}
+      transition={{ duration: 0.6, ease: "easeOut" }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export default Transition;