MusicMatch/index.php at main · JakobAIOdev/MusicMatch · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<?php
require_once __DIR__ . '/includes/config.php';
$pageTitle = "MusicMatch - Home";
$additionalCSS = "<link rel='stylesheet' href='{$BASE_URL}assets/css/index.css'>";

require_once './includes/session_handler.php';
include "./templates/header.php";
require_once './vendor/autoload.php';
require_once './includes/spotify_utils.php';

?>

<section class="hero-section">
    <div class="container">
        <div class="hero-content">
            <h1 class="hero-title">Best <span>MusicSwiper</span> for <br> Tailored Listening Experiences</h1>
            <p class="hero-subtitle">Discover new tracks, create personalized playlists,
                and enjoy seamless Spotify integration all in one place.</p>
            <div class="hero-buttons">
                <?php /* if (!isset($_SESSION['spotify_access_token'])): ?>
                    <a href="auth/login.php" class="btn btn-accent">Login with Spotify</a>
                <?php else: ?>
                    <a href="features.php" class="btn btn-accent">All Features</a>
                <?php endif; */ ?>
                <a href="swiper.php" class="btn btn-outline" id="swipe-now-a">
                    <img id="swipe-now-icon-hero" class="hero-btn-icon" src="./assets/img/icons/swipe.svg" alt="">
                    Swipe Now
                </a>
            </div>
            <div class="down-arrow-container">
                <div class="down-arrow-wrapper">
                    <a href="#features" class="down-arrow">
                        <img src="./assets/img/icons/arrow-down.svg" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section" id="features">
    <div class="container">
        <div class="section-title">
            <h2>MusicMatch Features</h2>
            <p>Our platform offers a unique way to discover and enjoy music</p>
        </div>

        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">
                    <img src="./assets/img/icons/analytics.svg" alt="Analytics Icon">
                </div>
                <h3 class="feature-title">Personalized Recommendations</h3>
                <p class="feature-description">We analyse your preferences and suggests songs you'll love based on your listening history.</p>
            </div>

            <div class="feature-card">
                <div class="feature-icon">
                    <img src="./assets/img/icons/swipe.svg" alt="Swipe Icon">
                </div>
                <h3 class="feature-title">Swipe to Discover</h3>
                <p class="feature-description">Our intuitive swipe interface makes finding new music fun and engaging.</p>
            </div>

            <div class="feature-card">
                <div class="feature-icon">
                    <img src="./assets/img/icons/discover.svg" alt="Discover Icon">
                </div>
                <h3 class="feature-title">Explore your Favorites</h3>
                <p class="feature-description">Check out your favorite artists and songs for different time periods.</p>
            </div>
        </div>
    </div>
</section>

<section class="section how-it-works">
    <div class="container">
        <div class="section-title">
            <h2>How It Works</h2>
            <p>Getting started with MusicMatch is easy</p>
        </div>

        <div class="steps">
            <div class="step">
                <div class="step-number">1</div>
                <h3 class="step-title">Login</h3>
                <p class="step-description">Login with your Spotify Account to access your music library.</p>
            </div>

            <div class="step">
                <div class="step-number">2</div>
                <h3 class="step-title">Swipe & Discover</h3>
                <p class="step-description">Use our Music Swiper to find new tracks and build your preference profile.</p>
            </div>

            <div class="step">
                <div class="step-number">3</div>
                <h3 class="step-title">Listen & Enjoy</h3>
                <p class="step-description">Play your discovered tracks and create playlists of your favorites.</p>
            </div>
        </div>
    </div>
</section>

<section class="cta-section">
    <div class="container">
        <h2 class="cta-title">Ready to Find Your Next Favorite Song?</h2>
        <p class="cta-description">Join thousands of music lovers discovering new tracks every day with MusicMatch.</p>
        <div class="cta-buttons">
            <?php if (!isset($_SESSION['spotify_access_token'])): ?>
                <a href="/auth/login.php" class="btn spotify-button">
                    <img class="spotify-icon" src="./assets/img/icons/spotify-primary-white.svg" alt="Spotify Logo">
                    <span>Login with Spotify</span>
                </a>
            <?php else: ?>
                <a href="swiper.php" class="btn btn-primary">
                    <img src="./assets/img/icons/swipe.svg" alt="Swipe Icon" class="spotify-icon">
                    <span>Go to Swiper</span>
                </a>
            <?php endif; ?>
        </div>
    </div>
</section>
<script src="./assets/js/smoothscrolling.js"></script>
<script src="./assets/js/animations.js"></script>
<?php include "./templates/footer.php";?>