Crie sites de negócios locais com Claude Code

Pesquise um nicho no Google Maps

Procure sites fracos ou inexistentes

Escolha um negócio

Personalize o prompt principal

Master prompt

Crie um site de negócio local pronto para entregar ao cliente a partir dos dados que introduzir abaixo.

You are a senior creative director and React/Vite frontend architect with a portfolio of high-end local business websites. Build ONE complete, genuinely premium one-page website as a real React + Vite project. Treat this as design work, not section assembly — a few beautifully crafted sections beat ten mediocre ones. ═══════════════════════════════════════ PROJECT SETUP (DO THIS FIRST) ═══════════════════════════════════════ - If the current folder is EMPTY: create a new project here with `npm create vite@latest . -- --template react`, then install dependencies. - If a React + Vite project ALREADY EXISTS: build inside it. Do not re-scaffold. - Never deliver a single index.html file. This is a real component-based React project. - Plain CSS or CSS Modules only. No UI framework. Minimal dependencies. - When finished, the project must run with `npm run dev` and have zero console errors. ═══════════════════════════════════════ FILE STRUCTURE (BEGINNER-FRIENDLY) ═══════════════════════════════════════ src/ config/business.js → ALL business content, colors, services, image URLs components/ Navbar.jsx Hero.jsx Services.jsx About.jsx WhyChooseUs.jsx Testimonials.jsx (rendered only if testimonials exist) Contact.jsx Faq.jsx (rendered only if it genuinely helps) Footer.jsx components/ui/ → Button.jsx, SectionHeading.jsx, ServiceCard.jsx styles/global.css → design tokens + base styles App.jsx main.jsx CRITICAL: Every word of business text, every color, every service, and every image URL lives ONLY in src/config/business.js. A non-technical owner must edit that one file to change the whole site. Components never hardcode content. ═══════════════════════════════════════ BUSINESS DETAILS ═══════════════════════════════════════ Business Name: {{BUSINESS_NAME}} Business Type: {{BUSINESS_TYPE}} Tagline: {{BUSINESS_TAGLINE}} City / Area: {{CITY_AREA}} Full Address: {{FULL_ADDRESS}} Phone Number: {{PHONE_NUMBER}} WhatsApp Number: {{WHATSAPP_NUMBER}} Email Address: {{EMAIL_ADDRESS}} Google Maps Link: {{GOOGLE_MAPS_LINK}} Main Services: {{MAIN_SERVICES}} Secondary Services: {{SECONDARY_SERVICES}} Opening Hours: {{OPENING_HOURS}} Business Description: {{BUSINESS_DESCRIPTION}} Unique Selling Points: {{UNIQUE_SELLING_POINTS}} Testimonials / Reviews: {{TESTIMONIALS}} Main CTA: {{MAIN_CTA}} Secondary CTA: {{SECONDARY_CTA}} Brand Style: {{BRAND_STYLE}} Primary Color: {{PRIMARY_COLOR}} Secondary Color: {{SECONDARY_COLOR}} ═══════════════════════════════════════ DESIGN SYSTEM — DEFINE THESE TOKENS IN global.css AND USE THEM EVERYWHERE ═══════════════════════════════════════ Premium is not a vibe — it is consistency. Hardcode this system and never deviate from it. TYPOGRAPHY - Two Google Fonts: a refined display/serif or strong geometric sans for headings; a clean, highly readable sans for body. Pick a pairing that genuinely fits {{BRAND_STYLE}} (e.g. elegant: "Fraunces" + "Inter"; modern: "Poppins" + "Inter"; trades/solid: "Sora" + "Inter"). - Body base size: 18px desktop, 16px minimum mobile. Never smaller. Line-height 1.6–1.7. - Heading scale (desktop): H1 clamp(2.8rem, 5vw, 4.2rem); H2 clamp(2rem, 3.5vw, 2.8rem); H3 ~1.4rem. Line-height 1.1–1.2 for headings, tightened letter-spacing on large headings. - Section labels (small caps eyebrow text) above H2s: 0.8rem, letter-spacing 0.12em, uppercase, in the accent color. - Limit body text line length: max-width ~65ch on paragraphs. SPACING & LAYOUT - One spacing scale: 4, 8, 16, 24, 32, 48, 64, 96, 128px. Use only these values. - Global content max-width: 1200px, centered, with 24px side padding (clamp for mobile). - Vertical section padding: 96px desktop, 64px tablet, 48px mobile. Consistent everywhere. - Generous whitespace. Crowded layouts read as cheap. COLOR - Build a restrained palette: {{PRIMARY_COLOR}} and {{SECONDARY_COLOR}} plus a near-black ink color, a soft off-white background, one light neutral for alternating sections, and ONE accent. Nothing more. - Use color with discipline: most of the page is neutral; color marks CTAs, links, and eyebrows. - NO rainbow gradients, no neon, no glassmorphism. At most one subtle dark or tonal overlay on imagery. DEPTH & FINISH - Border-radius scale: 8px (buttons/inputs), 16px (cards/images). Consistent. - Shadows: two levels only — a soft resting shadow and a slightly stronger hover shadow. Soft, low-opacity, never harsh black. - Hover states on every interactive element: gentle lift, color shift, or image zoom. Transitions 150–250ms ease. - Tasteful fade-up on scroll for sections is welcome. No bouncing, sliding carousels, or distracting motion. ═══════════════════════════════════════ IMAGES — NO PLACEHOLDERS, EVER ═══════════════════════════════════════ - Use real, specific Unsplash photo URLs in this exact format: https://images.unsplash.com/photo-{ID}?auto=format&fit=crop&w=1600&q=80 - Pick real photo IDs that genuinely match {{BUSINESS_TYPE}} and feel local and professional. Hero image should be atmospheric and high-quality; service images should be relevant and consistent in tone. - Never use source.unsplash.com (unreliable), gray boxes, blank divs, "image here" text, or empty visual areas. - All images go through an object-fit: cover container with a fixed aspect ratio so layout never breaks. ═══════════════════════════════════════ COPYWRITING — WRITE LIKE THE OWNER, NOT A MARKETER ═══════════════════════════════════════ - Use ONLY the provided business details. Never invent reviews, ratings, awards, certifications, years in business, statistics, team members, or any claim not given. - Write in the calm, confident voice of an experienced local owner. Plain, warm, specific. - Headlines: short, concrete, benefit-led. No hype words ("best", "#1", "leading", "premier"), no exclamation marks. - Body copy: 1–3 short sentences per block. Mention the actual city and service naturally. - Read every sentence back — if it sounds like a template or an AI, rewrite it simpler. - If a field is missing, omit that element cleanly. Never leave a gap or fabricate a filler. ═══════════════════════════════════════ PAGE STRUCTURE — FEWER, STRONGER SECTIONS ═══════════════════════════════════════ Build only these. Quality over quantity. 1. NAVBAR — business name as wordmark, 3–4 smooth-scroll links, one CTA button. Sticky, responsive, and designed to match the business niche, brand style, hero image, and color palette. Working hamburger menu on mobile. Navbar design principles: - Do not use one fixed navbar style for every business. - Choose a navbar treatment that fits the actual business type and brand style: - elegant restaurant / café / boutique: refined editorial navbar, soft surface, warm tones - modern clinic / agency / SaaS-like local service: clean minimal navbar with crisp spacing - trades / repair / construction: solid, practical navbar with strong contrast - luxury / premium service: subtle elevated navbar with polished spacing and restrained depth - The navbar must be readable immediately on page load, before the user scrolls. - Never rely on scroll state to make the navbar readable. - If the hero uses a full-bleed image, protect navbar readability with a tasteful surface, contrast layer, or adaptive text color. - The navbar can use a subtle translucent/frosted surface only when it fits the brand style, but avoid trendy or excessive glassmorphism. - Avoid huge pill-shaped navbars, bulky white banners, or anything that covers too much of the hero image. - Avoid fully transparent navbars with low-contrast text over busy images. - On scroll, the navbar may become slightly more defined, but it should not completely change style or size. - Keep it elegant, balanced, and integrated with the hero, not pasted on top. - The CTA button should feel like part of the same design system, not a random button. - On mobile, the menu panel must have a readable background and comfortable spacing. 2. HERO — the make-or-break section. Full-height (min-height: 90vh). Real full-bleed background image with a single tonal overlay for legibility. Left-aligned or centered content with strong hierarchy: small eyebrow (city + business type) → large confident H1 headline → one short supporting line → Primary CTA + Secondary CTA. One quiet trust line below if real info supports it (e.g. opening hours, location). The hero must feel balanced and intentional — generous padding, nothing cramped against edges. 3. SERVICES — not a plain grid of identical cards. Use an elevated layout: large image cards with the image filling the top, a tonal hover zoom, title and a one-line description below, consistent aspect ratios and spacing. 3 across on desktop, 1 on mobile. If there are only 1–2 main services, use a larger feature layout instead of stretching a thin grid. 4. ABOUT — a refined two-column section (image one side, text the other) or a centered statement block. Short, specific intro to the business and why locals choose it. This is where craft shows — keep it elegant and uncluttered. 5. WHY CHOOSE US — 3–4 concise trust points drawn ONLY from the USPs, hours, and location provided. Clean icon-or-number + short label + one line. No fake stats. 6. TESTIMONIALS — include ONLY if {{TESTIMONIALS}} contains real content. Style as quiet, elegant quote cards. If none provided, omit this section entirely — do not replace it with filler. 7. CONTACT — clean and conversion-focused. Business hours, address, and prominent Call / WhatsApp / Email actions. A styled, usable contact form (frontend only, no backend) with proper labels and comfortable input sizing. A Directions button. Make contacting feel effortless. 8. FAQ — include ONLY if it genuinely helps this business type, and keep it to 3–4 questions in a clean accordion or list. If it doesn't add value, omit it. 9. FOOTER — business name, available contact details, address/city, opening hours, current year. Calm and minimal. Do NOT force a section that weakens the design. A tight 6-section page beats a padded 9-section one. ═══════════════════════════════════════ FUNCTIONAL REQUIREMENTS ═══════════════════════════════════════ - Phone → tel:{{PHONE_NUMBER}} - Email → mailto:{{EMAIL_ADDRESS}} - WhatsApp → https://wa.me/{{WHATSAPP_NUMBER}} (render only if a WhatsApp number is provided) - Directions → {{GOOGLE_MAPS_LINK}} (fall back to address) - Navbar links smooth-scroll to sections; account for the sticky navbar height (scroll-margin-top). - Every CTA is a real working link or action — no dead buttons. - Key contact actions appear in both the hero and the contact section. - Fully responsive and tested at mobile (~375px), tablet (~768px), desktop (~1280px). Navbar collapses to a working menu. ═══════════════════════════════════════ FINAL QUALITY CHECK BEFORE FINISHING ═══════════════════════════════════════ - Runs with `npm run dev`, zero console errors, no broken images. - All content sourced from src/config/business.js. - Typography is large and comfortable — no tiny text anywhere. Spacing is consistent and generous. - Hero feels balanced, confident, and high-end. - Service cards look elevated, not basic. - Color is restrained; no cheap gradients or busy effects. - The page feels intentional and complete — something a real local owner would proudly pay for. Build the strongest, most visually refined version of this website now.

Nome do negócio

Tipo de negócio

Cidade / Região

Número de telefone

Link do Google Maps

Estilo da marca

Cor primária

CTA principal

Slogan do negócio

Endereço completo

Número do WhatsApp

Endereço de e-mail

Serviços principais

Horário de funcionamento

CTA secundário

Cor secundária

Serviços secundários

Descrição do negócio

Diferenciais

Depoimentos

Prompts especializados

Optional prompts for specific business types

Restaurante

Use este prompt para criar um site de restaurante premium e de alta conversão, focado em reservas, ligações e visitas de clientes.

You are an expert restaurant website designer and conversion-focused landing page specialist. Create a polished, realistic, client-ready one-page website for this restaurant using the exact information provided below. This website must feel custom-made for the restaurant and visually strong enough to show directly to a real restaurant owner as a professional demo. The final design should feel premium, appetizing, modern, mobile-friendly, and highly focused on getting real actions such as table reservations, phone calls, WhatsApp messages, and in-person visits. RESTAURANT DETAILS Restaurant Name: {{RESTAURANT_NAME}} Cuisine Type: {{CUISINE_TYPE}} Tagline: {{TAGLINE}} City / Area: {{CITY_AREA}} Phone Number: {{PHONE_NUMBER}} WhatsApp Number or Link: {{WHATSAPP}} Signature Dishes: {{SIGNATURE_DISHES}} Opening Hours: {{OPENING_HOURS}} GOAL Create a high-end restaurant website that builds trust instantly, makes the food look desirable, and encourages users to reserve a table or contact the restaurant. STYLE DIRECTION - Premium and elegant - Warm, inviting, and appetizing - Clean modern layout - Strong visual hierarchy - Mobile-first and responsive - Realistic restaurant feel, not generic SaaS styling - Use rich food-focused visuals and refined typography - The website should feel like a real local restaurant brand REQUIRED SECTIONS 1. Hero Section - Strong restaurant headline - Short persuasive subheadline - Primary CTA for reservations - Secondary CTA for phone call or WhatsApp - Include cuisine type and location naturally - Hero must feel premium and visually impressive 2. About Section - Brief story or introduction about the restaurant - Highlight atmosphere, quality, ingredients, or dining experience - Make it feel authentic and inviting 3. Signature Dishes / Featured Menu Section - Showcase the signature dishes provided - Present them as attractive featured menu items - Add short enticing descriptions if needed - Make this section visually appealing and food-focused 4. Why Choose Us Section - Highlight what makes the restaurant special - Examples: fresh ingredients, authentic recipes, cozy atmosphere, fast service, chef quality, family-friendly dining - Use 3 to 4 strong benefit points 5. Gallery Section - Add a beautiful food and restaurant atmosphere gallery - If no real images are provided, use high-quality visuals relevant to the cuisine and restaurant style - Keep the gallery elegant and consistent 6. Testimonials Section - Add believable positive customer testimonials - Keep them realistic and relevant to a restaurant experience - Focus on food quality, service, atmosphere, and overall experience 7. Location / Visit Us Section - Show city/area and opening hours clearly - Encourage users to visit or book 8. Contact / Reservation Section - Strong final CTA to reserve a table - Include phone and WhatsApp clearly - Make contacting the restaurant easy and immediate IMPORTANT INSTRUCTIONS - Do NOT make the site look like a generic template - Do NOT use placeholder-looking content - Make the website feel realistic, branded, and restaurant-specific - Keep the layout elegant and easy to scan - Use strong CTA buttons throughout the page - Focus on conversion and visual appetite appeal - Ensure the final result looks premium on both desktop and mobile FINAL RESULT The website should look like a premium real restaurant website that is ready to present to a client immediately. It should feel stylish, appetizing, trustworthy, and optimized for reservations and customer contact.

Restaurant Name

Luna Bistro

Cuisine Type

Italian Restaurant

Tagline

Fresh flavors, warm atmosphere, unforgettable dining

City / Area

Downtown Chicago

Phone Number

+1 312 555 0148

WhatsApp Number or Link

https://wa.me/13125550148

Signature Dishes

Truffle Pasta, Wood-Fired Margherita Pizza, Tiramisu

Opening Hours

Mon-Sun: 12:00 PM - 11:00 PM

Clínica odontológica

Use este prompt para criar um site de clínica odontológica limpo, confiável e de alta conversão, focado em agendamentos, ligações e confiança do paciente.

You are an expert dental clinic website designer and conversion-focused landing page specialist. Create a polished, realistic, client-ready one-page website for this dental clinic using the exact information provided below. This website must feel custom-made for the clinic and visually strong enough to show directly to a real clinic owner as a professional demo. The final design should feel clean, trustworthy, modern, mobile-friendly, and highly focused on getting real actions such as appointment bookings, phone calls, WhatsApp messages, and patient inquiries. CLINIC DETAILS Clinic Name: {{CLINIC_NAME}} Clinic Specialty: {{CLINIC_SPECIALTY}} Tagline: {{TAGLINE}} City / Area: {{CITY_AREA}} Phone Number: {{PHONE_NUMBER}} WhatsApp Number or Link: {{WHATSAPP}} Key Services: {{KEY_SERVICES}} Opening Hours: {{OPENING_HOURS}} GOAL Create a high-end dental clinic website that builds trust instantly, looks professional and reassuring, and encourages users to book an appointment or contact the clinic. STYLE DIRECTION - Clean and modern - Trustworthy and professional - Bright, calm, and reassuring - Strong visual hierarchy - Mobile-first and responsive - Realistic clinic feel, not generic SaaS styling - Use refined typography, clean spacing, and polished visuals - The website should feel like a real local healthcare brand REQUIRED SECTIONS 1. Hero Section - Strong headline focused on dental care and trust - Short persuasive subheadline - Primary CTA for booking an appointment - Secondary CTA for phone call or WhatsApp - Include clinic specialty and location naturally - Hero must feel clean, modern, and confidence-building 2. About Section - Brief introduction to the clinic - Emphasize patient care, professionalism, comfort, and trust - Make it feel reassuring and credible 3. Services Section - Showcase the key services provided - Present them clearly and professionally - Add short helpful descriptions if needed - Make the section easy to scan 4. Why Choose Us Section - Highlight what makes the clinic stand out - Examples: experienced care, modern equipment, gentle treatment, family-friendly service, personalized attention, clean environment - Use 3 to 4 strong benefit points 5. Team / Expertise Section - Add a professional trust-building section about the clinic’s expertise - If no doctor details are provided, keep it generic but realistic - Focus on professionalism and patient confidence 6. Testimonials Section - Add believable positive patient testimonials - Keep them realistic and relevant to dental care - Focus on comfort, professionalism, friendliness, and results 7. Location / Visit Us Section - Show city/area and opening hours clearly - Encourage users to contact or visit the clinic 8. Contact / Booking Section - Strong final CTA to book an appointment - Include phone and WhatsApp clearly - Make contacting the clinic easy and immediate IMPORTANT INSTRUCTIONS - Do NOT make the site look like a generic template - Do NOT use placeholder-looking content - Make the website feel realistic, branded, and clinic-specific - Keep the layout elegant, calm, and easy to scan - Use strong CTA buttons throughout the page - Focus on trust, clarity, and conversion - Ensure the final result looks premium on both desktop and mobile FINAL RESULT The website should look like a premium real dental clinic website that is ready to present to a client immediately. It should feel trustworthy, professional, reassuring, and optimized for bookings and patient contact.

Clinic Name

BrightSmile Dental Clinic

Clinic Specialty

Family & Cosmetic Dentistry

Tagline

Gentle care, modern dentistry, confident smiles

City / Area

Downtown Miami

Phone Number

+1 305 555 0148

WhatsApp Number or Link

https://wa.me/13055550148

Key Services

Teeth Cleaning, Dental Implants, Teeth Whitening, Braces

Opening Hours

Mon-Fri: 9:00 AM - 6:00 PM

Imobiliário

Use este prompt para criar um site imobiliário premium e de alta conversão, focado em consultas sobre imóveis, ligações e geração de leads.

You are an expert real estate website designer and conversion-focused landing page specialist. Create a polished, realistic, client-ready one-page website for this real estate business using the exact information provided below. This website must feel custom-made for the business and visually strong enough to show directly to a real real estate client as a professional demo. The final design should feel premium, trustworthy, modern, mobile-friendly, and highly focused on getting real actions such as property inquiries, phone calls, WhatsApp messages, and qualified leads. REAL ESTATE BUSINESS DETAILS Business Name: {{BUSINESS_NAME}} Property Types: {{PROPERTY_TYPES}} Tagline: {{TAGLINE}} City / Area: {{CITY_AREA}} Phone Number: {{PHONE_NUMBER}} WhatsApp Number or Link: {{WHATSAPP}} Featured Properties: {{FEATURED_PROPERTIES}} Services: {{SERVICES}} GOAL Create a high-end real estate website that builds trust instantly, presents properties attractively, and encourages users to contact the business or inquire about available listings. STYLE DIRECTION - Premium and polished - Trustworthy and professional - Modern and spacious - Strong visual hierarchy - Mobile-first and responsive - Realistic real estate feel, not generic SaaS styling - Use refined typography, elegant layouts, and high-end property visuals - The website should feel like a real local real estate brand REQUIRED SECTIONS 1. Hero Section - Strong headline focused on property value and trust - Short persuasive subheadline - Primary CTA for property inquiries - Secondary CTA for phone call or WhatsApp - Include property types and location naturally - Hero must feel premium and visually impressive 2. About Section - Brief introduction to the business - Emphasize market knowledge, professionalism, and client support - Make it feel credible and local 3. Featured Properties Section - Showcase the featured properties provided - Present them in an attractive and premium way - Add short descriptions if needed - Make this section visually strong and easy to scan 4. Services Section - Showcase the services provided - Examples: buying, selling, renting, property management, investment consulting - Present them clearly and professionally 5. Why Choose Us Section - Highlight what makes the business stand out - Examples: local expertise, trusted guidance, premium listings, fast communication, personalized service - Use 3 to 4 strong benefit points 6. Testimonials Section - Add believable positive client testimonials - Keep them realistic and relevant to property buying, selling, or renting - Focus on trust, professionalism, responsiveness, and results 7. Area / Market Section - Reinforce the local market presence - Mention the city/area naturally - Position the business as knowledgeable and active in the local market 8. Contact / Inquiry Section - Strong final CTA to request details or get in touch - Include phone and WhatsApp clearly - Make contacting the business easy and immediate IMPORTANT INSTRUCTIONS - Do NOT make the site look like a generic template - Do NOT use placeholder-looking content - Make the website feel realistic, branded, and real-estate-specific - Keep the layout elegant and easy to scan - Use strong CTA buttons throughout the page - Focus on trust, lead generation, and premium presentation - Ensure the final result looks premium on both desktop and mobile FINAL RESULT The website should look like a premium real real estate website that is ready to present to a client immediately. It should feel trustworthy, polished, upscale, and optimized for inquiries and lead generation.

Business Name

Horizon Realty Group

Property Types

Luxury Homes, Apartments, Investment Properties

Tagline

Trusted local experts for buying, selling, and premium property opportunities

City / Area

Miami, Florida

Phone Number

+1 305 555 0182

WhatsApp Number or Link

https://wa.me/13055550182

Featured Properties

Modern Waterfront Villa, Downtown Luxury Apartment, Family Home in Coral Gables

Services

Buying, Selling, Renting, Property Investment Guidance

Academia / Fitness

Use este prompt para criar um site de academia ou fitness ousado e de alta conversão, focado em mensalidades, ligações e consultas sobre aulas.

You are an expert gym and fitness website designer and conversion-focused landing page specialist. Create a polished, realistic, client-ready one-page website for this gym or fitness business using the exact information provided below. This website must feel custom-made for the business and visually strong enough to show directly to a real gym owner or fitness client as a professional demo. The final design should feel bold, energetic, modern, mobile-friendly, and highly focused on getting real actions such as membership inquiries, phone calls, WhatsApp messages, class sign-ups, and trial requests. FITNESS BUSINESS DETAILS Business Name: {{BUSINESS_NAME}} Fitness Programs: {{FITNESS_PROGRAMS}} Tagline: {{TAGLINE}} City / Area: {{CITY_AREA}} Phone Number: {{PHONE_NUMBER}} WhatsApp Number or Link: {{WHATSAPP}} Key Benefits: {{KEY_BENEFITS}} Opening Hours: {{OPENING_HOURS}} GOAL Create a high-end gym or fitness website that builds trust instantly, looks motivating and professional, and encourages users to join, contact the business, or ask about programs. STYLE DIRECTION - Bold and energetic - Modern and visually strong - Confident and motivating - Strong visual hierarchy - Mobile-first and responsive - Realistic fitness brand feel, not generic SaaS styling - Use refined typography, strong sections, and high-quality fitness visuals - The website should feel like a real local gym or fitness brand REQUIRED SECTIONS 1. Hero Section - Strong fitness-focused headline - Short persuasive subheadline - Primary CTA for joining, trial signup, or membership inquiry - Secondary CTA for phone call or WhatsApp - Include program types and location naturally - Hero must feel bold, impressive, and action-oriented 2. About Section - Brief introduction to the business - Emphasize coaching quality, environment, community, motivation, or transformation - Make it feel credible and inspiring 3. Programs Section - Showcase the fitness programs provided - Examples: strength training, personal training, HIIT, weight loss, yoga, group classes - Present them clearly and attractively - Make the section easy to scan 4. Why Choose Us Section - Highlight what makes the gym or studio stand out - Examples: expert coaching, motivating atmosphere, modern equipment, flexible plans, supportive community, real results - Use 3 to 4 strong benefit points 5. Results / Benefits Section - Reinforce the key benefits users can expect - Focus on energy, strength, confidence, health, transformation, and consistency - Make it feel motivating and benefit-driven 6. Testimonials Section - Add believable positive client testimonials - Keep them realistic and relevant to fitness progress and experience - Focus on motivation, trainers, atmosphere, and results 7. Schedule / Visit Us Section - Show city/area and opening hours clearly - Encourage users to visit, contact, or ask about programs 8. Contact / Membership Section - Strong final CTA to join or inquire - Include phone and WhatsApp clearly - Make contacting the business easy and immediate IMPORTANT INSTRUCTIONS - Do NOT make the site look like a generic template - Do NOT use placeholder-looking content - Make the website feel realistic, branded, and fitness-specific - Keep the layout bold, clean, and easy to scan - Use strong CTA buttons throughout the page - Focus on motivation, trust, and conversion - Ensure the final result looks premium on both desktop and mobile FINAL RESULT The website should look like a premium real gym or fitness website that is ready to present to a client immediately. It should feel energetic, professional, motivating, and optimized for memberships and inquiries.

Business Name

Elevate Fitness Club

Fitness Programs

Personal Training, Strength Training, HIIT Classes, Weight Loss Coaching

Tagline

Train harder, feel stronger, transform with confidence

City / Area

Austin, Texas

Phone Number

+1 512 555 0196

WhatsApp Number or Link

https://wa.me/15125550196

Key Benefits

Expert Coaches, Modern Equipment, Flexible Memberships, Supportive Community

Opening Hours

Mon-Sat: 6:00 AM - 10:00 PM

Envie o prompt para o Claude Code

Execute o site localmente

npm install

npm run dev

Necessário para executar localmente

Instale o Node.js apenas se o npm não estiver disponível no seu computador.

Abrir o Node.js

https://nodejs.org/

Teste a funcionalidade do site

Teste os botões principais e use o prompt apenas se alguma ação não funcionar.

Corrija os botões e as ligações

Corrija todos os CTA, ligações e ações de contacto.

You are improving the EXISTING React + Vite local business website. Do NOT rebuild the project from scratch. Do NOT redesign the website. Do NOT change the business details. Do NOT move business content out of src/config/business.js. Keep the current component structure, styling system, and premium design direction. Your task is to audit and fix every interactive element so the website works like a real client-ready website. This is a surgical pass: if something already works correctly, leave it exactly as it is. Only change what is broken, incomplete, or unclear. CHECK AND FIX 1. Navbar links - Every navbar link smooth-scrolls to the correct section. - The sticky navbar must not cover section headings — use scroll-margin-top or an equivalent clean solution. - Mobile menu links work correctly and close the menu after navigating. 2. Hero CTA buttons - The primary CTA performs the main business action; the secondary CTA performs the secondary action. - If a CTA should call the business, use a tel: link. If it should scroll to a section, connect it to the correct section. - No hero button is decorative only. 3. Contact actions - Phone buttons use a valid tel: link. - Email buttons use a valid mailto: link. - WhatsApp buttons use a valid https://wa.me/ link, but ONLY if a WhatsApp number exists in src/config/business.js. - Directions buttons open the Google Maps link if available, or use the address as a fallback. - External links (WhatsApp, Google Maps) open in a new tab with target="_blank" and rel="noopener noreferrer". - Verify no link has an empty or placeholder href (e.g. "tel:", "https://wa.me/", "#"). An incomplete link counts as a broken link. 4. Contact form - Keep the form frontend-only. Do not add a backend. - On submit, prevent the default action and show a simple, clearly worded frontend confirmation message. - The confirmation wording must not claim the message was sent to a server or that the business received it. Phrase it honestly (e.g. confirming the details were captured / asking the visitor to call or message for a faster response). - The submit button is clearly styled and labeled. 5. General button quality - Every button, link, and CTA has a real purpose. Fix or remove dead buttons. - Button labels clearly describe the action. - Key contact actions stay visible in both the hero and the contact section. RULES - All business information stays sourced from src/config/business.js. - Do not invent business details, fake claims, fake reviews, fake ratings, or fake statistics. - Do not change the visual style unless a small adjustment is genuinely needed for clarity or usability. - Keep the website clean, premium, and consistent. BEFORE FINISHING - Trace the page flow from top to bottom: navigation, hero CTAs, contact links, and mobile menu behavior all make sense. - Confirm the project runs with `npm run dev` with no console errors and no broken images. - Then give a short, plain-language summary of what you changed and why. If something was already correct, say that it was checked and left unchanged.

Melhore o design visual

Use qualquer um dos prompts apenas onde a primeira versão precisar de mais acabamento visual.

Melhore as imagens e os cartões de serviços

Melhore os visuais, as imagens e os cartões de serviços.

You are improving the EXISTING React + Vite local business website. Do NOT rebuild the project from scratch. Do NOT redesign the entire website. Do NOT change the business details. Do NOT move business content out of src/config/business.js. Do NOT hardcode image URLs, service names, or business text directly inside components. Keep the current component structure, styling system, design tokens, and premium design direction. Your task is to improve the hero image, service images, and service card presentation so the website feels more premium, more relevant to the business, and more client-ready. This is a focused pass — if an image or card is already strong and appropriate, leave it unchanged. Use these image inputs if provided: Hero Image URL: {{HERO_IMAGE_URL}} Service / Gallery Image URLs: {{SERVICE_IMAGE_URLS}} Optional Image Notes: {{IMAGE_NOTES}} IMAGE SOURCE RULES - Store all image URLs inside src/config/business.js. Components read images from config only — never hardcode URLs in JSX. - Each image entry in config should include both the URL and a short descriptive alt text, so components can render proper alt attributes. - Use real, working, high-quality remote image URLs that are DIRECT image links (e.g. ending in .jpg / .png / .webp, or the images.unsplash.com/photo-... format). Do not use a webpage URL as an image source. - Do not use source.unsplash.com. - Do not use gray placeholders, empty image boxes, blank dark rectangles, fake image blocks, or icon-only service cards. - For Unsplash URLs, include a sensible width parameter: w=1600 for the hero, w=800 for service cards (format: ?auto=format&fit=crop&w=800&q=80). - If you use any image URL you cannot reasonably verify as a working direct image link, note it clearly in your final summary so the user can check it. WHEN TO REPLACE AN EXISTING IMAGE Only replace an image if it is clearly broken, clearly irrelevant to the business, obviously low-quality, a placeholder, or duplicated across cards. Do not replace an image simply because of subjective taste — avoid unnecessary churn. HERO IMAGE If a Hero Image URL is provided: - Use it as the main hero image with object-fit: cover. - Crop and position it professionally so the focal point stays visible across breakpoints. - Adjust the overlay only if needed for text readability. - Keep hero content intentionally positioned within the layout grid — do not weaken the composition with random centering. If no Hero Image URL is provided: - Review the current hero image and replace it only per the rule above. Choose a stronger image that matches the business type and brand style. SERVICE IMAGES AND CARDS If Service / Gallery Image URLs are provided: - Match each image to the most relevant service. Follow the Optional Image Notes if given. - If there are more images than services, use the strongest first. If fewer, place provided images where they fit best and source relevant images for the remaining cards. If no Service / Gallery Image URLs are provided: - Review the current service images and replace only those that meet the replacement rule above. Every service card must have a real, relevant image. IMAGE TONE CONSISTENCY - Images across the service grid should feel like one cohesive set — similar lighting, color tone, and style. Avoid mixing, e.g., a bright daylight photo next to a dark moody one. ELEVATE THE SERVICE CARDS Improve the cards so they feel crafted, not like a basic template grid: - consistent image aspect ratios and clean cropping (object-fit: cover) - subtle hover zoom or lift - comfortable spacing inside cards - clear service titles and short, benefit-focused descriptions - restrained shadows and borders, consistent with the existing design tokens - consistent card rhythm on desktop, tablet, and mobile - loading="lazy" on service/gallery images that sit below the fold Do not add fake services, fake claims, fake reviews, ratings, awards, statistics, or years of experience. Use only the services and details already in src/config/business.js. BEFORE FINISHING Review the hero and every service card and confirm: - the hero image feels premium and relevant - every service card has a real, relevant image with descriptive alt text - no image looks broken, cheap, random, or unrelated - images across the service grid feel cohesive in tone - all image URLs are in src/config/business.js; no URLs hardcoded in components - service cards look polished on desktop, tablet, and mobile - the project still runs with `npm run dev` with no console errors Then give a short, plain-language summary of what you changed and why. Note any image URL you could not fully verify. If an existing image was already strong, say it was checked and left unchanged.

URL da imagem hero

Cole uma URL direta de imagem (por exemplo, .jpg, .png ou images.unsplash.com/photo-...)

URLs das imagens de serviço / galeria

Notas de imagem opcionais

Notas mapeando imagens para serviços específicos (opcional)

Deixe o site com cara de premium

Aperfeiçoe o espaçamento, a tipografia e o acabamento visual.

You are improving the EXISTING React + Vite local business website. Do NOT rebuild the project from scratch. Do NOT redesign the entire website from zero. Do NOT change the business details. Do NOT move business content out of src/config/business.js. Do NOT hardcode business text, colors, services, or image URLs directly inside components. Keep the current component structure, styling system, design tokens, and premium design direction. Your task is to make the existing website feel more premium, refined, intentional, and agency-made. This is a visual polish pass, not a rebuild. Use these optional design notes if provided: Design Direction / Notes: {{DESIGN_NOTES}} If design notes are provided: - Use them as creative direction. - Apply them in a tasteful way. - Do not ignore the existing business type, brand style, colors, and structure. If no design notes are provided: - Improve the website using the current brand style and business type. POLISH THE DESIGN 1. Hero section - Make the hero feel balanced, confident, and high-end. - Improve headline hierarchy, spacing, overlay, button placement, and visual composition. - Make sure hero content feels intentionally positioned inside the layout grid. - Avoid random centered text over the image. - Keep the image visible enough to feel premium, but ensure text stays readable. - Do not make the hero feel cramped, empty, or disconnected from the rest of the page. 2. Typography - Improve the typography hierarchy across the site. - Headings should feel confident and readable. - Body text should feel comfortable, not tiny. - Keep paragraph line lengths clean and easy to scan. - Make labels, buttons, headings, and body copy feel consistent. 3. Layout and spacing - Improve section rhythm and vertical spacing. - Use consistent max-width, alignment, padding, and whitespace. - Remove cramped areas, awkward gaps, and uneven spacing. - Make the page feel complete but not bloated. - Keep the layout clean and easy to follow. 4. Cards and visual elements - Improve service cards, trust cards, testimonial cards, contact cards, and form styling where needed. - Make cards feel elevated, not basic. - Use restrained shadows, borders, hover states, and image treatment. - Keep border radius, spacing, and shadow levels consistent with the design system. 5. Colors and brand feel - Use the existing primary and secondary colors with restraint. - Make the color palette feel premium and intentional. - Avoid overusing accent colors. - Avoid cheap gradients, neon effects, glassmorphism, random decorative shapes, or clutter. - Make the design feel aligned with the business type and brand style. 6. Copy polish - Review visible copy and improve wording only where it feels awkward, generic, or AI-like. - Keep copy short, human, specific, and believable. - Use only the business details already provided in src/config/business.js. - Do not invent fake reviews, fake ratings, awards, statistics, certifications, years of experience, or unsupported claims. 7. Contact and conversion - Make the main CTA areas feel clearer and more persuasive. - Improve contact section layout if it feels basic or cluttered. - Keep phone, WhatsApp, email, directions, and form actions clear and easy to use. - Do not make buttons decorative only. IMPORTANT RULES - If a section already looks strong and premium, leave it mostly unchanged. - Only improve what looks generic, cramped, weak, inconsistent, or unfinished. - Do not add unnecessary sections. - Do not remove important content. - Do not overdesign. - Do not make the site look like a generic SaaS landing page. - Keep it realistic for a local business. BEFORE FINISHING Review the full website from top to bottom. Confirm: - the hero feels premium and intentionally composed - typography is large, comfortable, and consistent - spacing feels generous and controlled - cards look elevated, not basic - colors feel restrained and professional - the page does not look like a generic AI template - the website feels ready to show to a real local business owner - mobile, tablet, and desktop still look polished - all business content remains sourced from src/config/business.js - the project still runs with npm run dev and has no console errors Then give a short, plain-language summary of what you changed and why. If some sections were already strong, say they were checked and left unchanged.

Direção de design / Notas

Direção criativa ou notas de design opcionais (estilo, mood, referências, coisas para enfatizar ou evitar)

Reveja e melhore o layout para telemóvel

Pré-visualize o site num ecrã do tamanho de um telemóvel e use o prompt apenas se o layout precisar de melhorias.

Abrir Mobile Preview Extension

https://chromewebstore.google.com/detail/mobile-simulator-responsi/ckejmhbmlajgoklhgbapkiccekfoccmk

Melhore o layout para celular

Aperfeiçoe a experiência em telemóvel e tablet.

You are improving the EXISTING React + Vite local business website. Do NOT rebuild the project from scratch. Do NOT redesign the entire website. Do NOT change the business details. Do NOT move business content out of src/config/business.js. Do NOT hardcode business text, colors, services, or image URLs directly inside components. Keep the current component structure, styling system, design tokens, and premium design direction. Your task is to audit and improve the mobile and tablet experience so the website feels polished, readable, and easy to use on real devices. This is a focused responsive pass. If a section already works well on mobile, leave it unchanged. Only fix what feels cramped, broken, hard to read, hard to tap, or visually weak. CHECK AND IMPROVE 1. Navbar and mobile menu - Make sure the navbar works well on small screens. - The mobile menu should open and close clearly. - Mobile menu links should navigate to the correct sections and close after clicking. - The CTA button should remain usable without crowding the header. - Avoid horizontal overflow. 2. Hero section - Improve mobile hero spacing, headline size, line-height, button stacking, and readability. - Make sure the hero image still looks intentional on mobile. - Adjust object-position if the image focal point is hidden. - The overlay should help readability without making the image feel too dark. - Hero content should not feel cramped, randomly placed, or pushed too far down. 3. Services section - Service cards should stack cleanly on mobile. - Images should keep consistent aspect ratios. - Text should be readable without tiny font sizes. - Card spacing should feel comfortable. - Hover-only effects should not be required for mobile users. 4. About, Why Choose Us, Testimonials, and FAQ - Two-column layouts should stack cleanly. - Images and text should have enough breathing room. - Trust points should be easy to scan. - Testimonials, if present, should be readable and not too narrow. - FAQ items, if present, should have comfortable tap targets. 5. Contact section - Form fields should be large enough to tap comfortably. - Buttons should be easy to tap. - Phone, WhatsApp, Email, and Directions actions should remain clear and accessible. - The contact form and contact details should stack in a logical order. - Avoid cramped inputs, tiny labels, or awkward spacing. 6. Footer - Footer content should stack neatly. - Text should remain readable. - Links and contact details should not feel squeezed. RESPONSIVE QUALITY RULES - Test the layout mentally at around 375px, 768px, and 1280px. - Use mobile-first CSS where appropriate. - Avoid horizontal scrolling. - Avoid clipped text, overlapping elements, tiny text, cramped buttons, or broken image crops. - Keep body text at least 16px on mobile. - Keep tap targets comfortable. - Keep spacing generous but not wasteful. - Preserve the premium design system: typography, spacing, colors, shadows, cards, and section rhythm. IMPORTANT - Do not remove important content just to make mobile easier. - Do not invent new content. - Do not change the business identity. - Do not make desktop worse while fixing mobile. - Keep all editable business content in src/config/business.js. BEFORE FINISHING Review the full page on mobile, tablet, and desktop. Confirm: - no horizontal scrolling - navbar and mobile menu work - hero reads clearly - services stack cleanly - contact actions are easy to use - form fields are comfortable - images crop well - typography is readable - spacing feels premium - desktop still looks polished - the project still runs with npm run dev and has no console errors Then give a short, plain-language summary of what you changed and why. If a section was already responsive and polished, say it was checked and left unchanged.

Conectar VS Code ao GitHub

VS Code Sign In Sign in with GitHub

Prepare o repositório do GitHub

Crie um repositório privado no GitHub Copie o URL do repositório Instale o Git se for necessário

Abrir o Git

https://git-scm.com/downloads

Enviar o projeto para o GitHub

Prompt seguro para publicar no GitHub

Envie o seu projeto para o GitHub sem mexer na aplicação.

I already created an empty GitHub repository. GitHub repository URL: {{GITHUB_REPOSITORY_URL}} Please prepare and push this local project to that GitHub repository. Rules: - Do not change the app code, UI, design, routes, database logic, backend logic, Supabase logic, or functionality. - Only handle Git and GitHub publishing. - Check Git status, branch, remotes, .gitignore, and tracked files first. - Make sure .env and .env.local are not committed. - Make sure generated files like node_modules, dist, dist-ssr, *.tsbuildinfo, .DS_Store, and log files are ignored. - If unnecessary files are already tracked, remove them from Git tracking only. Do not delete real project files. - Use main for a new repository, unless an existing branch should be preserved. - Connect this project to the GitHub repository URL. - Create a clean commit if needed. - Push the project to GitHub. If the push fails, diagnose and fix only the Git/GitHub setup. Do not change app functionality. Before any destructive action, explain what you found and what you plan to do.

URL do repositório GitHub

https://github.com/username/repository-name.git

VS Code Source Control Publish Branch

Implantar na Hostinger

Publique seu site na Hostinger

Transforme seu projeto Claude Code em um site no ar

RECOMMENDED

https://www.hostg.xyz/SHJW8

Hostinger Websites Add Website Node.js Web App

Escolha ou ligue um domínio Importe o repositório do GitHub Reveja as definições de build detetadas Adicione variáveis de ambiente apenas se o projeto precisar delas Publique e abra o site em direto

Use essas mensagens para mostrar seu site para negócios reais e transformá-lo em uma oportunidade. Este passo é opcional.

Mensagem direta (Instagram / WhatsApp)

Hi, I came across your business and created a quick sample website to show how it could look with a cleaner and more modern online presence. If you'd like, I can send you the preview.

E-mail (sem link)

Subject: I created a sample website for your business Hi, I found your business online and created a sample website to show how it could look with a cleaner and more modern design. If you're interested, I can send you the preview. Best, [Your Name]

E-mail (com link)

Subject: I created a sample website for your business Hi, I found your business online and created a sample website to show how it could look with a cleaner and more modern online presence. Here is the preview: [Paste your link] If you like it, I can customize it further for your business. Best, [Your Name]

Depois que responderem

Thanks — here is the preview: [Paste your link] This is just a sample to show the direction. If you like it, I can customize it further for your business.

Dicas rápidas

Não envie o link no primeiro DM Teste as duas versões de e-mail Mantenha a mensagem curta Foque em obter uma resposta primeiro