EyvoirAssist

É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.

Comments (0)

No comments yet. Be the first!

Page 1 of 5

EyvoirAssist System Requirements Document

Introduction

EyvoirAssist is an AI-powered PC & Laptop Diagnostic Platform designed to provide users with intelligent troubleshooting, hardware analysis, compatibility checking, and repair guidance. This document outlines the system requirements for creating a premium Awwwards-quality landing page for EyvoirAssist, emphasizing a futuristic, minimal, luxurious, and extremely smooth user experience.

System Overview

EyvoirAssist aims to deliver a seamless diagnostic experience for PC and laptop users, leveraging AI to detect hardware issues and provide step-by-step repair solutions. The platform's landing page will reflect its cutting-edge technology and premium service through advanced motion design and a luxurious aesthetic.

Page 2 of 5

Functional Requirements as Story Points

As a User, I should be able to view a fullscreen loading screen with a counter and rotating words to enhance the anticipation of the platform's capabilities.
As a User, I should see a floating glass navbar with animated elements for easy navigation.
As a User, I should experience a fullscreen hero section with an animated background to immediately capture my attention.
As a User, I should be able to use a premium search box to describe my PC problem and initiate a diagnosis.
As a User, I should be able to explore popular problems through an animated luxury Bento Grid for quick access to common issues.
As a User, I should understand how the platform works through animated cards connected with arrows.
As a User, I should be able to view large luxury cards detailing the platform's features with premium icons and animations.
As a User, I should see a responsive grid of supported devices that glow on hover for an interactive experience.
As a User, I should be informed of EyvoirAssist's advantages through animated statistics.
As a User, I should be encouraged to start a diagnosis through a final call-to-action section with an animated border.
As a User, I should be able to navigate a dark minimal footer with quick links for additional resources.

User Personas

General User: Individuals seeking to diagnose and repair their PC or laptop issues without technical knowledge.
Tech Enthusiast: Users interested in exploring advanced diagnostic features and understanding hardware compatibility.
Support Technician: Professionals using the platform to assist clients with hardware issues.

Core User Flows

User visits the landing page -> experiences the loading screen -> navigates through the navbar -> explores the hero section -> uses the search box to describe a problem -> views popular problems -> learns how the platform works -> explores features -> checks supported devices -> views statistics -> engages with the final call-to-action -> accesses resources via the footer.

Page 3 of 5

Visuals Colors and Theme

primary: #4E85BF
primary_light: #89AACC
secondary: #F5F5F5
accent: #FF6F61
highlight: #FFD700
bg: #090909
surface: rgba(17, 17, 17, 0.8)
text: #F5F5F5
text_muted: #9A9A9A
border: rgba(32, 32, 32, 0.2)

Signature Design Concept

The EyvoirAssist landing page will feature an interactive galaxy map as the homepage. Users can explore different stars, each representing a feature or section of the platform. Clicking a star opens a detailed card with information and animations. The galaxy map will rotate and zoom as users interact, creating a dynamic and engaging experience. This concept will be implemented using @react-three/fiber and @react-three/drei for 3D interactions, with gsap for smooth transitions and animations.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, providing layered depth via scroll with decorative layers translating at different speeds. This approach will create a visually rich first impression, ideal for a marketing landing page. Internal pages will adopt a "static" model for clarity and ease of use.

Page 4 of 5

Non-Functional Requirements

The website must maintain a dark theme only, ensuring a consistent and immersive user experience.
All animations and transitions should be smooth and luxurious, enhancing the premium feel of the platform.
The website must be fully responsive, providing an optimal experience across mobile, tablet, desktop, and ultra-wide screens.

Tech Stack

Frontend: React + Vite + TypeScript + Tailwind CSS
Animation Libraries: Framer Motion + GSAP
Video Streaming: hls.js

Assumptions and Constraints

The website will not include portfolio sections such as projects, journal, resume, or contact portfolio.
The design will prioritize premium aesthetics and animation quality over code simplification.
The platform will focus on AI-powered diagnostics without requiring technical knowledge from users.

Page 5 of 5

Glossary

AI: Artificial Intelligence
BSOD: Blue Screen of Death
GPU: Graphics Processing Unit
HDD: Hard Disk Drive
PSU: Power Supply Unit
SSD: Solid State Drive

This document outlines the requirements for developing a premium landing page for EyvoirAssist, ensuring a luxurious and smooth user experience that aligns with the platform's innovative diagnostic capabilities.