Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Access - Discover Your Next IRL Adventure</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Global Styles */ | |
| :root { | |
| --primary: #8A63FF; | |
| --primary-dark: #6E4BD9; | |
| --secondary: #00E5FF; | |
| --dark: #121212; | |
| --darker: #0A0A0A; | |
| --light: #F5F6FA; | |
| --gray: #2A2A2A; | |
| --light-gray: #3D3D3D; | |
| --accent: #FF6B9E; | |
| --success: #00E676; | |
| --warning: #FFD166; | |
| --danger: #FF5252; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; | |
| } | |
| @supports (font-variation-settings: normal) { | |
| * { font-family: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } | |
| } | |
| body { | |
| background-color: var(--dark); | |
| color: rgba(255, 255, 255, 0.9); | |
| line-height: 1.6; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .container { | |
| width: 100%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| section { | |
| padding: 80px 0; | |
| } | |
| h1, h2, h3, h4 { | |
| margin-bottom: 20px; | |
| line-height: 1.2; | |
| color: white; | |
| font-weight: 700; | |
| } | |
| h1 { | |
| font-size: 3rem; | |
| font-weight: 800; | |
| } | |
| h2 { | |
| font-size: 2.5rem; | |
| } | |
| h3 { | |
| font-size: 1.8rem; | |
| } | |
| p { | |
| margin-bottom: 15px; | |
| font-size: 1.1rem; | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| a { | |
| text-decoration: none; | |
| color: var(--primary); | |
| transition: all 0.3s ease; | |
| } | |
| a:hover { | |
| color: var(--secondary); | |
| } | |
| .btn { | |
| display: inline-block; | |
| padding: 12px 30px; | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| text-align: center; | |
| box-shadow: 0 2px 8px rgba(138, 99, 255, 0.3); | |
| } | |
| .btn:hover { | |
| background: var(--primary-dark); | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 20px rgba(138, 99, 255, 0.4); | |
| } | |
| .btn-outline { | |
| background: transparent; | |
| border: 2px solid var(--primary); | |
| color: var(--primary); | |
| box-shadow: none; | |
| } | |
| .btn-outline:hover { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .btn-accent { | |
| background: var(--accent); | |
| box-shadow: 0 2px 8px rgba(255, 107, 158, 0.3); | |
| } | |
| .btn-accent:hover { | |
| background: #FF5A8F; | |
| box-shadow: 0 8px 20px rgba(255, 107, 158, 0.4); | |
| } | |
| .text-center { | |
| text-align: center; | |
| } | |
| .text-primary { | |
| color: var(--primary); | |
| } | |
| .text-secondary { | |
| color: var(--secondary); | |
| } | |
| .mb-20 { | |
| margin-bottom: 20px; | |
| } | |
| .mb-40 { | |
| margin-bottom: 40px; | |
| } | |
| .mt-40 { | |
| margin-top: 40px; | |
| } | |
| /* Header Styles */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| padding: 20px 0; | |
| background-color: rgba(18, 18, 18, 0.9); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); | |
| z-index: 1000; | |
| transition: all 0.3s ease; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| header.scrolled { | |
| padding: 15px 0; | |
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5); | |
| } | |
| .header-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: white; | |
| } | |
| .logo i { | |
| margin-right: 10px; | |
| font-size: 2rem; | |
| color: var(--primary); | |
| } | |
| nav ul { | |
| display: flex; | |
| list-style: none; | |
| } | |
| nav ul li { | |
| margin-left: 30px; | |
| } | |
| nav ul li a { | |
| font-weight: 500; | |
| color: rgba(255, 255, 255, 0.8); | |
| transition: all 0.3s ease; | |
| } | |
| nav ul li a:hover { | |
| color: var(--primary); | |
| } | |
| .mobile-menu-btn { | |
| display: none; | |
| background: none; | |
| border: none; | |
| font-size: 1.5rem; | |
| color: white; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .mobile-menu-btn:hover { | |
| color: var(--primary); | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| padding-top: 150px; | |
| padding-bottom: 100px; | |
| background: linear-gradient(135deg, #121212 0%, #1A1A2E 100%); | |
| color: white; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: url('https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover; | |
| opacity: 0.15; | |
| z-index: 0; | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 1; | |
| max-width: 800px; | |
| } | |
| .hero h1 { | |
| font-size: 3.5rem; | |
| margin-bottom: 20px; | |
| line-height: 1.1; | |
| background: linear-gradient(to right, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| display: inline-block; | |
| } | |
| .hero p { | |
| font-size: 1.3rem; | |
| margin-bottom: 30px; | |
| opacity: 0.9; | |
| color: rgba(255, 255, 255, 0.8); | |
| } | |
| .hero-btns { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .hero-btns .btn { | |
| padding: 15px 35px; | |
| font-size: 1.1rem; | |
| } | |
| .hero-btns .btn-outline { | |
| color: white; | |
| border-color: white; | |
| background: transparent; | |
| } | |
| .hero-btns .btn-outline:hover { | |
| background: white; | |
| color: var(--primary); | |
| } | |
| /* Features Section */ | |
| .features { | |
| background-color: var(--darker); | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| margin-top: 50px; | |
| } | |
| .feature-card { | |
| background: var(--gray); | |
| border-radius: 12px; | |
| padding: 30px; | |
| box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); | |
| transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); | |
| border-color: rgba(138, 99, 255, 0.3); | |
| } | |
| .feature-icon { | |
| font-size: 2.5rem; | |
| color: var(--primary); | |
| margin-bottom: 20px; | |
| transition: all 0.3s ease; | |
| } | |
| .feature-card:hover .feature-icon { | |
| transform: scale(1.1); | |
| color: var(--secondary); | |
| } | |
| .feature-card h3 { | |
| color: white; | |
| } | |
| .feature-card p { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| /* About Section */ | |
| .about { | |
| background-color: var(--dark); | |
| } | |
| .about-content { | |
| display: flex; | |
| align-items: center; | |
| gap: 50px; | |
| } | |
| .about-text { | |
| flex: 1; | |
| } | |
| .about-image { | |
| flex: 1; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); | |
| transition: all 0.4s ease; | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .about-image:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); | |
| } | |
| .about-image img { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| transition: all 0.5s ease; | |
| } | |
| .about-image:hover img { | |
| transform: scale(1.03); | |
| } | |
| /* Problem Solution Section */ | |
| .problem-solution { | |
| background-color: var(--darker); | |
| } | |
| .ps-tabs { | |
| display: flex; | |
| margin-bottom: 30px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .ps-tab { | |
| padding: 15px 30px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| border-bottom: 3px solid transparent; | |
| transition: all 0.3s ease; | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .ps-tab.active { | |
| border-bottom: 3px solid var(--primary); | |
| color: white; | |
| } | |
| .ps-tab:hover { | |
| color: white; | |
| } | |
| .ps-content { | |
| display: none; | |
| } | |
| .ps-content.active { | |
| display: block; | |
| } | |
| .ps-point { | |
| display: flex; | |
| align-items: flex-start; | |
| margin-bottom: 20px; | |
| padding: 20px; | |
| border-radius: 8px; | |
| transition: all 0.3s ease; | |
| background: rgba(255, 255, 255, 0.02); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .ps-point:hover { | |
| background: rgba(138, 99, 255, 0.05); | |
| border-color: rgba(138, 99, 255, 0.2); | |
| } | |
| .ps-point-icon { | |
| font-size: 1.5rem; | |
| color: var(--primary); | |
| margin-right: 15px; | |
| margin-top: 5px; | |
| transition: all 0.3s ease; | |
| } | |
| .ps-point:hover .ps-point-icon { | |
| color: var(--secondary); | |
| transform: scale(1.1); | |
| } | |
| /* Team Section */ | |
| .team { | |
| background-color: var(--dark); | |
| } | |
| .team-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 30px; | |
| margin-top: 50px; | |
| } | |
| .team-card { | |
| background: var(--gray); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); | |
| transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .team-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); | |
| border-color: rgba(138, 99, 255, 0.3); | |
| } | |
| .team-image { | |
| width: 100%; | |
| height: 250px; | |
| object-fit: cover; | |
| transition: all 0.5s ease; | |
| } | |
| .team-card:hover .team-image { | |
| transform: scale(1.05); | |
| } | |
| .team-info { | |
| padding: 20px; | |
| } | |
| .team-info h4 { | |
| margin-bottom: 5px; | |
| color: white; | |
| } | |
| .team-info p { | |
| color: rgba(255, 255, 255, 0.6); | |
| font-size: 0.9rem; | |
| margin-bottom: 15px; | |
| } | |
| .team-social { | |
| display: flex; | |
| justify-content: center; | |
| gap: 15px; | |
| } | |
| .team-social a { | |
| color: rgba(255, 255, 255, 0.6); | |
| font-size: 1.1rem; | |
| transition: all 0.3s ease; | |
| } | |
| .team-social a:hover { | |
| color: var(--primary); | |
| transform: translateY(-3px); | |
| } | |
| /* Roadmap Section */ | |
| .roadmap { | |
| background-color: var(--darker); | |
| } | |
| .timeline { | |
| position: relative; | |
| max-width: 800px; | |
| margin: 50px auto 0; | |
| } | |
| .timeline::after { | |
| content: ''; | |
| position: absolute; | |
| width: 3px; | |
| background: linear-gradient(to bottom, var(--primary), var(--secondary)); | |
| top: 0; | |
| bottom: 0; | |
| left: 50%; | |
| margin-left: -1.5px; | |
| } | |
| .timeline-item { | |
| padding: 10px 40px; | |
| position: relative; | |
| width: 50%; | |
| box-sizing: border-box; | |
| } | |
| .timeline-item::after { | |
| content: ''; | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| background-color: var(--darker); | |
| border: 3px solid var(--primary); | |
| border-radius: 50%; | |
| top: 15px; | |
| z-index: 1; | |
| transition: all 0.3s ease; | |
| } | |
| .timeline-item:hover::after { | |
| background-color: var(--primary); | |
| transform: scale(1.1); | |
| } | |
| .left { | |
| left: 0; | |
| } | |
| .right { | |
| left: 50%; | |
| } | |
| .left::after { | |
| right: -10px; | |
| } | |
| .right::after { | |
| left: -10px; | |
| } | |
| .timeline-content { | |
| padding: 20px; | |
| background-color: var(--gray); | |
| border-radius: 12px; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .timeline-item:hover .timeline-content { | |
| background-color: rgba(138, 99, 255, 0.05); | |
| border-color: rgba(138, 99, 255, 0.2); | |
| } | |
| .timeline-content h3 { | |
| margin-bottom: 10px; | |
| color: var(--primary); | |
| } | |
| .timeline-date { | |
| font-weight: 600; | |
| color: var(--secondary); | |
| margin-bottom: 10px; | |
| } | |
| /* CTA Section */ | |
| .cta { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| color: white; | |
| text-align: center; | |
| padding: 100px 0; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cta::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: url('https://images.unsplash.com/photo-1514525253161-7a3d1d5d1c1a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover; | |
| opacity: 0.1; | |
| z-index: 0; | |
| } | |
| .cta-content { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .cta h2 { | |
| font-size: 2.8rem; | |
| margin-bottom: 20px; | |
| } | |
| .cta p { | |
| max-width: 700px; | |
| margin: 0 auto 40px; | |
| font-size: 1.2rem; | |
| opacity: 0.9; | |
| color: rgba(255, 255, 255, 0.9); | |
| } | |
| .cta .btn { | |
| font-size: 1.2rem; | |
| padding: 15px 40px; | |
| background: white; | |
| color: var(--primary); | |
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .cta .btn:hover { | |
| background: rgba(255, 255, 255, 0.9); | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); | |
| } | |
| /* Contact Section */ | |
| .contact { | |
| background-color: var(--dark); | |
| } | |
| .contact-container { | |
| display: flex; | |
| gap: 50px; | |
| } | |
| .contact-form { | |
| flex: 1; | |
| background: var(--gray); | |
| padding: 40px; | |
| border-radius: 12px; | |
| box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: 600; | |
| color: white; | |
| } | |
| .form-control { | |
| width: 100%; | |
| padding: 12px 15px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| transition: all 0.3s ease; | |
| background: rgba(255, 255, 255, 0.05); | |
| color: white; | |
| } | |
| .form-control:focus { | |
| border-color: var(--primary); | |
| outline: none; | |
| box-shadow: 0 0 0 3px rgba(138, 99, 255, 0.2); | |
| background: rgba(255, 255, 255, 0.08); | |
| } | |
| textarea.form-control { | |
| min-height: 150px; | |
| resize: vertical; | |
| } | |
| .contact-info { | |
| flex: 1; | |
| } | |
| .contact-info h3 { | |
| margin-bottom: 30px; | |
| } | |
| .info-item { | |
| display: flex; | |
| align-items: flex-start; | |
| margin-bottom: 25px; | |
| padding: 15px; | |
| border-radius: 8px; | |
| transition: all 0.3s ease; | |
| background: rgba(255, 255, 255, 0.02); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .info-item:hover { | |
| background: rgba(138, 99, 255, 0.05); | |
| border-color: rgba(138, 99, 255, 0.2); | |
| } | |
| .info-icon { | |
| font-size: 1.5rem; | |
| color: var(--primary); | |
| margin-right: 15px; | |
| margin-top: 5px; | |
| transition: all 0.3s ease; | |
| } | |
| .info-item:hover .info-icon { | |
| color: var(--secondary); | |
| transform: scale(1.1); | |
| } | |
| .info-text h4 { | |
| margin-bottom: 5px; | |
| color: white; | |
| } | |
| .info-text p { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 15px; | |
| margin-top: 30px; | |
| } | |
| .social-links a { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 45px; | |
| height: 45px; | |
| background: var(--gray); | |
| color: white; | |
| border-radius: 50%; | |
| font-size: 1.2rem; | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .social-links a:hover { | |
| background: var(--primary); | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(138, 99, 255, 0.3); | |
| } | |
| /* Footer */ | |
| footer { | |
| background-color: var(--darker); | |
| color: white; | |
| padding: 80px 0 20px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .footer-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 40px; | |
| margin-bottom: 40px; | |
| } | |
| .footer-logo { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: white; | |
| margin-bottom: 20px; | |
| display: inline-block; | |
| } | |
| .footer-logo i { | |
| color: var(--primary); | |
| margin-right: 10px; | |
| } | |
| .footer-about p { | |
| opacity: 0.7; | |
| margin-bottom: 20px; | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .footer-links h3 { | |
| color: white; | |
| margin-bottom: 20px; | |
| font-size: 1.2rem; | |
| } | |
| .footer-links ul { | |
| list-style: none; | |
| } | |
| .footer-links li { | |
| margin-bottom: 10px; | |
| } | |
| .footer-links a { | |
| color: rgba(255, 255, 255, 0.6); | |
| transition: all 0.3s ease; | |
| } | |
| .footer-links a:hover { | |
| color: var(--primary); | |
| padding-left: 5px; | |
| } | |
| .footer-bottom { | |
| text-align: center; | |
| padding-top: 20px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.05); | |
| color: rgba(255, 255, 255, 0.5); | |
| font-size: 0.9rem; | |
| } | |
| /* Mobile Menu */ | |
| .mobile-menu { | |
| position: fixed; | |
| top: 0; | |
| left: -100%; | |
| width: 80%; | |
| max-width: 300px; | |
| height: 100vh; | |
| background: var(--darker); | |
| box-shadow: 5px 0 20px rgba(0, 0, 0, 0.5); | |
| z-index: 1001; | |
| transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| padding: 20px; | |
| overflow-y: auto; | |
| border-right: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .mobile-menu.active { | |
| left: 0; | |
| } | |
| .mobile-menu-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 30px; | |
| padding-bottom: 15px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .mobile-menu-close { | |
| background: none; | |
| border: none; | |
| font-size: 1.5rem; | |
| color: white; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .mobile-menu-close:hover { | |
| color: var(--primary); | |
| } | |
| .mobile-menu-nav ul { | |
| list-style: none; | |
| } | |
| .mobile-menu-nav li { | |
| margin-bottom: 15px; | |
| } | |
| .mobile-menu-nav a { | |
| display: block; | |
| padding: 12px; | |
| color: rgba(255, 255, 255, 0.8); | |
| font-weight: 500; | |
| border-radius: 8px; | |
| transition: all 0.3s ease; | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .mobile-menu-nav a:hover { | |
| background: rgba(138, 99, 255, 0.1); | |
| color: var(--primary); | |
| border-color: rgba(138, 99, 255, 0.2); | |
| } | |
| .mobile-menu-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.7); | |
| z-index: 1000; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .mobile-menu-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| /* Responsive Styles */ | |
| @media (max-width: 992px) { | |
| h1 { | |
| font-size: 2.8rem; | |
| } | |
| h2 { | |
| font-size: 2.2rem; | |
| } | |
| .about-content { | |
| flex-direction: column; | |
| } | |
| .contact-container { | |
| flex-direction: column; | |
| } | |
| .timeline::after { | |
| left: 31px; | |
| } | |
| .timeline-item { | |
| width: 100%; | |
| padding-left: 70px; | |
| padding-right: 25px; | |
| } | |
| .timeline-item::after { | |
| left: 21px; | |
| } | |
| .left::after, .right::after { | |
| left: 21px; | |
| } | |
| .right { | |
| left: 0; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| h1 { | |
| font-size: 2.5rem; | |
| } | |
| h2 { | |
| font-size: 2rem; | |
| } | |
| section { | |
| padding: 60px 0; | |
| } | |
| nav ul { | |
| display: none; | |
| } | |
| .mobile-menu-btn { | |
| display: block; | |
| } | |
| .hero { | |
| padding-top: 120px; | |
| padding-bottom: 80px; | |
| } | |
| .hero h1 { | |
| font-size: 2.8rem; | |
| } | |
| .hero-btns { | |
| flex-direction: column; | |
| } | |
| .hero-btns .btn { | |
| width: 100%; | |
| } | |
| .cta h2 { | |
| font-size: 2.2rem; | |
| } | |
| } | |
| @media (max-width: 576px) { | |
| h1 { | |
| font-size: 2.2rem; | |
| } | |
| h2 { | |
| font-size: 1.8rem; | |
| } | |
| .container { | |
| padding: 0 15px; | |
| } | |
| .hero h1 { | |
| font-size: 2.2rem; | |
| } | |
| .hero p { | |
| font-size: 1.1rem; | |
| } | |
| .feature-card { | |
| padding: 20px; | |
| } | |
| .ps-tabs { | |
| flex-direction: column; | |
| border-bottom: none; | |
| } | |
| .ps-tab { | |
| border-bottom: none; | |
| border-left: 3px solid transparent; | |
| padding: 10px 15px; | |
| } | |
| .ps-tab.active { | |
| border-bottom: none; | |
| border-left: 3px solid var(--primary); | |
| } | |
| } | |
| /* Animation */ | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translateY(0px); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| 100% { | |
| transform: translateY(0px); | |
| } | |
| } | |
| .animate-fade { | |
| animation: fadeIn 0.8s ease forwards; | |
| } | |
| .animate-float { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .delay-1 { | |
| animation-delay: 0.2s; | |
| } | |
| .delay-2 { | |
| animation-delay: 0.4s; | |
| } | |
| .delay-3 { | |
| animation-delay: 0.6s; | |
| } | |
| /* Particles Background */ | |
| .particles { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .particle { | |
| position: absolute; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header id="header"> | |
| <div class="container header-container"> | |
| <a href="#" class="logo"> | |
| <i class="fas fa-ticket-alt"></i> | |
| <span>Access</span> | |
| </a> | |
| <nav> | |
| <ul> | |
| <li><a href="#what-is-access">What is Access?</a></li> | |
| <li><a href="#why-access">Why Access?</a></li> | |
| <li><a href="#features">Features</a></li> | |
| <li><a href="#for-creators">For Creators</a></li> | |
| <li><a href="#team">Team</a></li> | |
| <li><a href="#roadmap">Roadmap</a></li> | |
| <li><a href="#contact" class="btn btn-outline">Get Early Access</a></li> | |
| </ul> | |
| </nav> | |
| <button class="mobile-menu-btn" id="mobileMenuBtn"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Mobile Menu --> | |
| <div class="mobile-menu" id="mobileMenu"> | |
| <div class="mobile-menu-header"> | |
| <a href="#" class="logo"> | |
| <i class="fas fa-ticket-alt"></i> | |
| <span>Access</span> | |
| </a> | |
| <button class="mobile-menu-close" id="mobileMenuClose"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <nav class="mobile-menu-nav"> | |
| <ul> | |
| <li><a href="#what-is-access">What is Access?</a></li> | |
| <li><a href="#why-access">Why Access?</a></li> | |
| <li><a href="#features">Features</a></li> | |
| <li><a href="#for-creators">For Creators</a></li> | |
| <li><a href="#team">Team</a></li> | |
| <li><a href="#roadmap">Roadmap</a></li> | |
| <li><a href="#contact" class="btn">Get Early Access</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <div class="mobile-menu-overlay" id="mobileMenuOverlay"></div> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="container"> | |
| <div class="hero-content animate-fade"> | |
| <h1>Stop Scrolling, Start Experiencing.</h1> | |
| <p>Discover Your Next IRL Adventure with Access. The AI-powered platform connecting you to personalized live events and empowering creators to engage their fans like never before.</p> | |
| <div class="hero-btns"> | |
| <a href="#contact" class="btn">Get Early Access</a> | |
| <a href="#what-is-access" class="btn btn-outline">Learn More</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- What is Access Section --> | |
| <section class="about" id="what-is-access"> | |
| <div class="container"> | |
| <h2 class="text-center animate-fade">Discover. Connect. Experience. All in One Place.</h2> | |
| <p class="text-center mb-40 animate-fade delay-1">Access is the all-in-one platform designed to revolutionize how you discover and engage with live events. From concerts and festivals to pop-ups and more, our AI-powered engine learns your preferences to deliver personalized recommendations, while connecting you directly with your favorite creators.</p> | |
| <div class="about-content"> | |
| <div class="about-text animate-fade delay-2"> | |
| <h3>Unlock a World of IRL Experiences with Access.</h3> | |
| <p>Access is an AI-powered, all-in-one discovery platform built for the modern event-goer and forward-thinking creator. We're solving the frustration of fragmented event discovery by bringing together data from ticketing sites, artist pages, fan communities, and more.</p> | |
| <p>Our intelligent engine learns your unique tastes and preferences to deliver hyper-personalized event recommendations, ensuring you never miss another unforgettable experience.</p> | |
| <p>But Access is more than just discovery. We're building a connected ecosystem that empowers creators to engage directly with their fans through innovative tools and features.</p> | |
| <a href="#features" class="btn mt-40">Explore Features</a> | |
| </div> | |
| <div class="about-image animate-fade delay-3"> | |
| <img src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Concert crowd enjoying live music"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Why Access Section --> | |
| <section class="problem-solution" id="why-access"> | |
| <div class="container"> | |
| <h2 class="text-center animate-fade">Solving the Chaos of IRL Event Discovery</h2> | |
| <p class="text-center mb-40 animate-fade delay-1">Are you tired of juggling multiple apps, endlessly scrolling through social media, and sifting through countless emails just to find out what's happening?</p> | |
| <div class="ps-tabs animate-fade delay-2"> | |
| <div class="ps-tab active" data-tab="problem">The Problem</div> | |
| <div class="ps-tab" data-tab="solution">The Solution</div> | |
| </div> | |
| <div class="ps-content active" id="problemContent"> | |
| <div class="ps-point"> | |
| <div class="ps-point-icon"> | |
| <i class="fas fa-th-large"></i> | |
| </div> | |
| <div> | |
| <h3>Multiple Platforms</h3> | |
| <p>Users have to check numerous ticketing sites, social media feeds, artist websites, and local listings to find events.</p> | |
| </div> | |
| </div> | |
| <div class="ps-point"> | |
| <div class="ps-point-icon"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <div> | |
| <h3>Information Overload</h3> | |
| <p>An overwhelming amount of irrelevant information makes it hard to find events you'll truly enjoy.</p> | |
| </div> | |
| </div> | |
| <div class="ps-point"> | |
| <div class="ps-point-icon"> | |
| <i class="fas fa-calendar-times"></i> | |
| </div> | |
| <div> | |
| <h3>Missed Opportunities</h3> | |
| <p>Great events often fly under the radar due to poor targeting and lack of personalized recommendations.</p> | |
| </div> | |
| </div> | |
| <div class="ps-point"> | |
| <div class="ps-point-icon"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <div> | |
| <h3>Friction in Planning</h3> | |
| <p>Coordinating with friends, sharing event details, and managing payments can be a hassle.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="ps-content" id="solutionContent"> | |
| <div class="ps-point"> | |
| <div class="ps-point-icon"> | |
| <i class="fas fa-globe"></i> | |
| </div> | |
| <div> | |
| <h3>Unified Platform</h3> | |
| <p>We aggregate data from across the web into one centralized and easy-to-use platform.</p> | |
| </div> | |
| </div> | |
| <div class="ps-point"> | |
| <div class="ps-point-icon"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div> | |
| <h3>Intelligent Curation</h3> | |
| <p>Our AI algorithms learn your preferences to deliver highly personalized event recommendations.</p> | |
| </div> | |
| </div> | |
| <div class="ps-point"> | |
| <div class="ps-point-icon"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <div> | |
| <h3>Seamless Experience</h3> | |
| <p>From discovery to purchasing and even post-event engagement, Access streamlines the entire process.</p> | |
| </div> | |
| </div> | |
| <div class="ps-point"> | |
| <div class="ps-point-icon"> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <div> | |
| <h3>Empowering Creators</h3> | |
| <p>We provide tools for artists and event organizers to connect directly with their fans.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="text-center mt-40 animate-fade delay-3">Imagine a World Where Finding Your Next Favorite Experience is Effortless. Welcome to Access.</h3> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features" id="features"> | |
| <div class="container"> | |
| <h2 class="text-center animate-fade">Discover the Power of Access</h2> | |
| <p class="text-center mb-40 animate-fade delay-1">Features Designed for You</p> | |
| <div class="features-grid"> | |
| <div class="feature-card animate-fade delay-2"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <h3>AI-Driven Curation</h3> | |
| <p>Our intelligent algorithms analyze your music tastes, interests, location, and friend activity to surface personalized event recommendations.</p> | |
| </div> | |
| <div class="feature-card animate-fade delay-3"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <h3>Social & Group Coordination</h3> | |
| <p>Easily invite friends to events, share details, see who's interested, and coordinate plans directly within the app.</p> | |
| </div> | |
| <div class="feature-card animate-fade delay-1"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-wallet"></i> | |
| </div> | |
| <h3>Integrated Ticketing</h3> | |
| <p>Purchase tickets directly within Access with our secure payment system and digital wallet integration.</p> | |
| </div> | |
| <div class="feature-card animate-fade delay-2"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-bell"></i> | |
| </div> | |
| <h3>Smart Notifications</h3> | |
| <p>Get alerts for events you'll love based on your preferences, without the spam of irrelevant notifications.</p> | |
| </div> | |
| <div class="feature-card animate-fade delay-3"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-map-marked-alt"></i> | |
| </div> | |
| <h3>Interactive Maps</h3> | |
| <p>Discover events near you with our intuitive map interface, complete with venue details and transportation options.</p> | |
| </div> | |
| <div class="feature-card animate-fade delay-1"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3>Creator Analytics</h3> | |
| <p>Artists and organizers gain valuable insights into their fanbase and event performance metrics.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- For Creators Section --> | |
| <section class="about" id="for-creators"> | |
| <div class="container"> | |
| <h2 class="text-center animate-fade">Built for Creators, By Creators</h2> | |
| <p class="text-center mb-40 animate-fade delay-1">Access isn't just for event-goers. We're building powerful tools to help artists, promoters, and venues connect with their audiences like never before.</p> | |
| <div class="about-content"> | |
| <div class="about-image animate-fade delay-2"> | |
| <img src="https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Artist performing on stage"> | |
| </div> | |
| <div class="about-text animate-fade delay-3"> | |
| <h3>Direct Fan Engagement</h3> | |
| <p>Break through the noise of social media algorithms and connect directly with your most engaged fans. Our platform gives you the tools to share exclusive content, announce events, and build meaningful relationships with your audience.</p> | |
| <h3 class="mt-40">Powerful Analytics</h3> | |
| <p>Understand your audience like never before with our comprehensive analytics dashboard. Track engagement, discover your most active fans, and gain insights to help grow your following and sell more tickets.</p> | |
| <h3 class="mt-40">Seamless Event Management</h3> | |
| <p>From ticketing to promotion, Access provides everything you need to manage your events in one place. Focus on creating amazing experiences while we handle the logistics.</p> | |
| <a href="#contact" class="btn mt-40">Join as a Creator</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Team Section --> | |
| <section class="team" id="team"> | |
| <div class="container"> | |
| <h2 class="text-center animate-fade">Meet The Team</h2> | |
| <p class="text-center mb-40 animate-fade delay-1">Passionate creators building the future of live event discovery</p> | |
| <div class="team-grid"> | |
| <div class="team-card animate-fade delay-2"> | |
| <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Alex Johnson" class="team-image"> | |
| <div class="team-info"> | |
| <h4>Alex Johnson</h4> | |
| <p>CEO & Founder</p> | |
| <div class="team-social"> | |
| <a href="#"><i class="fab fa-linkedin"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fas fa-envelope"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="team-card animate-fade delay-3"> | |
| <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Sarah Chen" class="team-image"> | |
| <div class="team-info"> | |
| <h4>Sarah Chen</h4> | |
| <p>CTO</p> | |
| <div class="team-social"> | |
| <a href="#"><i class="fab fa-linkedin"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fas fa-envelope"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="team-card animate-fade delay-1"> | |
| <img src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Michael Rodriguez" class="team-image"> | |
| <div class="team-info"> | |
| <h4>Michael Rodriguez</h4> | |
| <p>Head of Product</p> | |
| <div class="team-social"> | |
| <a href="#"><i class="fab fa-linkedin"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fas fa-envelope"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="team-card animate-fade delay-2"> | |
| <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Priya Patel" class="team-image"> | |
| <div class="team-info"> | |
| <h4>Priya Patel</h4> | |
| <p>Head of Design</p> | |
| <div class="team-social"> | |
| <a href="#"><i class="fab fa-linkedin"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fas fa-envelope"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Roadmap Section --> | |
| <section class="roadmap" id="roadmap"> | |
| <div class="container"> | |
| <h2 class="text-center animate-fade">Our Roadmap</h2> | |
| <p class="text-center mb-40 animate-fade delay-1">The journey ahead for Access</p> | |
| <div class="timeline"> | |
| <div class="timeline-item left animate-fade delay-2"> | |
| <div class="timeline-content"> | |
| <div class="timeline-date">Q1 2023</div> | |
| <h3>Concept & Research</h3> | |
| <p>Initial concept development, market research, and validation with potential users and creators.</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item right animate-fade delay-3"> | |
| <div class="timeline-content"> | |
| <div class="timeline-date">Q2 2023</div> | |
| <h3>Prototype Development</h3> | |
| <p>Building the first functional prototype with core discovery and recommendation features.</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item left animate-fade delay-1"> | |
| <div class="timeline-content"> | |
| <div class="timeline-date">Q3 2023</div> | |
| <h3>Beta Testing</h3> | |
| <p>Closed beta launch with select users and creators to gather feedback and refine the platform.</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item right animate-fade delay-2"> | |
| <div class="timeline-content"> | |
| <div class="timeline-date">Q4 2023</div> | |
| <h3>Public Beta Launch</h3> | |
| <p>Open beta launch in select cities with expanded features and creator tools.</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item left animate-fade delay-3"> | |
| <div class="timeline-content"> | |
| <div class="timeline-date">Q1 2024</div> | |
| <h3>Full Platform Launch</h3> | |
| <p>Official launch of Access with complete feature set and nationwide availability.</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item right animate-fade delay-1"> | |
| <div class="timeline-content"> | |
| <div class="timeline-date">Q2 2024</div> | |
| <h3>International Expansion</h3> | |
| <p>Begin rollout to international markets with localized content and partnerships.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="cta"> | |
| <div class="container"> | |
| <div class="cta-content"> | |
| <h2 class="animate-fade">Ready to Transform Your Event Experience?</h2> | |
| <p class="animate-fade delay-1">Join our waitlist to be among the first to experience Access when we launch.</p> | |
| <a href="#contact" class="btn animate-fade delay-2">Get Early Access</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="contact" id="contact"> | |
| <div class="container"> | |
| <h2 class="text-center animate-fade">Get In Touch</h2> | |
| <p class="text-center mb-40 animate-fade delay-1">Have questions or want to join our beta program? Reach out to us.</p> | |
| <div class="contact-container"> | |
| <div class="contact-form animate-fade delay-2"> | |
| <form id="contactForm"> | |
| <div | |
| </html> |