Coldcast — Landing Site

A production-quality marketing landing page for Coldcast, a tool that exports and enriches leads from LinkedIn Sales Navigator. Single-page React + Vite app, dark developer-SaaS aesthetic (Linear / Vercel / Stripe vibe).

Stack

• React 18 + Vite
• Tailwind CSS (custom dark-navy design system)
• framer-motion — scroll/entrance animations (respects prefers-reduced-motion)
• lucide-react — icons
• @fontsource/inter — self-hosted Inter font

Getting started

npm install
npm run dev      # start the dev server (http://localhost:5173)
npm run build    # production build → dist/
npm run preview  # preview the production build locally

Project structure

coldcast/
├── index.html              # SEO meta tags, favicon link, root mount
├── public/
│   └── favicon.svg         # the Coldcast logo swirl (also the favicon)
├── src/
│   ├── main.jsx            # React entry
│   ├── App.jsx             # page composition (all sections in order)
│   ├── index.css           # Tailwind layers, fonts, base styles, reduced-motion
│   ├── lib/
│   │   └── constants.js    # APP_URL, nav links, sample lead data
│   └── components/
│       ├── Logo.jsx            # gradient tile + inline SVG swirl
│       ├── Wordmark.jsx        # logo + "Coldcast" + tagline
│       ├── Button.jsx          # primary / ghost / light variants
│       ├── Reveal.jsx          # scroll-reveal motion wrapper
│       ├── SectionHeading.jsx  # eyebrow pill + heading + subtitle
│       ├── Navbar.jsx          # sticky nav, scroll state, mobile menu
│       ├── Hero.jsx            # headline, CTAs, trust row, dashboard mock
│       ├── DashboardMock.jsx   # CSS/div mock of the Coldcast app
│       ├── TrustBar.jsx        # social proof + enrichment-source badges
│       ├── Features.jsx        # 6 glassmorphic feature cards
│       ├── HowItWorks.jsx      # 4 numbered steps
│       ├── Safety.jsx          # prominent account-safety section
│       ├── OutputPreview.jsx   # styled example data table
│       ├── Pricing.jsx         # 3 plans, middle highlighted
│       ├── FAQ.jsx             # accessible accordion
│       ├── FinalCTA.jsx        # full-width gradient CTA band
│       └── Footer.jsx          # logo, link columns, socials, copyright
├── tailwind.config.js      # design tokens (colors, gradients, shadows)
├── postcss.config.js
└── vite.config.js

Design tokens

Defined in tailwind.config.js:

Token	Value
bg	#0a1124 (page background)
panel	#101a37 (elevated panel)
panel2	#16223f (elevated panel, lighter)
ink	#eaf0fb (text)
muted	#aeb9d6 (muted text)
brand.light	#4f7cf5 (primary gradient start)
brand.DEFAULT	#3257d6 (primary gradient end)
accent	#22d3ee (cyan accent)
hairline	rgba(255,255,255,.08) (borders)

Placeholders to replace before launch

Search the codebase for these:

• [APP_URL] — src/lib/constants.js → APP_URL (and LOGIN_URL). Every "Get started" / "Log in" button points here. Currently https://app.coldcast.io.
• [PLACEHOLDER_PRICE] — src/components/Pricing.jsx. Three plan prices.
• Social links — src/components/Footer.jsx (SOCIALS) plus the About / Contact / Privacy / Terms links (currently #).
• og:image — index.html references https://coldcast.io/og-image.png. Drop a real 1200×630 share image at public/og-image.png (and update the URL if needed).
• [HERO_SCREENSHOT] — the hero ships with a built-from-scratch CSS dashboard mock (DashboardMock.jsx). Swap it for a real screenshot in Hero.jsx if you prefer.

Accessibility

• Semantic landmarks (header / main / footer / nav / section)
• "Skip to content" link, visible focus rings, aria-expanded on the nav + FAQ
• alt / aria-label on icon-only controls and decorative elements marked aria-hidden
• Honors prefers-reduced-motion (disables scroll animation and smooth scrolling)