A. Prompt recipe — high-quality front-end wireframe (short) //**Build a single-file responsive index.html (HTML + embedded CSS + minimal JS) wireframe inspired by modern creative SaaS landing pages. Requirements: - Single-column page with vibrant, full-width sections: hero, features, pricing, library, about, footer. - Smooth scrolling for anchor links and header offset handling. - Toggle for dark/light theme with CSS custom properties and persistence (localStorage). - Language toggle EN/PT that switches visible strings via a small dictionary; make it easy to extend. - Accessible markup: semantic elements, ARIA where appropriate, keyboard focusability. - Responsive layout with CSS grid/flex, mobile-first behaviour. - Minimal, well-structured vanilla JS only (no frameworks). Keep JS unobtrusive and split concerns (theme, lang, anchors). - Clean neutral base typography, spacing variables, and clear contrast for legibility in both themes. - Include placeholder components: cards grid, CTA buttons, media-placeholder boxes. - No external assets or fonts required; use system fonts. Keep code compact and commented. Deliver a single HTML file ready to drop into a project. Keep copy as placeholders and mark all i18n keys with data-i18n attributes. B. Prompt recipe — detailed / production-ready //*Create a production-ready single-file index.html (HTML + embedded CSS + minimal JS) that serves as a wireframe for a creative SaaS landing page. Requirements: 1. Structure: header (sticky), hero, features, pricing, library, about, CTA, footer. Each section must be a distinct full-width block with padding and rounded container look. 2. Styling: use CSS custom properties for theme; implement both light and dark themes that invert background/foreground with accessible contrast (WCAG AA). Provide theme transition and persist choice in localStorage. 3. Interactions: - Smooth anchor scrolling with header offset calculation. - Language toggle (EN/PT): use a compact localization object and update elements marked data-i18n; persist choice. - Buttons and focus states keyboard-accessible; ARIA attributes on toggles. - Subtle entrance animation per section (fade/slide) triggered on scroll (use IntersectionObserver). 4. Layout: mobile-first, responsive breakpoints: 0–640 (stack), 640–1024 (grid), 1024+ (wider max -width). Cards grid should use repeat(auto-fit, minmax()). 5. Performance: no external libs, no webfonts, minimal DOM updates, comments for where to plug real assets and copy. 6. Deliver: single HTML file, concise comments, clear CSS organization (variables, base, components, utilities), and modular JS sections (theme/lang/anchors/animations). C. Prompt recipe — developer handoff / component-focused //*Produce three copy-ready HTML components inside a single file(HTML + embedded CSS + minimal JS): Hero, FeatureCards, PricingGrid. Each component must: - Be semantic and self-contained (with class prefixes: comp-hero, comp-feat, comp-pricing). - Use CSS custom properties for spacing/typography that match the page theme. - Support dark/light mode via a root data-theme attribute. - Export minimal JS glue: open/close behaviors, CTA click tracking hooks, and data-i18n-ready text placeholders. *Return a unified index.html demonstrating the components in a simple page scaffold with header and footer. D. Small tips to get the best results 1. Always state exact deliverable format: “single-file index.html with embedded CSS and JS”. 2. Specify constraints clearly: “no frameworks”, “localStorage persistence”, “WCAG AA contrast”. 3. Ask for explicit markers: “use data-i18n attributes for all text” and “comment where to replace assets”. 4. Include examples of tone and density: “concise placeholders” or “realistic lorem for layout testing”. 5. When requesting visuals, give a small palette (3 colors) or say “vibrant gradients like X→Y”. 6. If you want animations, name the mechanism: “IntersectionObserver reveal”, “CSS transforms for hover”. //****EXAMPLES****// 1. SaaS landing — bold, conversion-focused, animated "Build a single-file index.html (HTML + embedded CSS + minimal vanilla JS) wireframe for a modern SaaS landing page focused on conversions. Requirements: - Layout: sticky header with logo + links + primary CTA, large hero with headline/subhead/primary+secondary CTAs, three feature columns, social proof logos, pricing tier grid, FAQ accordion, final CTA, footer. - Visuals: polished, slightly cinematic look; large hero gradient or image placeholder; subtle parallax or scroll-driven reveal using IntersectionObserver; hover micro-interactions on cards. - Accessibility: semantic HTML, keyboard-accessible components, ARIA attributes for interactive controls, visible focus states. - Theme: CSS custom properties with light/dark mode toggle persisted to localStorage. - i18n: include data-i18n attributes and a minimal EN/PT dictionary in JS for text swapping. - Behavior: smooth anchor scrolling with header offset, sticky CTA that appears on scroll up, accessible FAQ accordion (ARIA). - Tech constraints: no frameworks, no external fonts, keep JS modular and unobtrusive, comment where to replace copy/assets. Deliver a single HTML file ready for handoff; placeholders for images and icons; mark i18n keys clearly." 2. Creative portfolio — cinematic, immersive, image-forward "Create a single-file index.html (HTML + embedded CSS + minimal JS) that serves as a creative portfolio template for a designer/filmmaker. Requirements: - Layout: full-bleed hero with large name/title and marquee background (video/image placeholder), centered intro, project gallery grid, case-study modal, short bio, contact CTA, minimal footer. - Interaction: grid with hover reveal (scale + overlay), keyboard-navigable modal with next/prev and captions, lazy-loading placeholders for media, smooth scroll transitions between sections. - Aesthetic: dark, high-contrast palette with neon accent; use large typographic scale and generous spacing; include subtle filmic grain effect via CSS. - Theme & accessibility: dark/light toggle, prefer reduced-motion respect, clear focus outlines. - Developer-ready: semantic markup, classes with BEM-like prefixes, clear comments where to swap media, minimal JS for modal, gallery filtering, and i18n hooks (data-i18n). Return one file, production-clean, easy to drop into a portfolio repo." 3. E‑commerce product grid — conversion + accessibility first A> General Prompt: "Produce a single-file index.html(HTML + embedded CSS + minimal JS) wireframe for an e-commerce storefront product grid and product detail modal. Requirements: - Structure: header with search, cart icon, category nav; hero promo strip; responsive product grid (cards with image, title, price, quick-add); product detail overlay with carousel, specs, add-to-cart, and accessibility features. - Behavior: keyboard and screen-reader friendly cart interactions, quantity controls, client-side cart summary (localStorage), product quick-view modal, smooth scroll for anchors. - Visuals: neutral, trust-focused palette; clear affordances for buttons; responsive breakpoints and product card aspect-ratio handling. - Performance & constraints: no external libraries; images as placeholders; keep JS minimal and encapsulated; annotate where to hook real e-commerce APIs. - Deliverable: single self-contained HTML file with CSS variables for theming and i18n-ready data attributes." B> E‑commerce — Basic Storefront (fast prototype): "Deliver a single-file index.html (HTML + embedded CSS + minimal vanilla JS) wireframe for a basic e-commerce storefront. Requirements: - Header with logo, search, category nav, cart icon. - Hero promo band and featured products carousel placeholder. - Responsive product grid (cards with image, name, price, rating, add-to-cart). - Product quick-view modal (image, title, price, short description, add-to-cart). - Client-side cart summary persisted to localStorage and accessible from header. - Accessibility: semantic HTML, keyboard focus states, ARIA for modal and cart. - Constraints: no frameworks, no external fonts or images (placeholders only); clean comments where to plug APIs. Return one tidy single-file HTML ready for testing." C> E‑commerce — Product Grid + Product Detail Page (conversion-first): "Deliver a single-file index.html (HTML + embedded CSS + minimal JS) that contains a product-listing page and a product-detail overlay optimized for conversions. Requirements: - Sticky header with category filtering and sorting controls. - Product grid with consistent aspect-ratio thumbnails, hover states, and quick-add buttons. - Product detail overlay (carousel placeholder, variant selector, price, shipping estimator, quantity controls, add-to-cart). - Price and availability microcopy with accessible live region updates when variant changes. - Add-to-cart interaction updates a persistent mini-cart in the header and shows an accessible toast confirmation. - Performance: lazy-load image placeholders; minimal, modular vanilla JS; annotate integration points for real data. Deliver a single HTML file with clearly separated CSS sections (variables, layout, components)." D> E‑commerce — Multi-vendor Marketplace (listings + seller pages): "Build a single-file index.html prototype for a marketplace with buyer-facing discovery and seller profiles. Requirements: - Search + faceted filters (category, price range, rating), results count, list/grid toggle. - Listing cards show thumbnail, title, price, seller name, rating badge, and quick actions. - Seller profile page template with seller bio, ratings, product subset, contact CTA. - Client-side simulated dataset (small JSON array) and simple filtering logic to demo behaviour. - Accessibility: aria-live for results updates, keyboard focus for filters, semantic markup. - Tech limits: no external libraries, comments for data wiring and server endpoints. Return a prototype ready for usability testing and handoff to backend." F> E‑commerce — Subscriptions & Digital Goods (billing UX + entitlements): "Produce a single-file index.html wireframe for selling subscription plans and digital downloads. Requirements: - Plan comparison grid (monthly vs annual toggle), clear billing copy, CTA per plan. - Checkout flow mock: plan selection → account/email capture → confirmation screen (no payment gateway). - Digital download delivery pattern: post-purchase entitlement page with download buttons and license keys. - Admin/Account area mock showing active subscriptions and download history. - Accessibility and trust: clear error/validation states, aria-live updates, and keyboard navigation. - Keep JS modular; mark where to integrate real payment and licensing APIs. Deliver one comprehensive prototype file. G> E‑commerce — Headless Storefront + Search (search-first experience): "Generate a single-file index.html that demonstrates a headless storefront concept focused on fast discovery and search. Requirements: - Minimal header, prominent search bar with instant suggestions placeholder, and keyboard shortcut ("/") to focus search. - Search results page with server-side-like faceting (client-side simulated), relevance indicators, and sort options. - Product cards with badges (new, sale), SKU, price, and add-to-cart. - Progressive enhancement: if no JS, show accessible product list fallback. - Include comments for hooking into headless APIs (GraphQL/REST), and a small mock adapter in JS to simulate requests. - No external libs; accessible controls and focus management for keyboard-heavy flows. Return single-file prototype with clear integration points for elasticsearch/Algolia-type services." ///***Quick tips for best prompts***/// -Start with the deliverable format up front: “Deliver a single-file index.html (HTML + embedded CSS + minimal JS)”. -List exact features and constraints: routing (anchors/modals), persistence (localStorage), accessibility (ARIA, keyboard), performance (lazy-load). -State visual mood and palette if you care about look: “neutral trust palette” or “vibrant gradients”. -Ask for i18n-ready placeholders by requiring data-i18n attributes. -Specify what to exclude: “no external libraries” or “no payment integration; mock only”. -When you need realistic behaviour, ask for a small simulated dataset and comments showing where to replace it with real APIs. 4. Marketplace / Directory — information density + discoverability "Generate a single-file index.html for a marketplace directory (sellers and listings). Requirements: - Pages: hero with search and filters, faceted search sidebar, results grid/list toggle, seller cards with ratings, listing detail panel, onboarding CTA for sellers, footer with links. - UX: client-side filtering (category, price range, rating), accessible form controls, keyboard shortcuts for focus, infinite-scroll or "load more" pattern (progressive enhancement). - Visual system: two-column layout on desktop, compact cards for dense info, clear visual hierarchy for metadata (price, rating, location). - Accessibility & data: semantic tables or lists where appropriate; aria-live region for filter results count; placeholders for microcopy and legal text. - Tech: vanilla JS, easy-to-replace data source (simulate a small JSON array), comments for integration points. Return a single-file prototype ready for UX testing." 5. Editorial / Magazine — readable, typographic-first "Create a single-file index.html editorial template for a magazine or longform blog. Requirements: - Layout: masthead with nav, newsletter signup, featured article hero, multi-column article layout (responsive), in-article media blocks, related stories, author bio, comments placeholder, footer with legal and social links. - Typography: fluid type scale, readable measure for long lines, drop caps option, responsive images with focal-point placeholders. - Accessibility: high contrast, skip-to-content link, semantic article markup, captioned figures, aria roles for comment area. - Features: reading progress indicator, optional dark mode, print-friendly styles via @media print, keyboard accessible TOC for long articles. - Deliverable: single HTML file with well-structured CSS sections (variables, base, layout, components) and small JS for progress, TOC, and theme toggle." ///***Small tips for maximum results***/// *Force the deliverable format: begin prompts with “Deliver a single-file index.html (HTML + embedded CSS + minimal JS)”. *Name constraints early: “no frameworks”, “no external fonts/assets”, “persist theme in localStorage”. *Ask for accessibility explicitly: “ARIA, keyboard, focus states, prefers-reduced-motion”. *Give the visual mood and a short palette: “cinematic dark with neon accent”, “neutral trust palette”, or “vibrant gradients”. *Specify which interactions to include and which to omit: e.g., “include modal + carousel, exclude backend integration”. *Ask for clear markers for i18n, image placeholders, and integration hooks so handoff is smooth. *Use these prompt templates as starting points and adjust specifics (colors, breakpoints, animations, copy density) to match each project's goals. ////***Resources***//// - Images use pattern: https://picsum.photos/id/{number}/size{width}/size{height} - https://depositphotos.com/free-files/lorem-ipsum.html //////////******CLAUDE Master Prompts******////////// 6. Master Prompt (Template 1) "Create a single-page HTML website for a royalty-free music licensing platform with these EXACT specifications: VISUAL DESIGN: - Vibrant gradient aesthetic throughout - every section must have bold, multi-color gradients - Glassmorphic sticky header with backdrop blur and semi-transparent background - Hero section: Gradient background (135deg, #ff5f6d → #ffc371 → #ff9a9e), white text, min-height 70vh - Four content sections with distinct gradient backgrounds: * Features: Cyan to blue (#7afcff → #4f9fff) * Pricing: Peach to pink (#ffd2a6 → #ff7eb6) * Library: Mint to green (#c2ffd8 → #6ee7b7) * About: Purple to indigo (#d3bfff → #7a7eff) - Rounded corners (14px sections, 10px cards, 8px buttons) - Soft shadows: 0 8px 30px rgba(10,10,10,0.06) HEADER FEATURES: - Sticky positioning with blur effect - Logo/brand name on left - Navigation links (Features, Pricing, Library, About) with hover lift effect - Controls on right: Language toggle (EN/PT pill-style), theme toggle button (🌓), Sign In, Get Started (primary button) - All navigation must smooth scroll to section IDs with header offset THEME SYSTEM: - Light theme (default): White background, dark text - Dark theme: Near-black background (#0b0b0d), light text - Toggle persists to localStorage - Respects prefers-color-scheme on first visit - Button shows current state with aria-pressed LANGUAGE SYSTEM: - EN/PT toggle with pill-style selector (active state highlighted) - Complete translation dictionary for all text content - Persists selection to localStorage - Auto-detects browser language (defaults to PT if navigator.language starts with 'pt') - Updates document lang attribute SECTION STRUCTURE: Each section includes: - H2 heading with bold weight (800) - Descriptive paragraph (max-width 70ch) - 3-column card grid (auto-fit, minmax 220px) - Cards have semi-transparent white overlay, rounded corners, subtle border INTERACTIONS: - Nav links: hover background change + 2px upward transform - Buttons: transition all states - Smooth scroll behavior with CSS + JS fallback - Keyboard accessible (Enter/Space for toggles) - Touch-friendly (48px+ tap targets) RESPONSIVE: - Mobile: Hide nav links, stack cards vertically, reduce padding - Use clamp() for fluid typography and spacing - Hero text: 1.6rem to 3rem - Section padding: 2rem to 4.5rem ACCESSIBILITY: - Semantic HTML5 (header, nav, main, section, footer) - ARIA labels on controls and sections - aria-pressed states on toggles - Proper heading hierarchy - Color contrast meeting WCAG AA Include complete, production-ready code with all JavaScript functionality." ****Industry Specific Prompts**** 1.****SaaS Project Management Tool- "Create a single-page HTML website for a project management SaaS platform with these specifications: VISUAL DESIGN: - Vibrant gradient aesthetic - bold, multi-color gradients for every major section - Glassmorphic sticky header with backdrop blur - Hero gradient: 135deg, #667eea → #764ba2 → #f093fb (purple/pink tech vibe) - Four content sections with gradients: * Features: Blue to teal (#4facfe → #00f2fe) * Pricing: Orange to coral (#fa709a → #fee140) * Integrations: Green to lime (#30cfd0 → #a8edea) * Resources: Pink to rose (#ff9a9e → #fecfef) CONTENT STRUCTURE: - Hero: "Project management that scales with your team" / "Streamlined workflows, real-time collaboration, and insights that drive results" - Features: Task boards, Time tracking, Team collaboration (3 cards) - Pricing: Starter, Professional, Enterprise (3 tiers) - Integrations: Popular apps, API access, Webhooks (3 cards) - Resources: Documentation, Case studies, Community (3 cards) HEADER: - Logo: "TASKFLOW" or "NEXUS" - Nav: Features, Pricing, Integrations, Resources - Controls: Language toggle (EN/ES), theme toggle, Log In, Start Free Trial (primary) HEADER FEATURES: - Sticky positioning with blur effect - Logo/brand name on left - Navigation links (Features, Pricing, Library, About) with hover lift effect - Controls on right: Language toggle (EN/PT pill-style), theme toggle button (🌓), Sign In, Get Started (primary button) - All navigation must smooth scroll to section IDs with header offset THEME SYSTEM: - Light theme (default): White background, dark text - Dark theme: Near-black background (#0b0b0d), light text - Toggle persists to localStorage - Respects prefers-color-scheme on first visit - Button shows current state with aria-pressed LANGUAGE SYSTEM: - EN/PT toggle with pill-style selector (active state highlighted) - Complete translation dictionary for all text content - Persists selection to localStorage - Auto-detects browser language (defaults to PT if navigator.language starts with 'pt') - Updates document lang attribute SECTION STRUCTURE: Each section includes: - H2 heading with bold weight (800) - Descriptive paragraph (max-width 70ch) - 3-column card grid (auto-fit, minmax 220px) - Cards have semi-transparent white overlay, rounded corners, subtle border INTERACTIONS: - Nav links: hover background change + 2px upward transform - Buttons: transition all states - Smooth scroll behavior with CSS + JS fallback - Keyboard accessible (Enter/Space for toggles) - Touch-friendly (48px+ tap targets) RESPONSIVE: - Mobile: Hide nav links, stack cards vertically, reduce padding - Use clamp() for fluid typography and spacing - Hero text: 1.6rem to 3rem - Section padding: 2rem to 4.5rem ACCESSIBILITY: - Semantic HTML5 (header, nav, main, section, footer) - ARIA labels on controls and sections - aria-pressed states on toggles - Proper heading hierarchy - Color contrast meeting WCAG AA Include complete, production-ready code, with smoothscrolling with all JavaScript functionality." 2.****Fitness & Wellness App- "Create a single-page HTML website for a fitness coaching and wellness app with these specifications: VISUAL DESIGN: - Vibrant gradient aesthetic throughout - Glassmorphic sticky header with backdrop blur - Hero gradient: 135deg, #f093fb → #f5576c → #ffd140 (energetic sunrise) - Four content sections: * Features: Coral to pink (#ff6b6b → #ee5a6f) * Programs: Teal to green (#4ecdc4 → #44a08d) * Nutrition: Orange to yellow (#f7971e → #ffd200) * Community: Purple to blue (#8e44ad → #3498db) CONTENT STRUCTURE: - Hero: "Transform your health journey" / "Personalized workouts, nutrition plans, and coaching that fits your life" - Features: Custom workouts, Meal planning, Progress tracking (3 cards) - Programs: Strength training, HIIT & Cardio, Yoga & flexibility (3 programs) - Nutrition: Macro calculator, Recipe library, Shopping lists (3 cards) - Community: Live classes, Member forum, Success stories (3 cards) HEADER: - Logo: "FITPULSE" or "VITALFIT" - Nav: Features, Programs, Nutrition, Community - Controls: Language toggle (EN/FR), theme toggle, Sign In, Start 7-Day Trial (primary) HEADER FEATURES: - Sticky positioning with blur effect - Logo/brand name on left - Navigation links (Features, Pricing, Library, About) with hover lift effect - Controls on right: Language toggle (EN/PT pill-style), theme toggle button (🌓), Sign In, Get Started (primary button) - All navigation must smooth scroll to section IDs with header offset THEME SYSTEM: - Light theme (default): White background, dark text - Dark theme: Near-black background (#0b0b0d), light text - Toggle persists to localStorage - Respects prefers-color-scheme on first visit - Button shows current state with aria-pressed LANGUAGE SYSTEM: - EN/PT toggle with pill-style selector (active state highlighted) - Complete translation dictionary for all text content - Persists selection to localStorage - Auto-detects browser language (defaults to PT if navigator.language starts with 'pt') - Updates document lang attribute SECTION STRUCTURE: Each section includes: - H2 heading with bold weight (800) - Descriptive paragraph (max-width 70ch) - 3-column card grid (auto-fit, minmax 220px) - Cards have semi-transparent white overlay, rounded corners, subtle border INTERACTIONS: - Nav links: hover background change + 2px upward transform - Buttons: transition all states - Smooth scroll behavior with CSS + JS fallback - Keyboard accessible (Enter/Space for toggles) - Touch-friendly (48px+ tap targets) RESPONSIVE: - Mobile: Hide nav links, stack cards vertically, reduce padding - Use clamp() for fluid typography and spacing - Hero text: 1.6rem to 3rem - Section padding: 2rem to 4.5rem ACCESSIBILITY: - Semantic HTML5 (header, nav, main, section, footer) - ARIA labels on controls and sections - aria-pressed states on toggles - Proper heading hierarchy - Color contrast meeting WCAG AA Include complete, production-ready code, with smoothscrolling with all JavaScript functionality." 3.****Real Estate Platform- "Create a single-page HTML website for a modern real estate marketplace with these specifications: VISUAL DESIGN: - Vibrant gradient aesthetic with sophisticated color palette - Glassmorphic sticky header with backdrop blur - Hero gradient: 135deg, #134e5e → #71b280 → #a8e6cf (natural/trust colors) - Four content sections: * Features: Navy to azure (#2c3e50 → #3498db) * Listings: Sage to mint (#81c784 → #aed581) * Services: Gold to peach (#f9d423 → #ff4e50) * About: Slate to steel (#455a64 → #78909c) CONTENT STRUCTURE: - Hero: "Find your dream home" / "Browse verified listings, virtual tours, and instant mortgage quotes in one place" - Features: Advanced search, Virtual tours, Mortgage calculator (3 cards) - Listings: Urban apartments, Suburban homes, Luxury estates (3 categories) - Services: Buyer support, Seller tools, Agent network (3 cards) - About: Our mission, Client testimonials, Careers (3 cards) HEADER: - Logo: "HOMESCAPE" or "ESTATE+" - Nav: Features, Listings, Services, About - Controls: Language toggle (EN/DE), theme toggle, Sign In, List Property (primary) HEADER FEATURES: - Sticky positioning with blur effect - Logo/brand name on left - Navigation links (Features, Pricing, Library, About) with hover lift effect - Controls on right: Language toggle (EN/PT pill-style), theme toggle button (🌓), Sign In, Get Started (primary button) - All navigation must smooth scroll to section IDs with header offset THEME SYSTEM: - Light theme (default): White background, dark text - Dark theme: Near-black background (#0b0b0d), light text - Toggle persists to localStorage - Respects prefers-color-scheme on first visit - Button shows current state with aria-pressed LANGUAGE SYSTEM: - EN/PT toggle with pill-style selector (active state highlighted) - Complete translation dictionary for all text content - Persists selection to localStorage - Auto-detects browser language (defaults to PT if navigator.language starts with 'pt') - Updates document lang attribute SECTION STRUCTURE: Each section includes: - H2 heading with bold weight (800) - Descriptive paragraph (max-width 70ch) - 3-column card grid (auto-fit, minmax 220px) - Cards have semi-transparent white overlay, rounded corners, subtle border INTERACTIONS: - Nav links: hover background change + 2px upward transform - Buttons: transition all states - Smooth scroll behavior with CSS + JS fallback - Keyboard accessible (Enter/Space for toggles) - Touch-friendly (48px+ tap targets) RESPONSIVE: - Mobile: Hide nav links, stack cards vertically, reduce padding - Use clamp() for fluid typography and spacing - Hero text: 1.6rem to 3rem - Section padding: 2rem to 4.5rem ACCESSIBILITY: - Semantic HTML5 (header, nav, main, section, footer) - ARIA labels on controls and sections - aria-pressed states on toggles - Proper heading hierarchy - Color contrast meeting WCAG AA Include complete, production-ready code, with smoothscrolling with all JavaScript functionality." 4.****E-Learning Platform- Create a single-page HTML website for an online education platform with these specifications: VISUAL DESIGN: - Vibrant gradient aesthetic with academic energy - Glassmorphic sticky header with backdrop blur - Hero gradient: 135deg, #ff6b95 → #7b68ee → #00d4ff (creative learning vibe) - Four content sections: * Features: Blue to purple (#667eea → #764ba2) * Courses: Yellow to orange (#f2c94c → #f2994a) * Instructors: Pink to red (#eb3349 → #f45c43) * Campus: Green to teal (#11998e → #38ef7d) CONTENT STRUCTURE: - Hero: "Learn anything, anytime" / "Expert-led courses, interactive projects, and certifications to advance your career" - Features: Video lessons, Live workshops, Certificates (3 cards) - Courses: Business, Technology, Creative arts (3 categories) - Instructors: Industry experts, Personalized feedback, Mentorship (3 cards) - Campus: Student community, Career services, Resources (3 cards) HEADER: - Logo: "SKILLFORGE" or "ACADEME" - Nav: Features, Courses, Instructors, Campus - Controls: Language toggle (EN/PT), theme toggle, Log In, Start Learning (primary) HEADER FEATURES: - Sticky positioning with blur effect - Logo/brand name on left - Navigation links (Features, Pricing, Library, About) with hover lift effect - Controls on right: Language toggle (EN/PT pill-style), theme toggle button (🌓), Sign In, Get Started (primary button) - All navigation must smooth scroll to section IDs with header offset THEME SYSTEM: - Light theme (default): White background, dark text - Dark theme: Near-black background (#0b0b0d), light text - Toggle persists to localStorage - Respects prefers-color-scheme on first visit - Button shows current state with aria-pressed LANGUAGE SYSTEM: - EN/PT toggle with pill-style selector (active state highlighted) - Complete translation dictionary for all text content - Persists selection to localStorage - Auto-detects browser language (defaults to PT if navigator.language starts with 'pt') - Updates document lang attribute SECTION STRUCTURE: Each section includes: - H2 heading with bold weight (800) - Descriptive paragraph (max-width 70ch) - 3-column card grid (auto-fit, minmax 220px) - Cards have semi-transparent white overlay, rounded corners, subtle border INTERACTIONS: - Nav links: hover background change + 2px upward transform - Buttons: transition all states - Smooth scroll behavior with CSS + JS fallback - Keyboard accessible (Enter/Space for toggles) - Touch-friendly (48px+ tap targets) RESPONSIVE: - Mobile: Hide nav links, stack cards vertically, reduce padding - Use clamp() for fluid typography and spacing - Hero text: 1.6rem to 3rem - Section padding: 2rem to 4.5rem ACCESSIBILITY: - Semantic HTML5 (header, nav, main, section, footer) - ARIA labels on controls and sections - aria-pressed states on toggles - Proper heading hierarchy - Color contrast meeting WCAG AA Include complete, production-ready code, with smoothscrolling with all JavaScript functionality." 5.****Fintech/Banking App- Create a single-page HTML website for a digital banking and investment platform with these specifications: VISUAL DESIGN: - Vibrant gradient aesthetic with trustworthy, modern palette - Glassmorphic sticky header with backdrop blur - Hero gradient: 135deg, #0f2027 → #203a43 → #2c5364 (premium/secure) - Four content sections: * Features: Blue to cyan (#1e3c72 → #2a5298 → #7db9e8) * Accounts: Green to emerald (#00b09b → #96c93d) * Investing: Gold to amber (#f2994a → #f2c94c) * Security: Navy to blue (#2c3e50 → #4ca1af) CONTENT STRUCTURE: - Hero: "Banking that works for you" / "Smart accounts, automated investing, and zero fees for the modern generation" - Features: Instant transfers, Budget tracking, Split bills (3 cards) - Accounts: Checking, Savings, Business (3 types) - Investing: Auto-invest, Portfolio builder, Crypto trading (3 cards) - Security: Bank-level encryption, 2FA, Insurance (3 cards) HEADER: - Logo: "NEXBANK" or "FINFLOW" - Nav: Features, Accounts, Investing, Security - Controls: Language toggle (EN/ES), theme toggle, Log In, Open Account (primary) HEADER FEATURES: - Sticky positioning with blur effect - Logo/brand name on left - Navigation links (Features, Pricing, Library, About) with hover lift effect - Controls on right: Language toggle (EN/PT pill-style), theme toggle button (🌓), Sign In, Get Started (primary button) - All navigation must smooth scroll to section IDs with header offset THEME SYSTEM: - Light theme (default): White background, dark text - Dark theme: Near-black background (#0b0b0d), light text - Toggle persists to localStorage - Respects prefers-color-scheme on first visit - Button shows current state with aria-pressed LANGUAGE SYSTEM: - EN/PT toggle with pill-style selector (active state highlighted) - Complete translation dictionary for all text content - Persists selection to localStorage - Auto-detects browser language (defaults to PT if navigator.language starts with 'pt') - Updates document lang attribute SECTION STRUCTURE: Each section includes: - H2 heading with bold weight (800) - Descriptive paragraph (max-width 70ch) - 3-column card grid (auto-fit, minmax 220px) - Cards have semi-transparent white overlay, rounded corners, subtle border INTERACTIONS: - Nav links: hover background change + 2px upward transform - Buttons: transition all states - Smooth scroll behavior with CSS + JS fallback - Keyboard accessible (Enter/Space for toggles) - Touch-friendly (48px+ tap targets) RESPONSIVE: - Mobile: Hide nav links, stack cards vertically, reduce padding - Use clamp() for fluid typography and spacing - Hero text: 1.6rem to 3rem - Section padding: 2rem to 4.5rem ACCESSIBILITY: - Semantic HTML5 (header, nav, main, section, footer) - ARIA labels on controls and sections - aria-pressed states on toggles - Proper heading hierarchy - Color contrast meeting WCAG AA Include complete, production-ready code, with smoothscrolling with all JavaScript functionality." 6.****Food Delivery Service- Create a single-page HTML website for a restaurant delivery platform with these specifications: VISUAL DESIGN: - Vibrant gradient aesthetic with appetite-appealing colors - Glassmorphic sticky header with backdrop blur - Hero gradient: 135deg, #fc4a1a → #f7b733 → #ff6b6b (warm/inviting) - Four content sections: * Features: Red to orange (#e74c3c → #f39c12) * Restaurants: Green to lime (#27ae60 → #2ecc71) * Delivery: Blue to teal (#3498db → #1abc9c) * Rewards: Purple to pink (#9b59b6 → #e74c3c) CONTENT STRUCTURE: - Hero: "Your favorite food, delivered" / "Thousands of restaurants, lightning-fast delivery, and exclusive deals" - Features: Real-time tracking, Schedule orders, Group ordering (3 cards) - Restaurants: Local favorites, National chains, Virtual kitchens (3 categories) - Delivery: Fast delivery, Pickup option, Contactless (3 cards) - Rewards: Loyalty points, Referral bonus, VIP membership (3 cards) HEADER: - Logo: "QUICKBITE" or "FEAST" - Nav: Features, Restaurants, Delivery, Rewards - Controls: Language toggle (EN/IT), theme toggle, Sign In, Order Now (primary) HEADER FEATURES: - Sticky positioning with blur effect - Logo/brand name on left - Navigation links (Features, Pricing, Library, About) with hover lift effect - Controls on right: Language toggle (EN/PT pill-style), theme toggle button (🌓), Sign In, Get Started (primary button) - All navigation must smooth scroll to section IDs with header offset THEME SYSTEM: - Light theme (default): White background, dark text - Dark theme: Near-black background (#0b0b0d), light text - Toggle persists to localStorage - Respects prefers-color-scheme on first visit - Button shows current state with aria-pressed LANGUAGE SYSTEM: - EN/PT toggle with pill-style selector (active state highlighted) - Complete translation dictionary for all text content - Persists selection to localStorage - Auto-detects browser language (defaults to PT if navigator.language starts with 'pt') - Updates document lang attribute SECTION STRUCTURE: Each section includes: - H2 heading with bold weight (800) - Descriptive paragraph (max-width 70ch) - 3-column card grid (auto-fit, minmax 220px) - Cards have semi-transparent white overlay, rounded corners, subtle border INTERACTIONS: - Nav links: hover background change + 2px upward transform - Buttons: transition all states - Smooth scroll behavior with CSS + JS fallback - Keyboard accessible (Enter/Space for toggles) - Touch-friendly (48px+ tap targets) RESPONSIVE: - Mobile: Hide nav links, stack cards vertically, reduce padding - Use clamp() for fluid typography and spacing - Hero text: 1.6rem to 3rem - Section padding: 2rem to 4.5rem ACCESSIBILITY: - Semantic HTML5 (header, nav, main, section, footer) - ARIA labels on controls and sections - aria-pressed states on toggles - Proper heading hierarchy - Color contrast meeting WCAG AA Include complete, production-ready code, with smoothscrolling with all JavaScript functionality." 7. /////*****FonsecaWebCV Template for an E-commerce site*****///// Here's the complete prompt you would need to recreate this project for your e-commerce site: --- **FULL RECREATION PROMPT:** I need you to create a unified index.html file for a Neocities-hosted e-commerce website selling AI-curated canvas prints (Print on Demand). The site should use GSAP animations throughout with these specific effects and features: **CORE REQUIREMENTS:** 1. Single HTML file with embedded CSS and JavaScript (no external files except GSAP CDN) 2. GSAP 3.12.5 from CDN with ScrollTrigger and Observer plugins 3. Dark theme (#0a0a0a background, #00ff88 accent text, #ff0080 secondary accent) 4. Outfit font family from Google Fonts 5. Custom cursor (20px circle with mix-blend-mode: difference) 6. Fully responsive design **LANGUAGE TOGGLE:** - EN/PT button in header that translates ALL text on the page - Include complete translation objects for English and Portuguese - Toggle affects all content: navigation, product descriptions, form labels, CTAs **HEADER (Fixed):** - Logo in middle (DenkenPrints) in rainbow colours, with character shake with mouse hover - EN/PT language toggle button (styled with border, hover effects) - Animated menu button on right with Effect 5 (see below) - Animated cart button next to menu with effect 5, cart button loads cart, cart needs to have product remove button **MENU SYSTEM (Effect 5):** Menu button animation with sophisticated open/close states: - Icon rotates 220° when opening - Menu panels slide in from right with stagger (0.05s delay) - Panels have different gradient backgrounds - When closing, panels fall off screen with random rotation (-30° to 30°) - Timeline has pause point for reverse playback - Menu is scrollable with overflow-y: auto - Include sections: Shop Categories, About Us(links to https://fonsecaweb.neocities.org/denken-prints-about), Why our canvases(Links to https://fonsecaweb.neocities.org/denken-prints-about), Contact Us - Smooth anchor scrolling to page sections **HERO SECTION:** [particles of dust that when scrolled arrange it self into text that says: "DenkenPrints, AI-Curated Canvas Prints for your home" After text is generated, about 20 canvas images need to fly in from the left hand side over the text before scrolling to next section occurs. **IMAGE EXPANSION SECTION (Effect 2 - Modified):** - Small image container (300x300px, rounded) starts centered - As user scrolls, expands to 90vw x 90vh with border-radius animating to 0 - Overlay clips in from bottom with backdrop-filter blur - Overlay contains heading and description text about having AI generated cnavas of fine art in our home - Smooth ScrollTrigger scrub animation (scrub: 1.2) - Use high-quality product/canvas image **PRODUCT Category SHOWCASE - Horizontal Scrolling Cards:** - Horizontal scroll section pinned during scroll - Multiple product category cards (600px wide each) scroll horizontally - Each card has image carousel, showing multiple images of specific art work When category is clicked, Opens specific category product card within stacked cards - Each product stacked card contains: - Product images, carousel view to allow user to view multiple images of same artwork - Product name/title - Short description - Price (with currency symbol) - "Add to Cart" or "View Details" button - Cards have background (--color-surface: #1a1a1a), rounded borders, padding - Smooth GSAP horizontal scroll animation - - All text to be triggered by translate toggle **STACKED CARDS SECTION, stacked product cards appear small, only growing with mouse hover (Effect 3):** - 50 cards, from 5 categories, so 10 cards per category stacking with 3D perspective transforms - Cards scale down and rotate (rotationX: 40, rotationZ: 5) as they peel away to reveal next product card - Gradients: purple, pink, blue, green - Content: Product name/title - Short description - Price (with currency symbol) - "Add to Cart" or "View Details" button - Cards have background (--color-surface: #1a1a1a), rounded borders, padding - Smooth GSAP horizontal scroll animation - - Works on mobile (min-width: 768px and 400px breakpoint) **CONTACT FORM CARD:** - Separate stacked card with contact form - Pink gradient background - Form fields: Name, Email, Message (all with proper labels and placeholders) - Submit button with hover effects (translateY, box-shadow) - Form submits with alert (placeholder for backend) - Translates to Portuguese Footer "Denken Prints Sophie & Filipe — finely printed canvas art Free UK shipping • 30-day returns • Secure payments © Denken Prints" in neat and organised fashion, also translate triggered **TECHNICAL SPECIFICATIONS:** - All ScrollTrigger animations use proper start/end points - Stacked cards use perspective: 1000px and transform-style: preserve-3d - Smooth scrolling with scroll-behavior: smooth on html - scroll-margin-top: 80px on anchor sections - Media queries for mobile responsiveness (@media max-width: 768px) - No localStorage or sessionStorage (not supported in artifacts) **GSAP EFFECTS TO IMPLEMENT:** Effect 1: Horizontal Loop Helper Function ``` - Seamless infinite loop - Speed and padding configurable - Uses xPercent for responsiveness - Includes next(), previous(), toIndex() methods ``` Effect 2: Image Container Expansion ``` - width/height from 300px to 90vw/90vh - borderRadius from 20px to 0px - Overlay clipPath from inset(100% 0 0 0) to inset(0% 0 0 0) - Scrub: 1.2, ease: expo.out ``` Effect 3: Stacked Cards ``` - Cards pin individually with pinSpacing: false - Scale formula: 0.4 + 0.025 * index - rotationX: 40, rotationZ: 5 - endTrigger: last card - transformOrigin: "50% center" ``` ``` Effect 5: Menu Animation ``` - Timeline with addPause() for exit point - Icon rotation: 0 -> 220 -> 0 - Panels: xPercent: 0 to -100, stagger: 0.05 - Exit: y: window.innerHeight * 2, rotation: random(-30, 30) - Ease: expo.inOut ``` **COLOR SCHEME:** ```css --color-bg: #0a0a0a; --color-text: #00ff88; --color-accent: #ff0080; --color-surface: #1a1a1a; ``` **CONTENT STRUCTURE:** 1. Header (fixed) 2. Hero section (your choice of animation) 3. Image expansion section (#about anchor) 4. Product category showcase horizontal scroll (#categories anchor) 5. Small Stacked product cards that expand with mouse hover, also scrolltriggered that stack when scrolled and another product appears - about the shop (#products anchor) 6. Contact form card (#contact anchor) 7. Footer 8. Spacer (20vh) **DELIVERABLES:** - Complete unified index.html file - Fully functional with placeholder product images from Unsplash - All animations working - EN/PT toggle fully functional - Ready to upload to Neocities - Include 50 product cards with mock data (product names, prices in € or $) **IMPORTANT NOTES:** - Use scroll-margin-top for proper anchor positioning - Menu must be scrollable and work on all mobile screens - All text must have data-translate attributes - Include complete Portuguese translations - Custom cursor must be visible and smooth - Product cards should feel premium and high-end Please deliver the complete, working code as a single HTML file." --- This prompt captures all the effects, specifications, and requirements to recreate your site with an e-commerce focus! //////******Gradient Palette Recommendations by Industry******////// SaaS-->Purple → Blue → Pink-->Innovation, trust Finance-->Navy → Teal → Green-->Security, growth Health-->Coral → Pink → Orange-->Energy, vitality Education-->Blue → Purple → Cyan-->Knowledge, creativity Food-->Red → Orange → Yellow-->Appetite, warmth Real Estate-->Green → Blue → Mint-->Natural, trustworthy Fashion-->Pink → Purple → Gold-->Luxury, creativity Travel-->Sky Blue → Turquoise → Sunset-->Adventure, freedom ✅✅✅✅✅✅✅✅--Quality Checklist--✅✅✅✅✅✅✅✅ When generating with these prompts, ensure: ✅-All 4 section gradients are distinct and vibrant ✅-Theme toggle persists to localStorage ✅-Language toggle includes complete translation dictionary ✅-Smooth scrolling accounts for sticky header offset ✅-Cards have semi-transparent overlay effect ✅-Hover states include transform animations ✅-Mobile responsiveness hides nav, stacks cards ✅-ARIA labels present on all interactive controls ✅-Footer includes dynamic year via JavaScript