155 lines
8.3 KiB
PHP
155 lines
8.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<!-- SEO & Meta Tags -->
|
|
<title>Create a URL Shortener SaaS</title>
|
|
<meta name="description" content="Generate beautiful bio profiles, share a single link and monitor traffic. Create custom QR codes and shorten URLs with advanced analytics.">
|
|
<meta name="keywords" content="url shortener, link in bio, qr code generator, saas, link management, custom domains, analytics, bio profiles, digital marketing, social media links">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="Create a URL Shortener SaaS">
|
|
<meta property="og:description" content="Generate beautiful bio profiles, share a single link and monitor traffic. Create custom QR codes and shorten URLs with advanced analytics.">
|
|
<meta property="og:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? 'https://picsum.photos/seed/og/1200/630'); ?>">
|
|
|
|
<!-- Twitter -->
|
|
<meta property="twitter:card" content="summary_large_image">
|
|
<meta property="twitter:title" content="Create a URL Shortener SaaS">
|
|
<meta property="twitter:description" content="Generate beautiful bio profiles, share a single link and monitor traffic. Create custom QR codes and shorten URLs with advanced analytics.">
|
|
<meta property="twitter:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? 'https://picsum.photos/seed/og/1200/630'); ?>">
|
|
|
|
<!-- Stylesheets -->
|
|
<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=<?php echo time(); ?>">
|
|
|
|
<style>
|
|
.hero {
|
|
background-image: url('https://picsum.photos/seed/hero/1600/900');
|
|
background-size: cover;
|
|
background-position: center;
|
|
color: white;
|
|
}
|
|
.hero-overlay {
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
padding: 6rem 0;
|
|
}
|
|
.hero h1, .hero p {
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="py-3 mb-4 border-bottom bg-white">
|
|
<div class="container d-flex flex-wrap justify-content-center">
|
|
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
|
|
<span class="fs-4 fw-bold">LinkHub</span>
|
|
</a>
|
|
<ul class="nav nav-pills">
|
|
<li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
|
|
<li class="nav-item"><a href="#" class="nav-link text-dark">Features</a></li>
|
|
<li class="nav-item"><a href="#" class="nav-link text-dark">Pricing</a></li>
|
|
<li class="nav-item"><a href="#" class="nav-link text-dark">Login</a></li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="hero text-center">
|
|
<div class="hero-overlay">
|
|
<div class="container">
|
|
<h1 class="display-4 fw-bold">One Link to Rule Them All</h1>
|
|
<p class="lead col-lg-8 mx-auto">Create short links, beautiful bio pages, and scannable QR codes. All in one platform designed to grow your brand.</p>
|
|
<div class="col-lg-8 mx-auto mt-5">
|
|
<form id="shortenForm" class="row g-2 align-items-center">
|
|
<div class="col">
|
|
<label for="urlInput" class="visually-hidden">URL to shorten</label>
|
|
<input type="url" class="form-control form-control-lg" id="urlInput" placeholder="Enter your long URL here..." required>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button type="submit" class="btn btn-primary btn-lg">Shorten</button>
|
|
</div>
|
|
</form>
|
|
<div id="result" class="mt-4 text-start">
|
|
<p class="mb-2"><strong>Your short link is ready!</strong></p>
|
|
<div class="d-flex justify-content-between align-items-center bg-light p-3 rounded">
|
|
<span id="short-url" class="text-primary fw-bold"></span>
|
|
<button id="copyBtn" class="btn btn-sm btn-secondary">Copy</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="features text-center">
|
|
<div class="container">
|
|
<h2 class="mb-5">A Powerful Suite of Tools</h2>
|
|
<div class="row">
|
|
<div class="col-md-4 mb-4">
|
|
<div class="feature-card">
|
|
<img src="https://picsum.photos/seed/bio/400/300" class="img-fluid mb-3" alt="Illustration of a mobile phone displaying a personal bio link profile.">
|
|
<h3 class="h4">Bio Link Pages</h3>
|
|
<p>Create a stunning "link in bio" page that directs your audience to all your important content with a single URL.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-4">
|
|
<div class="feature-card">
|
|
<img src="https://picsum.photos/seed/qr/400/300" class="img-fluid mb-3" alt="Stylized QR code with a logo in the center.">
|
|
<h3 class="h4">Custom QR Codes</h3>
|
|
<p>Generate unique QR codes with custom colors, shapes, and your own logo to bridge the physical and digital worlds.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-4">
|
|
<div class="feature-card">
|
|
<img src="https://picsum.photos/seed/stats/400/300" class="img-fluid mb-3" alt="Dashboard showing charts and graphs for analytics.">
|
|
<h3 class="h4">Trackable Analytics</h3>
|
|
<p>Monitor clicks, scans, and traffic with a powerful analytics dashboard to understand your audience better.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="container py-5">
|
|
<div class="row">
|
|
<div class="col-12 col-md">
|
|
<span class="fs-5 fw-bold">LinkHub</span>
|
|
<small class="d-block mb-3 text-muted">© 2025</small>
|
|
</div>
|
|
<div class="col-6 col-md">
|
|
<h5>Features</h5>
|
|
<ul class="list-unstyled text-small">
|
|
<li><a class="link-secondary text-decoration-none" href="#">Link Shortening</a></li>
|
|
<li><a class="link-secondary text-decoration-none" href="#">Bio Pages</a></li>
|
|
<li><a class="link-secondary text-decoration-none" href="#">QR Codes</a></li>
|
|
<li><a class="link-secondary text-decoration-none" href="#">Analytics</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-6 col-md">
|
|
<h5>Resources</h5>
|
|
<ul class="list-unstyled text-small">
|
|
<li><a class="link-secondary text-decoration-none" href="#">Blog</a></li>
|
|
<li><a class="link-secondary text-decoration-none" href="#">Help Center</a></li>
|
|
<li><a class="link-secondary text-decoration-none" href="#">Privacy Policy</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-6 col-md">
|
|
<h5>About</h5>
|
|
<ul class="list-unstyled text-small">
|
|
<li><a class="link-secondary text-decoration-none" href="#">Team</a></li>
|
|
<li><a class="link-secondary text-decoration-none" href="#">Contact Us</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Scripts -->
|
|
<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=<?php echo time(); ?>"></script>
|
|
</body>
|
|
</html> |