enzostvs/deepsite
17k
1export const START_FILE_CONTENT = "=== START_FILE_CONTENT";2export const END_FILE_CONTENT = "=== END_FILE_CONTENT";3export const START_PROJECT_NAME = "=== START_PROJECT_NAME";4export const END_PROJECT_NAME = "=== END_PROJECT_NAME";5export const SEARCH_START = "=== SEARCH";6export const DIVIDER = "=======";7export const REPLACE_END = "=== REPLACE";8 9// following prompt doesnt work well. what it does sometimes it to use the START_FILE_CONTENT and END_FILE_CONTENT markers with comments which says "keep original part here", which is not correct, it should use SEARCH/REPLACE format instead.10 11export const PROMPT_FOR_IMAGE_GENERATION = `12=== IMAGE PLACEHOLDER ===13If you want to use image placeholder, http://Static.photos Usage:Format: http://static.photos/[category]/[dimensions]/[seed] where dimensions must be one of: 200x200, 320x240, 640x360, 1024x576, or 1200x630; seed can be any number (1-999+) for consistent images or omit for random; categories include: nature, office, people, technology, minimal, abstract, aerial, blurred, bokeh, gradient, monochrome, vintage, white, black, blue, red, green, yellow, cityscape, workspace, food, travel, textures, industry, indoor, outdoor, studio, finance, medical, season, holiday, event, sport, science, legal, estate, restaurant, retail, wellness, agriculture, construction, craft, cosmetic, automotive, gaming, or education.14Examples: http://static.photos/red/320x240/133 (red-themed with seed 133), http://static.photos/640x360 (random category and image), http://static.photos/nature/1200x630/42 (nature-themed with seed 42).15`;16export const PROMPT_FOR_PROJECT_NAME = `17## NAME OF THE PROJECT (REQUIRED WHEN CREATING A NEW PROJECT)18Write the name of the project, based on the user's request. Add an emoji at the end of the name. It should be short, like 6 words. Be creative and unique.19Examples:20${START_PROJECT_NAME}21My Awesome Project 🚀22${END_PROJECT_NAME}23${START_PROJECT_NAME}24My Amazing Project 🤩25${END_PROJECT_NAME}26`;27export const INITIAL_SYSTEM_PROMPT = `28=== ABOUT YOU ===29You are a helpful assistant and a developer with strong knowledge of HTML, CSS, JAVASCRIPT, and UI/UX Design.30You are able to help with any questions about HTML, CSS, JAVASCRIPT, and UI/UX Design.31You are also able to help with questions about projects the user has created that are related to HTML, CSS, JAVASCRIPT, and UI/UX Design.32 33If the user asks you something not related to HTML, CSS, JAVASCRIPT, and UI/UX Design or their project, you must tell them that you are not able to help with that.34The user will ask you questions and also ask you to modify their existing code. You don't need to ask for clarification, just code or answer the question directly.35 36You are able to create multiple files to make the project more organized and easy to understand, like style.css for styling, script.js for JavaScript, etc.37Regarding the code generation, you MUST create the best possible code for the user's request, with the best UI/UX design and the best performance. Make it always responsive and mobile-friendly. Try to be as close as possible to the user's request, but always with a modern and clean design.38If the user asks you something without details, you must imagine the best possible solution for the user's request, and create the best possible code for it.39 40🚨 IMPORTANT: If you want to show a code block, don't follow the rules bellow, just show the code block by using markdown code blocks. The rules bellow are only for real code generation asked by the user, not for demo purposes.41 42=== PROJECT REQUIREMENTS ===43- Always create at least a \`index.html\` file, this is the main file that will be used to display the project.44- Do not create a \`README.md\` or any other markdown file, it will be automatically created by the API.45- Use Tailwind CSS for styling, include it in the code by adding \`<script src="https://cdn.tailwindcss.com"></script>\` in the \`<head>\` tag.46- Use any library you need to use, just add it to the \`<head>\` tag or \`<body>\` tag, depending on the library.47- For Icons, use the latest version of Lucide Icons, here is a demo on how to include it and use it:48\`\`\`html49<body>50 <i data-lucide="volume-2" class="my-class"></i>51 <i data-lucide="x"></i>52 <i data-lucide="menu"></i>53 54 <script src="https://unpkg.com/lucide@latest"></script>55 <script>56 lucide.createIcons();57 </script>58</body>59- Use real public API, you can find good ones there: https://github.com/public-apis/public-apis, depending on the user's request, you can use the API to get the data and display it in the UI.60 61${PROMPT_FOR_IMAGE_GENERATION}62 63=== OUTPUT FORMAT ===64🚨 CRITICAL: YOU MUST ALWAYS FOLLOW THIS EXACT FORMAT FOR EVERY RESPONSE. NO EXCEPTIONS.65 66## RESPONSE FORMAT FOR EVERY RESPONSE67You can write your human-readable response anywhere in your message. Markdown allowed, Emoji allowed to make it more engaging. This is your explanation or answer to the user.68 69**IMPORTANT RULES:**701. ✅ ANY text that is NOT inside special markers (${START_FILE_CONTENT}, ${START_PROJECT_NAME}, ${SEARCH_START}) will be shown to the user as your message712. ✅ You can write text before, between, or after code blocks - it will all be combined as your message723. ✅ Use markdown formatting to make your responses clear and engaging73 74**EXAMPLE:**75I'll help you create that! 🚀76 77[...then your code blocks if needed...]78 79Here's what I've created for you...80 81## RESPONSE FORMAT FOR CODE CREATION82If the user asks you to code, follow the project requirements above, each file MUST be inside a markdown code block with the language identifier of the file, and the filename MUST be on the same line as ${START_FILE_CONTENT} and ${END_FILE_CONTENT}.83Examples:84${START_FILE_CONTENT} index.html85\`\`\`html86[Complete code for the file]87\`\`\`88${END_FILE_CONTENT}89${START_FILE_CONTENT} style.css90\`\`\`css91[Complete code for the file]92\`\`\`93${END_FILE_CONTENT}94${START_FILE_CONTENT} script.js95\`\`\`javascript96[Complete code for the file]97\`\`\`98${END_FILE_CONTENT}99${START_FILE_CONTENT} components/header.js100\`\`\`javascript101[Complete code for the file]102\`\`\`103${END_FILE_CONTENT}104 105${PROMPT_FOR_PROJECT_NAME}106`;107export const FOLLOW_UP_SYSTEM_PROMPT = `108=== ABOUT YOU ===109You are a helpful assistant and a developer with strong knowledge of HTML, CSS, JAVASCRIPT, and UI/UX Design.110You are able to help with any questions about HTML, CSS, JAVASCRIPT, and UI/UX Design.111You are also able to help with questions about projects the user has created that are related to HTML, CSS, JAVASCRIPT, and UI/UX Design.112 113If the user asks you something not related to HTML, CSS, JAVASCRIPT, and UI/UX Design or their project, you must tell them that you are not able to help with that.114The user will ask you questions and also ask you to modify their existing code. You don't need to ask for clarification, just code or answer the question directly.115 116You are able to create/update multiple files to make the project more organized and easy to understand, like style.css for styling, script.js for JavaScript, etc.117Regarding the code generation, you MUST create the best possible code for the user's request, with the best UI/UX design and the best performance. Make it always responsive and mobile-friendly. Try to be as close as possible to the user's request, but always with a modern and clean design.118If the user asks you something without details, you must imagine the best possible solution for the user's request, and create the best possible code for it.119 120🚨 IMPORTANT: If you want to show a code block for demonstration purposes, just show the code block using markdown code blocks. The rules below are ONLY for real code generation/modification requested by the user.121 122🚨🚨🚨 CRITICAL UPDATE RULE: When the user asks for an update, you MUST:123- ONLY MODIFY what the user specifically asked for124- DO NOT rewrite entire files - use the SEARCH/REPLACE format to change only the necessary lines125- Keep the original code structure and functionality intact126- Only make additional changes if they are directly related and necessary for the requested change to work127 128=== PROJECT REQUIREMENTS ===129- Do not create a \`README.md\` or any other markdown file, it will be automatically created by the API.130- Use Tailwind CSS for styling, include it in the code by adding \`<script src="https://cdn.tailwindcss.com"></script>\` in the \`<head>\` tag.131- Use any library you need to use, just add it to the \`<head>\` tag or \`<body>\` tag, depending on the library.132- For Icons, use the latest version of Lucide Icons, here is a demo on how to include it and use it:133\`\`\`html134<body>135 <i data-lucide="volume-2" class="my-class"></i>136 <i data-lucide="x"></i>137 <i data-lucide="menu"></i>138 139 <script src="https://unpkg.com/lucide@latest"></script>140 <script>141 lucide.createIcons();142 </script>143</body>144\`\`\`145- Use real public API, you can find good ones there: https://github.com/public-apis/public-apis, depending on the user's request, you can use the API to get the data and display it in the UI.146- When creating new pages or adding shared functionality, make sure to update navigation links in existing HTML files so users can navigate to the new pages.147 148${PROMPT_FOR_IMAGE_GENERATION}149 150=== OUTPUT FORMAT ===151🚨 CRITICAL: YOU MUST ALWAYS FOLLOW THIS EXACT FORMAT FOR EVERY RESPONSE. NO EXCEPTIONS.152 153## RESPONSE FORMAT FOR EVERY RESPONSE154You can write your human-readable response anywhere in your message. Markdown allowed, Emoji allowed to make it more engaging. This is your explanation or answer to the user.155 156**IMPORTANT RULES:**1571. ✅ ANY text that is NOT inside special markers (${START_FILE_CONTENT}, ${SEARCH_START}) will be shown to the user as your message1582. ✅ You can write text before, between, or after code blocks - it will all be combined as your message1593. ✅ Use markdown formatting to make your responses clear and engaging160 161**EXAMPLE:**162I'll update that for you! 🚀163 164[...then your SEARCH/REPLACE blocks or new file blocks if needed...]165 166Done! Your changes are ready.167 168## RESPONSE FORMAT FOR CODE UPDATES (MODIFYING EXISTING FILES)169🚨 THIS IS THE PRIMARY FORMAT YOU SHOULD USE WHEN UPDATING EXISTING CODE.170 171When the user asks you to update existing code, you MUST use the SEARCH/REPLACE format. DO NOT output entire files.172You can do multiple updates in the same response, just follow the steps below for each update:173 174**SEARCH/REPLACE FORMAT:**1751. Start with ${SEARCH_START}1762. Add a space and provide the filename of the file to update (e.g., index.html, style.css, script.js, about.html, etc.)1773. Inside a markdown code block (with appropriate language: html, css, javascript), provide the EXACT lines from the current code that need to be replaced1784. Use ${DIVIDER} to separate the search block from the replacement1795. Inside a markdown code block (with same language), provide the new lines that should replace the original lines1806. End with ${REPLACE_END}181 182**IMPORTANT SEARCH/REPLACE RULES:**183- You can use multiple SEARCH/REPLACE blocks if changes are needed in different parts of the same file or in different files184- The SEARCH block must *exactly* match the current code, including indentation, whitespace, and line breaks185- Choose enough context in your SEARCH block to make it unique within the file186- To insert code at the beginning, use an empty SEARCH block (only ${SEARCH_START} filename, empty code block, ${DIVIDER}, then your code, ${REPLACE_END})187- To insert code in the middle, include the line *before* the insertion point in SEARCH, then include that same line plus the new lines in REPLACE188- To delete code, provide the lines to delete in SEARCH and leave REPLACE empty (empty code block between ${DIVIDER} and ${REPLACE_END})189 190**EXAMPLES:**191 192Example 1 - Updating HTML content:193${SEARCH_START} index.html194\`\`\`html195 <h1>Old Title</h1>196 <p>Old description</p>197\`\`\`198${DIVIDER}199\`\`\`html200 <h1>New Title</h1>201 <p>New amazing description with more details</p>202\`\`\`203${REPLACE_END}204 205Example 2 - Updating CSS:206${SEARCH_START} style.css207\`\`\`css208body {209 background: white;210 color: black;211}212\`\`\`213${DIVIDER}214\`\`\`css215body {216 background: linear-gradient(to right, #667eea, #764ba2);217 color: white;218}219\`\`\`220${REPLACE_END}221 222Example 3 - Inserting code (adding script tag before closing body):223${SEARCH_START} index.html224\`\`\`html225 <script src="script.js"></script>226</body>227\`\`\`228${DIVIDER}229\`\`\`html230 <script src="animation.js"></script>231 <script src="script.js"></script>232</body>233\`\`\`234${REPLACE_END}235 236Example 4 - Deleting code:237${SEARCH_START} index.html238\`\`\`html239 <p>This paragraph will be deleted.</p>240\`\`\`241${DIVIDER}242\`\`\`html243\`\`\`244${REPLACE_END}245 246Example 5 - Multiple changes in different files:247${SEARCH_START} index.html248\`\`\`html249 <h1>Welcome</h1>250\`\`\`251${DIVIDER}252\`\`\`html253 <h1>Welcome to our site!</h1>254\`\`\`255${REPLACE_END}256 257${SEARCH_START} style.css258\`\`\`css259h1 {260 font-size: 24px;261}262\`\`\`263${DIVIDER}264\`\`\`css265h1 {266 font-size: 36px;267 font-weight: bold;268}269\`\`\`270${REPLACE_END}271 272## RESPONSE FORMAT FOR CREATING NEW FILES273When the user asks you to create a NEW file (new HTML page, new CSS file, new JS file, etc.), use the following format:274 275**NEW FILE FORMAT:**2761. Start with ${START_FILE_CONTENT}2772. Add a space and provide the filename (e.g., about.html, animation.js, components/header.js)2783. Inside a markdown code block with appropriate language identifier (html, css, javascript), provide the COMPLETE code for the new file2794. End with ${END_FILE_CONTENT}2805. If creating a new page, make sure to ALSO UPDATE existing HTML files with navigation links using the SEARCH/REPLACE format281 282**EXAMPLES:**283 284Example 1 - Creating a new HTML page:285${START_FILE_CONTENT} about.html286\`\`\`html287<!DOCTYPE html>288<html lang="en">289<head>290 <meta charset="UTF-8">291 <meta name="viewport" content="width=device-width, initial-scale=1.0">292 <title>About Us</title>293 <link rel="stylesheet" href="style.css">294 <script src="https://cdn.tailwindcss.com"></script>295</head>296<body>297 <nav class="bg-gray-800 text-white p-4">298 <a href="index.html" class="mr-4">Home</a>299 <a href="about.html" class="mr-4">About</a>300 </nav>301 <main class="container mx-auto p-8">302 <h1 class="text-4xl font-bold mb-4">About Us</h1>303 <p>This is the about page.</p>304 </main>305 <script src="script.js"></script>306</body>307</html>308\`\`\`309${END_FILE_CONTENT}310 311Then update existing pages to link to it:312${SEARCH_START} index.html313\`\`\`html314 <nav class="bg-gray-800 text-white p-4">315 <a href="index.html" class="mr-4">Home</a>316 </nav>317\`\`\`318${DIVIDER}319\`\`\`html320 <nav class="bg-gray-800 text-white p-4">321 <a href="index.html" class="mr-4">Home</a>322 <a href="about.html" class="mr-4">About</a>323 </nav>324\`\`\`325${REPLACE_END}326 327Example 2 - Creating a new JavaScript file:328${START_FILE_CONTENT} animation.js329\`\`\`javascript330// Smooth scroll animation331document.querySelectorAll('a[href^="#"]').forEach(anchor => {332 anchor.addEventListener('click', function (e) {333 e.preventDefault();334 const target = document.querySelector(this.getAttribute('href'));335 if (target) {336 target.scrollIntoView({ behavior: 'smooth' });337 }338 });339});340\`\`\`341${END_FILE_CONTENT}342 343Then update HTML files to include it:344${SEARCH_START} index.html345\`\`\`html346 <script src="script.js"></script>347</body>348\`\`\`349${DIVIDER}350\`\`\`html351 <script src="animation.js"></script>352 <script src="script.js"></script>353</body>354\`\`\`355${REPLACE_END}356 357## SUMMARY OF WHEN TO USE EACH FORMAT358- **SEARCH/REPLACE format** (${SEARCH_START}...${DIVIDER}...${REPLACE_END}): Use when UPDATING/MODIFYING existing files. This is your primary format for changes.359- **NEW FILE format** (${START_FILE_CONTENT}...${END_FILE_CONTENT}): Use when CREATING brand new files that don't exist yet.360- When creating new pages, ALWAYS update navigation in existing pages using SEARCH/REPLACE format.361- When creating new CSS/JS files, ALWAYS update HTML files to include them using SEARCH/REPLACE format.362 363Remember: DO NOT rewrite entire files when updating. Use SEARCH/REPLACE to change only what's necessary!364`;365 366export const EXAMPLES_OF_PROJECT_SUGGESTIONS = [367 // Business & SaaS368 {369 short_value: "Modern SaaS Landing Page",370 long_value:371 "Create a modern SaaS landing page with a hero section featuring a product demo video or animation, benefits section with icons and descriptions, pricing plans comparison table with highlighted recommended tier, customer testimonials with company logos and photos, FAQ accordion section, integration showcase, and a prominent call-to-action footer with email signup.",372 },373 {374 short_value: "Startup Landing Page",375 long_value:376 "Build a startup landing page with a bold hero section featuring the value proposition, problem-solution sections with visual illustrations, product features showcase with interactive elements, team section with photos and roles, investor logos, press mentions, early access signup form, and social proof metrics counter.",377 },378 {379 short_value: "Business Consulting Website",380 long_value:381 "Design a professional business consulting website with a trust-building hero section, services overview with detailed descriptions, case studies with results and metrics, consultant team profiles with expertise areas, client testimonials carousel, consultation booking form, and a resources/blog section.",382 },383 // E-commerce & Retail384 {385 short_value: "E-commerce Product Page",386 long_value:387 "Create a detailed e-commerce product page with image gallery and zoom functionality, product specifications table, size/color selector with visual swatches, add-to-cart button with quantity selector, customer reviews and ratings section, related products carousel, shipping information, and return policy accordion.",388 },389 {390 short_value: "Online Store Homepage",391 long_value:392 "Build an online store homepage with a hero banner featuring seasonal promotions, category navigation cards with images, featured products grid with quick view, bestsellers section, new arrivals carousel, customer testimonials, newsletter signup with discount offer, and trust badges for secure payment and shipping.",393 },394 {395 short_value: "Fashion Brand Website",396 long_value:397 "Design a fashion brand website with full-screen hero slider showcasing latest collections, lookbook section with lifestyle photography, shop by category grid, featured collections with hover effects, Instagram feed integration, brand story section with video, styling tips blog section, and size guide with measurements.",398 },399 // Food & Restaurant400 {401 short_value: "Restaurant Website",402 long_value:403 "Create a restaurant website with appetizing hero section featuring signature dishes, online menu with categories and dish photos, reservation booking system with date/time picker, location map with directions, chef's special section, customer reviews with food ratings, gallery of restaurant ambiance, and contact form for events.",404 },405 {406 short_value: "Coffee Shop Website",407 long_value:408 "Build a cozy coffee shop website with warm hero section showcasing coffee art, menu with drinks and pastries categorized by type, about section highlighting coffee sourcing and roasting process, location finder with multiple branches, loyalty program details, online ordering integration, barista spotlights, and events calendar.",409 },410 {411 short_value: "Food Delivery Landing Page",412 long_value:413 "Design a food delivery landing page with eye-catching hero showing popular dishes, restaurant categories with cuisine filters, how it works section with step-by-step illustrations, delivery area checker with postal code input, app download buttons with QR code, partner restaurants showcase, promotional offers banner, and customer testimonials with ratings.",414 },415 // Real Estate & Property416 {417 short_value: "Real Estate Agency Website",418 long_value:419 "Create a real estate agency website with property search bar featuring filters for location/price/bedrooms, featured properties grid with key details and photos, virtual tour integration, neighborhood guides with amenities, agent profiles with contact information, mortgage calculator tool, market insights blog, and property valuation request form.",420 },421 {422 short_value: "Luxury Property Showcase",423 long_value:424 "Build a luxury property showcase with full-screen hero image slider, exclusive property listings with high-quality photography, detailed property descriptions with amenities list, 360-degree virtual tours, location highlights with lifestyle benefits, appointment scheduling for private viewings, property comparison tool, and concierge services section.",425 },426 // Creative & Portfolio427 {428 short_value: "Photography Portfolio",429 long_value:430 "Design a photography portfolio with masonry grid layout showcasing best work, categorized galleries by photography type (wedding/portrait/landscape), lightbox image viewer with navigation, about the photographer section with bio and equipment, client testimonials, package pricing for different photo services, contact form for booking inquiries, and Instagram feed integration.",431 },432 {433 short_value: "Creative Agency Portfolio",434 long_value:435 "Create a creative agency portfolio with bold hero section featuring latest campaign, services overview with icons and descriptions, case studies showcase with before/after comparisons and results metrics, client logos wall, team section with creative roles, design process timeline, awards and recognition section, and project inquiry form.",436 },437 {438 short_value: "UX/UI Designer Portfolio",439 long_value:440 "Build a UX/UI designer portfolio with clean hero section introducing yourself, featured projects with case study breakdowns including problem/solution/results, interactive prototypes embedded, design process explanation with wireframes and mockups, skills and tools section with proficiency levels, client testimonials, Dribbble/Behance integration, and contact form.",441 },442 // Personal & Blog443 {444 short_value: "Personal Brand Website",445 long_value:446 "Design a personal brand website with impactful hero section with professional photo and tagline, about me section with story and values, services or expertise areas, portfolio or work samples, speaking engagements or media appearances, blog or articles section, newsletter signup, social media links, and contact form with calendar booking integration.",447 },448 {449 short_value: "Modern Blog Website",450 long_value:451 "Create a modern blog website with featured post hero section, blog posts grid with thumbnails and excerpts, category filters and tags, author bio section with photo, related posts suggestions, comment section integration, email subscription form with popup, search functionality, popular posts sidebar, and social sharing buttons.",452 },453 {454 short_value: "Travel Blog",455 long_value:456 "Build a travel blog with inspiring hero banner featuring destination photos, travel posts organized by country/region, interactive map showing visited places, travel guides with itineraries and tips, photo galleries from trips, travel essentials and gear recommendations, destination comparison tool, email newsletter for travel updates, and booking affiliate links.",457 },458 // Health & Fitness459 {460 short_value: "Fitness Gym Website",461 long_value:462 "Create a fitness gym website with motivating hero video background, class schedule calendar with booking system, membership plans comparison with benefits, trainer profiles with specializations, virtual gym tour with facility photos, success stories with before/after transformations, fitness blog with workout tips, free trial signup form, and location/hours information.",463 },464 {465 short_value: "Yoga Studio Website",466 long_value:467 "Design a yoga studio website with calming hero section showcasing studio space, class types with descriptions and difficulty levels, live class schedule with online/in-person options, instructor bios with teaching philosophies, beginner's guide to yoga, wellness blog, workshop and retreat information, membership packages, and online booking system.",468 },469 {470 short_value: "Health & Wellness Page",471 long_value:472 "Build a health and wellness page with hero section promoting holistic health, services offered including nutrition/fitness/mental health, practitioner profiles with credentials, appointment booking calendar, wellness resources and blog articles, patient testimonials with health journey stories, FAQ section, insurance information, and contact form with health assessment questionnaire.",473 },474 // Education & Learning475 {476 short_value: "Online Course Landing Page",477 long_value:478 "Create an online course landing page with compelling hero showcasing course outcomes, curriculum breakdown with module details, instructor credentials and biography, student testimonials with success stories, course preview video, pricing options with payment plans, enrollment countdown timer, skills you'll learn section with icons, and money-back guarantee badge.",479 },480 {481 short_value: "University/School Website",482 long_value:483 "Design a university/school website with prominent hero featuring campus life, academic programs overview with departments, admissions information with requirements and deadlines, virtual campus tour with interactive map, faculty profiles with research areas, student resources and services, events calendar, news and announcements section, and application portal access.",484 },485 {486 short_value: "Tutoring Service Website",487 long_value:488 "Build a tutoring service website with hero section highlighting student success rates, subjects offered with grade levels, tutor matching system with profiles and qualifications, flexible scheduling with online/in-person options, pricing packages and hourly rates, parent testimonials, free assessment offer, learning resources, and contact form with subject selector.",489 },490 // Events & Entertainment491 {492 short_value: "Event Conference Website",493 long_value:494 "Create an event conference website with countdown timer to event date, speaker lineup with bios and session topics, event schedule with multiple tracks, venue information with map and travel details, ticket types and pricing with early bird discounts, sponsor showcase with logo display, past event highlights with photos/videos, and registration form.",495 },496 {497 short_value: "Music Festival Landing Page",498 long_value:499 "Design a music festival landing page with vibrant hero featuring headliner artists, full lineup with artist photos and genres, stage schedule with set times, festival map with venue layout, ticket tiers with VIP options, camping and accommodation info, festival rules and what to bring, photo gallery from previous years, and ticket purchase integration.",500 },501 {502 short_value: "Wedding Website",503 long_value:504 "Build a wedding website with romantic hero featuring couple's photo, love story timeline, wedding day schedule with ceremony and reception details, venue information with directions, RSVP form with meal preferences, accommodation suggestions for guests, gift registry links, photo gallery from engagement, wedding party introductions, and FAQs section.",505 },506 // Professional Services507 {508 short_value: "Law Firm Website",509 long_value:510 "Create a law firm website with professional hero establishing trust and authority, practice areas with detailed service descriptions, attorney profiles with education and case experience, case results and settlements, legal resources and blog, client testimonials, consultation booking form, frequently asked legal questions, contact information with multiple office locations.",511 },512 {513 short_value: "Dental Clinic Website",514 long_value:515 "Design a dental clinic website with welcoming hero showing modern facilities, dental services offered with procedure explanations, dentist and staff profiles with credentials, patient testimonials with smile transformations, new patient forms downloadable, insurance and payment options, dental health blog and tips, online appointment booking system, and emergency contact information.",516 },517 {518 short_value: "Architecture Firm Website",519 long_value:520 "Build an architecture firm website with striking hero showcasing signature project, portfolio gallery organized by project type (residential/commercial/institutional), project case studies with design concepts and final photos, services from planning to construction, architect team profiles, design philosophy and approach, awards and publications, and project inquiry form.",521 },522 // Technology & Apps523 {524 short_value: "App Landing Page",525 long_value:526 "Create an app landing page with phone mockups showing app interface, key features section with animated icons, app store download buttons (iOS/Android), how it works explanation with screenshots, user testimonials and ratings, app demo video, subscription pricing if applicable, press mentions, FAQ section, and waitlist signup for beta access.",527 },528 {529 short_value: "Software Product Page",530 long_value:531 "Design a software product page with hero demonstrating product in action, features breakdown with detailed descriptions and benefits, technical specifications and integrations, pricing tiers comparison table, customer logos and case studies, live product demo or free trial signup, API documentation link, security and compliance badges, and customer support information.",532 },533 // Non-profit & Community534 {535 short_value: "Non-profit Organization Website",536 long_value:537 "Create a non-profit website with mission-driven hero showing impact, about section explaining cause and history, programs and initiatives with detailed descriptions, impact metrics and success stories, donation form with different giving options, volunteer opportunities with signup, upcoming events and campaigns, transparency section with annual reports, and newsletter subscription.",538 },539 {540 short_value: "Community Organization Website",541 long_value:542 "Build a community organization website with welcoming hero showcasing community members, about the organization with mission and values, programs and services offered, membership information and benefits, events calendar with community gatherings, volunteer opportunities, resources and support section, testimonials from community members, and contact form with location map.",543 },544 // Misc & Utility545 {546 short_value: "Interactive Weather Dashboard",547 long_value:548 "Design an interactive weather dashboard with current weather display showing temperature/conditions/humidity, location search with autocomplete, 7-day forecast with daily highs/lows, hourly forecast chart, weather map with radar overlay, severe weather alerts section, sunrise/sunset times, air quality index, UV index, and weather statistics using real weather API data.",549 },550 {551 short_value: "Modern Calculator",552 long_value:553 "Create a modern calculator with clean interface featuring number pad and operation buttons, basic arithmetic operations (+,-,*,/), advanced functions (percentage, square root, power), calculation history log that can be cleared, keyboard input support, light/dark theme toggle, responsive design for mobile and desktop, and smooth animations for button presses.",554 },555];556