coral-landing

byMUNEER SALAM

Design a high-converting, modern landing page for a digital marketing institute named “CDA”. The goal is to generate leads through a student registration form placed in the hero section. STYLE & UI DIRECTION: * Clean, modern, professional UI with a premium feel * Color palette: * Primary: #480094 (deep purple) * Secondary: #39387B (muted indigo) * Background: #FFFFFF (white) * Text: #000000 (black) * Use soft gradients combining purple and indigo tones * Add subtle glassmorphism effects for cards (low opacity, blur) * Use rounded corners (12–16px), soft shadows, and spacing for clarity * Typography: modern sans-serif (similar to Inter / Poppins) * Layout: grid-based, responsive, mobile-first HERO SECTION (Above the Fold): * Left side: * Headline: “Start Your Digital Marketing Journey with Live Online Learning” * Subheadline explaining live, practical learning * Bullet highlights with icons: * Live sessions with real-time interaction * Learn from industry professionals * Practical real project experience * Continuous support * CTA button: “Get Free Career Guidance” * Right side: * Student form card (important visual focus) * Fields: Name, Phone, Email, Course Interest dropdown * CTA button: “Apply Now” * Add trust note: “No spam. We respect your privacy.” * Card should have slight elevation + glow border in primary color ANIMATIONS (Hero): * Fade-in + upward motion for text * Form slides in from right * Background gradient subtly animated (slow movement) * Floating abstract shapes with parallax effect --- ACCREDITATION / TRUST SECTION: * Minimal, clean section with icons/logos * Text: “Built on Recognised Standards” * Horizontal layout with trust badges * Subtle hover animation on logos --- PLACEMENT HIGHLIGHTS: * Grid or carousel of placed students * Use image cards with overlay (name + company) * Hover: zoom + gradient overlay * Add animated counter (e.g., “500+ Students Placed”) --- WHY THIS PROGRAM WORKS: * 5 feature cards with icons * Layout: 2-column or grid * Each card: * Icon * Title * Short explanation * Hover interaction: lift + shadow + slight scale --- COURSE FORMAT: * Split layout (left text, right visual illustration) * Toggle tabs for: * Weekday Batches * Weekend Batches * Smooth tab animation * CTA: “Check Available Batches” --- BEYOND THE CLASSES: * Highlight Malayalam phrase “പിച്ചും പേയും – You Pitch We Pay” * Use bold typography + gradient highlight * Timeline or step-based layout: * Portfolio building * Interview training * Placement support * Community access * Add connecting line animation (progress flow) --- CERTIFICATIONS: * Display certification logos: * Google Ads * Meta (Facebook) * HubSpot * Use clean card layout * Hover: slight glow or border animation --- ABOUT QUADCUBES: * Split section: * Left: text content * Right: real-world campaign visuals or abstract marketing graphics * Add subtle parallax scrolling effect * Include badge: “Performance-Driven Agency” --- VIDEO TESTIMONIALS: * Video cards in carousel layout * Play button with pulse animation * Hover: dark overlay + play icon zoom --- GOOGLE REVIEWS: * Card-based testimonials * Star ratings * Auto-scroll horizontal slider * Subtle fade animation between reviews --- CTA SECTIONS (Multiple placements): * “Join a Free Live Session” * “Get Course Details” * “Speak to an Advisor” * Use contrasting background (dark purple) * Buttons with hover glow + micro-interactions --- FINAL SECTION: * Motivational closing message: “Start Where You Are” * Supporting text about growth and opportunities * Urgency line: “Limited seats available” * CTA: “Reserve Your Spot” * Background: gradient + subtle particle animation --- MICRO-INTERACTIONS: * Buttons: hover scale + glow * Inputs: focus border animation (purple glow) * Scroll reveal animations across sections * Smooth scrolling navigation --- PARALLAX & ADVANCED EFFECTS: * Floating shapes in hero (slow parallax movement) * Background gradient shift animation * Section transitions using fade + slide * Depth effect using layered elements --- MOBILE RESPONSIVENESS: * Stack hero (form comes below content) * Sticky CTA button on mobile * Simplified animations for performance * Large touch-friendly inputs --- GOAL: * Make the page visually engaging but conversion-focused * Ensure the form stands out immediately * Guide the user step-by-step toward CTA actions