<?php
$page = 'freewebsitebuilder'; 
include 'inc/nav.php'; ?>

<!-- HERO -->

<section class="hero position-relative overflow-hidden pt-80 pb-80">
  <div class="container">
    <div class="row align-items-center position-relative">
      <!-- Left Content -->
      <div class="col-lg-6">
        <div class="hero-badge-pills">
          <span class="hero-pill hero-pill--accent">
            <i class="fa-solid fa-bolt"></i> POWERED BY AI · 100% FREE FOREVER
          </span>
        </div>

        <h1 class="display-5 text-dark mb-3 hero_heading">Free AI Website Builder <br> Build a Beautiful Website</h1>
        <div>
          <p class="hero-sub mb-4">GoogieHost is the only platform where you can create a website free in under 60 seconds using AI and keep it live forever without paying a cent. Describe your business in plain English, and our AI instantly generates a complete, professional website with copy, images, and SEO baked in. no credit card required, and no expiry date ever.</p>
        </div>


        <!-- CTA Buttons -->
        <div class="d-flex flex-wrap gap-3 mb-3 mt-4">
          <a href="#hostingplans" class="btn-trial hero_btn position-relative">
           Start Building Free Website <i class="fa-solid fa-arrow-right ms-3"></i>
          </a>
        </div>

      </div>
      <!-- Right: Hero Image with floating badges -->
      <div class="col-lg-6">
        <div class="hero-img-wrap">
          <img src="assets/images/free-ai-website-builder-build-a-beautiful-website.webp" alt="Free AI Website Builder" class="hero-main-img w-100 h-auto" width="1000" height="849"/>

        </div>
      </div>

    </div>
  </div>
</section>

<?php include 'inc/stats-band.php'; ?>

<section class="free-plan-section pb-80 position-relative pt-80">
  <div class="container">
    <div class="free-plan-intro position-relative text-center">
      <div class="">
        <h2 class="free-plan-title display-6 fw-bold section_heading mb-2">Start free. Upgrade when you're ready</h2>
        <p class="section_para mx-auto mb-5" id="hostingplans">Launch your website today with GoogieHost's free AI website builder no credit card, no expiry, no compromise. Get NVMe storage, free SSL, a built-in AI designer, and 1-click WordPress tools everything you need to go from idea to live website in under 60 seconds.</p>

      </div>
    </div>

    <?php include 'inc/plan.php'; ?>

  </div>
</section>


<?php
// Define data (DO NOT use return here)
$features = [
    'section' => [
        'title' => "Everything included in free AI website builder",
        'description' => 'The GoogieHost free AI website builder is not a stripped-down trial. It is a full-featured platform and every feature listed below is included at zero cost.',
    ],

    'items' => [
         [
            'icon' => 'assets/images/icon/ai-content-generator.svg',
            'title' => 'AI Content Generator',
            'description' => 'Our AI writes every word of your website headlines, body paragraphs, calls to action, and even image alt text. The copy is written with conversion psychology in mind: it addresses your pain points, communicates your value clearly, and drives visitors toward the action you want them to take.',
        ],
        [
            'icon' => 'assets/images/icon/smart-design-engine.svg',
            'title' => 'Smart Design Engine',
            'description' => 'The AI selects typography, color palettes, spacing, and visual hierarchy based on your industry and brand identity. The result looks like the work of a professional agency because it is built on the same design principles used by top studios, just automated.',
        ],
        [
            'icon' => 'assets/images/icon/built-in-seo-optimization.svg',
            'title' => 'Built-in SEO Optimization',
            'description' => 'Every page generated by our AI includes: optimized title tags and meta descriptions, H1–H6 heading hierarchy, clean semantic HTML, image compression, structured data markup, and canonical URL configuration. You rank faster because the technical foundation is already solid.',
        ],
        [
            'icon' => 'assets/images/icon/ai-powered-templates.svg',
            'title' => '500+ AI-Powered Templates',
            'description' => 'Choose from 500+ professionally designed templates across Business, Portfolio, Blog, eCommerce, Restaurant, and more. Every template is a starting point the AI fills it with your content and then our editor lets you customize anything visually.',
        ],
        [
            'icon' => 'assets/images/icon/mobile-first-responsive-design.svg',
            'title' => 'Mobile-First Responsive Design',
            'description' => 'All templates render perfectly on all screen sizes. The AI tests layouts on mobile, tablet, and desktop breakpoints automatically. You never have to manually adjust spacing for different devices.',
        ],
        [
            'icon' => 'assets/images/icon/free-ssl-always-on.svg',
            'title' => 'Free SSL Certificate',
            'description' => 'Every GoogieHost website ships with a Lets Encrypt SSL certificate that auto-renews every 90 days. HTTPS is enabled by default. Your visitors see the padlock. Google counts it as a ranking signal.',
        ],
    ],
];

?>

<section class="feature-light-section  pt-80 pb-80">
    <div class="container text-center">

        <div class="feature-light-head mb-5">
            <h2 class="display-6 section_heading fw-bold text-dark">
                <?= htmlspecialchars($features['section']['title']) ?>
            </h2>
            <p class="section_para mx-auto">
                <?= htmlspecialchars($features['section']['description']) ?>
            </p>
        </div>

        <div class="row g-4 text-start justify-content-center">
            <?php foreach ($features['items'] as $item): ?>
                <div class="col-md-6 col-lg-4">
                    <div class="feature-light-card h-100">

                        <img
                            src="<?= htmlspecialchars($item['icon']) ?>"
                            class="w-25 mb-3"
                            alt="<?= htmlspecialchars($item['title']) ?>">

                        <h3 class="feature-title-light">
                            <?= htmlspecialchars($item['title']) ?>
                        </h3>

                        <p class="feature-text-light mb-0">
                            <?= htmlspecialchars($item['description']) ?>
                        </p>

                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section class="thesis pb-80 pt-80 position-relative">
  <div class="container">
    <div class="thesis-inner">
      <h2 class="display-6 fw-bold  section_heading text-center">
        From idea to <span>live website</span> in 3 steps
      </h2>
      <p class=" section_para text-start mb-5 text-center mx-auto ">Launch your live website faster than ever with our streamlined, simplified process. We guide you from an initial idea to a fully functional online presence. Explore the precise, step-by-step breakdown of our system and start building your success immediately.</p>
      <div class="thesis-pillars">
        <div class="pillar position-relative">
          <img src="assets/images/opportunity.png" alt="Tell AI Your Vision" class="mb-3" >
          <div class="feature-title-light ">Tell AI Your Vision</div>
          <div class="pillar-body">Enter your business name, select your industry from our categorized list, and describe what you do in 1–3 sentences. The more specific you are, the better the AI performs but even a five-word description produces a complete, professional result.</div>
          <div class="step-arrow"><i class="fa-solid fa-arrow-right"></i></div>
        </div>
        <div class="pillar position-relative">
           <img src="assets/images/front-end-programming.png" alt="AI Designs Your Site" class="mb-3" >
          <div class="feature-title-light ">AI Designs Your Site</div>
          <div class="pillar-body">Within seconds, our AI generates your full website: homepage layout, about page, services or portfolio section, contact form, and footer, all populated with original, on-brand copy. Watch every element appear in real time as the AI makes intelligent design decisions specific to your niche.</div>
          <div class="step-arrow"><i class="fa-solid fa-arrow-right"></i></div>
        </div>
        <div class="pillar">
           <img src="assets/images/growth.png" alt="Publish & Grow" class="mb-3" >
          <div class="feature-title-light ">Customize, Publish, and Go Live</div>
          <div class="pillar-body">Hit publish and your site goes live instantly on our global CDN with free hosting, SSL, and a custom domain. Then watch your traffic and revenue grow.</div>
          <div class="pillar-accent pa-blue" style="background:#f09500"></div>
        </div>
      </div>
    </div>
  </div>
</section>


<!-- ══════════════════════════════════════════
     TEMPLATES GALLERY
══════════════════════════════════════════ -->
<?php
$templates = [
    // ── First 6 power the default "All" view: one of each category for a balanced mix ──
    [
        'theme'  => 'dark',
        'name'   => 'Dark Pro Agency',
        'cats'   => 'Business · Agency',
        'filter' => 'business',
        'badge'  => 'POPULAR',
        'img'    => "assets/images/portfolio/business_temp2.webp"
    ],
    [
        'theme'  => 'minimal',
        'name'   => 'Studio Grid',
        'cats'   => 'Portfolio · Agency',
        'filter' => 'portfolio',
        'img'    => "assets/images/portfolio/portfolio_template2.webp"
    ],
    [
        'theme'  => 'ocean',
        'name'   => "Writer's Journal",
        'cats'   => 'Blog · Personal',
        'filter' => 'blog',
        'badge'  => 'NEW',
        'img'    => "assets/images/portfolio/blog_template2.webp"
    ],
    [
        'theme'  => 'charcoal',
        'name'   => 'Storefront Plus',
        'cats'   => 'eCommerce · Fashion',
        'filter' => 'ecommerce',
        'img'    => "assets/images/portfolio/e-commerce-template1.webp"
    ],
    [
        'theme'  => 'sunset',
        'name'   => 'Bistro Table',
        'cats'   => 'Restaurant · Cafe',
        'filter' => 'restaurant',
        'img'    => "assets/images/portfolio/restaurent_template1.webp"
    ],
    [
        'theme'  => 'ocean',
        'name'   => 'Corporate Edge',
        'cats'   => 'Business · Corporate',
        'filter' => 'business',
        'img'    => "assets/images/portfolio/business_temp1.webp"
    ],

    // ── Remaining templates (revealed when a category filter is selected) ──

    // Business
    [
        'theme'  => 'minimal',
        'name'   => 'Consulting Co.',
        'cats'   => 'Business · Consulting',
        'filter' => 'business',
        'img'    => "assets/images/portfolio/business_temp3.webp"
    ],
    [
        'theme'  => 'fresh',
        'name'   => 'Startup Launch',
        'cats'   => 'Business · Startup',
        'filter' => 'business',
        'badge'  => 'NEW',
        'img'    => "assets/images/portfolio/business_temp4.webp"
    ],
    [
        'theme'  => 'charcoal',
        'name'   => 'Enterprise Suite',
        'cats'   => 'Business · Finance',
        'filter' => 'business',
        'img'    => "assets/images/portfolio/business_temp5.webp"
    ],

    // Portfolio
    [
        'theme'  => 'dark',
        'name'   => 'Creative Folio',
        'cats'   => 'Portfolio · Creative',
        'filter' => 'portfolio',
        'badge'  => 'POPULAR',
        'img'    => "assets/images/portfolio/portfolio_template1.webp"
    ],
    [
        'theme'  => 'sunset',
        'name'   => 'Photo Folio',
        'cats'   => 'Portfolio · Photography',
        'filter' => 'portfolio',
        'img'    => "assets/images/portfolio/portfolio_template3.webp"
    ],

    // Blog
    [
        'theme'  => 'ocean',
        'name'   => 'Daily Read',
        'cats'   => 'Blog · Magazine',
        'filter' => 'blog',
        'img'    => "assets/images/portfolio/blog_template1.webp"
    ],
    [
        'theme'  => 'charcoal',
        'name'   => 'The Newsroom',
        'cats'   => 'Blog · News',
        'filter' => 'blog',
        'img'    => "assets/images/portfolio/blog_template3.webp"
    ],
    [
        'theme'  => 'minimal',
        'name'   => 'Lifestyle Diary',
        'cats'   => 'Blog · Lifestyle',
        'filter' => 'blog',
        'img'    => "assets/images/portfolio/blog_template4.webp"
    ],

    // eCommerce
    [
        'theme'  => 'dark',
        'name'   => 'Market Cart',
        'cats'   => 'eCommerce · Retail',
        'filter' => 'ecommerce',
        'img'    => "assets/images/portfolio/e-commerce-template2.webp"
    ],
    [
        'theme'  => 'fresh',
        'name'   => 'Shop Modern',
        'cats'   => 'eCommerce · Lifestyle',
        'filter' => 'ecommerce',
        'img'    => "assets/images/portfolio/e-commerce-template3.webp"
    ],

    // Restaurant
    [
        'theme'  => 'sunset',
        'name'   => 'Spice Kitchen',
        'cats'   => 'Restaurant · Food',
        'filter' => 'restaurant',
        'img'    => "assets/images/portfolio/restaurent_template2.webp"
    ],
];
?>
<section class="templates-section pt-80">
  <div class="container">

    <div class="templates-head  text-center gap-3 mb-5">
      <div class="templates-head-left">
        <h2 class="display-6 fw-bold text-dark section_heading">
          500+ AI-Powered <span class="templates-script">Templates</span>
        </h2>
        <p class="section_para mx-auto mt-3">
       Every template in the GoogieHost library is AI-optimized, mobile-first, and SEO-ready out of the box. The AI does not just fill these templates with placeholder content it rewrites every word, reselects every image, and reconfigures every layout element to match your specific business.
      </p>
      </div>
      <div class="templates-filters" role="tablist">
        <button type="button" class="tpl-filter active" data-filter="all">All</button>
        <button type="button" class="tpl-filter" data-filter="business">Business</button>
        <button type="button" class="tpl-filter" data-filter="portfolio">Portfolio</button>
        <button type="button" class="tpl-filter" data-filter="blog">Blog</button>
        <button type="button" class="tpl-filter" data-filter="ecommerce">eCommerce</button>
        <button type="button" class="tpl-filter" data-filter="restaurant">Restaurant</button>
      </div>
    </div>

    <div class="row g-4 templates-grid">
      <?php foreach ($templates as $t): ?>
        <div class="col-12 col-md-6 col-lg-4" data-filter="<?= htmlspecialchars($t['filter']) ?>">
          <article class="tpl-card h-100">
            <div class="tpl-preview tpl-preview--<?= htmlspecialchars($t['theme']) ?>">
              <img src="<?= htmlspecialchars($t['img']) ?>" alt="<?= htmlspecialchars($t['name']) ?>" class="w-100">
              </div>
              <a href="#hostingplans" class="tpl-preview-btn" aria-label="Preview <?= htmlspecialchars($t['name']) ?>">
                <i class="fa-solid fa-eye"></i> Preview
              </a>
            
            <div class="tpl-info d-flex justify-content-between">
              <div class="tpl-info-text">
                <h3 class="tpl-name"><?= htmlspecialchars($t['name']) ?></h3>
                <div class="tpl-cats"><?= htmlspecialchars($t['cats']) ?></div>
              </div>
              <?php if (!empty($t['badge'])): ?>
                <span class="tpl-badge tpl-badge--<?= strtolower($t['badge']) ?>"><?= htmlspecialchars($t['badge']) ?></span>
              <?php endif; ?>
            </div>
          </article>
        </div>
      <?php endforeach; ?>
    </div>

    <div class="text-center mt-5">
      <a href="#hostingplans" class="more_btn">
        Browse All 500+ Templates <i class="fa-solid fa-arrow-right ms-3"></i>
      </a>
    </div>

  </div>
</section>

<script>
  (function () {
    const LIMIT = 6; // how many to show in the "All" view
    const filters = document.querySelectorAll('.tpl-filter');
    const items = document.querySelectorAll('.templates-grid > [data-filter]');

    function apply(f) {
      let shown = 0;
      items.forEach(item => {
        const match = f === 'all' || item.dataset.filter.split(' ').includes(f);
        // In "All" view, cap to LIMIT. For a specific filter, show every match.
        const visible = match && (f !== 'all' || shown < LIMIT);
        if (visible) shown++;
        item.classList.toggle('is-hidden', !visible);
      });
    }

    filters.forEach(btn => {
      btn.addEventListener('click', () => {
        filters.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        apply(btn.dataset.filter);
      });
    });

    apply('all'); // initial state: show only the first 6
  })();
</script>


<?php include 'inc/testimonials.php'; ?>

<?php include 'inc/achievments.php'; ?>

<?php
$faqs = [
    [
        'cat' => 'billing',
        'question' => "Is the GoogieHost free AI website builder really free, or is there a catch?",
        'answer' => "There is no catch. The free plan is permanently free, no trial period, no hidden fees, no credit card needed at any stage. GoogieHost has operated a free hosting and website builder platform since 2012. We sustain it through optional paid plan upgrades, not by monetizing free users.",
    ],
    [
        'cat' => 'support',
        'question' => "Can I create a website free without any coding knowledge?",
        'answer' => "Yes, completely. The AI builds every element of your website: layout, copy, images, and SEO configuration. You interact with the platform entirely through point-and-click editing and plain-English prompts. No HTML, CSS, JavaScript, or design knowledge is needed at any point.",
    ],
    [
        'cat' => 'features',
        'question' => "Do I get a free domain with the free AI website builder?",
        'answer' => "Every free account includes a clean subdomain (yourbusiness.googiehost.com). If you want a custom .com domain, you can connect one you already own at no charge, or register a new one through our partner registrars. A free domain for life is included with the Pro Lifetime plan.",
    ],
    [
        'cat' => 'billing',
        'question' => "How is GoogieHost different from Wix, Weebly, or Squarespace?",
        'answer' => " Three key differences: First, GoogieHost shows zero platform ads on your site, Wix and Weebly display their own branding on free-tier websites. Second, our AI generates real, original copy for your business not placeholder text. Third, GoogieHost free hosting is genuinely permanent, not a limited trial. Wix, Squarespace, and Weebly free plans are designed to pressure you into upgrading quickly.",
    ],
    [
        'cat' => 'features',
        'question' => "What is included in the free AI website builder plan?",
        'answer' => "The free plan includes: full AI website generation, 1,000 MB NVMe SSD storage, 100 GB bandwidth, free SSL, 5 email accounts, 2 MySQL databases, PHP 8.3, 1-click WordPress installation, basic CDN, and basic DDoS protection all at $0 with no time limit.",
    ],
    [
        'cat' => 'technical',
        'question' => "Can I use the free AI website builder to create an online store?",
        'answer' => "Yes. The AI builder includes an eCommerce template category with full product listing, cart, and payment integration support. You can add Stripe, PayPal, and Razorpay to your free GoogieHost website and start selling immediately.",
    ],
     [
        'cat' => 'features',
        'question' => "How long does it take to build and publish a website with the AI builder?",
        'answer' => "Most users have a fully published website live within 3 minutes of signing up. The AI generation step takes approximately 60 seconds. Account creation takes under 60 seconds. The remaining time is optional customization.",
    ],
     [
        'cat' => 'technical',
        'question' => "Does GoogieHost's free AI website builder include SEO features?",
        'answer' => "Yes, SEO is configured automatically by the AI at the moment your site is generated. This includes meta title tags, meta description, Open Graph tags, structured data (Schema.org), semantic heading structure, image alt text, and an auto-generated XML sitemap. No SEO plugins or manual setup required.",
    ],
];

include 'inc/faq-component.php'; ?>

<?php include 'inc/footer.php'; ?>