EyvoirAssist

byÉyvoir

Create a premium Awwwards-quality landing page for a startup called "Eyvoir Assist". Tech Stack: React + Vite + TypeScript + Tailwind CSS + Framer Motion + GSAP + hls.js. The entire website must feel futuristic, minimal, luxurious and extremely smooth. DO NOT create a portfolio website. DO NOT use portfolio sections like projects, journal, resume or contact portfolio. The website represents an AI-powered PC & Laptop Diagnostic Platform. Use premium motion design similar to MotionSites and Awwwards. ---------------------------------------- GLOBAL DESIGN ---------------------------------------- Dark Theme Only Background: #090909 Surface: #111111 Primary Text: #F5F5F5 Muted: #9A9A9A Border: #202020 Accent Gradient: #89AACC ↓ #4E85BF Glassmorphism navbar. Rounded UI. Large spacing. Soft blur. Very smooth transitions. Premium typography. Use Inter + Instrument Serif. Extremely clean layout. No light mode. ---------------------------------------- LOADING SCREEN ---------------------------------------- Fullscreen loading screen. Counter: 000 → 100 Duration around 2.7 seconds. Center rotating words: Detect Analyze Repair Optimize Bottom progress bar with animated gradient. Fade out smoothly. ---------------------------------------- NAVBAR ---------------------------------------- Floating glass navbar. Logo: EY inside animated gradient ring. Links: Home Diagnose Fix Guides Tools About Right side button: Start Diagnosis → Navbar becomes slightly smaller after scrolling. ---------------------------------------- HERO SECTION ---------------------------------------- Fullscreen hero. Use animated dark technology background. If video is unavailable use animated gradient mesh background. Overlay for readability. Center content. Small label: AI POWERED HARDWARE DIAGNOSTICS Main heading: EYVOIR ASSIST Subtitle: Diagnose your PC or Laptop in seconds with intelligent troubleshooting, hardware analysis, compatibility checking and repair guidance. Description: Eyvoir Assist helps users detect hardware problems, understand the cause and receive step-by-step repair solutions without technical knowledge. Buttons: Primary Start Diagnosis Secondary Browse Guides Buttons should have premium hover animations. ---------------------------------------- SEARCH SECTION ---------------------------------------- Immediately below hero. Large premium search box. Placeholder: Describe your PC problem... Example: "My PC turns on but there is no display" Upload Screenshot button. Diagnose button. Glass UI. ---------------------------------------- POPULAR PROBLEMS ---------------------------------------- Luxury Bento Grid. Animated cards. Cards include: PC Won't Turn On Blue Screen (BSOD) No Display Overheating Low FPS SSD Not Detected RAM Problems GPU Crash Windows Boot Loop Internet Problems Each card has icon, title and short description. Hover animations using Framer Motion. ---------------------------------------- HOW IT WORKS ---------------------------------------- 4 premium cards connected with animated arrows. 1 Describe Problem ↓ 2 AI Analysis ↓ 3 Find Root Cause ↓ 4 Get Step-by-Step Solution Cards animate into view. ---------------------------------------- FEATURES ---------------------------------------- Large luxury cards. Features: AI Diagnosis Hardware Compatibility Checker Performance Analysis Repair Guides Screenshot Analysis Future Voice Diagnosis Each card contains premium icon and hover animation. ---------------------------------------- SUPPORTED DEVICES ---------------------------------------- Responsive grid. PC Gaming PC Laptop Motherboard CPU GPU RAM SSD HDD PSU Monitor Windows Each card glows slightly on hover. ---------------------------------------- WHY EYVOIR ---------------------------------------- Three premium statistics. 100+ Hardware Problems Covered Fast Guided Diagnosis Continuously Expanding Knowledge Base Animate counters while scrolling. ---------------------------------------- FINAL CTA ---------------------------------------- Large centered section. Heading: Fix Your PC Smarter. Description: Stop guessing. Start diagnosing. Button: Launch Diagnosis Gradient animated border. ---------------------------------------- FOOTER ---------------------------------------- Dark minimal footer. Logo. Quick Links. GitHub Discord Privacy Terms Copyright: © Eyvoir Assist ---------------------------------------- ANIMATIONS ---------------------------------------- GSAP page entrance. Framer Motion throughout. Fade. Blur. Scale. Parallax. Floating animations. Animated gradient borders. Smooth scrolling. Luxury hover effects. Micro interactions. ---------------------------------------- RESPONSIVE ---------------------------------------- Perfect responsiveness. Mobile-first. Tablet. Desktop. Ultra-wide. ---------------------------------------- QUALITY REQUIREMENTS ---------------------------------------- The landing page must look like a modern SaaS startup worth millions of dollars. Avoid generic templates. Prioritize visual quality over quantity. Every section should feel polished, premium, elegant and highly animated. Generate production-ready React + TypeScript + Tailwind code with clean reusable components and organized folder structure.