158 lines
8.2 KiB
PHP
158 lines
8.2 KiB
PHP
<?php
|
||
require_once __DIR__ . '/includes/app.php';
|
||
|
||
$sent = isset($_GET['sent']) && $_GET['sent'] === '1';
|
||
$error = isset($_GET['error']) ? (string)$_GET['error'] : '';
|
||
$leadTotal = 0;
|
||
try {
|
||
$leadTotal = lead_count();
|
||
} catch (Throwable $exception) {
|
||
error_log('Lead count unavailable: ' . $exception->getMessage());
|
||
}
|
||
|
||
page_head(project_name() . ' — Landing Page & Lead Capture', project_description());
|
||
page_nav('home');
|
||
?>
|
||
<main>
|
||
<section class="hero-section" id="top">
|
||
<div class="container">
|
||
<?php if ($sent): ?>
|
||
<div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
|
||
<strong>Request received.</strong> Thanks — your details were saved and the team can follow up shortly.
|
||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||
</div>
|
||
<?php elseif ($error): ?>
|
||
<div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
|
||
<strong>Please review the form.</strong> <?= e($error) ?>
|
||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<div class="row align-items-center g-4 g-lg-5">
|
||
<div class="col-lg-6">
|
||
<p class="eyebrow mb-3">Professional landing page hosting</p>
|
||
<h1>Publish your offer and capture qualified leads in one focused page.</h1>
|
||
<p class="lead-copy">A restrained, conversion-ready landing shell with a secure contact workflow, confirmation page, and lead review area — ready to replace with your uploaded HTML whenever you provide it.</p>
|
||
<div class="hero-actions d-flex flex-column flex-sm-row gap-2 mt-4">
|
||
<a class="btn btn-dark btn-lg" href="#lead-form">Request a quote</a>
|
||
<a class="btn btn-outline-dark btn-lg" href="leads.php">Review leads</a>
|
||
</div>
|
||
<dl class="metric-row mt-4" aria-label="Landing page metrics">
|
||
<div><dt><?= e((string)$leadTotal) ?></dt><dd>stored leads</dd></div>
|
||
<div><dt>24h</dt><dd>fast response target</dd></div>
|
||
<div><dt>PDO</dt><dd>secure storage</dd></div>
|
||
</dl>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<aside class="panel hero-panel" aria-label="Lead capture preview">
|
||
<div class="panel-header">
|
||
<span class="status-dot" aria-hidden="true"></span>
|
||
<span>Lead workflow active</span>
|
||
</div>
|
||
<div class="preview-card">
|
||
<div class="preview-line w-75"></div>
|
||
<div class="preview-line w-50"></div>
|
||
<div class="preview-grid">
|
||
<span></span><span></span><span></span><span></span>
|
||
</div>
|
||
</div>
|
||
<ul class="check-list mb-0">
|
||
<li>Server-side validation</li>
|
||
<li>Spam honeypot protection</li>
|
||
<li>Database-backed lead list and detail view</li>
|
||
<li>Email notification attempted via configured mail service</li>
|
||
</ul>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="offer">
|
||
<div class="container">
|
||
<div class="section-heading">
|
||
<p class="eyebrow">What is included</p>
|
||
<h2>A complete first slice, not just a placeholder.</h2>
|
||
</div>
|
||
<div class="row g-3">
|
||
<div class="col-md-4"><article class="feature-card"><h3>Landing message</h3><p>Clear positioning, compact proof points, and focused calls-to-action for visitors.</p></article></div>
|
||
<div class="col-md-4"><article class="feature-card"><h3>Lead form</h3><p>Name, email, company, budget, and message with accessible validation and smooth feedback.</p></article></div>
|
||
<div class="col-md-4"><article class="feature-card"><h3>Lead review</h3><p>Submissions are saved to MariaDB and available in a concise list and detail page.</p></article></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section muted-section" id="process">
|
||
<div class="container">
|
||
<div class="row g-4 align-items-start">
|
||
<div class="col-lg-5">
|
||
<p class="eyebrow">Visitor journey</p>
|
||
<h2>From interest to follow-up in under a minute.</h2>
|
||
</div>
|
||
<div class="col-lg-7">
|
||
<ol class="timeline-list">
|
||
<li><span>01</span><div><strong>Understand the offer</strong><p>Visitors get a concise promise and proof points immediately.</p></div></li>
|
||
<li><span>02</span><div><strong>Submit details</strong><p>The form validates required fields and blocks common bot noise.</p></div></li>
|
||
<li><span>03</span><div><strong>Confirm and review</strong><p>The lead is stored, a notification is attempted, and the lead detail is available.</p></div></li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="lead-form">
|
||
<div class="container">
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-9 col-xl-8">
|
||
<div class="form-shell">
|
||
<div class="section-heading text-center mb-4">
|
||
<p class="eyebrow">Contact / lead form</p>
|
||
<h2>Tell us what you want to launch.</h2>
|
||
<p>Submissions are saved securely. Email delivery depends on your configured SMTP or MAIL_TO environment settings.</p>
|
||
</div>
|
||
<form class="needs-validation" action="contact.php" method="post" novalidate data-lead-form>
|
||
<input type="text" name="website" class="hp-field" tabindex="-1" autocomplete="off" aria-hidden="true">
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label for="name" class="form-label">Name</label>
|
||
<input id="name" name="name" type="text" class="form-control" maxlength="120" required autocomplete="name">
|
||
<div class="invalid-feedback">Please enter your name.</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="email" class="form-label">Email</label>
|
||
<input id="email" name="email" type="email" class="form-control" maxlength="190" required autocomplete="email">
|
||
<div class="invalid-feedback">Please enter a valid email.</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="company" class="form-label">Company <span class="text-muted">optional</span></label>
|
||
<input id="company" name="company" type="text" class="form-control" maxlength="160" autocomplete="organization">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="budget" class="form-label">Budget range <span class="text-muted">optional</span></label>
|
||
<select id="budget" name="budget" class="form-select">
|
||
<option value="">Not sure yet</option>
|
||
<option value="Under $1,000">Under $1,000</option>
|
||
<option value="$1,000–$5,000">$1,000–$5,000</option>
|
||
<option value="$5,000–$10,000">$5,000–$10,000</option>
|
||
<option value="$10,000+">$10,000+</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-12">
|
||
<label for="message" class="form-label">What do you need?</label>
|
||
<textarea id="message" name="message" class="form-control" rows="5" maxlength="2000" required placeholder="Share the landing page goal, offer, audience, or timeline."></textarea>
|
||
<div class="d-flex justify-content-between mt-1"><div class="invalid-feedback d-block">Please enter at least 10 characters.</div><small class="text-muted"><span data-char-count>0</span>/2000</small></div>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex flex-column flex-sm-row align-items-sm-center gap-3 mt-4">
|
||
<button class="btn btn-dark btn-lg" type="submit">Send request</button>
|
||
<p class="small text-muted mb-0">Testing notice: Flatlogic does not guarantee mail server usage. Configure your own SMTP in environment MAIL_/SMTP_ variables before production.</p>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<?php page_footer(); ?>
|