154 lines
8.0 KiB
HTML
154 lines
8.0 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block content %}
|
|
<!-- Hero Section -->
|
|
<section class="hero-section">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-7">
|
|
<h1 class="display-3 mb-4">Websites Built for <span class="accent-text">Business Growth</span></h1>
|
|
<p class="lead text-secondary mb-5 fs-4">We create modern, clean, and professional websites that help business owners build trust and attract more clients.</p>
|
|
<div class="d-flex gap-3">
|
|
<a href="#contact" class="btn btn-accent px-5">Get Started</a>
|
|
<a href="#services" class="btn btn-outline-accent px-5">Our Services</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-5 d-none d-lg-block">
|
|
<!-- Placeholder for a clean graphic/3D shape -->
|
|
<div style="width: 100%; height: 400px; background: rgba(198, 167, 78, 0.1); border-radius: 24px; border: 1px dashed var(--fb-accent); display: flex; align-items: center; justify-content: center; transform: rotate(3deg);">
|
|
<div style="width: 200px; height: 200px; background: var(--fb-accent); border-radius: 50%; filter: blur(80px); opacity: 0.3;"></div>
|
|
<span class="accent-text h3" style="transform: rotate(-3deg);">Professional. Clean. Confident.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Section -->
|
|
<section id="services" class="section-padding bg-section">
|
|
<div class="container">
|
|
<div class="text-center mb-5">
|
|
<h2 class="h1 mb-3">Our Services</h2>
|
|
<div style="width: 80px; height: 4px; background: var(--fb-accent); margin: 0 auto;"></div>
|
|
</div>
|
|
<div class="row g-4">
|
|
<div class="col-md-4">
|
|
<div class="card h-100 p-4">
|
|
<div class="mb-4 text-accent"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="var(--fb-accent)" viewBox="0 0 16 16"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/></svg></div>
|
|
<h3 class="h4">Custom Web Design</h3>
|
|
<p class="text-secondary">Tailor-made websites designed to reflect your brand's unique identity and professional values.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card h-100 p-4">
|
|
<div class="mb-4 text-accent"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="var(--fb-accent)" viewBox="0 0 16 16"><path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/><path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg></div>
|
|
<h3 class="h4">Mobile Optimization</h3>
|
|
<p class="text-secondary">Ensuring your business looks great on every device—from desktops to smartphones.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card h-100 p-4">
|
|
<div class="mb-4 text-accent"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="var(--fb-accent)" viewBox="0 0 16 16"><path d="M3 14.5A1.5 1.5 0 0 1 1.5 13V3A1.5 1.5 0 0 1 3 1.5h8a.5.5 0 0 1 0 1H3a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5V8a.5.5 0 0 1 1 0v5a1.5 1.5 0 0 1-1.5 1.5H3z"/><path d="m10.5 5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V6.707L7.854 11.854a.5.5 0 1 1-.708-.708L12.293 6H10.5a.5.5 0 0 1 0-1z"/></svg></div>
|
|
<h3 class="h4">Performance & Speed</h3>
|
|
<p class="text-secondary">Fast-loading pages designed to keep your visitors engaged and improve search rankings.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works Section -->
|
|
<section id="how-it-works" class="section-padding">
|
|
<div class="container">
|
|
<div class="text-center mb-5">
|
|
<h2 class="h1 mb-3">How It Works</h2>
|
|
<div style="width: 80px; height: 4px; background: var(--fb-accent); margin: 0 auto;"></div>
|
|
</div>
|
|
<div class="row g-5">
|
|
<div class="col-md-4 text-center">
|
|
<div class="h2 accent-text mb-3">01</div>
|
|
<h3 class="h5">Consultation</h3>
|
|
<p class="text-secondary">We discuss your business goals and target audience to understand your needs.</p>
|
|
</div>
|
|
<div class="col-md-4 text-center">
|
|
<div class="h2 accent-text mb-3">02</div>
|
|
<h3 class="h5">Design & Build</h3>
|
|
<p class="text-secondary">Our team crafts a professional website tailored to your business requirements.</p>
|
|
</div>
|
|
<div class="col-md-4 text-center">
|
|
<div class="h2 accent-text mb-3">03</div>
|
|
<h3 class="h5">Launch</h3>
|
|
<p class="text-secondary">Your new professional website goes live, ready to serve your customers.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Portfolio Section -->
|
|
<section id="portfolio" class="section-padding bg-section">
|
|
<div class="container">
|
|
<div class="text-center mb-5">
|
|
<h2 class="h1 mb-3">Featured Work</h2>
|
|
<div style="width: 80px; height: 4px; background: var(--fb-accent); margin: 0 auto;"></div>
|
|
</div>
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<div class="card h-100">
|
|
<div style="height: 300px; background: #122a24; display: flex; align-items: center; justify-content: center;">
|
|
<span class="text-secondary">Law Firm Website</span>
|
|
</div>
|
|
<div class="p-4">
|
|
<h3 class="h5">Apex Legal Partners</h3>
|
|
<p class="text-secondary small">Clean, corporate, and trustworthy design.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100">
|
|
<div style="height: 300px; background: #122a24; display: flex; align-items: center; justify-content: center;">
|
|
<span class="text-secondary">Medical Clinic Website</span>
|
|
</div>
|
|
<div class="p-4">
|
|
<h3 class="h5">Green Valley Health</h3>
|
|
<p class="text-secondary small">Patient-focused and easy to navigate.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" class="section-padding">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-6">
|
|
<div class="card p-5">
|
|
<div class="text-center mb-4">
|
|
<h2 class="h3">Book Your Consultation</h2>
|
|
<p class="text-secondary">Ready to elevate your business? Let's talk.</p>
|
|
</div>
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
<div class="mb-3">
|
|
{{ form.name }}
|
|
</div>
|
|
<div class="mb-3">
|
|
{{ form.email }}
|
|
</div>
|
|
<div class="mb-3">
|
|
{{ form.company }}
|
|
</div>
|
|
<div class="mb-4">
|
|
{{ form.message }}
|
|
</div>
|
|
<button type="submit" class="btn btn-accent w-100">Send Request</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|