project-ebec718f

byRohandeep Singh

# UNICEN — Website Build Brief You're a senior frontend developer and designer who's shipped premium sites for creative studios and SaaS brands. Build a website for **UNICEN**, a short-form content agency — not a template, not a freelancer portfolio. Think Apple's restraint, Linear's precision, Framer's motion, filtered through a creative studio's eye. **Goal:** turn visitors into booked discovery calls. --- ## Brand **Name:** UNICEN **Tagline:** Short-Form Content, Engineered for Results. **What we do:** Help creators, coaches, educators and personal brands grow through short-form video built around their audience and business goals — not generic edits. **Positioning:** We're not a video editing agency. We're a creative growth partner. Every edit is built around the client's brand, audience, and what they're actually trying to achieve. **Who we're for:** Creators, coaches, educators, founders, personal brands, and businesses that publish consistently and treat content as an investment, not an expense. --- ## Design Direction Minimal. Dark. Confident. Lots of breathing room, oversized type, restrained motion that feels earned rather than decorative. Glassmorphism only where it actually helps (nav, floating cards) — not everywhere. Gradients used sparingly, as accents, not backgrounds. Nothing should read as a WordPress theme or a Dribbble-shot-turned-website. If a component looks like it came from a UI kit, redesign it. **Palette** - Background: `#050505` - Primary text: `#FFFFFF` - Secondary text: `#A1A1AA` - Accent: Electric Blue `#3B82F6` - Accent gradient: `#3B82F6 → #8B5CF6` - Cards: `#111111` - Borders: `rgba(255,255,255,0.08)` **Type** Space Grotesk (fallback: Satoshi). Bold headings, generous tracking, confident hierarchy. --- ## Navigation Logo · Home · Services · Work · Process · Pricing · FAQ · **Book Call** (button, visually distinct) Sticky. Transparent at the top, blurs and gains a subtle background as the user scrolls. --- ## Hero Full-screen. Silent looping showreel or animated background behind the copy — not distracting from it. **Headline:** Short-Form Content, Engineered for Results. **Subhead:** We help creators and businesses grow faster with short-form video built around their audience, their brand, and what they're actually trying to achieve. **Buttons:** Book Discovery Call · View Portfolio **Floating cards** (subtle parallax): Fast Turnaround · Premium Editing · Dedicated Creative Partner · Monthly Retainers --- ## Social Proof Animated counters, understated, not a slot-machine effect. - 100+ Videos Edited *(placeholder — swap for real number before launch)* - 48-Hour Turnaround - Custom Creative Strategy - Monthly Partnerships --- ## The Problem **Headline:** Your Content Deserves Better Than Generic Editing. Most creators end up babysitting freelancers instead of making content. The result: inconsistent videos, no recognizable style, weak retention, and no strategy behind any of it. UNICEN fixes that. --- ## Services Six cards, each with a hover state that feels alive (subtle lift, glow, or reveal — not a generic scale-up). 1. Short-Form Editing 2. Content Repurposing 3. Personal Brand Content 4. Motion Graphics 5. Creative Direction 6. Monthly Content Systems --- ## Why UNICEN Four cards: - Brand-First Editing - Strategy-First Content - A Dedicated Creative Partner - Consistent Monthly Delivery --- ## Portfolio Video gallery with real hover polish. Filterable by category: Coaches · Business · Fitness · Education · Podcast. Each project opens a modal structured as: **Problem → Solution → Outcome.** --- ## Process Horizontal timeline, six steps, each with a clean animated icon: Discovery → Strategy → Production → Review → Delivery → Growth --- ## Pricing One plan, positioned as a partnership, not a package. **Monthly Partnership** includes: - A dedicated editor - Unlimited revisions within scope - Premium editing - Motion graphics - Captions - Fast turnaround - Custom creative strategy **Pricing line:** Custom monthly retainers, starting from ₹8,000/month. **CTA:** Book Discovery Call --- ## Testimonials Carousel with video testimonial placeholders, client photos, and ratings. Should feel like proof, not decoration. --- ## FAQ Clean accordion, answer these: - How fast is delivery? - Can you match my existing editing style? - How many revisions do I get? - Who owns the final files? - How does onboarding work? --- ## Final CTA Big, simple, no clutter. **Headline:** Ready to Turn Content Into Growth? **Button:** Book Your Discovery Call --- ## Footer Logo · nav links · socials · contact email · copyright. Minimal — this is a closing note, not a sitemap. --- ## Motion Guidelines Motion should support the story, not perform for its own sake: - Scroll-triggered fades, slides, and scale-ins - Subtle mouse parallax on hero elements - Smooth, deliberate hover states (no jarring snaps) - A restrained animated gradient or two, not everywhere - A short, tasteful loading state on first visit If an animation doesn't make the page feel more premium, cut it. --- ## Tech Stack - Next.js + TypeScript - Tailwind CSS - Framer Motion (+ GSAP for anything Framer Motion handles awkwardly, like complex scroll-scrubbing) - Fully responsive - SEO-optimized (metadata, semantic HTML, OG tags) - Fast — optimize images/video, lazy-load below the fold - Accessible (keyboard nav, contrast, alt text, focus states) - Dark mode by default (this isn't a toggle feature, it's the brand) --- ## Booking Flow "Book Call" opens a form, not a redirect straight to Calendly. Fields: - Name - Email - Instagram - Website - What do you create? - How many videos per month? - Biggest content challenge right now? - Monthly budget On submit → redirect to Calendly. --- ## The Bar Someone landing on this site for the first time should think: *these aren't just editors — they get branding, marketing, and strategy.* The site needs to feel like it could justify a ₹25k–₹100k/month retainer without anyone blinking. That's the design bar: every section earns its place, nothing feels stock, and the whole thing reads like it was built by people who take the craft seriously.

Home
Home

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 5

System Requirements Document for project-ebec718f

Introduction

This document outlines the system requirements for project-ebec718f, a website build for UNICEN, a short-form content agency. The goal is to create a premium, custom-built website that aligns with UNICEN's positioning as a creative growth partner, ensuring the site feels like a high-value investment rather than a generic template.

System Overview

The project aims to develop a website that transforms visitors into booked discovery calls for UNICEN. The website will reflect UNICEN's brand identity, emphasizing a premium, custom-built aesthetic. It will cater to creators, coaches, educators, and personal brands, offering short-form video content tailored to their audience and business goals.

Page 2 of 5

Functional Requirements as Story Points

  • As a visitor, I should be able to book a discovery call to learn more about UNICEN's services.
  • As a visitor, I should see a full-screen hero section with a silent looping showreel or animated background.
  • As a visitor, I should experience a seamless navigation experience with a sticky, transparent navigation bar that gains a subtle background on scroll.
  • As a visitor, I should be able to view social proof through animated counters.
  • As a visitor, I should understand the problem UNICEN solves through a dedicated section.
  • As a visitor, I should be able to explore UNICEN's services through interactive cards with hover states.
  • As a visitor, I should be able to view a portfolio of past work, filterable by category.
  • As a visitor, I should be able to understand UNICEN's process through a horizontal timeline with animated icons.
  • As a visitor, I should be able to view pricing information and understand the value of a monthly partnership.
  • As a visitor, I should be able to read testimonials in a carousel format.
  • As a visitor, I should be able to find answers to common questions in a clean accordion FAQ section.
  • As a visitor, I should be able to book a discovery call through a simple, uncluttered final CTA.
  • As a visitor, I should experience smooth, deliberate motion and animations that enhance the premium feel of the site.

User Personas

  • Visitor: Individuals or businesses interested in UNICEN's services, including creators, coaches, educators, and personal brands.
  • Admin: UNICEN team members responsible for managing website content and inquiries.

Core User Flows

  • Visitor lands on the homepage -> views hero section -> explores services -> views portfolio -> reads testimonials -> checks pricing -> books a discovery call.
  • Visitor navigates to the FAQ section -> finds answers to common questions -> books a discovery call.
  • Admin logs into the backend -> updates content -> reviews inquiries -> manages bookings.
Page 3 of 5

Visuals Colors and Theme

  • primary: #3B82F6 (Electric Blue)
  • primary_light: #8B5CF6 (Lighter Electric Blue)
  • secondary: #A1A1AA (Muted Gray)
  • accent: #F59E0B (Amber)
  • highlight: #F97316 (Orange)
  • bg: #050505 (Dark Background)
  • surface: rgba(17, 17, 17, 0.8) (Card Background)
  • text: #FFFFFF (White)
  • text_muted: #A1A1AA (Muted Gray)
  • border: rgba(255, 255, 255, 0.08) (Subtle White)

Signature Design Concept

Interactive Showreel Experience

The homepage will feature an interactive showreel experience where visitors can hover over different segments of a looping video to reveal additional information about UNICEN's services. Each segment will dynamically highlight and display a brief description when hovered over, creating an engaging and informative experience. This will be implemented using motion/react for smooth transitions and hover effects.

Page 4 of 5

Landing Hero Motion Brief

The hero section will feature a full-screen looping video that subtly shifts focus between different aspects of UNICEN's services. As the video plays, key phrases and service highlights will animate in and out, providing a dynamic introduction to the brand. The animation will be crafted using GSAP for precise control over timing and transitions, ensuring a polished and premium feel.

Interaction Model & Motion Direction

  • Intended Interaction Model: Animated
  • The landing page will feature moderate scroll-triggered reveals, hover transitions, and spring physics on interactive elements.
  • Each section will have a distinctive core mechanic, such as morphing SVGs or kinetic typography, to maintain engagement and interest.

Non-Functional Requirements

  • The website must be fully responsive and accessible, with a focus on keyboard navigation, contrast, alt text, and focus states.
  • It should be optimized for fast loading times, with lazy-loading for images and videos below the fold.
  • The site should be SEO-optimized, including metadata, semantic HTML, and OG tags.
Page 5 of 5

Tech Stack

  • Frontend: Next.js + TypeScript
  • Styling: Tailwind CSS
  • Animation: Framer Motion, GSAP
  • Responsive Design: Fully responsive
  • SEO: Optimized for search engines
  • Accessibility: Ensured through best practices

Assumptions and Constraints

  • The website will primarily target users in India, with pricing displayed in INR.
  • The design will adhere to UNICEN's brand guidelines, emphasizing a premium and custom-built aesthetic.
  • The site will not include a dark mode toggle, as it defaults to a dark theme.

Glossary

  • CTA: Call to Action
  • SEO: Search Engine Optimization
  • GSAP: GreenSock Animation Platform
  • SVG: Scalable Vector Graphics

This document outlines the requirements and design direction for project-ebec718f, ensuring a premium, custom-built website that aligns with UNICEN's brand and business goals.

Home design preview
Login: Sign In
Dashboard: View Overview
Dashboard: Update Content
Dashboard: Review Inquiries
Dashboard: Respond Inquiry
Dashboard: Manage Bookings
Home design preview
Login: Sign In
Dashboard: View Overview
Dashboard: Update Content
Dashboard: Review Inquiries
Dashboard: Respond Inquiry
Dashboard: Manage Bookings