hao/skills
1
0
派生 0
代码 工单 合并请求 工作流 软件包 项目 发布 百科 活动

Add detailed prompts for uiuxmax

浏览代码
这个提交包含在：
codex
2026-02-06 08:24:21 +08:00
父节点 e3087834b8
当前提交 cb98d5c39c
共修改 2 个文件，包含 46 行新增和 3 行删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件

40
uiuxmax/references/gallery-detailed.csv 普通文件
查看文件

@@ -0,0 +1,40 @@
id,order,name,category,imageUrl,url,style,mode,primary_color,secondary_color,cta_color,background_color,implemented,prompt,prompt_detailed
1,1,SaaS Analytics Dashboard,SaaS,/thumbnails/saas-analytics-dashboard.png,/demo/saas-analytics-dashboard,Glassmorphism + Flat Design,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Create a modern SaaS analytics dashboard landing page with glassmorphism cards, hero section showcasing real-time data visualization, feature highlights with icons, pricing table, and trust badges. Focus on clarity and professional feel.","Create a modern SaaS analytics dashboard landing page with glassmorphism cards, hero section showcasing real-time data visualization, feature highlights with icons, pricing table, and trust badges. Focus on clarity and professional feel. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with product value prop, KPI teaser, and dashboard screenshot; analytics sections with charts, KPIs, and filter chips; integrations and security/compliance badges; pricing tiers with feature comparison; customer logos, testimonials, and final CTA. Visual style: Glassmorphism + Flat Design. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
7,1,Educational Platform,Education,/thumbnails/educational-platform.png,/demo/educational-platform,Claymorphism + Vibrant & Block-based,light,#FDBCB4,#ADD8E6,#22C55E,#FFFFFF,true,"Create a playful educational platform landing page with claymorphism cards, course catalog preview, progress tracking demo, student testimonials, and enrollment CTA. Use vibrant, engaging colors.","Create a playful educational platform landing page with claymorphism cards, course catalog preview, progress tracking demo, student testimonials, and enrollment CTA. Use vibrant, engaging colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with course discovery; course cards and categories; instructor profiles; learning paths and progress; enroll CTA. Visual style: Claymorphism + Vibrant & Block-based. Color palette: primary #FDBCB4, secondary #ADD8E6, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
21,1,Pet Grooming & Spa,Pet Services,/thumbnails/pet-grooming.png,/demo/pet-grooming,Claymorphism + Vibrant & Block-based,light,#FF9F43,#87CEEB,#FF9F43,#FFF8F0,true,"Create a friendly pet grooming service landing page with claymorphism cards, service packages, pet gallery, booking system, and testimonials from pet owners. Use playful warm colors.","Create a friendly pet grooming service landing page with claymorphism cards, service packages, pet gallery, booking system, and testimonials from pet owners. Use playful warm colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: service packages with pricing; before/after gallery; appointment booking widget; groomer profiles; reviews and CTA. Visual style: Claymorphism + Vibrant & Block-based. Color palette: primary #FF9F43, secondary #87CEEB, CTA #FF9F43, background #FFF8F0. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
2,2,AI Chatbot Platform,AI/Chatbot,/thumbnails/ai-chatbot-platform.png,/demo/ai-chatbot-platform,AI-Native UI + Minimalism,light,#6366F1,#10B981,#6366F1,#F5F5F5,true,"Design a minimal AI chatbot platform landing page with conversational UI preview, streaming text animation demo, feature cards with AI capabilities, integration logos, and a prominent 'Try Now' CTA. Use neutral tones with AI purple accent.","Design a minimal AI chatbot platform landing page with conversational UI preview, streaming text animation demo, feature cards with AI capabilities, integration logos, and a prominent 'Try Now' CTA. Use neutral tones with AI purple accent. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: chat UI preview with example conversations; capabilities grid (context memory, tools, analytics); use cases by industry; integration logos and API access; trust, safety, and privacy section. Visual style: AI-Native UI + Minimalism. Color palette: primary #6366F1, secondary #10B981, CTA #6366F1, background #F5F5F5. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
3,3,Luxury E-commerce,E-commerce,/thumbnails/luxury-ecommerce.png,/demo/luxury-ecommerce,Liquid Glass + Glassmorphism,light,#000000,#FFD700,#FFD700,#FFFFFF,true,"Build an elegant luxury e-commerce landing page with liquid glass effects, high-end product showcase, storytelling sections, premium brand values, and exclusive membership CTA. Emphasize sophistication and exclusivity.","Build an elegant luxury e-commerce landing page with liquid glass effects, high-end product showcase, storytelling sections, premium brand values, and exclusive membership CTA. Emphasize sophistication and exclusivity. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with editorial product imagery and headline; featured collections and product grid; product detail highlights (materials, craftsmanship); reviews and brand story; shipping, returns, and loyalty CTA. Visual style: Liquid Glass + Glassmorphism. Color palette: primary #000000, secondary #FFD700, CTA #FFD700, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
4,4,Fintech Crypto Dashboard,Fintech/Crypto,/thumbnails/fintech-crypto.png,/demo/fintech-crypto,Glassmorphism + Dark Mode (OLED),dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Create a dark mode fintech/crypto landing page with glassmorphism cards, real-time price charts preview, security features highlight, wallet integration showcase, and trust indicators. Focus on security and modern tech feel.","Create a dark mode fintech/crypto landing page with glassmorphism cards, real-time price charts preview, security features highlight, wallet integration showcase, and trust indicators. Focus on security and modern tech feel. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: portfolio overview with balance and performance; market charts and watchlist; security and compliance badges; mobile app preview and onboarding steps; pricing or fee transparency. Visual style: Glassmorphism + Dark Mode (OLED). Color palette: primary #0080FF, secondary #39FF14, CTA #39FF14, background #0A0E27. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
5,5,Health & Wellness App,Healthcare,/thumbnails/health-wellness.png,/demo/health-wellness,Neumorphism + Soft UI Evolution,light,#87CEEB,#90EE90,#22C55E,#F5F5F5,true,"Design a calming health and wellness app landing page with soft UI elements, neumorphic cards, feature showcase for meditation/fitness tracking, testimonials, and app download CTAs. Use calm, soothing colors.","Design a calming health and wellness app landing page with soft UI elements, neumorphic cards, feature showcase for meditation/fitness tracking, testimonials, and app download CTAs. Use calm, soothing colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with calming imagery and wellness value prop; programs or plans grid; progress tracking preview; coach or expert profiles; testimonials and CTA. Visual style: Neumorphism + Soft UI Evolution. Color palette: primary #87CEEB, secondary #90EE90, CTA #22C55E, background #F5F5F5. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
6,6,Creative Agency Portfolio,Creative,/thumbnails/creative-agency.png,/demo/creative-agency,Brutalism + Motion-Driven,light,#FF0000,#0000FF,#FFFF00,#FFFFFF,true,"Build a bold creative agency portfolio landing page with brutalist elements, motion-driven animations, case study previews, team showcase, and contact form. Emphasize creativity and uniqueness.","Build a bold creative agency portfolio landing page with brutalist elements, motion-driven animations, case study previews, team showcase, and contact form. Emphasize creativity and uniqueness. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with bold typography and project highlight; case study grid with hover previews; services and process timeline; client logos and testimonials; contact CTA. Visual style: Brutalism + Motion-Driven. Color palette: primary #FF0000, secondary #0000FF, CTA #FFFF00, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
8,8,Real Estate Luxury,Real Estate,/thumbnails/real-estate.png,/demo/real-estate,Glassmorphism + Minimalism,light,#0077B6,#FFD700,#0077B6,#FFFFFF,true,"Design an elegant real estate landing page with glassmorphism property cards, virtual tour preview, featured listings, agent profiles, and contact form. Focus on trust and premium feel.","Design an elegant real estate landing page with glassmorphism property cards, virtual tour preview, featured listings, agent profiles, and contact form. Focus on trust and premium feel. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with premium listing and location; featured listings grid; agent profiles and concierge services; map or neighborhood highlights; book a tour CTA. Visual style: Glassmorphism + Minimalism. Color palette: primary #0077B6, secondary #FFD700, CTA #0077B6, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
9,9,Gaming Platform,Gaming,/thumbnails/gaming-platform.png,/demo/gaming-platform,3D & Hyperrealism + Retro-Futurism,dark,#FF006E,#00FFFF,#39FF14,#1A1A2E,true,"Build an immersive gaming platform landing page with 3D elements, retro-futuristic style, game showcase carousel, community features, and download CTA. Use vibrant neon colors on dark background.","Build an immersive gaming platform landing page with 3D elements, retro-futuristic style, game showcase carousel, community features, and download CTA. Use vibrant neon colors on dark background. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with featured game trailer; game catalog with genres and filters; community stats and tournaments; download/app store CTA; social proof and testimonials. Visual style: 3D & Hyperrealism + Retro-Futurism. Color palette: primary #FF006E, secondary #00FFFF, CTA #39FF14, background #1A1A2E. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
10,10,Restaurant & Food,Food & Restaurant,/thumbnails/restaurant-food.png,/demo/restaurant-food,Vibrant & Block-based + Motion-Driven,light,#FF6B35,#8B4513,#FF6B35,#FFFAF0,true,"Create a warm restaurant landing page with vibrant food photography, menu preview, reservation system, chef story section, and location map. Use appetizing warm colors.","Create a warm restaurant landing page with vibrant food photography, menu preview, reservation system, chef story section, and location map. Use appetizing warm colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with signature dish and reservation CTA; menu highlights and categories; chef story and ambiance gallery; hours, location, and delivery partners; booking and events CTA. Visual style: Vibrant & Block-based + Motion-Driven. Color palette: primary #FF6B35, secondary #8B4513, CTA #FF6B35, background #FFFAF0. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
11,11,Fitness & Gym App,Fitness,/thumbnails/fitness-gym.png,/demo/fitness-gym,Vibrant & Block-based + Dark Mode (OLED),dark,#FF6B35,#0080FF,#FF6B35,#121212,true,"Design an energetic fitness app landing page with dark mode, workout preview cards, progress tracking demo, trainer profiles, and subscription CTAs. Use bold, motivating colors.","Design an energetic fitness app landing page with dark mode, workout preview cards, progress tracking demo, trainer profiles, and subscription CTAs. Use bold, motivating colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with class schedule preview; membership tiers and pricing; trainer profiles and facilities; progress tracking or app preview; testimonials and CTA. Visual style: Vibrant & Block-based + Dark Mode (OLED). Color palette: primary #FF6B35, secondary #0080FF, CTA #FF6B35, background #121212. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
12,12,Travel & Tourism,Travel,/thumbnails/travel-tourism.png,/demo/travel-tourism,Aurora UI + Motion-Driven,light,#0080FF,#FF7F00,#FF7F00,#FFFFFF,true,"Build an inspiring travel agency landing page with aurora UI gradients, destination showcase, booking preview, traveler testimonials, and trip planner CTA. Use vibrant destination colors.","Build an inspiring travel agency landing page with aurora UI gradients, destination showcase, booking preview, traveler testimonials, and trip planner CTA. Use vibrant destination colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with destination imagery and search; featured destinations cards; sample itineraries and experiences; reviews and trust badges; booking CTA. Visual style: Aurora UI + Motion-Driven. Color palette: primary #0080FF, secondary #FF7F00, CTA #FF7F00, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
13,13,NFT & Web3 Platform,NFT/Web3,/thumbnails/nft-web3.png,/demo/nft-web3,Cyberpunk UI + Glassmorphism,dark,#FF00FF,#00FFFF,#FFD700,#0D0D0D,true,"Create a cyberpunk-style NFT platform landing page with glassmorphism cards, featured NFT gallery, wallet connection demo, creator spotlight, and marketplace preview. Use neon colors on dark background.","Create a cyberpunk-style NFT platform landing page with glassmorphism cards, featured NFT gallery, wallet connection demo, creator spotlight, and marketplace preview. Use neon colors on dark background. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with featured collection and mint CTA; collection gallery and rarity highlights; creator profiles and roadmap; wallet connect and security notes; community CTA. Visual style: Cyberpunk UI + Glassmorphism. Color palette: primary #FF00FF, secondary #00FFFF, CTA #FFD700, background #0D0D0D. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
14,14,Beauty & Spa Service,Beauty/Spa,/thumbnails/beauty-spa.png,/demo/beauty-spa,Soft UI Evolution + Neumorphism,light,#FFB6C1,#90EE90,#FFD700,#FFF5F5,true,"Design a serene beauty spa landing page with soft UI elements, service menu, before/after gallery, booking system preview, and testimonials. Use soft pastels and calming aesthetics.","Design a serene beauty spa landing page with soft UI elements, service menu, before/after gallery, booking system preview, and testimonials. Use soft pastels and calming aesthetics. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with calming imagery and booking CTA; service menu with pricing; therapist profiles or certifications; before/after or testimonial section; membership or package CTA. Visual style: Soft UI Evolution + Neumorphism. Color palette: primary #FFB6C1, secondary #90EE90, CTA #FFD700, background #FFF5F5. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
15,15,Developer Tools,Developer Tools,/thumbnails/developer-tools.png,/demo/developer-tools,Dark Mode (OLED) + Minimalism,dark,#39FF14,#0080FF,#39FF14,#0D0D0D,true,"Build a minimal developer tools landing page with dark mode, code snippet previews, feature comparison table, integration logos, and documentation link. Use syntax highlighting colors.","Build a minimal developer tools landing page with dark mode, code snippet previews, feature comparison table, integration logos, and documentation link. Use syntax highlighting colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with product screenshot and code snippet; feature list with performance/security claims; API/SDK section with quick start; integration logos; pricing and docs CTA. Visual style: Dark Mode (OLED) + Minimalism. Color palette: primary #39FF14, secondary #0080FF, CTA #39FF14, background #0D0D0D. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
16,16,Music Streaming,Entertainment,/thumbnails/music-streaming.png,/demo/music-streaming,Dark Mode (OLED) + Vibrant & Block-based,dark,#1DB954,#FF1493,#1DB954,#121212,true,"Create a dark mode music streaming landing page with vibrant accents, playlist showcase, audio player preview, artist spotlight, and premium subscription CTA. Use album art-inspired colors.","Create a dark mode music streaming landing page with vibrant accents, playlist showcase, audio player preview, artist spotlight, and premium subscription CTA. Use album art-inspired colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with player UI preview; featured playlists and albums; artist spotlight and discovery; subscription tiers; download/app store CTA. Visual style: Dark Mode (OLED) + Vibrant & Block-based. Color palette: primary #1DB954, secondary #FF1493, CTA #1DB954, background #121212. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
17,17,Legal Services,Legal,/thumbnails/legal-services.png,/demo/legal-services,Trust & Authority + Minimalism,light,#1E3A5F,#FFD700,#1E3A5F,#FFFFFF,true,"Design a trustworthy legal services landing page with minimal design, practice areas showcase, attorney profiles, case results, and consultation booking. Use professional navy and gold.","Design a trustworthy legal services landing page with minimal design, practice areas showcase, attorney profiles, case results, and consultation booking. Use professional navy and gold. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with practice focus and consultation CTA; practice areas grid; attorney profiles and credentials; case results or testimonials; contact and booking CTA. Visual style: Trust & Authority + Minimalism. Color palette: primary #1E3A5F, secondary #FFD700, CTA #1E3A5F, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
18,18,Wedding & Events,Events,/thumbnails/wedding-events.png,/demo/wedding-events,Soft UI Evolution + Aurora UI,light,#FFD6E0,#FFD700,#FFD700,#FFFAF5,true,"Build a romantic wedding planning landing page with soft UI, portfolio gallery, vendor directory preview, planning tools showcase, and contact form. Use soft pink and gold accents.","Build a romantic wedding planning landing page with soft UI, portfolio gallery, vendor directory preview, planning tools showcase, and contact form. Use soft pink and gold accents. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with romantic imagery and inquiry CTA; package tiers and services; gallery of past events; planning timeline and testimonials; contact form CTA. Visual style: Soft UI Evolution + Aurora UI. Color palette: primary #FFD6E0, secondary #FFD700, CTA #FFD700, background #FFFAF5. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
19,19,Coworking Space,Beauty/Spa,/thumbnails/coworking-space.png,/demo/coworking-space,Vibrant & Block-based + Glassmorphism,light,#FFB6C1,#90EE90,#FFD700,#FFF5F5,true,"Create a vibrant coworking space landing page with glassmorphism cards, space tour preview, membership plans, amenities showcase, and booking CTA. Use energetic modern colors.","Create a vibrant coworking space landing page with glassmorphism cards, space tour preview, membership plans, amenities showcase, and booking CTA. Use energetic modern colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with space imagery and tour CTA; membership tiers and amenities; floor plan or workspace types; community events and testimonials; location map and contact CTA. Visual style: Vibrant & Block-based + Glassmorphism. Color palette: primary #FFB6C1, secondary #90EE90, CTA #FFD700, background #FFF5F5. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
20,20,Sustainability Platform,AI/Chatbot,/thumbnails/sustainability-platform.png,/demo/sustainability-platform,Organic Biophilic + Minimalism,light,#6366F1,#10B981,#6366F1,#F5F5F5,true,"Design an eco-friendly sustainability platform landing page with organic biophilic elements, carbon footprint calculator preview, impact metrics, and certification badges. Use earth tones and greens.","Design an eco-friendly sustainability platform landing page with organic biophilic elements, carbon footprint calculator preview, impact metrics, and certification badges. Use earth tones and greens. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: impact dashboard with key metrics; initiatives or projects grid; partners and certifications; progress timeline; join or donate CTA. Visual style: Organic Biophilic + Minimalism. Color palette: primary #6366F1, secondary #10B981, CTA #6366F1, background #F5F5F5. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
22,22,Veterinary Clinic,Other,/thumbnails/veterinary-clinic.png,/demo/veterinary-clinic,Soft UI Evolution + Accessible & Ethical,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Design a caring veterinary clinic landing page with soft UI elements, services overview, vet team profiles, emergency contact section, and appointment booking. Use calming pet-friendly colors.","Design a caring veterinary clinic landing page with soft UI elements, services overview, vet team profiles, emergency contact section, and appointment booking. Use calming pet-friendly colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with pet-friendly imagery and booking CTA; services list with icons; vet team profiles and credentials; clinic hours, location map, and emergency info; testimonials and contact CTA. Visual style: Soft UI Evolution + Accessible & Ethical. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
23,23,Pet Adoption Platform,Pet Services,/thumbnails/pet-adoption.png,/demo/pet-adoption,Motion-Driven + Claymorphism,light,#FF9F43,#87CEEB,#FF9F43,#FFF8F0,true,"Build a heartwarming pet adoption platform landing page with motion-driven pet cards, search filters preview, success stories, shelter partnerships, and adoption CTA. Use warm inviting colors.","Build a heartwarming pet adoption platform landing page with motion-driven pet cards, search filters preview, success stories, shelter partnerships, and adoption CTA. Use warm inviting colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: featured pets grid with filters and tags; adoption steps timeline; success stories and testimonials; partner shelters and volunteer info; donate or adopt CTA. Visual style: Motion-Driven + Claymorphism. Color palette: primary #FF9F43, secondary #87CEEB, CTA #FF9F43, background #FFF8F0. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
24,24,Medical Clinic Portal,Other,/thumbnails/medical-clinic.png,/demo/medical-clinic,Accessible & Ethical + Minimalism,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Create a trustworthy medical clinic landing page with accessible design, services directory, doctor profiles, patient portal preview, and appointment booking. Focus on trust and accessibility.","Create a trustworthy medical clinic landing page with accessible design, services directory, doctor profiles, patient portal preview, and appointment booking. Focus on trust and accessibility. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: services directory with icons; doctor profiles and specialties; patient portal preview and appointment booking; insurance logos and trust badges; accessibility and FAQ section. Visual style: Accessible & Ethical + Minimalism. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
25,25,Telemedicine Platform,Healthcare,/thumbnails/telemedicine.png,/demo/telemedicine,Soft UI Evolution + AI-Native UI,light,#87CEEB,#90EE90,#22C55E,#F5F5F5,true,"Design a modern telemedicine platform landing page with soft UI, video consultation preview, specialist directory, health tracking features, and app download CTAs. Use calming healthcare colors.","Design a modern telemedicine platform landing page with soft UI, video consultation preview, specialist directory, health tracking features, and app download CTAs. Use calming healthcare colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with video call preview and booking CTA; care journey steps; doctor profiles and availability; security/privacy assurances; app download CTA. Visual style: Soft UI Evolution + AI-Native UI. Color palette: primary #87CEEB, secondary #90EE90, CTA #22C55E, background #F5F5F5. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
26,26,Mental Health App,Healthcare,/thumbnails/mental-health.png,/demo/mental-health,Neumorphism + Accessible & Ethical,light,#87CEEB,#90EE90,#22C55E,#F5F5F5,true,"Build a calming mental health app landing page with neumorphic elements, mood tracking preview, therapy session booking, resource library, and crisis support section. Use soothing pastels.","Build a calming mental health app landing page with neumorphic elements, mood tracking preview, therapy session booking, resource library, and crisis support section. Use soothing pastels. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with calming tone and get-started CTA; therapy plans or programs; session scheduling or chat preview; privacy and safety section; testimonials and resources. Visual style: Neumorphism + Accessible & Ethical. Color palette: primary #87CEEB, secondary #90EE90, CTA #22C55E, background #F5F5F5. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
27,27,Digital Banking App,Other,/thumbnails/digital-banking.png,/demo/digital-banking,Glassmorphism + Trust & Authority,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Create a sleek digital banking landing page with glassmorphism cards, account overview preview, transaction features, security highlights, and mobile app download. Use trust-building colors.","Create a sleek digital banking landing page with glassmorphism cards, account overview preview, transaction features, security highlights, and mobile app download. Use trust-building colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with mobile app preview; account overview and card controls; transfer and bill-pay features; budgeting insights and savings goals; security badges and CTA. Visual style: Glassmorphism + Trust & Authority. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
28,28,Investment Platform,Fintech/Crypto,/thumbnails/investment-platform.png,/demo/investment-platform,Dark Mode (OLED) + Data-Dense Dashboard,dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Design a professional investment platform landing page with dark mode, portfolio analytics preview, market data widgets, educational resources, and account signup. Focus on trust and data.","Design a professional investment platform landing page with dark mode, portfolio analytics preview, market data widgets, educational resources, and account signup. Focus on trust and data. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: portfolio allocation and performance chart; risk profiles and recommendations; research insights and news; fees/pricing transparency; get-started CTA. Visual style: Dark Mode (OLED) + Data-Dense Dashboard. Color palette: primary #0080FF, secondary #39FF14, CTA #39FF14, background #0A0E27. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
29,29,Payment Gateway,Fintech/Crypto,/thumbnails/payment-gateway.png,/demo/payment-gateway,Minimalism + Trust & Authority,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Build a conversion-focused payment gateway landing page with minimal design, integration code preview, pricing tiers, security certifications, and developer documentation link. Use professional colors.","Build a conversion-focused payment gateway landing page with minimal design, integration code preview, pricing tiers, security certifications, and developer documentation link. Use professional colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with payment flow illustration; supported payment methods; integration steps with API/SDK preview; pricing and compliance badges; contact sales CTA. Visual style: Minimalism + Trust & Authority. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
30,30,Crypto Wallet,Fintech/Crypto,/thumbnails/crypto-wallet.png,/demo/crypto-wallet,Glassmorphism + Dark Mode (OLED),dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Create a secure crypto wallet landing page with dark glassmorphism, multi-chain support showcase, security features, transaction preview, and download CTAs. Use crypto-native dark theme.","Create a secure crypto wallet landing page with dark glassmorphism, multi-chain support showcase, security features, transaction preview, and download CTAs. Use crypto-native dark theme. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: wallet dashboard with asset list; send/receive and swap preview; staking or rewards; security features (biometrics, backup); download CTA. Visual style: Glassmorphism + Dark Mode (OLED). Color palette: primary #0080FF, secondary #39FF14, CTA #39FF14, background #0A0E27. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
31,31,DeFi Yield Platform,Fintech/Crypto,/thumbnails/defi-yield.png,/demo/defi-yield,Cyberpunk UI + Glassmorphism,dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Design a DeFi yield farming platform landing page with cyberpunk aesthetics, APY calculators, liquidity pools preview, tokenomics section, and wallet connect. Use neon on dark.","Design a DeFi yield farming platform landing page with cyberpunk aesthetics, APY calculators, liquidity pools preview, tokenomics section, and wallet connect. Use neon on dark. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: vaults with APY cards; risk disclosure and strategy info; performance charts; wallet connect CTA; security audits. Visual style: Cyberpunk UI + Glassmorphism. Color palette: primary #0080FF, secondary #39FF14, CTA #39FF14, background #0A0E27. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
32,32,CEX Trading Platform,Fintech/Crypto,/thumbnails/cex-trading.png,/demo/cex-trading,Dark Mode (OLED) + Data-Dense Dashboard,dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Build a professional centralized exchange landing page with dark mode, trading interface preview, market pairs, security features, and registration flow. Focus on trust and performance.","Build a professional centralized exchange landing page with dark mode, trading interface preview, market pairs, security features, and registration flow. Focus on trust and performance. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: market overview with charts; order book and trade panel; market pairs list and filters; KYC/security badges; download or sign-up CTA. Visual style: Dark Mode (OLED) + Data-Dense Dashboard. Color palette: primary #0080FF, secondary #39FF14, CTA #39FF14, background #0A0E27. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
33,33,DEX Swap Interface,Fintech/Crypto,/thumbnails/dex-swap.png,/demo/dex-swap,Glassmorphism + Cyberpunk UI,dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Create a decentralized exchange landing page with glassmorphism swap interface preview, supported tokens, liquidity provider benefits, governance features, and wallet integration. Use Web3 aesthetics.","Create a decentralized exchange landing page with glassmorphism swap interface preview, supported tokens, liquidity provider benefits, governance features, and wallet integration. Use Web3 aesthetics. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: swap widget with token selectors; slippage and gas controls; liquidity pools overview; token analytics; connect wallet CTA. Visual style: Glassmorphism + Cyberpunk UI. Color palette: primary #0080FF, secondary #39FF14, CTA #39FF14, background #0A0E27. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
35,35,NFT Art Gallery,NFT/Web3,/thumbnails/nft-art-gallery.png,/demo/nft-art-gallery,Minimalism + Motion-Driven,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Build an elegant NFT art gallery landing page with minimal design, curated collections, artist profiles, exhibition previews, and minting interface. Focus on art presentation.","Build an elegant NFT art gallery landing page with minimal design, curated collections, artist profiles, exhibition previews, and minting interface. Focus on art presentation. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with featured artwork; gallery grid with filters; artist profiles; collection detail previews; buy/mint CTA. Visual style: Minimalism + Motion-Driven. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
36,36,Generative Art Platform,AI/Chatbot,/thumbnails/generative-art-platform.png,/demo/generative-art-platform,Minimalism + Gen Z Chaos,dark,#0080FF,#8B00FF,#22C55E,#0D0D0D,true,"Create a generative art platform landing page with dark mode, AI art generation preview, style gallery, creator tools showcase, and minting flow. Use canvas-neutral with vibrant accents.","Create a generative art platform landing page with dark mode, AI art generation preview, style gallery, creator tools showcase, and minting flow. Use canvas-neutral with vibrant accents. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with dynamic art preview; creation tools and parameter controls; gallery of generated works; export or mint options; community showcase CTA. Visual style: Minimalism + Gen Z Chaos. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #0D0D0D. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
37,37,Sales CRM Platform,SaaS,/thumbnails/sales-crm-platform.png,/demo/sales-crm-platform,Feature-Rich Showcase + Trust & Authority,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Design a professional sales CRM landing page with feature-rich showcase, pipeline visualization preview, integration logos, customer success stories, and free trial CTA. Use trust colors.","Design a professional sales CRM landing page with feature-rich showcase, pipeline visualization preview, integration logos, customer success stories, and free trial CTA. Use trust colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: pipeline board with stages; deal cards and revenue forecast; activity timeline and tasks; integrations and automation; pricing and CTA. Visual style: Feature-Rich Showcase + Trust & Authority. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
38,38,Customer Support CRM,SaaS,/thumbnails/customer-support-crm.png,/demo/customer-support-crm,Soft UI Evolution + Feature-Rich Showcase,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Build a friendly customer support CRM landing page with soft UI, ticket management preview, omnichannel features, AI chatbot integration, and pricing comparison. Use approachable colors.","Build a friendly customer support CRM landing page with soft UI, ticket management preview, omnichannel features, AI chatbot integration, and pricing comparison. Use approachable colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: ticket inbox with SLA indicators; agent workload and performance; knowledge base preview; automation rules and integrations; book a demo CTA. Visual style: Soft UI Evolution + Feature-Rich Showcase. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
39,39,AI Writing Assistant,AI/Chatbot,/thumbnails/ai-writing-assistant.png,/demo/ai-writing-assistant,AI-Native UI + Minimalism,light,#6366F1,#10B981,#6366F1,#F5F5F5,true,"Create an AI writing assistant landing page with minimal chrome, live writing demo, use case showcases, integration options, and subscription tiers. Use neutral with AI purple accent.","Create an AI writing assistant landing page with minimal chrome, live writing demo, use case showcases, integration options, and subscription tiers. Use neutral with AI purple accent. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: editor UI with suggestions; templates and workflows; tone and style controls; collaboration/sharing; upgrade CTA. Visual style: AI-Native UI + Minimalism. Color palette: primary #6366F1, secondary #10B981, CTA #6366F1, background #F5F5F5. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
40,40,AI Image Generator,AI/Chatbot,/thumbnails/ai-image-generator.png,/demo/ai-image-generator,Dark Mode (OLED) + Bento Box Grid,dark,#0080FF,#8B00FF,#22C55E,#0D0D0D,true,"Design an AI image generation platform landing page with dark mode, generation preview gallery, style options, prompt examples, and credit-based pricing. Use creative vibrant accents.","Design an AI image generation platform landing page with dark mode, generation preview gallery, style options, prompt examples, and credit-based pricing. Use creative vibrant accents. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: prompt input with style presets; generation gallery with variants; credit usage and plans; export/share options; get-started CTA. Visual style: Dark Mode (OLED) + Bento Box Grid. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #0D0D0D. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements."
1 id order name category imageUrl url style mode primary_color secondary_color cta_color background_color implemented prompt prompt_detailed
2 1 1 SaaS Analytics Dashboard SaaS /thumbnails/saas-analytics-dashboard.png /demo/saas-analytics-dashboard Glassmorphism + Flat Design light #0080FF #8B00FF #22C55E #FFFFFF true Create a modern SaaS analytics dashboard landing page with glassmorphism cards, hero section showcasing real-time data visualization, feature highlights with icons, pricing table, and trust badges. Focus on clarity and professional feel. Create a modern SaaS analytics dashboard landing page with glassmorphism cards, hero section showcasing real-time data visualization, feature highlights with icons, pricing table, and trust badges. Focus on clarity and professional feel. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with product value prop, KPI teaser, and dashboard screenshot; analytics sections with charts, KPIs, and filter chips; integrations and security/compliance badges; pricing tiers with feature comparison; customer logos, testimonials, and final CTA. Visual style: Glassmorphism + Flat Design. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
3 7 1 Educational Platform Education /thumbnails/educational-platform.png /demo/educational-platform Claymorphism + Vibrant & Block-based light #FDBCB4 #ADD8E6 #22C55E #FFFFFF true Create a playful educational platform landing page with claymorphism cards, course catalog preview, progress tracking demo, student testimonials, and enrollment CTA. Use vibrant, engaging colors. Create a playful educational platform landing page with claymorphism cards, course catalog preview, progress tracking demo, student testimonials, and enrollment CTA. Use vibrant, engaging colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with course discovery; course cards and categories; instructor profiles; learning paths and progress; enroll CTA. Visual style: Claymorphism + Vibrant & Block-based. Color palette: primary #FDBCB4, secondary #ADD8E6, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
4 21 1 Pet Grooming & Spa Pet Services /thumbnails/pet-grooming.png /demo/pet-grooming Claymorphism + Vibrant & Block-based light #FF9F43 #87CEEB #FF9F43 #FFF8F0 true Create a friendly pet grooming service landing page with claymorphism cards, service packages, pet gallery, booking system, and testimonials from pet owners. Use playful warm colors. Create a friendly pet grooming service landing page with claymorphism cards, service packages, pet gallery, booking system, and testimonials from pet owners. Use playful warm colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: service packages with pricing; before/after gallery; appointment booking widget; groomer profiles; reviews and CTA. Visual style: Claymorphism + Vibrant & Block-based. Color palette: primary #FF9F43, secondary #87CEEB, CTA #FF9F43, background #FFF8F0. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
5 2 2 AI Chatbot Platform AI/Chatbot /thumbnails/ai-chatbot-platform.png /demo/ai-chatbot-platform AI-Native UI + Minimalism light #6366F1 #10B981 #6366F1 #F5F5F5 true Design a minimal AI chatbot platform landing page with conversational UI preview, streaming text animation demo, feature cards with AI capabilities, integration logos, and a prominent 'Try Now' CTA. Use neutral tones with AI purple accent. Design a minimal AI chatbot platform landing page with conversational UI preview, streaming text animation demo, feature cards with AI capabilities, integration logos, and a prominent 'Try Now' CTA. Use neutral tones with AI purple accent. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: chat UI preview with example conversations; capabilities grid (context memory, tools, analytics); use cases by industry; integration logos and API access; trust, safety, and privacy section. Visual style: AI-Native UI + Minimalism. Color palette: primary #6366F1, secondary #10B981, CTA #6366F1, background #F5F5F5. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
6 3 3 Luxury E-commerce E-commerce /thumbnails/luxury-ecommerce.png /demo/luxury-ecommerce Liquid Glass + Glassmorphism light #000000 #FFD700 #FFD700 #FFFFFF true Build an elegant luxury e-commerce landing page with liquid glass effects, high-end product showcase, storytelling sections, premium brand values, and exclusive membership CTA. Emphasize sophistication and exclusivity. Build an elegant luxury e-commerce landing page with liquid glass effects, high-end product showcase, storytelling sections, premium brand values, and exclusive membership CTA. Emphasize sophistication and exclusivity. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with editorial product imagery and headline; featured collections and product grid; product detail highlights (materials, craftsmanship); reviews and brand story; shipping, returns, and loyalty CTA. Visual style: Liquid Glass + Glassmorphism. Color palette: primary #000000, secondary #FFD700, CTA #FFD700, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
7 4 4 Fintech Crypto Dashboard Fintech/Crypto /thumbnails/fintech-crypto.png /demo/fintech-crypto Glassmorphism + Dark Mode (OLED) dark #0080FF #39FF14 #39FF14 #0A0E27 true Create a dark mode fintech/crypto landing page with glassmorphism cards, real-time price charts preview, security features highlight, wallet integration showcase, and trust indicators. Focus on security and modern tech feel. Create a dark mode fintech/crypto landing page with glassmorphism cards, real-time price charts preview, security features highlight, wallet integration showcase, and trust indicators. Focus on security and modern tech feel. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: portfolio overview with balance and performance; market charts and watchlist; security and compliance badges; mobile app preview and onboarding steps; pricing or fee transparency. Visual style: Glassmorphism + Dark Mode (OLED). Color palette: primary #0080FF, secondary #39FF14, CTA #39FF14, background #0A0E27. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
8 5 5 Health & Wellness App Healthcare /thumbnails/health-wellness.png /demo/health-wellness Neumorphism + Soft UI Evolution light #87CEEB #90EE90 #22C55E #F5F5F5 true Design a calming health and wellness app landing page with soft UI elements, neumorphic cards, feature showcase for meditation/fitness tracking, testimonials, and app download CTAs. Use calm, soothing colors. Design a calming health and wellness app landing page with soft UI elements, neumorphic cards, feature showcase for meditation/fitness tracking, testimonials, and app download CTAs. Use calm, soothing colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with calming imagery and wellness value prop; programs or plans grid; progress tracking preview; coach or expert profiles; testimonials and CTA. Visual style: Neumorphism + Soft UI Evolution. Color palette: primary #87CEEB, secondary #90EE90, CTA #22C55E, background #F5F5F5. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
9 6 6 Creative Agency Portfolio Creative /thumbnails/creative-agency.png /demo/creative-agency Brutalism + Motion-Driven light #FF0000 #0000FF #FFFF00 #FFFFFF true Build a bold creative agency portfolio landing page with brutalist elements, motion-driven animations, case study previews, team showcase, and contact form. Emphasize creativity and uniqueness. Build a bold creative agency portfolio landing page with brutalist elements, motion-driven animations, case study previews, team showcase, and contact form. Emphasize creativity and uniqueness. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with bold typography and project highlight; case study grid with hover previews; services and process timeline; client logos and testimonials; contact CTA. Visual style: Brutalism + Motion-Driven. Color palette: primary #FF0000, secondary #0000FF, CTA #FFFF00, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
10 8 8 Real Estate Luxury Real Estate /thumbnails/real-estate.png /demo/real-estate Glassmorphism + Minimalism light #0077B6 #FFD700 #0077B6 #FFFFFF true Design an elegant real estate landing page with glassmorphism property cards, virtual tour preview, featured listings, agent profiles, and contact form. Focus on trust and premium feel. Design an elegant real estate landing page with glassmorphism property cards, virtual tour preview, featured listings, agent profiles, and contact form. Focus on trust and premium feel. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with premium listing and location; featured listings grid; agent profiles and concierge services; map or neighborhood highlights; book a tour CTA. Visual style: Glassmorphism + Minimalism. Color palette: primary #0077B6, secondary #FFD700, CTA #0077B6, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
11 9 9 Gaming Platform Gaming /thumbnails/gaming-platform.png /demo/gaming-platform 3D & Hyperrealism + Retro-Futurism dark #FF006E #00FFFF #39FF14 #1A1A2E true Build an immersive gaming platform landing page with 3D elements, retro-futuristic style, game showcase carousel, community features, and download CTA. Use vibrant neon colors on dark background. Build an immersive gaming platform landing page with 3D elements, retro-futuristic style, game showcase carousel, community features, and download CTA. Use vibrant neon colors on dark background. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with featured game trailer; game catalog with genres and filters; community stats and tournaments; download/app store CTA; social proof and testimonials. Visual style: 3D & Hyperrealism + Retro-Futurism. Color palette: primary #FF006E, secondary #00FFFF, CTA #39FF14, background #1A1A2E. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
12 10 10 Restaurant & Food Food & Restaurant /thumbnails/restaurant-food.png /demo/restaurant-food Vibrant & Block-based + Motion-Driven light #FF6B35 #8B4513 #FF6B35 #FFFAF0 true Create a warm restaurant landing page with vibrant food photography, menu preview, reservation system, chef story section, and location map. Use appetizing warm colors. Create a warm restaurant landing page with vibrant food photography, menu preview, reservation system, chef story section, and location map. Use appetizing warm colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with signature dish and reservation CTA; menu highlights and categories; chef story and ambiance gallery; hours, location, and delivery partners; booking and events CTA. Visual style: Vibrant & Block-based + Motion-Driven. Color palette: primary #FF6B35, secondary #8B4513, CTA #FF6B35, background #FFFAF0. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
13 11 11 Fitness & Gym App Fitness /thumbnails/fitness-gym.png /demo/fitness-gym Vibrant & Block-based + Dark Mode (OLED) dark #FF6B35 #0080FF #FF6B35 #121212 true Design an energetic fitness app landing page with dark mode, workout preview cards, progress tracking demo, trainer profiles, and subscription CTAs. Use bold, motivating colors. Design an energetic fitness app landing page with dark mode, workout preview cards, progress tracking demo, trainer profiles, and subscription CTAs. Use bold, motivating colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with class schedule preview; membership tiers and pricing; trainer profiles and facilities; progress tracking or app preview; testimonials and CTA. Visual style: Vibrant & Block-based + Dark Mode (OLED). Color palette: primary #FF6B35, secondary #0080FF, CTA #FF6B35, background #121212. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
14 12 12 Travel & Tourism Travel /thumbnails/travel-tourism.png /demo/travel-tourism Aurora UI + Motion-Driven light #0080FF #FF7F00 #FF7F00 #FFFFFF true Build an inspiring travel agency landing page with aurora UI gradients, destination showcase, booking preview, traveler testimonials, and trip planner CTA. Use vibrant destination colors. Build an inspiring travel agency landing page with aurora UI gradients, destination showcase, booking preview, traveler testimonials, and trip planner CTA. Use vibrant destination colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with destination imagery and search; featured destinations cards; sample itineraries and experiences; reviews and trust badges; booking CTA. Visual style: Aurora UI + Motion-Driven. Color palette: primary #0080FF, secondary #FF7F00, CTA #FF7F00, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
15 13 13 NFT & Web3 Platform NFT/Web3 /thumbnails/nft-web3.png /demo/nft-web3 Cyberpunk UI + Glassmorphism dark #FF00FF #00FFFF #FFD700 #0D0D0D true Create a cyberpunk-style NFT platform landing page with glassmorphism cards, featured NFT gallery, wallet connection demo, creator spotlight, and marketplace preview. Use neon colors on dark background. Create a cyberpunk-style NFT platform landing page with glassmorphism cards, featured NFT gallery, wallet connection demo, creator spotlight, and marketplace preview. Use neon colors on dark background. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with featured collection and mint CTA; collection gallery and rarity highlights; creator profiles and roadmap; wallet connect and security notes; community CTA. Visual style: Cyberpunk UI + Glassmorphism. Color palette: primary #FF00FF, secondary #00FFFF, CTA #FFD700, background #0D0D0D. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
16 14 14 Beauty & Spa Service Beauty/Spa /thumbnails/beauty-spa.png /demo/beauty-spa Soft UI Evolution + Neumorphism light #FFB6C1 #90EE90 #FFD700 #FFF5F5 true Design a serene beauty spa landing page with soft UI elements, service menu, before/after gallery, booking system preview, and testimonials. Use soft pastels and calming aesthetics. Design a serene beauty spa landing page with soft UI elements, service menu, before/after gallery, booking system preview, and testimonials. Use soft pastels and calming aesthetics. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with calming imagery and booking CTA; service menu with pricing; therapist profiles or certifications; before/after or testimonial section; membership or package CTA. Visual style: Soft UI Evolution + Neumorphism. Color palette: primary #FFB6C1, secondary #90EE90, CTA #FFD700, background #FFF5F5. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
17 15 15 Developer Tools Developer Tools /thumbnails/developer-tools.png /demo/developer-tools Dark Mode (OLED) + Minimalism dark #39FF14 #0080FF #39FF14 #0D0D0D true Build a minimal developer tools landing page with dark mode, code snippet previews, feature comparison table, integration logos, and documentation link. Use syntax highlighting colors. Build a minimal developer tools landing page with dark mode, code snippet previews, feature comparison table, integration logos, and documentation link. Use syntax highlighting colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with product screenshot and code snippet; feature list with performance/security claims; API/SDK section with quick start; integration logos; pricing and docs CTA. Visual style: Dark Mode (OLED) + Minimalism. Color palette: primary #39FF14, secondary #0080FF, CTA #39FF14, background #0D0D0D. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
18 16 16 Music Streaming Entertainment /thumbnails/music-streaming.png /demo/music-streaming Dark Mode (OLED) + Vibrant & Block-based dark #1DB954 #FF1493 #1DB954 #121212 true Create a dark mode music streaming landing page with vibrant accents, playlist showcase, audio player preview, artist spotlight, and premium subscription CTA. Use album art-inspired colors. Create a dark mode music streaming landing page with vibrant accents, playlist showcase, audio player preview, artist spotlight, and premium subscription CTA. Use album art-inspired colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with player UI preview; featured playlists and albums; artist spotlight and discovery; subscription tiers; download/app store CTA. Visual style: Dark Mode (OLED) + Vibrant & Block-based. Color palette: primary #1DB954, secondary #FF1493, CTA #1DB954, background #121212. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
19 17 17 Legal Services Legal /thumbnails/legal-services.png /demo/legal-services Trust & Authority + Minimalism light #1E3A5F #FFD700 #1E3A5F #FFFFFF true Design a trustworthy legal services landing page with minimal design, practice areas showcase, attorney profiles, case results, and consultation booking. Use professional navy and gold. Design a trustworthy legal services landing page with minimal design, practice areas showcase, attorney profiles, case results, and consultation booking. Use professional navy and gold. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with practice focus and consultation CTA; practice areas grid; attorney profiles and credentials; case results or testimonials; contact and booking CTA. Visual style: Trust & Authority + Minimalism. Color palette: primary #1E3A5F, secondary #FFD700, CTA #1E3A5F, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
20 18 18 Wedding & Events Events /thumbnails/wedding-events.png /demo/wedding-events Soft UI Evolution + Aurora UI light #FFD6E0 #FFD700 #FFD700 #FFFAF5 true Build a romantic wedding planning landing page with soft UI, portfolio gallery, vendor directory preview, planning tools showcase, and contact form. Use soft pink and gold accents. Build a romantic wedding planning landing page with soft UI, portfolio gallery, vendor directory preview, planning tools showcase, and contact form. Use soft pink and gold accents. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with romantic imagery and inquiry CTA; package tiers and services; gallery of past events; planning timeline and testimonials; contact form CTA. Visual style: Soft UI Evolution + Aurora UI. Color palette: primary #FFD6E0, secondary #FFD700, CTA #FFD700, background #FFFAF5. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
21 19 19 Coworking Space Beauty/Spa /thumbnails/coworking-space.png /demo/coworking-space Vibrant & Block-based + Glassmorphism light #FFB6C1 #90EE90 #FFD700 #FFF5F5 true Create a vibrant coworking space landing page with glassmorphism cards, space tour preview, membership plans, amenities showcase, and booking CTA. Use energetic modern colors. Create a vibrant coworking space landing page with glassmorphism cards, space tour preview, membership plans, amenities showcase, and booking CTA. Use energetic modern colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with space imagery and tour CTA; membership tiers and amenities; floor plan or workspace types; community events and testimonials; location map and contact CTA. Visual style: Vibrant & Block-based + Glassmorphism. Color palette: primary #FFB6C1, secondary #90EE90, CTA #FFD700, background #FFF5F5. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
22 20 20 Sustainability Platform AI/Chatbot /thumbnails/sustainability-platform.png /demo/sustainability-platform Organic Biophilic + Minimalism light #6366F1 #10B981 #6366F1 #F5F5F5 true Design an eco-friendly sustainability platform landing page with organic biophilic elements, carbon footprint calculator preview, impact metrics, and certification badges. Use earth tones and greens. Design an eco-friendly sustainability platform landing page with organic biophilic elements, carbon footprint calculator preview, impact metrics, and certification badges. Use earth tones and greens. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: impact dashboard with key metrics; initiatives or projects grid; partners and certifications; progress timeline; join or donate CTA. Visual style: Organic Biophilic + Minimalism. Color palette: primary #6366F1, secondary #10B981, CTA #6366F1, background #F5F5F5. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
23 22 22 Veterinary Clinic Other /thumbnails/veterinary-clinic.png /demo/veterinary-clinic Soft UI Evolution + Accessible & Ethical light #0080FF #8B00FF #22C55E #FFFFFF true Design a caring veterinary clinic landing page with soft UI elements, services overview, vet team profiles, emergency contact section, and appointment booking. Use calming pet-friendly colors. Design a caring veterinary clinic landing page with soft UI elements, services overview, vet team profiles, emergency contact section, and appointment booking. Use calming pet-friendly colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with pet-friendly imagery and booking CTA; services list with icons; vet team profiles and credentials; clinic hours, location map, and emergency info; testimonials and contact CTA. Visual style: Soft UI Evolution + Accessible & Ethical. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
24 23 23 Pet Adoption Platform Pet Services /thumbnails/pet-adoption.png /demo/pet-adoption Motion-Driven + Claymorphism light #FF9F43 #87CEEB #FF9F43 #FFF8F0 true Build a heartwarming pet adoption platform landing page with motion-driven pet cards, search filters preview, success stories, shelter partnerships, and adoption CTA. Use warm inviting colors. Build a heartwarming pet adoption platform landing page with motion-driven pet cards, search filters preview, success stories, shelter partnerships, and adoption CTA. Use warm inviting colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: featured pets grid with filters and tags; adoption steps timeline; success stories and testimonials; partner shelters and volunteer info; donate or adopt CTA. Visual style: Motion-Driven + Claymorphism. Color palette: primary #FF9F43, secondary #87CEEB, CTA #FF9F43, background #FFF8F0. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
25 24 24 Medical Clinic Portal Other /thumbnails/medical-clinic.png /demo/medical-clinic Accessible & Ethical + Minimalism light #0080FF #8B00FF #22C55E #FFFFFF true Create a trustworthy medical clinic landing page with accessible design, services directory, doctor profiles, patient portal preview, and appointment booking. Focus on trust and accessibility. Create a trustworthy medical clinic landing page with accessible design, services directory, doctor profiles, patient portal preview, and appointment booking. Focus on trust and accessibility. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: services directory with icons; doctor profiles and specialties; patient portal preview and appointment booking; insurance logos and trust badges; accessibility and FAQ section. Visual style: Accessible & Ethical + Minimalism. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
26 25 25 Telemedicine Platform Healthcare /thumbnails/telemedicine.png /demo/telemedicine Soft UI Evolution + AI-Native UI light #87CEEB #90EE90 #22C55E #F5F5F5 true Design a modern telemedicine platform landing page with soft UI, video consultation preview, specialist directory, health tracking features, and app download CTAs. Use calming healthcare colors. Design a modern telemedicine platform landing page with soft UI, video consultation preview, specialist directory, health tracking features, and app download CTAs. Use calming healthcare colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with video call preview and booking CTA; care journey steps; doctor profiles and availability; security/privacy assurances; app download CTA. Visual style: Soft UI Evolution + AI-Native UI. Color palette: primary #87CEEB, secondary #90EE90, CTA #22C55E, background #F5F5F5. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
27 26 26 Mental Health App Healthcare /thumbnails/mental-health.png /demo/mental-health Neumorphism + Accessible & Ethical light #87CEEB #90EE90 #22C55E #F5F5F5 true Build a calming mental health app landing page with neumorphic elements, mood tracking preview, therapy session booking, resource library, and crisis support section. Use soothing pastels. Build a calming mental health app landing page with neumorphic elements, mood tracking preview, therapy session booking, resource library, and crisis support section. Use soothing pastels. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with calming tone and get-started CTA; therapy plans or programs; session scheduling or chat preview; privacy and safety section; testimonials and resources. Visual style: Neumorphism + Accessible & Ethical. Color palette: primary #87CEEB, secondary #90EE90, CTA #22C55E, background #F5F5F5. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
28 27 27 Digital Banking App Other /thumbnails/digital-banking.png /demo/digital-banking Glassmorphism + Trust & Authority light #0080FF #8B00FF #22C55E #FFFFFF true Create a sleek digital banking landing page with glassmorphism cards, account overview preview, transaction features, security highlights, and mobile app download. Use trust-building colors. Create a sleek digital banking landing page with glassmorphism cards, account overview preview, transaction features, security highlights, and mobile app download. Use trust-building colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with mobile app preview; account overview and card controls; transfer and bill-pay features; budgeting insights and savings goals; security badges and CTA. Visual style: Glassmorphism + Trust & Authority. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
29 28 28 Investment Platform Fintech/Crypto /thumbnails/investment-platform.png /demo/investment-platform Dark Mode (OLED) + Data-Dense Dashboard dark #0080FF #39FF14 #39FF14 #0A0E27 true Design a professional investment platform landing page with dark mode, portfolio analytics preview, market data widgets, educational resources, and account signup. Focus on trust and data. Design a professional investment platform landing page with dark mode, portfolio analytics preview, market data widgets, educational resources, and account signup. Focus on trust and data. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: portfolio allocation and performance chart; risk profiles and recommendations; research insights and news; fees/pricing transparency; get-started CTA. Visual style: Dark Mode (OLED) + Data-Dense Dashboard. Color palette: primary #0080FF, secondary #39FF14, CTA #39FF14, background #0A0E27. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
30 29 29 Payment Gateway Fintech/Crypto /thumbnails/payment-gateway.png /demo/payment-gateway Minimalism + Trust & Authority light #0080FF #8B00FF #22C55E #FFFFFF true Build a conversion-focused payment gateway landing page with minimal design, integration code preview, pricing tiers, security certifications, and developer documentation link. Use professional colors. Build a conversion-focused payment gateway landing page with minimal design, integration code preview, pricing tiers, security certifications, and developer documentation link. Use professional colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with payment flow illustration; supported payment methods; integration steps with API/SDK preview; pricing and compliance badges; contact sales CTA. Visual style: Minimalism + Trust & Authority. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
31 30 30 Crypto Wallet Fintech/Crypto /thumbnails/crypto-wallet.png /demo/crypto-wallet Glassmorphism + Dark Mode (OLED) dark #0080FF #39FF14 #39FF14 #0A0E27 true Create a secure crypto wallet landing page with dark glassmorphism, multi-chain support showcase, security features, transaction preview, and download CTAs. Use crypto-native dark theme. Create a secure crypto wallet landing page with dark glassmorphism, multi-chain support showcase, security features, transaction preview, and download CTAs. Use crypto-native dark theme. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: wallet dashboard with asset list; send/receive and swap preview; staking or rewards; security features (biometrics, backup); download CTA. Visual style: Glassmorphism + Dark Mode (OLED). Color palette: primary #0080FF, secondary #39FF14, CTA #39FF14, background #0A0E27. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
32 31 31 DeFi Yield Platform Fintech/Crypto /thumbnails/defi-yield.png /demo/defi-yield Cyberpunk UI + Glassmorphism dark #0080FF #39FF14 #39FF14 #0A0E27 true Design a DeFi yield farming platform landing page with cyberpunk aesthetics, APY calculators, liquidity pools preview, tokenomics section, and wallet connect. Use neon on dark. Design a DeFi yield farming platform landing page with cyberpunk aesthetics, APY calculators, liquidity pools preview, tokenomics section, and wallet connect. Use neon on dark. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: vaults with APY cards; risk disclosure and strategy info; performance charts; wallet connect CTA; security audits. Visual style: Cyberpunk UI + Glassmorphism. Color palette: primary #0080FF, secondary #39FF14, CTA #39FF14, background #0A0E27. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
33 32 32 CEX Trading Platform Fintech/Crypto /thumbnails/cex-trading.png /demo/cex-trading Dark Mode (OLED) + Data-Dense Dashboard dark #0080FF #39FF14 #39FF14 #0A0E27 true Build a professional centralized exchange landing page with dark mode, trading interface preview, market pairs, security features, and registration flow. Focus on trust and performance. Build a professional centralized exchange landing page with dark mode, trading interface preview, market pairs, security features, and registration flow. Focus on trust and performance. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: market overview with charts; order book and trade panel; market pairs list and filters; KYC/security badges; download or sign-up CTA. Visual style: Dark Mode (OLED) + Data-Dense Dashboard. Color palette: primary #0080FF, secondary #39FF14, CTA #39FF14, background #0A0E27. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
34 33 33 DEX Swap Interface Fintech/Crypto /thumbnails/dex-swap.png /demo/dex-swap Glassmorphism + Cyberpunk UI dark #0080FF #39FF14 #39FF14 #0A0E27 true Create a decentralized exchange landing page with glassmorphism swap interface preview, supported tokens, liquidity provider benefits, governance features, and wallet integration. Use Web3 aesthetics. Create a decentralized exchange landing page with glassmorphism swap interface preview, supported tokens, liquidity provider benefits, governance features, and wallet integration. Use Web3 aesthetics. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: swap widget with token selectors; slippage and gas controls; liquidity pools overview; token analytics; connect wallet CTA. Visual style: Glassmorphism + Cyberpunk UI. Color palette: primary #0080FF, secondary #39FF14, CTA #39FF14, background #0A0E27. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
35 35 35 NFT Art Gallery NFT/Web3 /thumbnails/nft-art-gallery.png /demo/nft-art-gallery Minimalism + Motion-Driven light #0080FF #8B00FF #22C55E #FFFFFF true Build an elegant NFT art gallery landing page with minimal design, curated collections, artist profiles, exhibition previews, and minting interface. Focus on art presentation. Build an elegant NFT art gallery landing page with minimal design, curated collections, artist profiles, exhibition previews, and minting interface. Focus on art presentation. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with featured artwork; gallery grid with filters; artist profiles; collection detail previews; buy/mint CTA. Visual style: Minimalism + Motion-Driven. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
36 36 36 Generative Art Platform AI/Chatbot /thumbnails/generative-art-platform.png /demo/generative-art-platform Minimalism + Gen Z Chaos dark #0080FF #8B00FF #22C55E #0D0D0D true Create a generative art platform landing page with dark mode, AI art generation preview, style gallery, creator tools showcase, and minting flow. Use canvas-neutral with vibrant accents. Create a generative art platform landing page with dark mode, AI art generation preview, style gallery, creator tools showcase, and minting flow. Use canvas-neutral with vibrant accents. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: hero with dynamic art preview; creation tools and parameter controls; gallery of generated works; export or mint options; community showcase CTA. Visual style: Minimalism + Gen Z Chaos. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #0D0D0D. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
37 37 37 Sales CRM Platform SaaS /thumbnails/sales-crm-platform.png /demo/sales-crm-platform Feature-Rich Showcase + Trust & Authority light #0080FF #8B00FF #22C55E #FFFFFF true Design a professional sales CRM landing page with feature-rich showcase, pipeline visualization preview, integration logos, customer success stories, and free trial CTA. Use trust colors. Design a professional sales CRM landing page with feature-rich showcase, pipeline visualization preview, integration logos, customer success stories, and free trial CTA. Use trust colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: pipeline board with stages; deal cards and revenue forecast; activity timeline and tasks; integrations and automation; pricing and CTA. Visual style: Feature-Rich Showcase + Trust & Authority. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
38 38 38 Customer Support CRM SaaS /thumbnails/customer-support-crm.png /demo/customer-support-crm Soft UI Evolution + Feature-Rich Showcase light #0080FF #8B00FF #22C55E #FFFFFF true Build a friendly customer support CRM landing page with soft UI, ticket management preview, omnichannel features, AI chatbot integration, and pricing comparison. Use approachable colors. Build a friendly customer support CRM landing page with soft UI, ticket management preview, omnichannel features, AI chatbot integration, and pricing comparison. Use approachable colors. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: ticket inbox with SLA indicators; agent workload and performance; knowledge base preview; automation rules and integrations; book a demo CTA. Visual style: Soft UI Evolution + Feature-Rich Showcase. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #FFFFFF. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
39 39 39 AI Writing Assistant AI/Chatbot /thumbnails/ai-writing-assistant.png /demo/ai-writing-assistant AI-Native UI + Minimalism light #6366F1 #10B981 #6366F1 #F5F5F5 true Create an AI writing assistant landing page with minimal chrome, live writing demo, use case showcases, integration options, and subscription tiers. Use neutral with AI purple accent. Create an AI writing assistant landing page with minimal chrome, live writing demo, use case showcases, integration options, and subscription tiers. Use neutral with AI purple accent. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: editor UI with suggestions; templates and workflows; tone and style controls; collaboration/sharing; upgrade CTA. Visual style: AI-Native UI + Minimalism. Color palette: primary #6366F1, secondary #10B981, CTA #6366F1, background #F5F5F5. Use a light mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.
40 40 40 AI Image Generator AI/Chatbot /thumbnails/ai-image-generator.png /demo/ai-image-generator Dark Mode (OLED) + Bento Box Grid dark #0080FF #8B00FF #22C55E #0D0D0D true Design an AI image generation platform landing page with dark mode, generation preview gallery, style options, prompt examples, and credit-based pricing. Use creative vibrant accents. Design an AI image generation platform landing page with dark mode, generation preview gallery, style options, prompt examples, and credit-based pricing. Use creative vibrant accents. Include a sticky header with logo, navigation, and primary CTA, plus a clean footer with contact, socials, and legal links. Include: prompt input with style presets; generation gallery with variants; credit usage and plans; export/share options; get-started CTA. Visual style: Dark Mode (OLED) + Bento Box Grid. Color palette: primary #0080FF, secondary #8B00FF, CTA #22C55E, background #0D0D0D. Use a dark mode foundation with high contrast for readability. Add clear hierarchy, generous spacing, rounded cards, and subtle hover/motion states for interactive elements.