portfolio af

byHollow Affan

# Premium Enterprise Website Prompt Build a world-class, enterprise-grade website that looks and performs like a product developed by a top design agency charging $10,000–$50,000. The experience should be cinematic, highly interactive, incredibly fast, and engineered for scalability, security, and maintainability. ## Core Objective The website must create an immediate impression of trust, innovation, luxury, and technical excellence. Every animation, interaction, and design decision should reinforce the feeling of using a premium digital product rather than browsing a conventional website. The design should be minimal, modern, and intentionally spacious. Avoid unnecessary clutter, excessive colors, or distracting effects. Every component should have a clear purpose. --- # Visual Style Design inspiration: * Apple * Stripe * Linear * Vercel * Arc Browser * Framer * Tesla * Raycast The website should resemble an Awwwards-winning project. --- # Color System Primary Background Deep charcoal instead of pure black. Gradient: #090909 ↓ #101010 ↓ #181818 Accent Color Use only one premium accent throughout the website. Example: Electric Blue (#4F8CFF) or Royal Purple (#7A5FFF) or Cyan (#00D9FF) Do not introduce additional bright colors unless used for charts or status indicators. Text Colors Primary White (#FFFFFF) Secondary Light Gray (#D1D5DB) Descriptions Gray (#9CA3AF) Success #22C55E Error #EF4444 Cards Glassmorphism with subtle blur. Very soft borders. Soft shadows. Floating appearance. --- # User Experience The user should never experience abrupt transitions. Every interaction should feel responsive and intentional. Mouse movement should influence lighting, object rotation, shadows, and depth. Scrolling should feel like controlling a cinematic camera rather than moving a webpage. Animations must remain smooth on desktop, tablet, and mobile devices. Every animation must be GPU accelerated. Target 60–120 FPS. --- # Hero Section Create a fullscreen hero section. Include a realistic Three.js 3D centerpiece. Examples: * Glass AI Core * Floating Crystal * Neural Network Sphere * Futuristic Processor * Digital Planet The object should: * Slowly float * Rotate gently * React to mouse movement * Change reflections dynamically * Cast realistic shadows * React to lighting Background: Animated particles Volumetric lighting Gradient fog Ambient glow Headline: Large typography with smooth word-by-word reveal animation. Buttons: Magnetic hover effect Glow animation Ripple on click Elastic press animation --- # Navigation Transparent floating navigation bar. Glass effect. Sticky. As the user scrolls: * Navbar becomes smaller * Background becomes more opaque * Blur increases * Active section is highlighted * Smooth animated indicator --- # Scroll Experience Implement smooth scrolling. Every section should reveal differently. Examples: Fade Up Blur Reveal Scale In Slide Left Slide Right 3D Rotation Parallax Stagger Animation No repetitive animations. --- # Sections Include: Hero Trusted Companies Services Features Interactive Dashboard Demo Statistics Portfolio Testimonials Pricing FAQ Final CTA Footer Each section should have unique animations. --- # Interactive Elements Feature cards should: Lift upward Rotate slightly Increase glow Animate borders Display animated icons Statistics should count upward only when entering the viewport. Charts should animate from zero. Portfolio images should expand smoothly. Testimonials should auto-scroll and pause on hover. FAQ accordions should animate height naturally. Buttons should slightly compress when clicked. Cursor should become magnetic around important elements. --- # Background Effects Animated gradients Floating particles Mouse-reactive lighting Soft glowing elements Depth layers Parallax backgrounds Very subtle motion. Never distracting. --- # Typography Large headings. Generous spacing. Professional typography hierarchy. Use only one or two premium fonts. Recommended: Inter Geist SF Pro Display Satoshi --- # Motion Design Use Framer Motion and GSAP. Include: ScrollTrigger Parallax Cursor interactions Magnetic buttons Physics-based easing Blur transitions Elastic animations Word-by-word text reveal 3D tilt Smooth page transitions Page preloading Skeleton loaders --- # Performance Optimize every asset. Compress images automatically. Use lazy loading. Tree shaking. Code splitting. Asset prefetching. Dynamic imports. GPU acceleration. Avoid layout shifts. Target: Lighthouse Performance 95+ Accessibility 100 SEO 100 Best Practices 100 --- # Backend Architecture The website must be fully controlled by a secure backend rather than relying on hardcoded frontend content. Implement a server-driven architecture with: * Next.js App Router * Node.js server * REST API and/or GraphQL * PostgreSQL database * Prisma ORM * Redis caching * Authentication with JWT or OAuth * Role-Based Access Control (RBAC) * Secure session handling * Rate limiting * CSRF and XSS protection * Environment-based configuration * Centralized logging * Error monitoring * Input validation * API versioning --- # Admin Dashboard Create a secure admin panel where administrators can manage the website without modifying code. Allow management of: * Hero content * Headlines * Services * Features * Portfolio * Team * Testimonials * Pricing * Blog posts * Images * Videos * SEO metadata * Navigation * Footer links * Contact submissions * Newsletter subscribers * Analytics * User accounts * Roles and permissions * Site settings * Theme colors * Animation toggles All changes should update the website dynamically. --- # SEO Automatically generate: * Meta titles * Meta descriptions * Open Graph tags * Twitter Cards * Structured Schema.org data * Canonical URLs * XML sitemap * Robots.txt * Dynamic breadcrumbs --- # Security Implement enterprise-level security: * HTTPS enforcement * Secure cookies * CSP headers * SQL injection prevention * XSS protection * CSRF protection * API rate limiting * Authentication middleware * Audit logs * File upload validation * Automatic backups --- # Analytics Integrate: * Google Analytics 4 * Search Console * Performance monitoring * Heatmaps (optional) * Error tracking * Conversion tracking * Admin analytics dashboard --- # Deployment Prepare the application for production deployment with: * Docker support * CI/CD pipeline * Environment variables * Automatic database migrations * CDN-ready asset delivery * Horizontal scaling support * Reverse proxy compatibility * Load balancing readiness * Production logging * Health check endpoints The finished website should feel like a premium enterprise product: visually stunning, exceptionally fast, fully manageable through a secure backend, scalable to millions of visitors, and maintainable without editing the source code.