Skip to main content

8K Capital Website

Modern, high-performance website for 8K Capital featuring immersive parallax effects and responsive design.

Status​

StatusActive
TypeClient Work
Client8K Capital

Overview​

A premium institutional real estate website with:

  • Immersive parallax scrolling effects
  • Dark/light theme with system preference detection
  • Fully responsive mobile navigation
  • WCAG 2.1 Level AA accessibility
  • Lighthouse 95+ scores

Tech Stack​

  • Framework: Next.js 16 (App Router)
  • Language: TypeScript
  • Styling: Tailwind CSS v4
  • Animations: Framer Motion
  • Icons: Lucide React
  • Hosting: Vercel (recommended)

Setup & Development​

git clone <repository-url>
cd 8k-capital-website
npm install

cp .env.example .env.local
# Add RESEND_API_KEY and RESEND_TO_EMAIL for contact form

npm run dev  # Starts with Turbopack

Open http://localhost:3000

Scripts​

npm run dev    # Development server
npm run build  # Production build
npm run start  # Production server
npm run lint   # ESLint

Design System​

Colors:

  • Accent: Biscayne Aqua (#0CD3BF)
  • Light/dark themes

Typography:

  • Headings: Space Grotesk
  • Body: Inter
  • Code: Geist Mono

Breakpoints: Mobile-first (640px, 768px, 1024px, 1280px)

Architecture​

8k-capital-website/
├── app/                    # Next.js App Router
│   ├── layout.tsx         # Root layout with metadata
│   ├── page.tsx           # Home page
│   ├── globals.css        # Design system
│   ├── api/contact/       # Contact form API
│   ├── robots.ts          # SEO
│   └── sitemap.ts         # SEO
├── components/
│   ├── layout/            # Nav, Footer
│   ├── sections/          # Hero, Services, etc.
│   ├── ui/                # Reusable components
│   └── motion/            # Animation components
└── lib/
    ├── constants/         # Content & version
    └── hooks/             # Custom hooks

Contact Form​

Uses Resend for email:

RESEND_API_KEY=re_your_api_key
RESEND_TO_EMAIL=your-email@example.com

SEO & Performance​

  • Server-side rendering
  • JSON-LD structured data
  • Sitemap and robots.txt
  • Image optimization (AVIF/WebP)
  • Code splitting and lazy loading
  • Reduced motion support

Documentation​

Comprehensive architecture docs in /docs/:

  • Architecture Overview
  • Component Architecture
  • Data Flow & State Management
  • Investor Portal Architecture
  • Deployment & Infrastructure

Handoff Notes​

Deployment

Vercel recommended. Automatic edge caching, image optimization, HTTPS, global CDN.

Security Headers

CSP, X-Frame-Options, HSTS configured in next.config.ts