Culture First Content Studio
A production-first content studio that turns brands into culture in seconds.
View Live Site • Features • Tech Stack • Getting Started • Project Structure
RANDS (Rizz & Slay) is a modern, brutalist-inspired marketing website for a content studio specializing in short-form video production, TikTok marketing, and viral campaigns. The site showcases a bold design aesthetic with interactive 3D elements, smooth animations, and a focus on Gen Z/millennial audiences.
- Brutalist Design System — Bold typography, thick borders, hard shadows, and high-contrast color palette
- Custom Color Palette — Toxic Lime (#CCFF00), Hot Magenta (#FF00FF), Warning Orange (#FF6600)
- Responsive Design — Fully responsive across all device sizes
- Dark Mode Support — Automatic dark mode based on system preferences
- Custom Typography — Inter (body) + Oswald (display) font pairing
- 3D Hero Scene — Interactive Three.js scene with liquid metal sphere, orbital rings, and particle effects
- Smooth Scrolling — Lenis-powered smooth scroll experience
- GSAP Animations — Scroll-triggered animations and kinetic typography
- Framer Motion — Page transitions and micro-interactions
- Video Player — Custom video player with play/pause and mute controls
- Homepage — Hero, social proof, services, work grid, testimonials, and CTA sections
- Brief Page — Multi-step form wizard for project submissions
- 404 Page — Custom branded error page with personality
- SEO Optimized — Comprehensive meta tags, Open Graph, Twitter Cards, robots.txt, and sitemap.xml
- Google Analytics — Integrated tracking with GA4
- Form Validation — Zod schema validation with React Hook Form
- Dynamic Imports — Code splitting for optimal performance
- Image Optimization — Next.js Image component with responsive sizing
| Category | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript 5 |
| Styling | Tailwind CSS 4 |
| 3D Graphics | Three.js + React Three Fiber + Drei |
| Animation | GSAP + Framer Motion |
| Smooth Scroll | Lenis |
| Forms | React Hook Form + Zod |
| Icons | Lucide React |
| UI | React 19 |
| Linting | ESLint 9 |
rands-static-site/
├── app/ # Next.js App Router
│ ├── layout.tsx # Root layout with fonts, metadata, and providers
│ ├── page.tsx # Homepage
│ ├── not-found.tsx # Custom 404 page
│ ├── globals.css # Global styles and Tailwind theme
│ ├── robots.ts # SEO robots.txt configuration
│ ├── sitemap.ts # Dynamic sitemap generation
│ └── brief/
│ └── page.tsx # Brief submission page
│
├── components/
│ ├── GoogleAnalytics.tsx # GA4 integration
│ ├── brief/
│ │ └── BriefForm.tsx # Multi-step form wizard
│ ├── home/
│ │ ├── Hero.tsx # Hero section with 3D scene
│ │ ├── Scene.tsx # Three.js 3D scene
│ │ ├── SocialProof.tsx # Client marquee
│ │ ├── WhatWeDo.tsx # Services overview
│ │ ├── FeaturedReel.tsx # Video showcase
│ │ ├── WorkGrid.tsx # Portfolio grid
│ │ ├── ServicesCheatsheet.tsx # Services breakdown
│ │ ├── ProcessStrip.tsx # Process steps
│ │ └── Testimonials.tsx # Client testimonials carousel
│ ├── layout/
│ │ ├── Header.tsx # Navigation header
│ │ └── Footer.tsx # Site footer
│ └── ui/
│ ├── Button.tsx # Button component with variants
│ └── Section.tsx # Section wrapper component
│
├── utils/
│ ├── cn.ts # Class name utility (clsx + tailwind-merge)
│ └── lenis.ts # Lenis smooth scroll export
│
├── public/
│ ├── images/
│ │ └── logo.png # Brand logo
│ └── videos/
│ └── new.mp4 # Featured reel video
│
├── eslint.config.mjs # ESLint configuration
├── next.config.ts # Next.js configuration
├── postcss.config.mjs # PostCSS configuration
├── tailwind.config.ts # Tailwind CSS configuration (if applicable)
├── tsconfig.json # TypeScript configuration
└── package.json # Dependencies and scripts
- Node.js 18.17 or later
- npm, yarn, pnpm, or bun
-
Clone the repository
git clone https://github.com/codezelat/rands-static-site.git cd rands-static-site -
Install dependencies
npm install # or yarn install # or pnpm install # or bun install
-
Run the development server
npm run dev # or yarn dev # or pnpm dev # or bun dev
-
Open your browser
Navigate to http://localhost:3000
| Command | Description |
|---|---|
npm run dev |
Start development server with hot reload |
npm run build |
Build production-ready application |
npm run start |
Start production server |
npm run lint |
Run ESLint for code quality |
| Color | Hex | Usage |
|---|---|---|
| Toxic Lime | #CCFF00 |
Primary accent, CTAs, highlights |
| Hot Magenta | #FF00FF |
Secondary accent, hover states |
| Warning Orange | #FF6600 |
Tertiary accent, alerts |
| Off White | #F5F5F5 |
Light backgrounds |
| Soft Grey | #D4D4D4 |
Muted text, borders |
| Carbon Black | #111111 |
Dark backgrounds, text |
- Display Font: Oswald — Bold, uppercase headlines
- Body Font: Inter — Clean, readable body text
.border-thick /* 3px solid border */
.border-thick-top /* Top border only */
.border-thick-bottom /* Bottom border only */
.box-shadow-hard /* 6px hard shadow offset */
.text-display /* Display font with uppercase */Copy .env.example to .env.local and fill in values:
# Analytics (optional - already configured)
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
# Site URL
NEXT_PUBLIC_SITE_URL=https://rands.lk
# Cloudflare Turnstile (required for contact + brief forms)
NEXT_PUBLIC_TURNSTILE_SITE_KEY=1x00000000000000000000AA
TURNSTILE_SECRET_KEY=1x0000000000000000000000000000000AA
# Resend email config (required for contact + brief form submissions)
RESEND_API_KEY=re_REPLACE_ME
RESEND_FROM_EMAIL=your-verified-sender@example.com
RESEND_FROM_NAME=RANDS Website
# Optional shared fallback recipient
RESEND_TO_EMAIL=you@email.com
Both /api/contact and /api/brief send through the same Resend API key.
If runtime logs report an authentication error, check RESEND_API_KEY in
Vercel's Production environment. Use an active key with email sending access. Redeploy
after changing a Vercel environment variable so the running functions receive
the new value. Never commit an API key or paste it into logs.
The sender domain must be verified in Resend. Each form also needs its recipient
(RESEND_CONTACT_TO_EMAIL or RESEND_BRIEF_TO_EMAIL), or the shared
RESEND_TO_EMAIL fallback. A successful Turnstile challenge alone does not prove
email delivery; check the API response and Resend delivery logs.
External image domains are configured in next.config.ts:
images: {
remotePatterns: [
{
protocol: "https",
hostname: "images.unsplash.com",
pathname: "/**",
},
],
}- Hero: Animated headline with interactive 3D scene
- Social Proof: Infinite marquee of client logos
- What We Do: Service cards with hover effects
- Featured Reel: Video player with custom controls
- Work Grid: Portfolio showcase with image overlays
- Services Cheatsheet: Quick service breakdown
- Process Strip: 4-step process visualization
- Testimonials: Horizontal scroll testimonial cards
- Footer: CTA, contact details, navigation, and social links
- Contact Modal: Global popup contact form with Turnstile verification
- Multi-step Form: 3-step wizard for project submissions
- Form Validation: Real-time validation with helpful error messages
- Progress Indicator: Visual progress bar
- Success State: Confirmation message on submission
- Custom Design: Branded error page with personality
- Clear CTA: Easy navigation back to homepage
The site includes comprehensive SEO configuration:
- Meta Tags: Title, description, keywords
- Open Graph: Social sharing previews
- Twitter Cards: Twitter-specific meta tags
- Robots.txt: Search engine crawling rules
- Sitemap.xml: Dynamic sitemap generation
- Structured Data Ready: Easy to extend with JSON-LD
Google Analytics 4 is integrated via the GoogleAnalytics component:
<GoogleAnalytics /> // Loads gtag.js with configured tracking ID- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js — The React framework for production
- Tailwind CSS — Utility-first CSS framework
- React Three Fiber — React renderer for Three.js
- GSAP — Professional animation library
- Framer Motion — Production-ready motion library
- Lenis — Smooth scroll library
- Lucide — Beautiful & consistent icons
Developed with ❤️ by Codezela Technologies