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
# Brevo email config (required for contact + brief form submissions)
BREVO_API_KEY=xkeysib-REPLACE_ME
BREVO_FROM_NAME=RANDS Website
# Optional shared fallback recipient
BREVO_TO_EMAIL=you@email.com
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