tidal-homepage
TomásThink of a design for a homepage for "NM Odontologia", Sections: Trust Hero The single most important page on the site. Must immediately signal "premium, human, and pain-free" to a cold visitor arriving from Google or Instagram. The 5.0 rating and patient language ("no pain," "explained everything") are the anchor. One primary CTA to book via WhatsApp. The Fear Neutralizer Research shows dental anxiety is explicitly mentioned in reviews. Before presenting any service, this section acknowledges the fear and reframes the clinic as the antidote — through real patient language, not clinical claims. This is the conversion unlock that most competitor sites skip entirely. Proof of Results Real before/after cases are the clinic's strongest asset. This section makes that proof visible and visceral — not as a gallery, but as transformation evidence tied to specific treatments. Primes visitors for service exploration. Core Services Overview A structured entry point into the 8 services. Not a menu — a decision tree that helps the visitor self-identify their need and routes them to the right page. High-value services (Implants, Aligners) get priority positioning. The Technology Differentiator The 3D scanner is the single hardest-to-replicate differentiator in the Recoleta competitive field. This section plants that flag before competitors are considered. Converts "interesting" to "I want that." Social Proof Wall 5.0 on Google Maps across 100+ reviews is rare and credible. This section makes that social proof unavoidable — direct quotes that mirror the exact vocabulary patients already use ("explained clearly," "modern equipment," "great with kids"). Dual Location Signal Recoleta and Pilar patients have different needs and distances. This section addresses both audiences, confirms accessibility, and closes the home page with a friction-reduced path to contact. Before making any code, give me interesting interactive designs approaches for this website and let me choose first, design must be mobile-first.
Comments (0)
Sign in to leave a comment
Project Tasks21
Implement Navbar for Homepage
As a frontend developer, implement the Navbar section for the Homepage. Build the animated navigation bar using framer-motion with useScroll/useTransform for scroll-based opacity and blur effects. Implement AnimatedLogo component with SVG path animations (pathLength 0→1 with staggered delays for shield, tooth, and sparkle elements). Build MagneticWrap component using useMotionValue/useSpring (stiffness:200, damping:18) for cursor-following magnetic effect. Render NAV_ITEMS array (Testimonials, Services, Technology, Reviews, Locations) as anchor links. Handle mobile hamburger menu state with useState. Note: This Navbar component may already exist from a previous page — reuse if available.
Testimonials API Endpoint
Create FastAPI endpoints for patient testimonials data. Implement GET /api/testimonials to return list of testimonials with rating, quote, patient name, treatment, date, and avatar URL. Include filtering by rating and pagination. This supports TrustTestimonialCarousel and SocialProofReviewCarousel sections. Database model: Testimonial (id, patient_name, quote, back_quote, anxiety_quote, rating, treatment, date, avatar_url, location_key, created_at).
Reviews API Endpoint
Create FastAPI endpoints for patient reviews data. Implement GET /api/reviews to return reviews with name, date, text, tags, and star rating. Support GET /api/reviews/phrases to return word-cloud phrase data with associated review indices and frequency counts. Database model: Review (id, patient_name, date, text, rating, tags JSON, location_key, created_at).
Patient Stories API Endpoint
Create FastAPI endpoints for fear-neutralizer patient stories. Implement GET /api/stories to return stories with patient name, fear category, snippet, full story, timeline phases (fear/treatment/relief), video thumbnail URL, and outcome badge. Database model: PatientStory (id, patient_name, fear_category, snippet, full_story, timeline JSON, video_thumb_url, outcome, created_at).
Transformations API Endpoint
Create FastAPI endpoints for before/after treatment transformation data. Implement GET /api/transformations to return list of transformations with treatment name, before image URL, after image URL, and description. Database model: Transformation (id, treatment, before_img_url, after_img_url, description, created_at). Supports ProofOfResultsFlip section.
Services API Endpoint
Create FastAPI endpoints for dental services decision tree data. Implement GET /api/services to return list of services with id, label, brief, icon name, sub-services list (each with name, description, highlight flag). Database model: Service (id, label, brief, icon, is_high_value, created_at) and SubService (id, service_id FK, name, description, is_highlight, cta_url). Supports CoreServicesDecisionTree section.
Locations API Endpoint
Create FastAPI endpoints for clinic location data. Implement GET /api/locations to return both clinic locations (Recoleta and Pilar) with name, area, address, phone, hours, distance, map coordinates, marker position, and services list. Database model: Location (id, key, name, area, address, phone, hours, distance_label, map_offset JSON, map_scale, marker_pos JSON, created_at) and LocationService (id, location_id FK, service_name). Supports DualLocationToggleMap section.
WhatsApp Booking API
Create FastAPI endpoint to handle WhatsApp booking intent tracking. Implement POST /api/bookings/whatsapp-click to log visitor intent (timestamp, referrer section, location preference). This enables analytics on which sections drive the most booking clicks. Model: WhatsAppClick (id, section, location_key, user_agent, ip_hash, created_at). Also expose GET /api/bookings/whatsapp-url to return the configured WhatsApp link with pre-filled message per location.
Database Migrations Setup
Set up Alembic for database schema migrations with MySQL/MariaDB. Create initial migration files for all data models: Testimonial, Review, PatientStory, Transformation, Service, SubService, Location, LocationService, WhatsAppClick. Configure alembic.ini and env.py to use the FastAPI app's database URL from environment variables. Include seed data scripts for all homepage content (realistic NM Odontologia data matching the SRD). Run migrations in docker-compose entrypoint.
CORS and API Middleware Setup
Configure FastAPI CORS middleware to allow requests from the React frontend origin. Set up request logging middleware, error handling middleware with structured JSON error responses, and rate limiting middleware using slowapi. Add health check endpoint GET /api/health. Configure environment-based CORS origins (development vs production). Add API versioning prefix /api/v1. This is a cross-cutting concern required by all frontend sections making API calls.
Implement HomepageHero for Homepage
As a frontend developer, implement the HomepageHero section for the Homepage. Build a React Three Fiber Canvas with a ParticleBurst system using 120 particles (PARTICLE_COUNT) in BURST_COLORS (#E94E77, #F2A541, #FFD700, #3A5F7F). Implement useFrame animation loop updating BufferGeometry position/size attributes with physics-based velocity and gravity (0.5 * 2.0 * t²) and fade-out using Math.pow(progress, 0.6). Use useMemo to generate particle positions, velocities, colors, and sizes on burst trigger. Integrate framer-motion useScroll/useTransform for parallax effects and useInView for entrance animations. Manage burst lifecycle with onBurstComplete callback. Import from @react-three/fiber and three.js.
Implement TrustTestimonialCarousel for Homepage
As a frontend developer, implement the TrustTestimonialCarousel section for the Homepage. Render 5 TESTIMONIALS with flip card behavior showing front (quote with anxietyQuote highlight) and back (backQuote) using AnimatePresence. Build AnimatedStars component rendering 5 Star (lucide-react) icons with staggered entrance animation and configurable delay. Implement auto-rotation every AUTO_ROTATE_MS (5000ms) using useEffect/useRef clearing interval on manual navigation. Add ChevronLeft/ChevronRight (lucide-react) navigation buttons and RotateCcw flip trigger icon. Show patient avatar (Unsplash URLs), name, treatment, date, and rating. Use useCallback for stable navigation handlers.
Implement FearNeutralizerStories for Homepage
As a frontend developer, implement the FearNeutralizerStories section for the Homepage. Render 3 STORIES (Sarah/First-Time Anxiety, Marcus/Needle Phobia, Elena/Drill Sound Sensitivity) each with a 3-phase timeline (fear → treatment → relief). Use useState for active story and active phase selection. Implement GSAP-driven timeline progress bar animation on phase transitions via useRef and gsap.to(). Wrap phase content in AnimatePresence for exit/enter slide transitions. Display fearCategory icon, patientName, snippet, fullStory, and outcome badge. Show videoThumb (Unsplash) with play button overlay. Use useCallback for story/phase switching handlers.
Implement ProofOfResultsFlip for Homepage
As a frontend developer, implement the ProofOfResultsFlip section for the Homepage. Render 6 TRANSFORMATIONS as 3D flip cards (CSS perspective transform) toggling between beforeImg and afterImg on click/hover. Each card shows treatment label, FlipIcon (SVG polyline/path arrows), and SparkleIcon (SVG star path) badge. Build PulsingCounter using framer-motion animate() to count from 0→20 over 1.8s with easeOut, triggered by useInView (once:true, margin:'-50px') via useRef. Include ArrowIcon (SVG line/polyline) in the CTA button. Display a summary stats row. Use useState per card for flipped state tracking.
Implement CoreServicesDecisionTree for Homepage
As a frontend developer, implement the CoreServicesDecisionTree section for the Homepage. Render 6 SERVICES (preventive/Shield, cosmetic/Sparkles, restorative/Wrench, emergency/Zap, orthodontics/SmilePlus, implants/Bone — all from lucide-react) as selectable option cards with iconClass color variants. On selection, display subServices list with name, desc, and highlight badge. Implement AnimatePresence-driven panel slide transitions between service views. Show ArrowLeft/ArrowRight (lucide-react) navigation for subService pagination. Display Star and Heart (lucide-react) accent icons. Use useState for selectedService and activeSubIndex. Use useCallback for selection handlers and useRef/useEffect for scroll-into-view on mobile.
Implement TechnologyDifferentiator for Homepage
As a frontend developer, implement the TechnologyDifferentiator section for the Homepage. Build a React Three Fiber Canvas with ScannerBody mesh using MeshTransmissionMaterial (@react-three/drei) wrapped in Float for idle bobbing. Place 5 interactive Html hotspots (HOTSPOTS array) at 3D world positions ([1.6,1.2,0.5], [-1.5,0.8,0.8], [0,-0.6,1.5], [0.5,1.5,-1.2], [-1.0,-0.3,-1.0]) showing title, description, stat, and icon. Add OrbitControls and Environment (@react-three/drei). Implement useFrame rotation animation with useRef. Render 4 FEATURES as a sidebar list; clicking a feature highlights the corresponding hotspot via useState(activeHotspot). Use AnimatePresence for hotspot detail panel transitions. Use useMemo for geometry and useCallback for interaction handlers.
Implement SocialProofReviewCarousel for Homepage
As a frontend developer, implement the SocialProofReviewCarousel section for the Homepage. Render 6 REVIEWS with initials avatar, name, date, 5-star rating, review text, and tag pills. Build an interactive word-cloud from PHRASES array with size variants (xl/lg/md) and colorType (primary/accent/secondary) styling; clicking a phrase filters to reviewIndices and highlights matching reviews. Implement AnimatePresence carousel with drag gesture support via useRef and touch event handlers. Display aggregate rating badge and total review count. Use useState for activePhrase and currentIndex. Use useCallback for navigation and phrase-click handlers. Auto-advance with useEffect interval cleared on manual interaction.
Implement DualLocationToggleMap for Homepage
As a frontend developer, implement the DualLocationToggleMap section for the Homepage. Build a two-location toggle (recoleta/pilar) using useState(locationKey). Render MapIllustration as inline SVG with location-specific road grids — recoleta (Av. Santa Fe, Callao, Junín, Las Heras, Arenales, Ayacucho, Uruguay lines + rect blocks) and pilar (separate road layout). Animate map pan/zoom using LOCATIONS[key].mapOffset and mapScale via framer-motion layout transitions. Position MapPin SVG component at LOCATIONS[key].markerPos (left/top percentages) with AnimatePresence for pin swap animation. Display name, area, address, phone, hours, distance, and services list for active location. Use motion.div for smooth location card content transitions.
Implement FinalCTA for Homepage
As a frontend developer, implement the FinalCTA section for the Homepage. Render 4 TRUST_BADGES (star/users/shield/heart) each with a BadgeIcon SVG component and label. Implement a tilt card effect using useMotionValue for x/y, useSpring (for smooth following), and useTransform to compute rotateX/rotateY from cursor position via onMouseMove handler captured with useCallback. Add useInView (via useRef) to trigger entrance animations with framer-motion variants. Build the WhatsApp CTA button featuring WhatsAppIcon SVG (full path data for WhatsApp logo) linking to WhatsApp booking. Use AnimatePresence for a secondary form or modal toggle managed with useState. Apply useEffect to reset tilt on mouse leave.
AI Chatbot Integration API
Integrate GPT model for user-friendly responses as specified in SRD. Create FastAPI endpoint POST /api/chat with request body (message, session_id, context). Implement conversation context management using session storage. Configure OpenAI client with appropriate model. Add rate limiting per session. This supports any AI-driven visitor assistance feature on the homepage. Store chat sessions in database: ChatSession (id, session_id, messages JSON, created_at, updated_at).
Frontend API Client Setup
Set up a centralized API client for the React frontend using axios or fetch. Create /src/api/client.js with base URL from environment variable REACT_APP_API_URL. Implement typed API modules: testimonialsApi, reviewsApi, storiesApi, transformationsApi, servicesApi, locationsApi, whatsappApi. Add request/response interceptors for error handling and loading states. Create custom hooks: useTestimonials, useReviews, useStories, useTransformations, useServices, useLocations. This is a cross-cutting concern needed by all data-driven homepage sections.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No comments yet. Be the first!