Add companies teaser, grain pricing cards, and a full-width hide-on-scroll nav.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: omarkhuddose

public/media/companies-portal.jpg

@@ -2,6 +2,7 @@ import { useEffect } from "react"
 import { Route, Routes, useLocation } from "react-router-dom"
 import { LandingReveal, OpeningProvider } from "./components/OpeningScreen"
 import { PageShell } from "./components/PageShell"
+import { CompaniesPage } from "./pages/CompaniesPage"
 import { DesignsPage } from "./pages/DesignsPage"
 import { DirectoryPage } from "./pages/DirectoryPage"
 import { HelpPage } from "./pages/HelpPage"
@@ -35,6 +36,7 @@ export default function App() {
         <Routes>
           <Route element={<PageShell />}>
             <Route path="/" element={<HomePage />} />
+            <Route path="/companies" element={<CompaniesPage />} />
             <Route path="/designs" element={<DesignsPage />} />
             <Route path="/directory" element={<DirectoryPage />} />
             <Route path="/help" element={<HelpPage />} />

src/App.tsx

@@ -0,0 +1,42 @@
+import { Link } from "react-router-dom"
+import { motion } from "framer-motion"
+import { fadeUp } from "../motion/variants"
+import { withBase } from "../lib/base"
+
+export function CompaniesTeaser() {
+  return (
+    <section className="bg-canvas-dim px-5 py-20 md:px-10 md:py-24">
+      <motion.div
+        initial="hidden"
+        whileInView="show"
+        viewport={{ once: true, amount: 0.35 }}
+        variants={fadeUp}
+        className="mx-auto max-w-[1440px]"
+      >
+        <div className="flex flex-col gap-8 md:flex-row md:items-end md:justify-between">
+          <div className="max-w-xl">
+            <h2 className="font-display text-[clamp(2.1rem,4.6vw,4.4rem)] leading-[0.95] tracking-[-0.045em] lowercase">
+              companies portal.
+            </h2>
+            <p className="mt-5 text-[15px] leading-relaxed text-ink-soft">
+              Issue branded cards, keep team profiles current, and send people to
+              your company — not a stack of paper.
+            </p>
+          </div>
+          <Link
+            to="/companies"
+            className="inline-flex min-h-10 shrink-0 items-center border border-ink/40 px-5 text-[11px] tracking-[0.14em] text-ink uppercase transition-colors hover:bg-ink/5 md:mb-1"
+          >
+            Open portal
+          </Link>
+        </div>
+
+        <img
+          src={withBase("/media/companies-portal.jpg")}
+          alt=""
+          className="mt-12 h-[min(52vh,420px)] w-full rounded-[2.75rem] object-cover md:mt-16 md:rounded-[3.5rem]"
+        />
+      </motion.div>
+    </section>
+  )
+}

src/components/CompaniesTeaser.tsx

@@ -93,7 +93,7 @@ export function ContactSection({ heading = "Let's talk" }: ContactSectionProps)
             </label>
             <button
               type="submit"
-              className="shine-hover mt-4 inline-flex min-h-12 w-fit items-center rounded-full bg-accent px-8 text-sm font-medium text-ink"
+              className="mt-4 inline-flex min-h-12 w-fit items-center rounded-full bg-ink px-8 text-sm font-medium text-white transition-opacity hover:opacity-85"
             >
               Send message
             </button>

src/components/ContactSection.tsx

@@ -21,6 +21,11 @@ export function Footer() {
                 Why Deets
               </Link>
             </li>
+            <li>
+              <Link className="hover:text-magenta" to="/companies">
+                Companies
+              </Link>
+            </li>
             <li>
               <Link className="hover:text-magenta" to="/designs">
                 Designs
@@ -31,6 +36,11 @@ export function Footer() {
                 Functions
               </Link>
             </li>
+            <li>
+              <Link className="hover:text-magenta" to="/#pricing">
+                Pricing
+              </Link>
+            </li>
             <li>
               <a className="hover:text-magenta" href={STORE_URL}>
                 Buy Now

src/components/Footer.tsx

@@ -0,0 +1,79 @@
+import { Link } from "react-router-dom"
+import { motion } from "framer-motion"
+import { pricingPlans } from "../data/site"
+import { fadeUp, stagger } from "../motion/variants"
+
+const ctaClass =
+  "mt-10 inline-flex min-h-10 w-fit items-center border border-white/50 px-5 text-[11px] tracking-[0.14em] text-white uppercase transition-colors hover:bg-white/10"
+
+export function PricingSection() {
+  return (
+    <section
+      id="pricing"
+      className="scroll-mt-24 bg-canvas px-5 py-20 md:px-10 md:py-28"
+    >
+      <motion.div
+        initial="hidden"
+        whileInView="show"
+        viewport={{ once: true, amount: 0.4 }}
+        variants={fadeUp}
+        className="mx-auto max-w-[1440px] text-center"
+      >
+        <h2 className="font-display text-[clamp(2.1rem,4.6vw,4.4rem)] leading-[0.95] tracking-[-0.045em] lowercase">
+          plans.
+        </h2>
+        <p className="mx-auto mt-5 max-w-md text-[15px] leading-relaxed text-ink-soft">
+          One card, a pair, a team, or the whole company.
+        </p>
+      </motion.div>
+
+      <motion.ul
+        initial="hidden"
+        whileInView="show"
+        viewport={{ once: true, amount: 0.2 }}
+        variants={stagger}
+        className="mx-auto mt-16 grid max-w-[1440px] grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4"
+      >
+        {pricingPlans.map((plan) => (
+          <motion.li
+            key={plan.id}
+            variants={fadeUp}
+            className="grain-panel grain-card flex flex-col rounded-[1.35rem] px-7 py-8 text-white"
+            style={{ background: plan.wash }}
+          >
+            <div className="relative z-10 flex flex-1 flex-col">
+              <p className="text-[13px] tracking-[0.18em] text-white/70 uppercase">
+                {plan.note}
+              </p>
+              <h3 className="mt-4 font-display text-[1.85rem] leading-none tracking-tight">
+                {plan.name}
+              </h3>
+              <p className="mt-6 font-display text-[2.4rem] leading-none tracking-[-0.04em]">
+                {plan.price}
+                {plan.unit ? (
+                  <span className="ml-1.5 font-sans text-sm tracking-wide text-white/70">
+                    {plan.unit}
+                  </span>
+                ) : null}
+              </p>
+              <ul className="mt-8 flex-1 space-y-2 text-[15px] leading-relaxed text-white/80">
+                {plan.features.map((item) => (
+                  <li key={item}>{item}</li>
+                ))}
+              </ul>
+              {plan.href.startsWith("/") ? (
+                <Link to={plan.href} className={ctaClass}>
+                  {plan.cta}
+                </Link>
+              ) : (
+                <a href={plan.href} className={ctaClass}>
+                  {plan.cta}
+                </a>
+              )}
+            </div>
+          </motion.li>
+        ))}
+      </motion.ul>
+    </section>
+  )
+}

src/components/PricingSection.tsx

@@ -1,24 +1,57 @@
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { Link, NavLink, useLocation } from "react-router-dom"
 import { navLinks, STORE_URL } from "../data/site"
 import { BrandLogo } from "./BrandLogo"
 
 export function SiteNav() {
-  const [compact, setCompact] = useState(false)
-  const [open, setOpen] = useState(false)
   const location = useLocation()
-  const overHero = location.pathname === "/" && !compact && !open
+  const [open, setOpen] = useState(false)
+  const [pastHero, setPastHero] = useState(location.pathname !== "/")
+  const [shown, setShown] = useState(true)
+  const lastY = useRef(0)
 
   useEffect(() => {
     setOpen(false)
+    setShown(true)
   }, [location.pathname, location.hash])
 
   useEffect(() => {
-    const onScroll = () => setCompact(window.scrollY > 24)
-    onScroll()
-    window.addEventListener("scroll", onScroll, { passive: true })
-    return () => window.removeEventListener("scroll", onScroll)
-  }, [])
+    if (location.pathname !== "/") {
+      setPastHero(true)
+      lastY.current = window.scrollY
+      return
+    }
+
+    const update = () => {
+      const y = window.scrollY
+      const delta = y - lastY.current
+      lastY.current = y
+      const past = y > window.innerHeight - 48
+      setPastHero(past)
+
+      if (open) {
+        setShown(true)
+        return
+      }
+      if (!past || y < 16) {
+        setShown(true)
+        return
+      }
+      if (delta > 4) setShown(false)
+      else if (delta < -4) setShown(true)
+    }
+
+    lastY.current = window.scrollY
+    update()
+    window.addEventListener("scroll", update, { passive: true })
+    window.addEventListener("resize", update)
+    return () => {
+      window.removeEventListener("scroll", update)
+      window.removeEventListener("resize", update)
+    }
+  }, [location.pathname, open])
+
+  const overHero = location.pathname === "/" && !pastHero && !open
 
   const linkClass = overHero
     ? "text-[13px] tracking-wide text-white/80 transition-colors hover:text-white"
@@ -30,11 +63,11 @@ export function SiteNav() {
 
   return (
     <header
-      className={`fixed inset-x-0 top-0 z-40 transition-[padding,background-color,backdrop-filter] duration-500 ${
-        compact || open
+      className={`fixed inset-x-0 top-0 z-40 transition-[transform,padding,background-color,backdrop-filter] duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] ${
+        pastHero || open
           ? "bg-white/80 py-3 backdrop-blur-md"
           : "bg-transparent py-6"
-      }`}
+      } ${shown ? "translate-y-0" : "-translate-y-full"}`}
     >
       <div className="mx-auto flex max-w-[1440px] items-center justify-between px-5 md:px-10">
         <Link to="/" className="flex items-center">

src/components/SiteNav.tsx

@@ -102,7 +102,7 @@ export function TemplateCarousel() {
           </p>
         </motion.div>
 
-        <div className="relative mt-12">
+        <div className="carousel-edge-fade relative mt-12">
           <div
             ref={scrollerRef}
             className="liquid-x cursor-grab overflow-x-auto overflow-y-hidden active:cursor-grabbing"
@@ -133,14 +133,6 @@ export function TemplateCarousel() {
               ))}
             </div>
           </div>
-          <div
-            className="pointer-events-none absolute inset-y-0 left-0 z-10 w-20 bg-gradient-to-r from-canvas-dim via-canvas-dim/80 to-transparent md:w-36"
-            aria-hidden
-          />
-          <div
-            className="pointer-events-none absolute inset-y-0 right-0 z-10 w-20 bg-gradient-to-l from-canvas-dim via-canvas-dim/80 to-transparent md:w-36"
-            aria-hidden
-          />
         </div>
 
         <div className="mt-10 px-5 md:px-10">

src/components/TemplateCarousel.tsx

@@ -126,4 +126,51 @@ export const directoryPeople = [
   },
 ]
 
+export const pricingPlans = [
+  {
+    id: "solo",
+    name: "Solo",
+    price: "149",
+    unit: "SAR",
+    note: "One card",
+    features: ["NFC and QR", "Your profile, your design", "No app required"],
+    cta: "Order Now",
+    href: STORE_URL,
+    wash: "linear-gradient(115deg, #161b26 0%, #3d5368 52%, #7d93a8 100%)",
+  },
+  {
+    id: "pair",
+    name: "Pair",
+    price: "269",
+    unit: "SAR",
+    note: "Two cards",
+    features: ["Share a look", "Two profiles", "One order"],
+    cta: "Order Now",
+    href: STORE_URL,
+    wash: "linear-gradient(115deg, #2a1810 0%, #8a4a28 48%, #d4b49a 100%)",
+  },
+  {
+    id: "team",
+    name: "Team",
+    price: "599",
+    unit: "SAR",
+    note: "Five cards",
+    features: ["Branded set", "Five profiles", "Ready for a small crew"],
+    cta: "Order Now",
+    href: STORE_URL,
+    wash: "linear-gradient(115deg, #121a14 0%, #3d5a42 52%, #8fa88c 100%)",
+  },
+  {
+    id: "company",
+    name: "Company",
+    price: "Custom",
+    unit: "",
+    note: "Portal and bulk",
+    features: ["Companies portal", "Issue and update cards", "Volume pricing"],
+    cta: "Open portal",
+    href: "/companies",
+    wash: "linear-gradient(115deg, #1a1a1a 0%, #4a4540 50%, #9a938c 100%)",
+  },
+] as const
+
 export { CONTACT_EMAIL, STORE_URL }

src/data/site.ts

@@ -65,6 +65,31 @@
   display: none;
 }
 
+.carousel-edge-fade {
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0%,
+    rgb(0 0 0 / 0.12) 3%,
+    rgb(0 0 0 / 0.45) 7%,
+    #000 14%,
+    #000 86%,
+    rgb(0 0 0 / 0.45) 93%,
+    rgb(0 0 0 / 0.12) 97%,
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to right,
+    transparent 0%,
+    rgb(0 0 0 / 0.12) 3%,
+    rgb(0 0 0 / 0.45) 7%,
+    #000 14%,
+    #000 86%,
+    rgb(0 0 0 / 0.45) 93%,
+    rgb(0 0 0 / 0.12) 97%,
+    transparent 100%
+  );
+}
+
 .shine-hover {
   position: relative;
   overflow: hidden;
@@ -116,6 +141,11 @@
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
 }
 
+.grain-card::after {
+  opacity: 0.72;
+  mix-blend-mode: overlay;
+}
+
 .foil {
   background:
     linear-gradient(