22 days ago
Это отличная подготовка. У нас есть дизайн (на изображениях), структура и технические ограничения. Так как вы будете использовать ИИ для генерации кода, я составил Единый Мастер-Промпт (Техническое Задание). Вы можете просто скопировать текст ниже и отправить его AI-разработчику (например, Claude 3.5 Sonnet, GPT-4o). Это ТЗ написано на английском (так ИИ лучше кодит), но с учетом всех ваших требований. 📋 Техническое Задание (Скопируйте и отправьте ИИ) Role: You are an expert WordPress Developer specializing in Tailwind CSS. Task: Create a custom WordPress theme for a local Cleaning Company ("Close 2 Clean") based on the specific design requirements and file structure below. 1. Project Setup & Stack CMS: WordPress (latest). CSS Framework: Tailwind CSS via CDN (include the script in the header). Design Style: Clean, professional, blue and yellow color scheme (based on the description below). Icons: FontAwesome (CDN) or Heroicons (SVG). 2. File Structure (Strict Requirement) You must follow this exact folder structure. Do not hallucinate other paths. Plaintext /wp-content/themes/close2clean/ ├── style.css (Theme declaration) ├── functions.php (Enqueues, features) ├── variables.php (Hardcoded contact info) ├── header.php ├── footer.php ├── index.php (Main loop) ├── assets/ │ ├── css/ (custom overrides if needed) │ ├── js/ (mobile menu scripts) │ └── images/ └── template-parts/ ├── page-home.php (Homepage layout) ├── page-services.php (General services list) ├── service-house-cleaning.php (Specific service template) ├── service-office-cleaning.php (Specific service template) └── content-hero.php 3. Global Configuration (variables.php) Create a file variables.php to store contact details centrally. Code requirement: PHP <?php // Global Contact Variables $contact_info = [ 'phone' => '+1 704 390 47**', 'phone_link' => 'tel:+17043904700', 'email' => 'info@close2clean.com', 'address' => '3540 Toringdon Way, Charlotte, NC 28277', 'hours' => 'Mon - Fri: 09.00am - 10.00pm', 'facebook' => 'https://facebook.com/close2clean' ]; ?> Include this file at the top of header.php and footer.php to use the variables. 4. Design & Tailwind Config In the <head>, configure Tailwind colors to match the brand: Primary Blue (Deep): #1e3a8a (approx, matches the dark blue backgrounds). Accent Yellow: #facc15 (matches the "Get a Quote" buttons). Text Gray: #6b7280. Font: Use 'Inter' or 'Poppins' from Google Fonts. 5. Header Implementation (header.php) Must look exactly like the "header.jpg" reference. Top Bar: Dark blue background. Left: Address, Email. Right: Working Hours, Phone, Social Icon. Main Nav: Dark blue background (slightly different shade or same). Logo (Left). Menu: Home, Blog, Services (Dropdown), Faq Page, Contact, Online Booking Form. Actions (Right): Search Icon, Notification Bell, Yellow Button "Get A Quote". 6. Front Page Design (template-parts/page-home.php) Replicate the visual flow from the provided screenshots: Hero Section: White/Gradient background. Text left: "Professional & Trustworthy", "Best Cleaning Service Ever". Button: "Take Our Service" (Yellow). Image right: Cleaner lady with arms crossed/gloves, overlapping circular design elements. Stats Strip: Dark Blue bar. 4 Columns: 10k Happy Clients, 12 Expert Workers, 3k Projects, 99% Cleaning Score. Services Grid: 3 Columns. White cards with shadow. Example: Move Out Cleaning (Icon, Title, Desc, Checkmarks list, "Read More" yellow button). Repeat for Home Cleaning, Kitchen Cleaning. Pricing Section: Title "Our Affordable Pricing Plan". 3 Blue Cards. Standard ($79), Move-in ($99), Add-ons ($49). White text, yellow "Read More" buttons. Testimonial Slider: Dark Blue block. Five orange stars. Quote text. Name "Sarah J.", Role "Property Manager". Arrows left/right. CTA Block: Long horizontal dark blue banner. Image of cleaner left. Text: "Specialist Cleaning Services...". Yellow Button right. 7. Footer Implementation (footer.php) Match "footer.jpg". Dark blue background. Col 1 (About): Text description, Follow Us (FB icon). Col 2 (Services): List of links (House, Moveout, Kitchen, Toilet). Col 3 (Quick Links): FAQ, Services. Col 4 (Contact Us): Phone (use $contact_info['phone']), Email (use $contact_info['email']). Bottom Bar: Copyright 2025 Close 2 Clean. Scroll to top button (Yellow arrow). 8. Forms Use a placeholder for WPForms: <?php echo do_shortcode('[wpforms id="123"]'); ?>. Style the container div to handle the form layout gracefully. Start Coding Please generate the code for: variables.php header.php footer.php template-parts/page-home.php functions.php (include logic to load styles/scripts and register menus).
Windframe is an AI visual editor for rapidly building stunning web UIs & websites
Start building stunning web UIs & websites!
