330 lines
17 KiB
PHP
330 lines
17 KiB
PHP
<?php
|
|
$mail_result = null;
|
|
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
|
require_once __DIR__ . '/mail/MailService.php';
|
|
|
|
$name = filter_input(INPUT_POST, 'name', FILTER_SANITIZE_STRING);
|
|
$email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
|
|
$budget = filter_input(INPUT_POST, 'budget', FILTER_SANITIZE_STRING);
|
|
$message = filter_input(INPUT_POST, 'message', FILTER_SANITIZE_STRING);
|
|
|
|
if ($name && $email && $message) {
|
|
$full_message = "Budget: " . $budget . "\n\n" . $message;
|
|
$mail_result = MailService::sendContactMessage(
|
|
$name,
|
|
$email,
|
|
$full_message,
|
|
'blarior@gmail.com',
|
|
'New inquiry from PixelForge website'
|
|
);
|
|
} else {
|
|
$mail_result = ['success' => false, 'error' => 'Invalid input.'];
|
|
}
|
|
}
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PixelForge - Digital Agency</title>
|
|
|
|
<!-- Favicon -->
|
|
<link href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔥</text></svg>" rel="icon">
|
|
|
|
<!-- Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Lato:wght@400;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ======= Header ======= -->
|
|
<header id="header" class="fixed-top">
|
|
<nav class="navbar navbar-expand-lg navbar-dark">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#">PixelForge</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#work">Work</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#testimonials">Testimonials</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
|
|
<li class="nav-item ms-lg-3"><a class="btn btn-warning" href="#contact">Request a Quote</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- ======= Hero Section ======= -->
|
|
<section id="hero">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<h1>Welcome from Editor!!!</h1>
|
|
<p>A digital agency crafting beautiful and effective websites, apps, and brand identities.</p>
|
|
<a href="#contact" class="btn btn-warning btn-lg mt-3">Request a Quote</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<main id="main">
|
|
|
|
<!-- ======= Services Section ======= -->
|
|
<section id="services" class="services">
|
|
<div class="container">
|
|
<div class="section-title">
|
|
<h2>Our Services</h2>
|
|
</div>
|
|
<div class="row text-center">
|
|
<div class="col-lg-4 col-md-6 mb-4">
|
|
<div class="service-item p-4 rounded shadow-sm frosted-card">
|
|
<div class="icon mb-3"><i class="bi bi-display"></i></div>
|
|
<h4 class="mb-3">Web Design</h4>
|
|
<p>Stunning, responsive websites that capture your brand and engage your audience.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 mb-4">
|
|
<div class="service-item p-4 rounded shadow-sm frosted-card">
|
|
<div class="icon mb-3"><i class="bi bi-phone"></i></div>
|
|
<h4 class="mb-3">App Development</h4>
|
|
<p>Intuitive and powerful mobile apps for iOS and Android that your users will love.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 mb-4">
|
|
<div class="service-item p-4 rounded shadow-sm frosted-card">
|
|
<div class="icon mb-3"><i class="bi bi-palette"></i></div>
|
|
<h4 class="mb-3">Branding</h4>
|
|
<p>Creating memorable brand identities that tell your story and connect with customers.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 mb-4">
|
|
<div class="service-item p-4 rounded shadow-sm frosted-card">
|
|
<div class="icon mb-3"><i class="bi bi-search"></i></div>
|
|
<h4 class="mb-3">SEO</h4>
|
|
<p>Climb the search rankings and drive organic traffic with our proven SEO strategies.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 mb-4">
|
|
<div class="service-item p-4 rounded shadow-sm frosted-card">
|
|
<div class="icon mb-3"><i class="bi bi-vector-pen"></i></div>
|
|
<h4 class="mb-3">UI/UX Design</h4>
|
|
<p>User-centric designs that provide seamless and enjoyable digital experiences.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 mb-4">
|
|
<div class="service-item p-4 rounded shadow-sm frosted-card">
|
|
<div class="icon mb-3"><i class="bi bi-card-text"></i></div>
|
|
<h4 class="mb-3">Content Strategy</h4>
|
|
<p>Engaging content that builds authority and converts readers into customers.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ======= Case Studies Section ======= -->
|
|
<section id="work">
|
|
<div class="container">
|
|
<div class="section-title">
|
|
<h2>Our Work</h2>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-4 col-md-6 mb-4">
|
|
<div class="card h-100 frosted-card">
|
|
<img src="https://picsum.photos/seed/work-1/600/400" class="card-img-top" alt="A sleek website design for a corporate client.">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Corporate Website Redesign</h5>
|
|
<p class="card-text">A modern and professional redesign for a leading tech company.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 mb-4">
|
|
<div class="card h-100 frosted-card">
|
|
<img src="https://picsum.photos/seed/work-2/600/400" class="card-img-top" alt="A vibrant mobile app interface for a startup.">
|
|
<div class="card-body">
|
|
<h5 class="card-title">E-commerce Mobile App</h5>
|
|
<p class="card-text">A feature-rich mobile app for a growing online fashion retailer.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 mb-4">
|
|
<div class="card h-100 frosted-card">
|
|
<img src="https://picsum.photos/seed/work-3/600/400" class="card-img-top" alt="A complete branding package with logos and mockups.">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Startup Branding Package</h5>
|
|
<p class="card-text">A complete brand identity for a new SaaS platform, from logo to launch.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ======= Testimonials Section ======= -->
|
|
<section id="testimonials">
|
|
<div class="container">
|
|
<div class="section-title">
|
|
<h2>What Our Clients Say</h2>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-4 mb-4">
|
|
<div class="card h-100 frosted-card">
|
|
<div class="card-body text-center">
|
|
<img src="https://picsum.photos/seed/avatar-1/96/96" class="rounded-circle mb-3" alt="Avatar of a satisfied client.">
|
|
<p class="fst-italic">"PixelForge transformed our online presence. Their attention to detail and creative vision is second to none."</p>
|
|
<h5 class="mt-3 mb-0">Jane Doe</h5>
|
|
<small class="text-muted">CEO, Tech Solutions</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 mb-4">
|
|
<div class="card h-100 frosted-card">
|
|
<div class="card-body text-center">
|
|
<img src="https://picsum.photos/seed/avatar-2/96/96" class="rounded-circle mb-3" alt="Avatar of a happy customer.">
|
|
<p class="fst-italic">"The mobile app they developed exceeded all our expectations. Our users love it!"</p>
|
|
<h5 class="mt-3 mb-0">John Smith</h5>
|
|
<small class="text-muted">Founder, Fashion Forward</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 mb-4">
|
|
<div class="card h-100 frosted-card">
|
|
<div class="card-body text-center">
|
|
<img src="https://picsum.photos/seed/avatar-3/96/96" class="rounded-circle mb-3" alt="Avatar of a project partner.">
|
|
<p class="fst-italic">"Working with PixelForge was a seamless experience. They are true professionals and masters of their craft."</p>
|
|
<h5 class="mt-3 mb-0">Sam Wilson</h5>
|
|
<small class="text-muted">Marketing Director, Innovate Co.</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ======= Process Section ======= -->
|
|
<section id="process">
|
|
<div class="container">
|
|
<div class="section-title">
|
|
<h2>Our Process</h2>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="process-step">
|
|
<div class="icon"><i class="bi bi-search"></i></div>
|
|
<h4>1. Discover</h4>
|
|
<p>We start by understanding your goals, audience, and challenges.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="process-step">
|
|
<div class="icon"><i class="bi bi-palette"></i></div>
|
|
<h4>2. Design</h4>
|
|
<p>We create wireframes and mockups to bring the vision to life.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="process-step">
|
|
<div class="icon"><i class="bi bi-code-slash"></i></div>
|
|
<h4>3. Develop</h4>
|
|
<p>Our team builds a high-quality, scalable solution using the latest tech.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="process-step">
|
|
<div class="icon"><i class="bi bi-rocket-takeoff"></i></div>
|
|
<h4>4. Deploy</h4>
|
|
<p>We launch your project and provide support for a seamless transition.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ======= Contact Section ======= -->
|
|
<section id="contact">
|
|
<div class="container">
|
|
<div class="section-title">
|
|
<h2>Get in Touch</h2>
|
|
<p>Have a project in mind? We'd love to hear from you.</p>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<?php if ($mail_result !== null): ?>
|
|
<div class="alert <?php echo $mail_result['success'] ? 'alert-success' : 'alert-danger'; ?>">
|
|
<?php if ($mail_result['success']): ?>
|
|
Your message has been sent successfully!
|
|
<?php else: ?>
|
|
There was an error sending your message: <?php echo htmlspecialchars($mail_result['error']); ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
<form action="#contact" method="post" class="row g-3 needs-validation" novalidate>
|
|
<div class="col-md-6">
|
|
<label for="name" class="form-label">Your Name</label>
|
|
<input type="text" name="name" class="form-control" id="name" required>
|
|
<div class="invalid-feedback">Please enter your name.</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="email" class="form-label">Your Email</label>
|
|
<input type="email" name="email" class="form-control" id="email" required>
|
|
<div class="invalid-feedback">Please enter a valid email.</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<label for="budget" class="form-label">Estimated Budget</label>
|
|
<select class="form-select" name="budget" id="budget">
|
|
<option selected disabled value="">Choose...</option>
|
|
<option>< $5,000</option>
|
|
<option>$5,000 - $10,000</option>
|
|
<option>$10,000 - $25,000</option>
|
|
<option>$25,000+</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-12">
|
|
<label for="message" class="form-label">Message</label>
|
|
<textarea class="form-control" name="message" id="message" rows="5" required></textarea>
|
|
<div class="invalid-feedback">Please leave a message.</div>
|
|
</div>
|
|
<div class="col-12 text-center">
|
|
<button type="submit" class="btn btn-primary btn-lg">Send Message</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- ======= Footer ======= -->
|
|
<footer id="footer">
|
|
<div class="container text-center">
|
|
<p>© <?php echo date("Y"); ?> PixelForge. All Rights Reserved.</p>
|
|
<p>
|
|
<a href="#services">Services</a> |
|
|
<a href="#work">Work</a> |
|
|
<a href="#contact">Contact</a>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
|
|
|
|
<!-- Custom JS -->
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
|
|
</body>
|
|
</html>
|