757 lines
24 KiB
HTML
757 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Maverick Applications - Custom Software Solutions</title>
|
|
<meta name="description" content="Professional software development and custom application solutions. Built with precision, delivered with excellence.">
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--primary: #2563eb;
|
|
--primary-dark: #1d4ed8;
|
|
--secondary: #64748b;
|
|
--accent: #f59e0b;
|
|
--text-primary: #1e293b;
|
|
--text-secondary: #64748b;
|
|
--bg-primary: #ffffff;
|
|
--bg-secondary: #f8fafc;
|
|
--border: #e2e8f0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
line-height: 1.6;
|
|
color: var(--text-primary);
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 2rem;
|
|
}
|
|
|
|
/* Header */
|
|
header {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
border-bottom: 1px solid var(--border);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.logo::before {
|
|
content: "◆";
|
|
font-size: 1.2rem;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
list-style: none;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.nav-links a {
|
|
text-decoration: none;
|
|
color: var(--text-secondary);
|
|
font-weight: 500;
|
|
transition: color 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.nav-links a::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -5px;
|
|
left: 0;
|
|
width: 0;
|
|
height: 2px;
|
|
background: var(--primary);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.nav-links a:hover::after {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
background: linear-gradient(135deg, var(--bg-secondary) 0%, #f1f5f9 100%);
|
|
padding: 8rem 0 6rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: -50%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(135deg, transparent 0%, rgba(37, 99, 235, 0.05) 100%);
|
|
transform: skewX(-15deg);
|
|
}
|
|
|
|
.hero-content {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4rem;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.hero-text h1 {
|
|
font-size: 3.5rem;
|
|
font-weight: 800;
|
|
line-height: 1.1;
|
|
margin-bottom: 1.5rem;
|
|
background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.hero-text p {
|
|
font-size: 1.25rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 2rem;
|
|
max-width: 500px;
|
|
}
|
|
|
|
.cta-buttons {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn {
|
|
padding: 0.875rem 2rem;
|
|
border-radius: 0.5rem;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
border: none;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--primary);
|
|
color: white;
|
|
box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.39);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--primary-dark);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px 0 rgba(37, 99, 235, 0.5);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: var(--primary);
|
|
border: 2px solid var(--primary);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--primary);
|
|
color: white;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.hero-visual {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.tech-stack {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1rem;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.tech-item {
|
|
background: white;
|
|
padding: 1.5rem;
|
|
border-radius: 1rem;
|
|
text-align: center;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.3s ease;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.tech-item:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.tech-item::before {
|
|
content: attr(data-icon);
|
|
font-size: 2rem;
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* Services Section */
|
|
.services {
|
|
padding: 6rem 0;
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.section-header h2 {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.section-header p {
|
|
font-size: 1.125rem;
|
|
color: var(--text-secondary);
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.services-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 2rem;
|
|
}
|
|
|
|
.service-card {
|
|
background: white;
|
|
padding: 2rem;
|
|
border-radius: 1rem;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
border: 1px solid var(--border);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.service-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--primary), var(--accent));
|
|
}
|
|
|
|
.service-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.service-icon {
|
|
font-size: 3rem;
|
|
margin-bottom: 1rem;
|
|
display: block;
|
|
}
|
|
|
|
.service-card h3 {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.service-card p {
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Stats Section */
|
|
.stats {
|
|
background: var(--primary);
|
|
padding: 4rem 0;
|
|
color: white;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-item h3 {
|
|
font-size: 3rem;
|
|
font-weight: 800;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.stat-item p {
|
|
font-size: 1.125rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Contact Section */
|
|
.contact {
|
|
padding: 6rem 0;
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.contact-content {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.contact-info h3 {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.contact-info p {
|
|
color: var(--text-secondary);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.contact-methods {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.contact-method {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
background: white;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.contact-method span {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.contact-form {
|
|
background: white;
|
|
padding: 2rem;
|
|
border-radius: 1rem;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group textarea {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 0.5rem;
|
|
font-size: 1rem;
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group textarea:focus {
|
|
outline: none;
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.form-group textarea {
|
|
height: 120px;
|
|
resize: vertical;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
background: var(--text-primary);
|
|
color: white;
|
|
padding: 2rem 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.footer-links a {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
text-decoration: none;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: white;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.hero {
|
|
padding: 6rem 0 4rem;
|
|
}
|
|
|
|
.hero-content {
|
|
grid-template-columns: 1fr;
|
|
gap: 3rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-text h1 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
|
|
.contact-content {
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.cta-buttons {
|
|
justify-content: center;
|
|
}
|
|
|
|
.footer-content {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fadeInUp 0.6s ease-out;
|
|
}
|
|
|
|
/* Smooth scroll */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav class="container">
|
|
<a href="#" class="logo">Maverick Applications</a>
|
|
<ul class="nav-links">
|
|
<li><a href="#home">Home</a></li>
|
|
<li><a href="#services">Services</a></li>
|
|
<li><a href="#about">About</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<section id="home" class="hero">
|
|
<div class="container">
|
|
<div class="hero-content">
|
|
<div class="hero-text animate-fade-in">
|
|
<h1>Custom Software Solutions</h1>
|
|
<p>Building robust, scalable applications with cutting-edge technology. From concept to deployment, we deliver excellence in every line of code.</p>
|
|
<div class="cta-buttons">
|
|
<a href="#contact" class="btn btn-primary">Get Started</a>
|
|
<a href="#services" class="btn btn-secondary">Our Services</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-visual">
|
|
<div class="tech-stack">
|
|
<div class="tech-item" data-icon="⚡">
|
|
<strong>Fast</strong>
|
|
</div>
|
|
<div class="tech-item" data-icon="🔒">
|
|
<strong>Secure</strong>
|
|
</div>
|
|
<div class="tech-item" data-icon="📱">
|
|
<strong>Modern</strong>
|
|
</div>
|
|
<div class="tech-item" data-icon="☁️">
|
|
<strong>Cloud</strong>
|
|
</div>
|
|
<div class="tech-item" data-icon="🚀">
|
|
<strong>Scalable</strong>
|
|
</div>
|
|
<div class="tech-item" data-icon="🎯">
|
|
<strong>Precise</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="services" class="services">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>Our Services</h2>
|
|
<p>Comprehensive software development solutions tailored to your business needs</p>
|
|
</div>
|
|
<div class="services-grid">
|
|
<div class="service-card">
|
|
<span class="service-icon">💻</span>
|
|
<h3>Web Applications</h3>
|
|
<p>Full-stack web development using modern frameworks and technologies. Responsive, fast, and user-friendly applications that scale with your business.</p>
|
|
</div>
|
|
<div class="service-card">
|
|
<span class="service-icon">📱</span>
|
|
<h3>Mobile Development</h3>
|
|
<p>Native and cross-platform mobile applications for iOS and Android. Beautiful interfaces with seamless user experiences.</p>
|
|
</div>
|
|
<div class="service-card">
|
|
<span class="service-icon">🔧</span>
|
|
<h3>DevOps & Infrastructure</h3>
|
|
<p>Server setup, containerization, CI/CD pipelines, and cloud deployment. Like our Traefik-powered infrastructure for optimal performance.</p>
|
|
</div>
|
|
<div class="service-card">
|
|
<span class="service-icon">🔍</span>
|
|
<h3>System Integration</h3>
|
|
<p>Connecting disparate systems and APIs to create unified solutions. Data synchronization and workflow automation.</p>
|
|
</div>
|
|
<div class="service-card">
|
|
<span class="service-icon">🛡️</span>
|
|
<h3>Security Solutions</h3>
|
|
<p>Implementing robust security measures, authentication systems, and compliance frameworks to protect your digital assets.</p>
|
|
</div>
|
|
<div class="service-card">
|
|
<span class="service-icon">📊</span>
|
|
<h3>Data Analytics</h3>
|
|
<p>Transform your data into actionable insights with custom dashboards, reporting tools, and business intelligence solutions.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="stats">
|
|
<div class="container">
|
|
<div class="stats-grid">
|
|
<div class="stat-item">
|
|
<h3>100+</h3>
|
|
<p>Projects Delivered</p>
|
|
</div>
|
|
<div class="stat-item">
|
|
<h3>99.9%</h3>
|
|
<p>Uptime</p>
|
|
</div>
|
|
<div class="stat-item">
|
|
<h3>24/7</h3>
|
|
<p>Support</p>
|
|
</div>
|
|
<div class="stat-item">
|
|
<h3>5⭐</h3>
|
|
<p>Client Rating</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact" class="contact">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>Get In Touch</h2>
|
|
<p>Ready to start your next project? Let's discuss how we can help bring your ideas to life.</p>
|
|
</div>
|
|
<div class="contact-content">
|
|
<div class="contact-info">
|
|
<h3>Let's Work Together</h3>
|
|
<p>We're always excited to take on new challenges and help businesses grow through innovative software solutions.</p>
|
|
<div class="contact-methods">
|
|
<div class="contact-method">
|
|
<span>📧</span>
|
|
<div>
|
|
<strong>Email</strong>
|
|
<p>hello@maverickapplications.com</p>
|
|
</div>
|
|
</div>
|
|
<div class="contact-method">
|
|
<span>💬</span>
|
|
<div>
|
|
<strong>Response Time</strong>
|
|
<p>Within 24 hours</p>
|
|
</div>
|
|
</div>
|
|
<div class="contact-method">
|
|
<span>🌐</span>
|
|
<div>
|
|
<strong>Location</strong>
|
|
<p>Worldwide Remote</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<form class="contact-form" onsubmit="handleSubmit(event)">
|
|
<div class="form-group">
|
|
<label for="name">Name</label>
|
|
<input type="text" id="name" name="name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">Email</label>
|
|
<input type="email" id="email" name="email" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="project">Project Type</label>
|
|
<input type="text" id="project" name="project" placeholder="Web App, Mobile App, etc.">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="message">Message</label>
|
|
<textarea id="message" name="message" placeholder="Tell us about your project..." required></textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" style="width: 100%;">Send Message</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="logo">Maverick Applications</div>
|
|
<div class="footer-links">
|
|
<a href="#home">Home</a>
|
|
<a href="#services">Services</a>
|
|
<a href="#contact">Contact</a>
|
|
</div>
|
|
<p>© 2025 Maverick Applications. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Smooth scrolling for navigation links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Header scroll effect
|
|
window.addEventListener('scroll', () => {
|
|
const header = document.querySelector('header');
|
|
if (window.scrollY > 100) {
|
|
header.style.background = 'rgba(255, 255, 255, 0.98)';
|
|
header.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)';
|
|
} else {
|
|
header.style.background = 'rgba(255, 255, 255, 0.95)';
|
|
header.style.boxShadow = 'none';
|
|
}
|
|
});
|
|
|
|
// Form submission handler
|
|
function handleSubmit(event) {
|
|
event.preventDefault();
|
|
const form = event.target;
|
|
const formData = new FormData(form);
|
|
|
|
// Show success message
|
|
alert('Thank you for your message! We\'ll get back to you within 24 hours.');
|
|
form.reset();
|
|
}
|
|
|
|
// Animate elements on scroll
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('animate-fade-in');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Observe service cards and other elements
|
|
document.querySelectorAll('.service-card, .stat-item').forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
<!-- Last updated: $(date) -->
|