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