Initial commit

src/components/sections/footer/FooterBasic.tsx

@@ -0,0 +1,65 @@
+import { useButtonClick } from "@/hooks/useButtonClick";
+
+type FooterLink = {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+};
+
+type FooterColumn = {
+  title: string;
+  items: FooterLink[];
+};
+
+const FooterLinkItem = ({ label, href, onClick }: FooterLink) => {
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <button
+      onClick={handleClick}
+      className="text-base hover:opacity-75 transition-opacity cursor-pointer"
+    >
+      {label}
+    </button>
+  );
+};
+
+const FooterBasic = ({
+  columns,
+  leftText,
+  rightText,
+}: {
+  columns: FooterColumn[];
+  leftText: string;
+  rightText: string;
+}) => {
+  return (
+    <footer
+      data-section="footer"
+      aria-label="Site footer"
+      className="w-full pt-20 pb-10 border-t border-foreground/15"
+    >
+      <div className="w-content-width mx-auto">
+        <div className="w-full flex flex-wrap justify-between gap-y-10 mb-10">
+          {columns.map((column) => (
+            <div key={column.title} className="w-1/2 md:w-auto flex flex-col items-start gap-3">
+              <h3 className="text-sm opacity-50 truncate">{column.title}</h3>
+              {column.items.map((item) => (
+                <FooterLinkItem key={item.label} label={item.label} href={item.href} onClick={item.onClick} />
+              ))}
+            </div>
+          ))}
+        </div>
+
+        <div className="w-full h-px bg-foreground/20" />
+
+        <div className="w-full flex items-center justify-between pt-5">
+          <span className="text-sm opacity-50">{leftText}</span>
+          <span className="text-sm opacity-50">{rightText}</span>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default FooterBasic;

src/components/sections/footer/FooterBrand.tsx

@@ -0,0 +1,67 @@
+import { ChevronRight } from "lucide-react";
+import { useButtonClick } from "@/hooks/useButtonClick";
+import AutoFillText from "@/components/ui/AutoFillText";
+import { cls } from "@/lib/utils";
+
+type FooterLink = {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+};
+
+type FooterColumn = {
+  items: FooterLink[];
+};
+
+const FooterLinkItem = ({ label, href, onClick }: FooterLink) => {
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <div className="flex items-center gap-2 text-base">
+      <ChevronRight className="size-4" strokeWidth={3} aria-hidden="true" />
+      <button
+        onClick={handleClick}
+        className="text-base text-primary-cta-text font-semibold hover:opacity-75 transition-opacity cursor-pointer"
+      >
+        {label}
+      </button>
+    </div>
+  );
+};
+
+const FooterBrand = ({
+  brand,
+  columns,
+}: {
+  brand: string;
+  columns: FooterColumn[];
+}) => {
+  return (
+    <footer
+      data-section="footer"
+      aria-label="Site footer"
+      className="w-full py-15 mt-20 rounded-t-lg overflow-hidden primary-button text-primary-cta-text"
+    >
+      <div className="w-content-width mx-auto flex flex-col gap-10 md:gap-20">
+        <AutoFillText className="font-semibold">{brand}</AutoFillText>
+
+        <div
+          className={cls(
+            "flex flex-col gap-8 mb-10 md:flex-row",
+            columns.length === 1 ? "md:justify-center" : "md:justify-between"
+          )}
+        >
+          {columns.map((column, index) => (
+            <div key={index} className="flex flex-col items-start gap-3">
+              {column.items.map((item) => (
+                <FooterLinkItem key={item.label} label={item.label} href={item.href} onClick={item.onClick} />
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default FooterBrand;

src/components/sections/footer/FooterBrandReveal.tsx

@@ -0,0 +1,102 @@
+import { useRef, useEffect, useState } from "react";
+import { ChevronRight } from "lucide-react";
+import { useButtonClick } from "@/hooks/useButtonClick";
+import AutoFillText from "@/components/ui/AutoFillText";
+import { cls } from "@/lib/utils";
+
+type FooterLink = {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+};
+
+type FooterColumn = {
+  items: FooterLink[];
+};
+
+const FooterLinkItem = ({ label, href, onClick }: FooterLink) => {
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <div className="flex items-center gap-2 text-base">
+      <ChevronRight className="size-4" strokeWidth={3} aria-hidden="true" />
+      <button
+        onClick={handleClick}
+        className="text-base text-primary-cta-text font-semibold hover:opacity-75 transition-opacity cursor-pointer"
+      >
+        {label}
+      </button>
+    </div>
+  );
+};
+
+const FooterBrandReveal = ({
+  brand,
+  columns,
+}: {
+  brand: string;
+  columns: FooterColumn[];
+}) => {
+  const footerRef = useRef<HTMLDivElement>(null);
+  const [footerHeight, setFooterHeight] = useState(0);
+
+  useEffect(() => {
+    const updateHeight = () => {
+      if (footerRef.current) {
+        setFooterHeight(footerRef.current.offsetHeight);
+      }
+    };
+
+    updateHeight();
+
+    const resizeObserver = new ResizeObserver(updateHeight);
+    if (footerRef.current) {
+      resizeObserver.observe(footerRef.current);
+    }
+
+    return () => resizeObserver.disconnect();
+  }, []);
+
+  return (
+    <section
+      className="relative z-0 w-full mt-20"
+      style={{
+        height: footerHeight ? `${footerHeight}px` : "auto",
+        clipPath: "polygon(0% 0, 100% 0%, 100% 100%, 0 100%)",
+      }}
+    >
+      <div
+        className="fixed bottom-0 w-full"
+        style={{ height: footerHeight ? `${footerHeight}px` : "auto" }}
+      >
+        <footer
+          data-section="footer"
+          ref={footerRef}
+          aria-label="Site footer"
+          className="w-full py-15 rounded-t-lg overflow-hidden primary-button text-primary-cta-text"
+        >
+          <div className="w-content-width mx-auto flex flex-col gap-10 md:gap-20">
+            <AutoFillText className="font-semibold">{brand}</AutoFillText>
+
+            <div
+              className={cls(
+                "flex flex-col gap-8 mb-10 md:flex-row",
+                columns.length === 1 ? "md:justify-center" : "md:justify-between"
+              )}
+            >
+              {columns.map((column, index) => (
+                <div key={index} className="flex flex-col items-start gap-3">
+                  {column.items.map((item) => (
+                    <FooterLinkItem key={item.label} label={item.label} href={item.href} onClick={item.onClick} />
+                  ))}
+                </div>
+              ))}
+            </div>
+          </div>
+        </footer>
+      </div>
+    </section>
+  );
+};
+
+export default FooterBrandReveal;

src/components/sections/footer/FooterMinimal.tsx

@@ -0,0 +1,57 @@
+import type { LucideIcon } from "lucide-react";
+import { useButtonClick } from "@/hooks/useButtonClick";
+import AutoFillText from "@/components/ui/AutoFillText";
+import { resolveIcon } from "@/utils/resolve-icon";
+
+type SocialLink = {
+  icon: string | LucideIcon;
+  href?: string;
+  onClick?: () => void;
+};
+
+const SocialLinkItem = ({ icon, href, onClick }: SocialLink) => {
+  const Icon = resolveIcon(icon);
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <button
+      onClick={handleClick}
+      className="flex items-center justify-center size-10 rounded-full primary-button text-primary-cta-text cursor-pointer"
+    >
+      <Icon className="size-4" strokeWidth={1.5} />
+    </button>
+  );
+};
+
+const FooterMinimal = ({
+  brand,
+  copyright,
+  socialLinks,
+}: {
+  brand: string;
+  copyright: string;
+  socialLinks?: SocialLink[];
+}) => {
+  return (
+    <footer data-section="footer" aria-label="Site footer" className="relative w-full py-20">
+      <div className="flex flex-col w-content-width mx-auto px-10 pb-5 rounded-lg card">
+        <AutoFillText className="font-semibold" paddingY="py-5">{brand}</AutoFillText>
+
+        <div className="h-px w-full mb-5 bg-foreground/50" />
+
+        <div className="flex flex-col gap-3 items-center justify-between md:flex-row">
+          <span className="text-base opacity-75">{copyright}</span>
+          {socialLinks && socialLinks.length > 0 && (
+            <div className="flex items-center gap-3">
+              {socialLinks.map((link, index) => (
+                <SocialLinkItem key={index} icon={link.icon} href={link.href} onClick={link.onClick} />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default FooterMinimal;

src/components/sections/footer/FooterSimple.tsx

@@ -0,0 +1,82 @@
+import { useButtonClick } from "@/hooks/useButtonClick";
+
+type FooterColumn = {
+  title: string;
+  items: { label: string; href?: string; onClick?: () => void }[];
+};
+
+type FooterLink = {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+};
+
+const FooterLinkItem = ({ label, href, onClick }: FooterLink) => {
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <button
+      onClick={handleClick}
+      className="text-base text-primary-cta-text hover:opacity-75 transition-opacity cursor-pointer"
+    >
+      {label}
+    </button>
+  );
+};
+
+const FooterBottomLink = ({ label, href, onClick }: FooterLink) => {
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <button
+      onClick={handleClick}
+      className="text-sm opacity-50 hover:opacity-75 transition-opacity cursor-pointer"
+    >
+      {label}
+    </button>
+  );
+};
+
+const FooterSimple = ({
+  brand,
+  columns,
+  copyright,
+  links,
+}: {
+  brand: string;
+  columns: FooterColumn[];
+  copyright: string;
+  links: FooterLink[];
+}) => {
+  return (
+    <footer data-section="footer" aria-label="Site footer" className="w-full py-15 mt-20 primary-button text-primary-cta-text">
+      <div className="w-content-width mx-auto">
+        <div className="flex flex-col md:flex-row gap-10 md:gap-0 justify-between items-start mb-10">
+          <h2 className="text-4xl font-semibold">{brand}</h2>
+
+          <div className="w-full md:w-fit flex flex-wrap gap-y-10 md:gap-12">
+            {columns.map((column) => (
+              <div key={column.title} className="w-1/2 md:w-auto flex flex-col items-start gap-3">
+                <h3 className="text-sm opacity-50 truncate">{column.title}</h3>
+                {column.items.map((item) => (
+                  <FooterLinkItem key={item.label} label={item.label} href={item.href} onClick={item.onClick} />
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between pt-8 border-t border-primary-cta-text/20">
+          <span className="text-sm opacity-50">{copyright}</span>
+          <div className="flex items-center gap-3">
+            {links.map((link) => (
+              <FooterBottomLink key={link.label} label={link.label} href={link.href} onClick={link.onClick} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default FooterSimple;

src/components/sections/footer/FooterSimpleCard.tsx

@@ -0,0 +1,82 @@
+import { useButtonClick } from "@/hooks/useButtonClick";
+
+type FooterLink = {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+};
+
+type FooterColumn = {
+  title: string;
+  items: FooterLink[];
+};
+
+const FooterLinkItem = ({ label, href, onClick }: FooterLink) => {
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <button
+      onClick={handleClick}
+      className="text-base hover:opacity-75 transition-opacity cursor-pointer"
+    >
+      {label}
+    </button>
+  );
+};
+
+const FooterBottomLink = ({ label, href, onClick }: FooterLink) => {
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <button
+      onClick={handleClick}
+      className="text-sm opacity-50 hover:opacity-75 transition-opacity cursor-pointer"
+    >
+      {label}
+    </button>
+  );
+};
+
+const FooterSimpleCard = ({
+  brand,
+  columns,
+  copyright,
+  links,
+}: {
+  brand: string;
+  columns: FooterColumn[];
+  copyright: string;
+  links: FooterLink[];
+}) => {
+  return (
+    <footer data-section="footer" aria-label="Site footer" className="w-full py-20">
+      <div className="w-content-width mx-auto p-10 rounded-lg card">
+        <div className="flex flex-col md:flex-row gap-10 md:gap-0 justify-between items-start mb-10">
+          <h2 className="text-4xl font-semibold">{brand}</h2>
+
+          <div className="w-full md:w-fit flex flex-wrap gap-y-10 md:gap-12">
+            {columns.map((column) => (
+              <div key={column.title} className="w-1/2 md:w-auto flex flex-col items-start gap-3">
+                <h3 className="text-sm opacity-50 truncate">{column.title}</h3>
+                {column.items.map((item) => (
+                  <FooterLinkItem key={item.label} label={item.label} href={item.href} onClick={item.onClick} />
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between pt-8 border-t border-foreground/20">
+          <span className="text-sm opacity-50">{copyright}</span>
+          <div className="flex items-center gap-3">
+            {links.map((link) => (
+              <FooterBottomLink key={link.label} label={link.label} href={link.href} onClick={link.onClick} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default FooterSimpleCard;

src/components/sections/footer/FooterSimpleMedia.tsx

@@ -0,0 +1,95 @@
+import { useButtonClick } from "@/hooks/useButtonClick";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+
+type FooterLink = {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+};
+
+type FooterColumn = {
+  title: string;
+  items: FooterLink[];
+};
+
+const FooterLinkItem = ({ label, href, onClick }: FooterLink) => {
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <button
+      onClick={handleClick}
+      className="text-base text-primary-cta-text hover:opacity-75 transition-opacity cursor-pointer"
+    >
+      {label}
+    </button>
+  );
+};
+
+const FooterBottomLink = ({ label, href, onClick }: FooterLink) => {
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <button
+      onClick={handleClick}
+      className="text-sm opacity-50 hover:opacity-75 transition-opacity cursor-pointer"
+    >
+      {label}
+    </button>
+  );
+};
+
+const FooterSimpleMedia = ({
+  imageSrc,
+  videoSrc,
+  brand,
+  columns,
+  copyright,
+  links,
+}: ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never }) & {
+  brand: string;
+  columns: FooterColumn[];
+  copyright: string;
+  links: FooterLink[];
+}) => {
+  return (
+    <footer data-section="footer" aria-label="Site footer" className="relative w-full mt-20 overflow-hidden">
+      <div className="w-full aspect-square md:aspect-16/6 mask-fade-top-long">
+        <ImageOrVideo
+          imageSrc={imageSrc}
+          videoSrc={videoSrc}
+          className="w-full h-full object-cover rounded-none!"
+        />
+      </div>
+
+      <div className="w-full py-15 primary-button text-primary-cta-text">
+        <div className="w-content-width mx-auto">
+          <div className="flex flex-col md:flex-row gap-10 md:gap-0 justify-between items-start mb-10">
+            <h2 className="text-4xl font-semibold">{brand}</h2>
+
+            <div className="w-full md:w-fit flex flex-wrap gap-y-10 md:gap-12">
+              {columns.map((column) => (
+                <div key={column.title} className="w-1/2 md:w-auto flex flex-col items-start gap-3">
+                  <h3 className="text-sm opacity-50 truncate">{column.title}</h3>
+                  {column.items.map((item) => (
+                    <FooterLinkItem key={item.label} label={item.label} href={item.href} onClick={item.onClick} />
+                  ))}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between pt-8 border-t border-primary-cta-text/20">
+            <span className="text-sm opacity-50">{copyright}</span>
+            <div className="flex items-center gap-3">
+              {links.map((link) => (
+                <FooterBottomLink key={link.label} label={link.label} href={link.href} onClick={link.onClick} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default FooterSimpleMedia;

src/components/sections/footer/FooterSimpleReveal.tsx

@@ -0,0 +1,121 @@
+import { useRef, useEffect, useState } from "react";
+import { useButtonClick } from "@/hooks/useButtonClick";
+
+type FooterColumn = {
+  title: string;
+  items: { label: string; href?: string; onClick?: () => void }[];
+};
+
+type FooterLink = {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+};
+
+const FooterLinkItem = ({ label, href, onClick }: FooterLink) => {
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <button
+      onClick={handleClick}
+      className="text-base text-primary-cta-text hover:opacity-75 transition-opacity cursor-pointer"
+    >
+      {label}
+    </button>
+  );
+};
+
+const FooterBottomLink = ({ label, href, onClick }: FooterLink) => {
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <button
+      onClick={handleClick}
+      className="text-sm opacity-50 hover:opacity-75 transition-opacity cursor-pointer"
+    >
+      {label}
+    </button>
+  );
+};
+
+const FooterSimpleReveal = ({
+  brand,
+  columns,
+  copyright,
+  links,
+}: {
+  brand: string;
+  columns: FooterColumn[];
+  copyright: string;
+  links: FooterLink[];
+}) => {
+  const footerRef = useRef<HTMLDivElement>(null);
+  const [footerHeight, setFooterHeight] = useState(0);
+
+  useEffect(() => {
+    const updateHeight = () => {
+      if (footerRef.current) {
+        setFooterHeight(footerRef.current.offsetHeight);
+      }
+    };
+
+    updateHeight();
+
+    const resizeObserver = new ResizeObserver(updateHeight);
+    if (footerRef.current) {
+      resizeObserver.observe(footerRef.current);
+    }
+
+    return () => resizeObserver.disconnect();
+  }, []);
+
+  return (
+    <section
+      className="relative z-0 w-full mt-20"
+      style={{
+        height: footerHeight ? `${footerHeight}px` : "auto",
+        clipPath: "polygon(0% 0, 100% 0%, 100% 100%, 0 100%)",
+      }}
+    >
+      <div
+        className="fixed bottom-0 w-full"
+        style={{ height: footerHeight ? `${footerHeight}px` : "auto" }}
+      >
+        <footer
+          data-section="footer"
+          ref={footerRef}
+          aria-label="Site footer"
+          className="w-full py-15 primary-button text-primary-cta-text"
+        >
+          <div className="w-content-width mx-auto">
+            <div className="flex flex-col md:flex-row gap-10 md:gap-0 justify-between items-start mb-10">
+              <h2 className="text-4xl font-semibold">{brand}</h2>
+
+              <div className="w-full md:w-fit flex flex-wrap gap-y-10 md:gap-12">
+                {columns.map((column) => (
+                  <div key={column.title} className="w-1/2 md:w-auto flex flex-col items-start gap-3">
+                    <h3 className="text-sm opacity-50 truncate">{column.title}</h3>
+                    {column.items.map((item) => (
+                      <FooterLinkItem key={item.label} label={item.label} href={item.href} onClick={item.onClick} />
+                    ))}
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between pt-8 border-t border-primary-cta-text/20">
+              <span className="text-sm opacity-50">{copyright}</span>
+              <div className="flex items-center gap-3">
+                {links.map((link) => (
+                  <FooterBottomLink key={link.label} label={link.label} href={link.href} onClick={link.onClick} />
+                ))}
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </section>
+  );
+};
+
+export default FooterSimpleReveal;