feat: redesign scroll.io landing page (#1609)

.env.local.template

@@ -123,3 +123,4 @@ NEXT_PUBLIC_CANVAS_BACKEND_URI="https://skelly-backend-git-sepolia-scroll-tech.v
 NEXT_PUBLIC_FFRONTENDS_URL = "https://scroll-skelly.env.scroll.io"
 NEXT_PUBLIC_EAS_EXPLORER_URL = "https://scroll-sepolia.easscan.org"
 NEXT_PUBLIC_ETHEREUM_YEAR_BADGE_API_URI = "https://genesis-nft-backend-git-sepolia-scroll-tech.vercel.app"
+

src/app/_canvas-and-badges/Badges/index.tsx

@@ -7,7 +7,7 @@ import { makeStyles } from "tss-react/mui"
 import { Box, Typography } from "@mui/material"
 import useScrollTrigger from "@mui/material/useScrollTrigger"
 
-import SearchInput from "@/app/ecosystem/Protocols/SearchInput"
+import SearchInput from "@/app/_ecosystem/Protocols/SearchInput"
 import SectionWrapper from "@/components/SectionWrapper"
 import { CANVAS_AND_BADGES_PAGE_SYMBOL, CATEGORY_LIST, NORMAL_HEADER_HEIGHT, SORT_LIST } from "@/constants"
 

src/app/_components/AIHardware/index.tsx

@@ -0,0 +1,93 @@
+"use client"
+
+import { FormEvent, useState } from "react"
+
+import { LOOPS_FORM_ID, LOOPS_MAILING_LIST_ID } from "@/constants/link"
+
+import { ArrowRightSmallIcon } from "../LandingIcons"
+import SectionDivider from "../SectionDivider"
+import { instrumentSerif } from "../fonts"
+
+type Status = "idle" | "loading" | "success" | "error"
+
+const AIHardwareSection = () => {
+  const [email, setEmail] = useState("")
+  const [status, setStatus] = useState<Status>("idle")
+  const [errorMessage, setErrorMessage] = useState("")
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    if (!email || status === "loading") return
+    setStatus("loading")
+    try {
+      const res = await fetch(`https://app.loops.so/api/newsletter-form/${LOOPS_FORM_ID}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: [
+          `email=${encodeURIComponent(email)}`,
+          `userGroup=${encodeURIComponent("Compass Waitlist")}`,
+          `mailingLists=${encodeURIComponent(LOOPS_MAILING_LIST_ID)}`,
+        ].join("&"),
+      })
+      if (res.status === 429) {
+        setStatus("error")
+        setErrorMessage("Too many attempts — please try again in a minute.")
+        return
+      }
+      const data = await res.json()
+      if (data.success) {
+        setStatus("success")
+      } else {
+        setStatus("error")
+        setErrorMessage(data.message || "Something went wrong — please try again.")
+      }
+    } catch {
+      setStatus("error")
+      setErrorMessage("Network error — please try again.")
+    }
+  }
+
+  return (
+    <section
+      id="ai-hardware"
+      className="scroll-mt-[-92px] 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] text-center md:pt-[40px]">
+        <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 />
+      {status === "success" ? (
+        <p className="text-[15px] text-[#5E5E5E]">Thanks — you're on the waitlist!</p>
+      ) : (
+        <div className="flex w-full flex-col items-center gap-[8px]">
+          <form
+            onSubmit={handleSubmit}
+            className="flex h-[50px] w-full max-w-[476px] items-center gap-[8px] rounded-[8px] border border-solid border-[#867B71] py-[6px] pl-[28px] pr-[6px]"
+          >
+            <input
+              type="email"
+              required
+              value={email}
+              onChange={e => setEmail(e.target.value)}
+              placeholder="Enter your email for waitlist..."
+              className="min-w-0 flex-1 bg-transparent text-[15px] text-black outline-none placeholder:text-[#8F8CA0]"
+            />
+            <button
+              type="submit"
+              disabled={status === "loading"}
+              className="flex shrink-0 items-center gap-[8px] rounded-[100px] px-[20px] py-[10px] text-[13px] font-bold text-black hover:bg-[#F4F3ED] disabled:opacity-50"
+            >
+              {status === "loading" ? "Sending..." : "Submit"}
+              <ArrowRightSmallIcon className="size-[12px]" />
+            </button>
+          </form>
+          {status === "error" && <p className="text-[13px] text-[#B3261E]">{errorMessage}</p>}
+        </div>
+      )}
+    </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-[-92px] 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]`}>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-[-92px] 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] text-center md:pt-[40px]">
+      <h2 className={`${instrumentSerif.className} max-w-full px-[16px] text-[40px] text-black sm:text-[48px] md:text-[60px]`}>
+        Compass <span className="italic text-[#C8B195]">API</span>
+      </h2>
+      <p className="max-w-[680px] px-[24px] text-[15px] text-[#959595]">Keys to AI models secured natively by Zero Knowledge proofs.</p>
+    </div>
+    <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