61c4e39807
- Update CloudKit container ID to iCloud.com.88oakapps.SportsTime across all services - Update IAP product IDs to match new bundle ID (com.88oakapps.SportsTime) - Add app landing page with light, welcoming design matching app aesthetic - Update entitlements and project configuration Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1198 lines
36 KiB
HTML
1198 lines
36 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SportsTime: Road Trip Planner - Plan Epic Multi-Sport Stadium Adventures</title>
|
|
<meta name="description" content="Plan unforgettable sports road trips across MLB, NBA, NHL & NFL stadiums. Route optimization, bucket list tracking, and group coordination.">
|
|
|
|
<!-- 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=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
/* Primary - Navy Blue */
|
|
--navy-900: #0A2540;
|
|
--navy-800: #0D3056;
|
|
--navy-700: #134074;
|
|
--navy-600: #1A5190;
|
|
--navy-500: #2563EB;
|
|
|
|
/* Accent - Coral/Salmon */
|
|
--coral-500: #F87171;
|
|
--coral-400: #FCA5A5;
|
|
--coral-100: #FEE2E2;
|
|
|
|
/* Light Blues */
|
|
--sky-50: #F0F9FF;
|
|
--sky-100: #E0F2FE;
|
|
--sky-200: #BAE6FD;
|
|
--sky-300: #7DD3FC;
|
|
--sky-400: #38BDF8;
|
|
--sky-500: #0EA5E9;
|
|
|
|
/* Neutrals */
|
|
--gray-50: #F8FAFC;
|
|
--gray-100: #F1F5F9;
|
|
--gray-200: #E2E8F0;
|
|
--gray-300: #CBD5E1;
|
|
--gray-400: #94A3B8;
|
|
--gray-500: #64748B;
|
|
--gray-600: #475569;
|
|
--gray-700: #334155;
|
|
--gray-900: #0F172A;
|
|
|
|
--white: #FFFFFF;
|
|
|
|
--font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
|
|
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
|
|
--shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.04);
|
|
--shadow-md: 0 4px 12px rgba(10, 37, 64, 0.08);
|
|
--shadow-lg: 0 12px 40px rgba(10, 37, 64, 0.12);
|
|
--shadow-xl: 0 25px 60px rgba(10, 37, 64, 0.15);
|
|
}
|
|
|
|
*, *::before, *::after {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-main);
|
|
background: linear-gradient(180deg, var(--sky-100) 0%, var(--sky-50) 30%, var(--white) 100%);
|
|
color: var(--navy-900);
|
|
overflow-x: hidden;
|
|
line-height: 1.6;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Navigation */
|
|
nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
padding: 1rem 2rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
nav.scrolled {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 42px;
|
|
height: 42px;
|
|
background: linear-gradient(135deg, var(--navy-700), var(--navy-800));
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.25rem;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.logo-text {
|
|
font-weight: 800;
|
|
font-size: 1.375rem;
|
|
letter-spacing: -0.02em;
|
|
color: var(--navy-900);
|
|
}
|
|
|
|
.nav-cta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.25rem;
|
|
background: var(--navy-800);
|
|
color: var(--white);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
border-radius: 12px;
|
|
transition: all 0.3s var(--ease-out-expo);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.nav-cta:hover {
|
|
background: var(--navy-700);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.nav-cta svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
padding: 7rem 2rem 4rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Decorative background elements */
|
|
.hero-decoration {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-decoration.d1 {
|
|
width: 600px;
|
|
height: 600px;
|
|
background: radial-gradient(circle, var(--sky-200) 0%, transparent 70%);
|
|
top: -200px;
|
|
right: -100px;
|
|
}
|
|
|
|
.hero-decoration.d2 {
|
|
width: 400px;
|
|
height: 400px;
|
|
background: radial-gradient(circle, var(--sky-300) 0%, transparent 70%);
|
|
bottom: -100px;
|
|
left: -100px;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.hero-text {
|
|
animation: fadeInUp 0.8s var(--ease-out-expo) forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
background: var(--white);
|
|
border: 1px solid var(--sky-200);
|
|
border-radius: 100px;
|
|
font-size: 0.875rem;
|
|
color: var(--gray-600);
|
|
margin-bottom: 1.5rem;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.hero-badge span {
|
|
color: var(--navy-700);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(2.75rem, 6vw, 4rem);
|
|
line-height: 1.1;
|
|
letter-spacing: -0.03em;
|
|
margin-bottom: 1.25rem;
|
|
font-weight: 800;
|
|
color: var(--navy-900);
|
|
}
|
|
|
|
.hero h1 .highlight {
|
|
color: var(--navy-700);
|
|
position: relative;
|
|
}
|
|
|
|
.hero-description {
|
|
font-size: 1.125rem;
|
|
color: var(--gray-500);
|
|
max-width: 480px;
|
|
margin-bottom: 2rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.hero-cta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.app-store-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 1rem 1.75rem;
|
|
background: var(--navy-800);
|
|
color: var(--white);
|
|
text-decoration: none;
|
|
border-radius: 16px;
|
|
transition: all 0.3s var(--ease-out-expo);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.app-store-btn:hover {
|
|
background: var(--navy-700);
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--shadow-xl);
|
|
}
|
|
|
|
.app-store-btn svg {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
.btn-text small {
|
|
display: block;
|
|
font-size: 0.7rem;
|
|
opacity: 0.8;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.btn-text strong {
|
|
display: block;
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Phone mockup */
|
|
.hero-visual {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
animation: fadeInUp 0.8s var(--ease-out-expo) 0.2s forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
.phone-mockup {
|
|
position: relative;
|
|
width: 280px;
|
|
height: 580px;
|
|
background: var(--white);
|
|
border-radius: 45px;
|
|
padding: 10px;
|
|
box-shadow: var(--shadow-xl), 0 0 0 1px rgba(10, 37, 64, 0.05);
|
|
transition: transform 0.5s var(--ease-out-expo);
|
|
}
|
|
|
|
.phone-mockup:hover {
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
.phone-screen {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(180deg, var(--sky-100) 0%, var(--sky-50) 50%, var(--white) 100%);
|
|
border-radius: 38px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.phone-notch {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 100px;
|
|
height: 28px;
|
|
background: var(--gray-900);
|
|
border-radius: 0 0 18px 18px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.phone-content {
|
|
padding: 2.5rem 1rem 1rem;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Main card in phone */
|
|
.phone-main-card {
|
|
background: var(--white);
|
|
border-radius: 20px;
|
|
padding: 1.25rem;
|
|
margin-bottom: 1rem;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.phone-main-card h3 {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--navy-900);
|
|
margin-bottom: 0.5rem;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.phone-main-card p {
|
|
font-size: 0.75rem;
|
|
color: var(--gray-500);
|
|
margin-bottom: 1rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.phone-main-btn {
|
|
background: var(--navy-800);
|
|
color: var(--white);
|
|
border: none;
|
|
border-radius: 12px;
|
|
padding: 0.875rem;
|
|
width: 100%;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.phone-section-title {
|
|
font-size: 0.875rem;
|
|
font-weight: 700;
|
|
color: var(--navy-900);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.phone-trips {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.phone-trip-card {
|
|
flex: 1;
|
|
background: var(--white);
|
|
border-radius: 14px;
|
|
padding: 0.75rem;
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--sky-100);
|
|
}
|
|
|
|
.trip-badge {
|
|
display: inline-block;
|
|
background: var(--sky-100);
|
|
color: var(--navy-700);
|
|
font-size: 0.6rem;
|
|
font-weight: 700;
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: 6px;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.trip-route {
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
color: var(--navy-900);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.trip-meta {
|
|
font-size: 0.55rem;
|
|
color: var(--gray-400);
|
|
}
|
|
|
|
.phone-tips {
|
|
background: var(--white);
|
|
border-radius: 14px;
|
|
padding: 0.75rem;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.phone-tip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.4rem 0;
|
|
}
|
|
|
|
.phone-tip:not(:last-child) {
|
|
border-bottom: 1px solid var(--gray-100);
|
|
}
|
|
|
|
.tip-icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
background: var(--coral-100);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.tip-text {
|
|
flex: 1;
|
|
}
|
|
|
|
.tip-text strong {
|
|
display: block;
|
|
font-size: 0.65rem;
|
|
font-weight: 600;
|
|
color: var(--navy-900);
|
|
}
|
|
|
|
.tip-text span {
|
|
font-size: 0.55rem;
|
|
color: var(--gray-400);
|
|
}
|
|
|
|
/* Floating badges */
|
|
.floating-badge {
|
|
position: absolute;
|
|
background: var(--white);
|
|
border-radius: 14px;
|
|
padding: 0.875rem 1.125rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
font-size: 0.875rem;
|
|
box-shadow: var(--shadow-lg);
|
|
animation: float 5s ease-in-out infinite;
|
|
border: 1px solid var(--sky-100);
|
|
}
|
|
|
|
.floating-badge.badge-1 {
|
|
top: 5%;
|
|
right: -5%;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.floating-badge.badge-2 {
|
|
bottom: 15%;
|
|
left: -10%;
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
.floating-badge .badge-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: var(--sky-100);
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.floating-badge strong {
|
|
color: var(--navy-700);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.floating-badge span {
|
|
color: var(--gray-500);
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-12px); }
|
|
}
|
|
|
|
/* Stats Section */
|
|
.stats {
|
|
padding: 4rem 2rem;
|
|
background: var(--white);
|
|
}
|
|
|
|
.stats-container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 2rem;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
opacity: 0;
|
|
animation: fadeInUp 0.6s var(--ease-out-expo) forwards;
|
|
}
|
|
|
|
.stat-item:nth-child(1) { animation-delay: 0.1s; }
|
|
.stat-item:nth-child(2) { animation-delay: 0.2s; }
|
|
.stat-item:nth-child(3) { animation-delay: 0.3s; }
|
|
.stat-item:nth-child(4) { animation-delay: 0.4s; }
|
|
|
|
.stat-number {
|
|
font-size: 2.75rem;
|
|
font-weight: 800;
|
|
color: var(--navy-800);
|
|
line-height: 1;
|
|
margin-bottom: 0.5rem;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.875rem;
|
|
color: var(--gray-500);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Features Section */
|
|
.features {
|
|
padding: 6rem 2rem;
|
|
background: linear-gradient(180deg, var(--white) 0%, var(--sky-50) 100%);
|
|
}
|
|
|
|
.features-container {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.section-header h2 {
|
|
font-size: clamp(2rem, 4vw, 2.75rem);
|
|
font-weight: 800;
|
|
color: var(--navy-900);
|
|
margin-bottom: 1rem;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.section-header p {
|
|
font-size: 1.125rem;
|
|
color: var(--gray-500);
|
|
max-width: 550px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.feature-card {
|
|
background: var(--white);
|
|
border: 1px solid var(--sky-100);
|
|
border-radius: 24px;
|
|
padding: 2rem;
|
|
position: relative;
|
|
transition: all 0.4s var(--ease-out-expo);
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.feature-card.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: var(--shadow-lg);
|
|
border-color: var(--sky-200);
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
background: var(--coral-100);
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.feature-card:nth-child(2) .feature-icon { background: var(--sky-100); }
|
|
.feature-card:nth-child(3) .feature-icon { background: #FEF3C7; }
|
|
.feature-card:nth-child(4) .feature-icon { background: #E0E7FF; }
|
|
|
|
.feature-card h3 {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.625rem;
|
|
color: var(--navy-900);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.feature-card p {
|
|
color: var(--gray-500);
|
|
line-height: 1.7;
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
/* Sports Section */
|
|
.sports {
|
|
padding: 5rem 2rem;
|
|
background: var(--white);
|
|
}
|
|
|
|
.sports-container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.sports-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 1rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.sport-card {
|
|
background: var(--sky-50);
|
|
border: 1px solid var(--sky-100);
|
|
border-radius: 20px;
|
|
padding: 1.75rem 1rem;
|
|
text-align: center;
|
|
transition: all 0.3s var(--ease-out-expo);
|
|
}
|
|
|
|
.sport-card:hover {
|
|
transform: translateY(-4px);
|
|
background: var(--white);
|
|
box-shadow: var(--shadow-md);
|
|
border-color: var(--sky-200);
|
|
}
|
|
|
|
.sport-icon {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.sport-card h4 {
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
color: var(--navy-900);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.sport-card p {
|
|
font-size: 0.8125rem;
|
|
color: var(--gray-500);
|
|
}
|
|
|
|
/* CTA Section */
|
|
.cta {
|
|
padding: 6rem 2rem;
|
|
text-align: center;
|
|
background: linear-gradient(180deg, var(--sky-50) 0%, var(--sky-100) 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cta-decoration {
|
|
position: absolute;
|
|
width: 500px;
|
|
height: 500px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, var(--sky-200) 0%, transparent 70%);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.cta-decoration.d1 { top: -200px; left: -100px; }
|
|
.cta-decoration.d2 { bottom: -200px; right: -100px; }
|
|
|
|
.cta-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 650px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.cta h2 {
|
|
font-size: clamp(2.25rem, 5vw, 3rem);
|
|
font-weight: 800;
|
|
color: var(--navy-900);
|
|
margin-bottom: 1rem;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.cta p {
|
|
font-size: 1.125rem;
|
|
color: var(--gray-500);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.cta .app-store-btn {
|
|
display: inline-flex;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
padding: 2.5rem 2rem;
|
|
background: var(--white);
|
|
border-top: 1px solid var(--sky-100);
|
|
}
|
|
|
|
.footer-container {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.footer-links a {
|
|
color: var(--gray-500);
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: var(--navy-700);
|
|
}
|
|
|
|
.footer-copy {
|
|
color: var(--gray-400);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 1024px) {
|
|
.hero-content {
|
|
grid-template-columns: 1fr;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-text {
|
|
order: 1;
|
|
}
|
|
|
|
.hero-visual {
|
|
order: 0;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.hero-description {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.hero-cta {
|
|
justify-content: center;
|
|
}
|
|
|
|
.floating-badge {
|
|
display: none;
|
|
}
|
|
|
|
.features-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.sports-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.stats-container {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 2.25rem;
|
|
}
|
|
|
|
nav {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.nav-cta span {
|
|
display: none;
|
|
}
|
|
|
|
.hero {
|
|
padding: 5rem 1.5rem 3rem;
|
|
}
|
|
|
|
.phone-mockup {
|
|
width: 240px;
|
|
height: 500px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.sports-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.sport-card {
|
|
padding: 1.25rem 0.75rem;
|
|
}
|
|
|
|
.sport-icon {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.footer-container {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-links {
|
|
gap: 1.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav>
|
|
<a href="#" class="logo">
|
|
<div class="logo-icon">🏟️</div>
|
|
<span class="logo-text">SportsTime</span>
|
|
</a>
|
|
<a href="#download" class="nav-cta">
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
|
|
</svg>
|
|
<span>Download</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="hero-decoration d1"></div>
|
|
<div class="hero-decoration d2"></div>
|
|
|
|
<div class="hero-content">
|
|
<div class="hero-text">
|
|
<div class="hero-badge">
|
|
✨ <span>NEW</span> Plan Multi-Sport Stadium Adventures
|
|
</div>
|
|
<h1>
|
|
Adventure Awaits.<br>
|
|
<span class="highlight">Plan Your Ultimate Sports Road Trip.</span>
|
|
</h1>
|
|
<p class="hero-description">
|
|
Visit stadiums, catch games, and create unforgettable memories.
|
|
The easiest way to plan multi-sport road trips across MLB, NBA, NHL & NFL.
|
|
</p>
|
|
<div class="hero-cta">
|
|
<a href="#download" class="app-store-btn">
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
|
|
</svg>
|
|
<div class="btn-text">
|
|
<small>Download on the</small>
|
|
<strong>App Store</strong>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-visual">
|
|
<div class="phone-mockup">
|
|
<div class="phone-screen">
|
|
<div class="phone-notch"></div>
|
|
<div class="phone-content">
|
|
<div class="phone-main-card">
|
|
<h3>Adventure Awaits</h3>
|
|
<p>Plan your ultimate sports road trip. Visit stadiums, catch games, and create unforgettable memories.</p>
|
|
<button class="phone-main-btn">
|
|
🏟️ Start Planning
|
|
</button>
|
|
</div>
|
|
|
|
<div class="phone-section-title">Featured Trips</div>
|
|
<div class="phone-trips">
|
|
<div class="phone-trip-card">
|
|
<span class="trip-badge">East</span>
|
|
<div class="trip-route">Columbus → Columbus</div>
|
|
<div class="trip-meta">1 game · 1 city</div>
|
|
</div>
|
|
<div class="phone-trip-card">
|
|
<span class="trip-badge">East</span>
|
|
<div class="trip-route">Newark → Newark</div>
|
|
<div class="trip-meta">2 games · 1 city</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="phone-section-title">Planning Tips</div>
|
|
<div class="phone-tips">
|
|
<div class="phone-tip">
|
|
<div class="tip-icon">🔄</div>
|
|
<div class="tip-text">
|
|
<strong>Reschedule alerts</strong>
|
|
<span>Enable notifications</span>
|
|
</div>
|
|
</div>
|
|
<div class="phone-tip">
|
|
<div class="tip-icon">🎓</div>
|
|
<div class="tip-text">
|
|
<strong>College town energy</strong>
|
|
<span>Fun atmospheres</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="floating-badge badge-1">
|
|
<div class="badge-icon">🗺️</div>
|
|
<div>
|
|
<strong>Smart Routes</strong><br>
|
|
<span>Optimized for you</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="floating-badge badge-2">
|
|
<div class="badge-icon">🎟️</div>
|
|
<div>
|
|
<strong>6,600+ Games</strong><br>
|
|
<span>All seasons</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Section -->
|
|
<section class="stats">
|
|
<div class="stats-container">
|
|
<div class="stat-item">
|
|
<div class="stat-number">120+</div>
|
|
<div class="stat-label">Stadiums</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number">4</div>
|
|
<div class="stat-label">Major Sports</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number">6,600+</div>
|
|
<div class="stat-label">Games Tracked</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number">∞</div>
|
|
<div class="stat-label">Adventures</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section class="features">
|
|
<div class="features-container">
|
|
<div class="section-header">
|
|
<h2>Everything You Need to Plan the Perfect Trip</h2>
|
|
<p>From route optimization to group coordination, we've got you covered.</p>
|
|
</div>
|
|
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🗺️</div>
|
|
<h3>Smart Route Planning</h3>
|
|
<p>Our algorithm finds the most efficient route between stadiums, saving you time and miles on your adventure.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📋</div>
|
|
<h3>Bucket List Tracking</h3>
|
|
<p>Track every stadium you've visited across all leagues. Earn achievements and share your progress with friends.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">👥</div>
|
|
<h3>Group Coordination</h3>
|
|
<p>Planning with friends? Create polls to vote on destinations and games. Everyone stays in sync.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📄</div>
|
|
<h3>PDF Export</h3>
|
|
<p>Generate beautiful PDF itineraries with maps, game details, and local attractions for offline access.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Sports Section -->
|
|
<section class="sports">
|
|
<div class="sports-container">
|
|
<div class="section-header">
|
|
<h2>All Your Favorite Sports</h2>
|
|
<p>Plan trips across America's biggest professional sports leagues.</p>
|
|
</div>
|
|
|
|
<div class="sports-grid">
|
|
<div class="sport-card">
|
|
<div class="sport-icon">⚾</div>
|
|
<h4>MLB</h4>
|
|
<p>30 Ballparks</p>
|
|
</div>
|
|
<div class="sport-card">
|
|
<div class="sport-icon">🏀</div>
|
|
<h4>NBA</h4>
|
|
<p>30 Arenas</p>
|
|
</div>
|
|
<div class="sport-card">
|
|
<div class="sport-icon">🏒</div>
|
|
<h4>NHL</h4>
|
|
<p>32 Rinks</p>
|
|
</div>
|
|
<div class="sport-card">
|
|
<div class="sport-icon">🏈</div>
|
|
<h4>NFL</h4>
|
|
<p>30 Stadiums</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="cta" id="download">
|
|
<div class="cta-decoration d1"></div>
|
|
<div class="cta-decoration d2"></div>
|
|
<div class="cta-content">
|
|
<h2>Ready to Start Your Adventure?</h2>
|
|
<p>Download SportsTime and start planning your next epic stadium road trip today.</p>
|
|
<a href="https://apps.apple.com/app/sportstime" class="app-store-btn">
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
|
|
</svg>
|
|
<div class="btn-text">
|
|
<small>Download on the</small>
|
|
<strong>App Store</strong>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="footer-container">
|
|
<a href="#" class="logo">
|
|
<div class="logo-icon">🏟️</div>
|
|
<span class="logo-text">SportsTime</span>
|
|
</a>
|
|
<div class="footer-links">
|
|
<a href="https://88oakapps.com/privacy">Privacy Policy</a>
|
|
<a href="https://88oakapps.com/terms">Terms of Service</a>
|
|
<a href="mailto:support@88oakapps.com">Contact</a>
|
|
</div>
|
|
<div class="footer-copy">
|
|
© 2026 88 Oak Apps. All rights reserved.
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Navbar scroll effect
|
|
const nav = document.querySelector('nav');
|
|
window.addEventListener('scroll', () => {
|
|
if (window.scrollY > 50) {
|
|
nav.classList.add('scrolled');
|
|
} else {
|
|
nav.classList.remove('scrolled');
|
|
}
|
|
});
|
|
|
|
// Feature cards scroll animation
|
|
const featureCards = document.querySelectorAll('.feature-card');
|
|
|
|
const observerOptions = {
|
|
threshold: 0.2,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry, index) => {
|
|
if (entry.isIntersecting) {
|
|
setTimeout(() => {
|
|
entry.target.classList.add('visible');
|
|
}, index * 100);
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
featureCards.forEach(card => observer.observe(card));
|
|
|
|
// Stats animation - trigger when in view
|
|
const statItems = document.querySelectorAll('.stat-item');
|
|
const statsObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.animationPlayState = 'running';
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
|
|
statItems.forEach(item => {
|
|
item.style.animationPlayState = 'paused';
|
|
statsObserver.observe(item);
|
|
});
|
|
|
|
// Smooth scroll for anchor 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'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|