316 lines
18 KiB
PHP
316 lines
18 KiB
PHP
<?php
|
||
declare(strict_types=1);
|
||
session_start();
|
||
@date_default_timezone_set('UTC');
|
||
|
||
if (empty($_SESSION['lead_csrf'])) {
|
||
$_SESSION['lead_csrf'] = bin2hex(random_bytes(32));
|
||
}
|
||
|
||
$projectName = $_SERVER['PROJECT_NAME'] ?? 'Northline Studio';
|
||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'A clean, conversion-focused agency website for strategy, design, and growth teams.';
|
||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||
$errors = $_SESSION['lead_errors'] ?? [];
|
||
$old = $_SESSION['lead_old'] ?? [];
|
||
$flash = $_SESSION['lead_flash'] ?? null;
|
||
$brandInitial = strtoupper(substr(trim((string)$projectName), 0, 1) ?: 'N');
|
||
unset($_SESSION['lead_errors'], $_SESSION['lead_old'], $_SESSION['lead_flash']);
|
||
|
||
function h(?string $value): string { return htmlspecialchars((string)$value, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8'); }
|
||
function old_value(array $old, string $key): string { return h((string)($old[$key] ?? '')); }
|
||
|
||
$heroPhoto = [
|
||
'src' => 'assets/images/landing/hero-agency-workspace.jpg',
|
||
'alt' => 'Finance agency team reviewing charts and laptops in a bright office workspace',
|
||
'credit' => 'www.kaboompics.com',
|
||
'url' => 'https://www.pexels.com/@karola-g',
|
||
];
|
||
|
||
$services = [
|
||
['01', 'Positioning & offer', 'Clarify your audience, promise, service packages, and proof so visitors understand why you are the safe choice.', 'assets/images/landing/service-positioning-workshop.jpg', 'Business team organizing strategy notes during a positioning workshop', 'Jakub Zerdzicki', 'https://www.pexels.com/@jakubzerdzicki'],
|
||
['02', 'Lead-gen websites', 'Fast, accessible landing pages with SEO foundations, strong CTAs, and high-intent quote forms.', 'assets/images/landing/service-leadgen-website.jpg', 'Laptop workspace used for web design and lead generation planning', 'Negative Space', 'https://www.pexels.com/@negativespace'],
|
||
['03', 'Campaign systems', 'Paid search, nurture copy, CRM handoff, and analytics dashboards that keep sales teams focused.', 'assets/images/landing/service-campaign-dashboard.jpg', 'Marketing analytics dashboard open on a laptop for campaign reporting', 'Lukas Blazek', 'https://www.pexels.com/@goumbik'],
|
||
];
|
||
|
||
$caseStudies = [
|
||
['+68%', 'SaaS demo requests', 'Rebuilt the offer hierarchy and quote path for a workflow automation platform.', 'assets/images/landing/case-fintech-dashboard.jpg', 'Fintech analytics dashboard reviewed on a laptop for growth reporting', 'Jakub Zerdzicki', 'https://www.pexels.com/@jakubzerdzicki'],
|
||
['3.1x', 'Qualified pipeline', 'Launched a focused paid search landing system for a cybersecurity consultancy.', 'assets/images/landing/case-consulting-meeting.jpg', 'Consulting team meeting with notebooks and laptops around a table', 'Vitaly Gariev', 'https://www.pexels.com/@silverkblack'],
|
||
['-37%', 'Cost per lead', 'Refined service pages, proof blocks, and form routing for a regional agency.', 'assets/images/landing/case-agency-team.jpg', 'Agency team collaborating during a planning meeting in a modern office', 'Ivan S', 'https://www.pexels.com/@ivan-s'],
|
||
];
|
||
?>
|
||
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title><?= h($projectName) ?> | Agency Strategy, Design & Growth</title>
|
||
<?php if ($projectDescription): ?>
|
||
<!-- Meta description -->
|
||
<meta name="description" content="<?= h($projectDescription) ?>">
|
||
<!-- Open Graph meta tags -->
|
||
<meta property="og:description" content="<?= h($projectDescription) ?>">
|
||
<!-- Twitter meta tags -->
|
||
<meta property="twitter:description" content="<?= h($projectDescription) ?>">
|
||
<?php endif; ?>
|
||
<?php if ($projectImageUrl): ?>
|
||
<!-- Open Graph image -->
|
||
<meta property="og:image" content="<?= h($projectImageUrl) ?>">
|
||
<!-- Twitter image -->
|
||
<meta property="twitter:image" content="<?= h($projectImageUrl) ?>">
|
||
<?php endif; ?>
|
||
<meta name="author" content="<?= h($projectName) ?>">
|
||
<meta property="og:title" content="<?= h($projectName) ?> | Agency Strategy, Design & Growth">
|
||
<meta property="og:type" content="website">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="assets/css/custom.css?v=2026052903">
|
||
</head>
|
||
<body>
|
||
<a class="skip-link" href="#main">Skip to content</a>
|
||
<header class="site-header sticky-top">
|
||
<nav class="navbar navbar-expand-lg" aria-label="Primary navigation">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="/" aria-label="<?= h($projectName) ?> home">
|
||
<span class="brand-mark" aria-hidden="true"><?= h($brandInitial) ?></span>
|
||
<span><?= h($projectName) ?></span>
|
||
</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="mainNav">
|
||
<ul class="navbar-nav ms-auto align-items-lg-center gap-lg-1">
|
||
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="#case-studies">Case studies</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="#testimonials">Testimonials</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="admin.php">Admin</a></li>
|
||
<li class="nav-item"><a class="btn btn-dark btn-sm ms-lg-2" href="#quote">Request quote</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<main id="main">
|
||
<?php if ($flash): ?>
|
||
<div class="container pt-3">
|
||
<div class="alert alert-<?= h($flash['type'] ?? 'info') ?> alert-dismissible fade show" role="alert">
|
||
<?= h($flash['message'] ?? '') ?>
|
||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<section class="hero section-pad">
|
||
<div class="container">
|
||
<div class="row align-items-center g-4 g-xl-5">
|
||
<div class="col-lg-6">
|
||
<p class="eyebrow"><span class="emoji" aria-hidden="true">✦</span> Strategy-led digital agency</p>
|
||
<h1>Turn your offer into a clean lead engine.</h1>
|
||
<p class="hero-copy">We design fast, editorial landing pages and quote flows that help service teams explain value, earn trust, and convert better-fit prospects.</p>
|
||
<div class="d-flex flex-column flex-sm-row gap-2 mt-4">
|
||
<a href="#quote" class="btn btn-dark btn-lg">Get a quote</a>
|
||
<a href="#case-studies" class="btn btn-outline-dark btn-lg">View results</a>
|
||
</div>
|
||
<dl class="proof-grid mt-4" aria-label="Agency performance highlights">
|
||
<div><dt>42%</dt><dd>avg. lead quality lift</dd></div>
|
||
<div><dt>21d</dt><dd>typical launch sprint</dd></div>
|
||
<div><dt>96</dt><dd>client NPS</dd></div>
|
||
</dl>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<figure class="hero-visual" aria-label="Lead generation workspace preview">
|
||
<img src="<?= h($heroPhoto['src']) ?>" width="1880" height="1253" alt="<?= h($heroPhoto['alt']) ?>" fetchpriority="high">
|
||
<p class="photo-credit hero-credit">Photo: <a href="<?= h($heroPhoto['url']) ?>" target="_blank" rel="noopener"><?= h($heroPhoto['credit']) ?></a></p>
|
||
<figcaption class="sticky-note">
|
||
<span class="note-pin" aria-hidden="true"></span>
|
||
Free 48-hour funnel snapshot included with every quote request.
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="logo-strip" aria-label="Partner logos">
|
||
<div class="container">
|
||
<p class="small-label">Trusted by growing teams and platform partners</p>
|
||
<div class="logos">
|
||
<span>Vectorly</span><span>SummitOps</span><span>Bright CRM</span><span>Northstar</span><span>Ledgerly</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section-pad" id="services">
|
||
<div class="container">
|
||
<div class="section-heading">
|
||
<p class="eyebrow"><span class="emoji" aria-hidden="true">▣</span> Services</p>
|
||
<h2>Clean execution across the lead journey.</h2>
|
||
<p>Pick one sprint or combine services into a complete conversion program.</p>
|
||
</div>
|
||
<div class="row g-3">
|
||
<?php foreach ($services as $service): ?>
|
||
<div class="col-md-4">
|
||
<article class="service-card h-100">
|
||
<img class="card-illustration" src="<?= h($service[3]) ?>" width="940" height="627" alt="<?= h($service[4]) ?>" loading="lazy">
|
||
<p class="photo-credit">Photo: <a href="<?= h($service[6]) ?>" target="_blank" rel="noopener"><?= h($service[5]) ?></a></p>
|
||
<span><?= h($service[0]) ?></span>
|
||
<h3><?= h($service[1]) ?></h3>
|
||
<p><?= h($service[2]) ?></p>
|
||
</article>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section-pad muted-section" id="case-studies">
|
||
<div class="container">
|
||
<div class="section-heading">
|
||
<p class="eyebrow"><span class="emoji" aria-hidden="true">↗</span> Case studies</p>
|
||
<h2>Recent work with practical outcomes.</h2>
|
||
<p>Short, focused builds with measurable pipeline impact.</p>
|
||
</div>
|
||
<div class="row g-3">
|
||
<?php foreach ($caseStudies as $case): ?>
|
||
<div class="col-lg-4">
|
||
<article class="case-card h-100">
|
||
<img class="case-image" src="<?= h($case[3]) ?>" width="940" height="627" alt="<?= h($case[4]) ?>" loading="lazy">
|
||
<p class="photo-credit">Photo: <a href="<?= h($case[6]) ?>" target="_blank" rel="noopener"><?= h($case[5]) ?></a></p>
|
||
<p class="metric"><?= h($case[0]) ?></p>
|
||
<h3><?= h($case[1]) ?></h3>
|
||
<p><?= h($case[2]) ?></p>
|
||
</article>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section-pad" id="testimonials">
|
||
<div class="container">
|
||
<div class="row g-3 align-items-stretch">
|
||
<div class="col-lg-5">
|
||
<div class="section-heading compact">
|
||
<p class="eyebrow"><span class="emoji" aria-hidden="true">❝</span> Testimonials</p>
|
||
<h2>Trusted when clarity and speed matter.</h2>
|
||
<p>Senior teams choose us when they need a lean partner that can ship and measure quickly.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-7">
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<blockquote class="quote-card">
|
||
<div class="quote-avatar" aria-hidden="true">MR</div>
|
||
“They turned a vague service story into a page our sales team actually uses.”
|
||
<footer>— Maya R., VP Marketing</footer>
|
||
</blockquote>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<blockquote class="quote-card">
|
||
<div class="quote-avatar" aria-hidden="true">DK</div>
|
||
“The lead quality improved because the site finally explained who we were for.”
|
||
<footer>— Daniel K., Founder</footer>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section-pad quote-section" id="quote">
|
||
<div class="container">
|
||
<div class="row g-4 g-xl-5">
|
||
<div class="col-lg-5">
|
||
<p class="eyebrow"><span class="emoji" aria-hidden="true">✉</span> Request a quote</p>
|
||
<h2>Tell us what you want to improve.</h2>
|
||
<p class="section-copy">Your submission is saved to the admin dashboard for follow-up. If MAIL_TO is configured, the site also attempts an email notification.</p>
|
||
<div class="notice-box" role="note">Testing notice: configure your own SMTP and MAIL_TO values for reliable production email delivery.</div>
|
||
</div>
|
||
<div class="col-lg-7">
|
||
<form action="quote.php" method="post" class="lead-form needs-validation" novalidate>
|
||
<input type="hidden" name="csrf" value="<?= h($_SESSION['lead_csrf']) ?>">
|
||
<input type="hidden" name="source" value="homepage_quote_form">
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label class="form-label" for="name">Name *</label>
|
||
<input class="form-control <?= isset($errors['name']) ? 'is-invalid' : '' ?>" id="name" name="name" value="<?= old_value($old, 'name') ?>" autocomplete="name" required>
|
||
<div class="invalid-feedback"><?= h($errors['name'] ?? 'Please enter your name.') ?></div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label" for="email">Work email *</label>
|
||
<input type="email" class="form-control <?= isset($errors['email']) ? 'is-invalid' : '' ?>" id="email" name="email" value="<?= old_value($old, 'email') ?>" autocomplete="email" required>
|
||
<div class="invalid-feedback"><?= h($errors['email'] ?? 'Please enter a valid email.') ?></div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label" for="company">Company</label>
|
||
<input class="form-control" id="company" name="company" value="<?= old_value($old, 'company') ?>" autocomplete="organization">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label" for="phone">Phone</label>
|
||
<input class="form-control" id="phone" name="phone" value="<?= old_value($old, 'phone') ?>" autocomplete="tel">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label" for="service">Service *</label>
|
||
<select class="form-select <?= isset($errors['service']) ? 'is-invalid' : '' ?>" id="service" name="service" required>
|
||
<option value="">Choose one</option>
|
||
<?php foreach (['Positioning & offer', 'Lead-gen website', 'Campaign system', 'Full growth sprint'] as $option): ?>
|
||
<option value="<?= h($option) ?>" <?= (($old['service'] ?? '') === $option) ? 'selected' : '' ?>><?= h($option) ?></option>
|
||
<?php endforeach; ?>
|
||
</select>
|
||
<div class="invalid-feedback"><?= h($errors['service'] ?? 'Please choose a service.') ?></div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<label class="form-label" for="budget">Budget</label>
|
||
<select class="form-select" id="budget" name="budget">
|
||
<option value="">Not sure</option>
|
||
<?php foreach (['Under $5k', '$5k–$15k', '$15k–$30k', '$30k+'] as $option): ?>
|
||
<option value="<?= h($option) ?>" <?= (($old['budget'] ?? '') === $option) ? 'selected' : '' ?>><?= h($option) ?></option>
|
||
<?php endforeach; ?>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<label class="form-label" for="timeline">Timeline</label>
|
||
<select class="form-select" id="timeline" name="timeline">
|
||
<option value="">Flexible</option>
|
||
<?php foreach (['ASAP', 'This month', 'This quarter', 'Planning ahead'] as $option): ?>
|
||
<option value="<?= h($option) ?>" <?= (($old['timeline'] ?? '') === $option) ? 'selected' : '' ?>><?= h($option) ?></option>
|
||
<?php endforeach; ?>
|
||
</select>
|
||
</div>
|
||
<div class="col-12">
|
||
<label class="form-label" for="message">Project notes *</label>
|
||
<textarea class="form-control <?= isset($errors['message']) ? 'is-invalid' : '' ?>" id="message" name="message" rows="5" minlength="20" required placeholder="What are you trying to improve? What should happen after launch?"><?= old_value($old, 'message') ?></textarea>
|
||
<div class="invalid-feedback"><?= h($errors['message'] ?? 'Please share at least 20 characters.') ?></div>
|
||
</div>
|
||
<div class="col-12 d-flex flex-column flex-sm-row align-items-sm-center gap-3">
|
||
<button class="btn btn-dark btn-lg" type="submit">Submit quote request</button>
|
||
<p class="form-note mb-0">No spam. We reply with next steps, not a newsletter.</p>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="site-footer">
|
||
<div class="container d-flex flex-column flex-md-row justify-content-between gap-2">
|
||
<p class="mb-0">© <?= date('Y') ?> <?= h($projectName) ?>. Built for clear conversion.</p>
|
||
<p class="mb-0"><a href="admin.php">Admin dashboard</a> · <a href="#quote">Request quote</a></p>
|
||
</div>
|
||
</footer>
|
||
|
||
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
||
<div id="siteToast" class="toast" role="status" aria-live="polite" aria-atomic="true">
|
||
<div class="toast-header"><strong class="me-auto">Notice</strong><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div>
|
||
<div class="toast-body">Ready.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script src="assets/js/main.js?v=2026052901" defer></script>
|
||
</body>
|
||
</html>
|