continue re-design

2025-09-05 13:06:17 -04:00
parent b96d048dbd
commit 836b085f75
270 changed files with 32269 additions and 5182 deletions
@@ -0,0 +1 @@
+export { default } from "./logo-cloud";
@@ -0,0 +1,56 @@
+export default function LogoCloud() {
+  return (
+    <div>
+      <p className="mt-24 text-xs uppercase text-zinc-400 text-center font-bold tracking-[0.3em]">
+        Brought to you by
+      </p>
+      <div className="grid grid-cols-1 place-items-center	my-12 space-y-4 sm:mt-8 sm:space-y-0 md:mx-auto md:max-w-2xl sm:grid sm:gap-6 sm:grid-cols-5">
+        {/* <div className="flex items-center justify-start h-12">
+          <a href="https://nextjs.org" aria-label="Next.js Link">
+            <img
+              src="/nextjs.svg"
+              alt="Next.js Logo"
+              className="h-6 sm:h-12 text-white"
+            />
+          </a>
+        </div>
+        <div className="flex items-center justify-start h-12">
+          <a href="https://vercel.com" aria-label="Vercel.com Link">
+            <img
+              src="/vercel.svg"
+              alt="Vercel.com Logo"
+              className="h-6 text-white"
+            />
+          </a>
+        </div>
+        <div className="flex items-center justify-start h-12">
+          <a href="https://stripe.com" aria-label="stripe.com Link">
+            <img
+              src="/stripe.svg"
+              alt="stripe.com Logo"
+              className="h-12 text-white"
+            />
+          </a>
+        </div>
+        <div className="flex items-center justify-start h-12">
+          <a href="https://supabase.io" aria-label="supabase.io Link">
+            <img
+              src="/supabase.svg"
+              alt="supabase.io Logo"
+              className="h-10 text-white"
+            />
+          </a>
+        </div>
+        <div className="flex items-center justify-start h-12">
+          <a href="https://github.com" aria-label="github.com Link">
+            <img
+              src="/github.svg"
+              alt="github.com Logo"
+              className="h-8 text-white"
+            />
+          </a>
+        </div> */}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,22 @@
+.logocloud-items {
+  animation: logocloud-items 100s infinite linear;
+  will-change: transform;
+}
+
+@keyframes logocloud-items {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+/* Allow this component to animate even when the user prefers reduced motion.
+   This is a narrowly scoped opt-in to avoid disabling all animations globally. */
+@media (prefers-reduced-motion: reduce) {
+  [data-allow-motion="true"] .logocloud-items {
+    animation-duration: 100s !important;
+    animation-iteration-count: infinite !important;
+  }
+}
@@ -0,0 +1,55 @@
+import { CurvyRect } from "@/components/shared/ui";
+import Image from "@/components/shared/image/Image";
+import "./Logocloud.css";
+
+export default function Logocloud() {
+  // Create array starting from index 1, with 17-19 first, then 1-21
+  const logoIndices = [17, 18, ...Array.from({ length: 21 }, (_, i) => i + 1)];
+
+  return (
+    <div className="container relative -mt-1 lg:flex" data-allow-motion="true">
+      <div className="h-1 bottom-0 absolute left-0 w-full bg-border-faint" />
+      <div className="p-16 lg-max:text-center lg:p-40 relative">
+        <CurvyRect className="overlay" allSides />
+
+        <div className="text-body-large text-accent-black">
+          Trusted by{" "}
+          <span className="contents text-label-large text-heat-100">
+            5000+ <br /> companies
+          </span>{" "}
+          of all sizes
+        </div>
+      </div>
+
+      <div className="flex-1 lg-max:h-96 min-w-0 relative lg:-ml-1 lg-max:-mt-1">
+        <div className="h-full left-0 top-0 w-1 bg-border-faint absolute lg-max:w-full lg-max:h-1" />
+
+        <CurvyRect className="overlay" allSides />
+
+        <div className="w-full h-full overflow-x-clip">
+          <div className="w-max flex h-full logocloud-items">
+            {Array.from({ length: 2 }, (_, i) => (
+              <div className="flex h-full" key={i}>
+                {logoIndices.map((logoIndex, i) => (
+                  <div
+                    className="h-full aspect-[204/96] lg:aspect-[204/128] -ml-1 relative w-max"
+                    key={i}
+                  >
+                    <Image
+                      alt={`Logo ${logoIndex}`}
+                      className="absolute object-cover w-full h-full"
+                      src={`logocloud/${logoIndex}`}
+                      raw
+                    />
+
+                    <div className="overlay border-x border-border-faint" />
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}