feat: redesign scroll.io landing page per DESIGN-CONTENT figma

src/app/_components/AIHardware/index.tsx

@@ -0,0 +1,35 @@
+import { GET_IN_TOUCH_URL } from "@/constants/link"
+
+import { ArrowRightSmallIcon } from "../LandingIcons"
+import SectionDivider from "../SectionDivider"
+import { instrumentSerif } from "../fonts"
+
+// TODO: replace with a dedicated AI Hardware waitlist form once the team creates one
+const WAITLIST_FORM_URL = GET_IN_TOUCH_URL
+
+const AIHardwareSection = () => {
+  return (
+    <section
+      id="ai-hardware"
+      className="scroll-mt-[96px] flex w-full flex-col items-center gap-[40px] px-[16px] pb-[48px] pt-[32px] md:gap-[56px] md:pb-[80px] md:min-h-[900px]"
+    >
+      <div className="flex w-full flex-col items-center gap-[20px] pt-[8px] md:pt-[40px] text-center">
+        <p className="text-[12px] font-bold uppercase text-[#959595]">*coming soon*</p>
+        <h2 className={`${instrumentSerif.className} text-[48px] text-black md:text-[60px]`}>AI Hardware</h2>
+        <p className="max-w-[680px] px-[24px] text-[15px] text-[#5E5E5E]">Your Agents stored locally. Unlimited prompting by staking SCR</p>
+      </div>
+      <SectionDivider />
+      <a
+        href={WAITLIST_FORM_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="flex items-center gap-[8px] rounded-[8px] border border-solid border-[#867B71] px-[28px] py-[14px] text-[16px] font-semibold text-black hover:bg-[#F4F3ED]"
+      >
+        Join the Waitlist
+        <ArrowRightSmallIcon className="size-[12px]" />
+      </a>
+    </section>
+  )
+}
+
+export default AIHardwareSection

src/app/_components/Compass/index.tsx

@@ -0,0 +1,51 @@
+import Image from "next/image"
+
+import SectionDivider from "../SectionDivider"
+import { instrumentSerif } from "../fonts"
+
+export const COMPASS_APP_STORE_URL = "https://apps.apple.com/gb/app/pocketpal-travel-buddy/id6774113297"
+
+const FLOATING_MODELS = [
+  { label: "Gemini 3", className: "left-[78px] top-[108px]" },
+  { label: "GPT-4o", className: "left-[78px] top-[281px]" },
+  { label: "Qwen 3 max", className: "left-[420px] top-[140px]" },
+  { label: "Claude Sonnet 3.5", className: "left-[406px] top-[234px]" },
+]
+
+const CompassSection = () => (
+  <section
+    id="compass"
+    className="scroll-mt-[96px] flex w-full flex-col items-center gap-[40px] pb-[48px] md:gap-[56px] md:pb-[80px] pt-[32px] md:min-h-[900px]"
+  >
+    <div className="flex w-full flex-col items-center gap-[20px] pt-[8px] md:pt-[40px] text-center">
+      <h2 className={`${instrumentSerif.className} text-[48px] text-black md:text-[60px]`}>Scroll Compass</h2>
+      <p className="max-w-[680px] text-[15px] text-[#959595]">Every AI model in one iOS app</p>
+    </div>
+    <a
+      href={COMPASS_APP_STORE_URL}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="rounded-[8px] border border-solid border-[#867B71] px-[28px] py-[14px] text-[16px] font-semibold text-black hover:bg-[#F4F3ED]"
+    >
+      Download
+    </a>
+    <div className="relative mx-[16px] h-[320px] w-[calc(100%-32px)] max-w-[553px] rounded-[20px] border border-solid border-[#D9D9D9] bg-white shadow-[0px_0px_7.35px_rgba(0,0,0,0.07)] sm:mx-0 sm:h-[436px] sm:w-full">
+      {FLOATING_MODELS.map(({ label, className }) => (
+        <div key={label} className={`absolute hidden items-center gap-[9px] sm:flex ${className}`}>
+          <span className="size-[5px] rounded-full bg-[#00FF40]" />
+          <span className="text-[10px] text-black">{label}</span>
+        </div>
+      ))}
+      <Image
+        src="/imgs/homepage/compass-app.png"
+        alt="Scroll Compass iOS app"
+        width={176}
+        height={381}
+        className="absolute left-1/2 top-1/2 h-[280px] w-[129px] -translate-x-1/2 -translate-y-1/2 rounded-[13px] border border-solid border-[#D9D9D9] object-cover shadow-[0px_0px_4px_rgba(0,0,0,0.07)] sm:h-[381px] sm:w-[176px]"
+      />
+    </div>
+    <SectionDivider />
+  </section>
+)
+
+export default CompassSection

src/app/_components/CompassApi/index.tsx

@@ -0,0 +1,50 @@
+import { COMPASS_API_URL } from "@/constants/link"
+
+import SectionDivider from "../SectionDivider"
+import { instrumentSerif } from "../fonts"
+
+const BRANDS_ROW_1 = ["Qwen", "Grok", "Kimi", "Black Forest Labs", "NVIDIA", "Claude", "Google", "DeepSeek", "OpenAI", "Mistral"]
+const BRANDS_ROW_2 = ["Gemma", "Kling", "Arcee", "PixVerse", "Vidu", "ElevenLabs", "Runway", "Bytedance", "MiniMax"]
+
+const CompassApiSection = () => (
+  <section
+    id="compass-api"
+    className="scroll-mt-[96px] flex w-full flex-col items-center gap-[40px] pb-[48px] md:gap-[56px] md:pb-[80px] pt-[32px] md:min-h-[900px]"
+  >
+    <h2 className={`${instrumentSerif.className} max-w-full px-[16px] text-center text-[40px] text-black sm:text-[48px] md:text-[60px]`}>
+      Scroll Compass <span className="italic text-[#C8B195]">API</span>
+    </h2>
+    <p className="max-w-[680px] px-[24px] pt-[8px] text-center md:pt-[40px] text-[18px] text-[#8F8CA0]">
+      Keys to AI models secured natively by Zero Knowledge proofs.
+    </p>
+    <a
+      href={COMPASS_API_URL}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="rounded-[8px] border border-solid border-[#867B71] px-[28px] py-[14px] text-[16px] font-semibold text-black hover:bg-[#F4F3ED]"
+    >
+      View All Models
+    </a>
+    <div className="flex w-full flex-col items-center gap-[24px] py-[24px]">
+      <div className="flex max-w-full flex-wrap items-center justify-center gap-x-[48px] gap-y-[16px] px-[24px]">
+        {BRANDS_ROW_1.map(brand => (
+          <div key={brand} className="flex items-center gap-[8px]">
+            <span className="size-[5px] rounded-full bg-[#00FF40]" />
+            <span className="text-[14px] font-medium text-[#60665C]">{brand}</span>
+          </div>
+        ))}
+      </div>
+      <div className="flex max-w-full flex-wrap items-center justify-center gap-x-[48px] gap-y-[16px] px-[24px]">
+        {BRANDS_ROW_2.map(brand => (
+          <div key={brand} className="flex items-center gap-[8px]">
+            <span className="size-[5px] rounded-full bg-[#00FF40] opacity-[0.47]" />
+            <span className="text-[14px] font-medium text-[rgba(96,102,92,0.52)]">{brand}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+    <SectionDivider />
+  </section>
+)
+
+export default CompassApiSection