bright-landing
Eduardo HerreraBuild a landing page for Taller Citrino - a marketing corporative and corporative events agency. A. Home (The Cover) Hero: High-quality looping video. A quick montage of a successful event (lights, people interacting, toasts) blended with digital graphic design. Impactful text: "We transform corporate milestones into memorable experiences." (Large, centered serif font). B. Manifesto (Who We Are) The Approach: Don't talk about years of experience, talk about your philosophy. Visual: A black and white team photo with a cinematic grain, very editorial. Differentiator: "At Taller Citrino, we don't just execute events; we design your brand's narrative in the physical and digital worlds." C. Solutions (What We Do) Here we apply Vivre's design. Instead of a bulleted list, use large cards with background images: Brand Storytelling: Content strategy and marketing. Corporate Experience: Event production, launches, and trade shows. Digital Engagement: Campaigns and social media presence for events. D. Portfolio (Our Work) Layout: Asymmetrical grid (some photos larger than others). Content: Each project must have a brief case study: The Challenge / The Solution / The Result. Effect: When hovering, the image should smoothly zoom in or change color, mimicking the fluidity of your references. E. Let's Connect (Contact) Location: "From Santiago, for all of Chile." Form: Only 3 fields (Name, Company, What are we planning together?). Floating button: A stylish WhatsApp icon in the bottom corner, just the logo in thin lines (outline). Use simulated text for the content of all site until we have it developed. Used the Taller Citrino logo attached
Comments (0)
Sign in to leave a comment
System Requirements
bright-landing
Introduction
The "bright-landing" project is focused on creating a captivating landing page for Taller Citrino, a marketing and corporate events agency based in Santiago, Chile. The aim is to transform corporate milestones into memorable experiences through a visually stunning and interactive web presence.
System Overview
The landing page for Taller Citrino will serve as a digital gateway to showcase the agency's philosophy, services, and portfolio. It will leverage high-quality visuals and interactive elements to engage visitors and convey the brand's narrative effectively. The design will incorporate a premium color palette and typography to reflect the agency's high-end standards.
Functional Requirements
- As a Visitor, I should see a high-quality looping video montage on the homepage to capture the essence of successful events.
- As a Visitor, I should read impactful text that communicates Taller Citrino's mission in a large, centered serif font.
- As a Visitor, I should view a black and white team photo with cinematic grain in the "Who We Are" section.
- As a Visitor, I should explore services through large cards with background images in the "What We Do" section.
- As a Visitor, I should interact with an asymmetrical grid layout in the "Our Work" section, with hover effects on images.
- As a Visitor, I should easily contact Taller Citrino through a simple form with three fields and a floating WhatsApp icon.
User Personas
- Visitor: Individuals or companies interested in hiring Taller Citrino for marketing and corporate events.
- Admin: Taller Citrino team members responsible for updating content and managing inquiries.
Visuals Colors and Theme
- primary: #FFFFFF (Pure White)
- primary_light: #F9F9F9 (Off-white)
- secondary: #1A1A1A (Soft Black)
- accent: #C5A059 (Champagne/Matte Gold)
- highlight: #C5A059 (Champagne/Matte Gold for hover states)
- bg: #FFFFFF (Pure White)
- surface: rgba(255, 255, 255, 0.9)
- text: #1A1A1A (Soft Black)
- text_muted: #4D4D4D (Dark Gray)
- border: rgba(197, 160, 89, 0.2)
Signature Design Concept
The homepage will feature an interactive "Event Montage" experience using @react-three/fiber and gsap. Visitors will be greeted with a 3D looping video montage of a successful event, seamlessly blending real footage with digital graphic design elements. As users scroll, the montage will dynamically transition between scenes, creating a narrative journey through Taller Citrino's capabilities. Hovering over elements will trigger subtle gold highlights, enhancing the premium feel. The custom cursor will transform into a small gold ring, adding a touch of exclusivity to interactions.
Interaction Model & Motion Direction
The landing page will utilize a "parallax" interaction model to create a layered depth effect. As users scroll, different elements will move at varying speeds, providing a visually rich storytelling experience. The homepage will feature scroll-triggered reveals and hover transitions, with spring physics applied to interactive elements for a polished finish. Internal pages will maintain a "static" interaction model for clarity and ease of navigation.
Non-Functional Requirements
- The website must load within 3 seconds on standard broadband connections.
- The design should be responsive and accessible across all devices and screen sizes.
- The site must adhere to WCAG 2.1 AA accessibility standards.
Tech Stack
- Frontend: React for Web
- Backend: FastAPI
- Database: MySQL or MariaDB, using Alembic for migrations
- Local Orchestration: Docker, docker-compose
- Server-side Orchestration: Kubernetes
Assumptions and Constraints
- The website will primarily target users in Chile, considering local preferences and cultural nuances.
- The design must align with Taller Citrino's existing branding and logo aesthetics.
- Content will initially use simulated text until final content is developed.
Glossary
- Parallax: A scrolling technique where background images move slower than foreground images, creating an illusion of depth.
- Spring Physics: Animation technique that mimics the motion of a spring, providing a natural and fluid feel to interactions.
- WCAG: Web Content Accessibility Guidelines, a set of recommendations for making web content more accessible.
This document outlines the requirements and design direction for the bright-landing project, ensuring a cohesive and engaging digital presence for Taller Citrino.
Transforming Corporate Milestones
Into Memorable Experiences
Taller Citrino — Santiago, Chile
Wetransformcorporatemilestonesintounforgettableexperiencesthatresonatebeyondthemoment.
At Taller Citrino, we believe every corporate gathering holds the power to inspire. Our team in Santiago crafts bespoke event narratives that weave strategy with emotion — turning boardrooms into stages and milestones into memories.
Where Vision Meets Craftsmanship
We believe that every corporate event is a canvas — a fleeting moment where brand identity, human connection, and creative ambition converge. At Taller Citrino, we don't simply organize events. We architect experiences that linger in memory long after the last guest departs.
Our approach is rooted in a deep understanding of narrative. Each activation, each launch, each celebration is a story waiting to be told — with precision, emotion, and artistry woven into every detail.
Tailored Solutions for Every Vision
From narrative strategy to immersive events, we shape experiences that elevate brands and leave lasting impressions.
Brand Storytelling
Craft compelling narratives that transform your corporate identity into an emotional journey your audience connects with.
Explore→
Corporate Experience
Design immersive events that turn corporate milestones into unforgettable moments for your team and stakeholders.
Explore→
Digital Engagement
Build dynamic digital campaigns and interactive experiences that amplify your brand reach across every touchpoint.
Explore→Crafting Unforgettable Moments
A curated selection of corporate events, brand activations, and immersive experiences that transformed milestones into memories.
No comments yet. Be the first!