stephen/maverickApplicationsSite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Stephen Minakian
2025-06-30 23:25:56 -06:00
commit bbaa23b82a
2 changed files with 774 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
docker-compose.yml Normal file
View File

@ -0,0 +1,19 @@
services:
maverick-website:
image: nginx:alpine
container_name: maverick-website
restart: unless-stopped
volumes:
- ./:/usr/share/nginx/html:ro
networks:
- traefik
labels:
- "traefik.enable=true"
- "traefik.http.routers.maverick-website.rule=Host(`maverickapplications.com`)"
- "traefik.http.routers.maverick-website.tls=true"
- "traefik.http.routers.maverick-website.tls.certresolver=letsencrypt"
- "traefik.http.services.maverick-website.loadbalancer.server.port=80"
networks:
traefik:
external: true

755
index.html Normal file
View File

@ -0,0 +1,755 @@
<!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>&copy; 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>