Slow overhaul of the landing page

.idea/.gitignore

@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

.idea/inspectionProfiles/profiles_settings.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>

.idea/jsLibraryMappings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <file url="file://$PROJECT_DIR$" libraries="{bootstrap}" />
+  </component>
+</project>

.idea/landing.iml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="Flask">
+    <option name="enabled" value="true" />
+  </component>
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.venv" />
+    </content>
+    <orderEntry type="jdk" jdkName="Python 3.11 (landing)" jdkType="Python SDK" />
+    <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="bootstrap" level="application" />
+  </component>
+  <component name="TemplatesService">
+    <option name="TEMPLATE_CONFIGURATION" value="Jinja2" />
+    <option name="TEMPLATE_FOLDERS">
+      <list>
+        <option value="$MODULE_DIR$/templates" />
+      </list>
+    </option>
+  </component>
+</module>

.idea/misc.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Black">
+    <option name="sdkName" value="Python 3.11 (landing)" />
+  </component>
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.11 (landing)" project-jdk-type="Python SDK" />
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/landing.iml" filepath="$PROJECT_DIR$/.idea/landing.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

static/css/old.css

@@ -0,0 +1,78 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+    height: 100vh;
+    width: 100vw;
+}
+
+html {
+    background: linear-gradient(#1e4e9c, #9198e5);
+    height: 100%;
+    width: 100%;
+}
+
+
+.container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 600px;
+    padding: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    text-align: center;
+    color: #fff;
+}
+
+.coming-soon {
+    text-align: center;
+    max-width: 600px;
+    padding: 20px;
+}
+
+.logo img {
+    width: 150px;
+    margin-bottom: 20px;
+}
+
+h1 {
+    font-size: 2.5rem;
+    margin: 10px 0;
+}
+
+p {
+    font-size: 1.2rem;
+    margin: 10px 0 20px;
+}
+
+.subscription {
+    margin-top: 20px;
+}
+
+.subscription input {
+    padding: 10px;
+    font-size: 1rem;
+    width: calc(100% - 110px);
+    border: none;
+    border-radius: 10px;
+    outline: none;
+}
+
+.subscription button {
+    padding: 10px 20px;
+    font-size: 1rem;
+    background: #ff4500;
+    border: none;
+    border-radius: 10px;
+    color: #fff;
+    cursor: pointer;
+    outline: none;
+    margin-top: 10px;
+}
+
+.subscription button:hover {
+    background: #e03e00;
+}

static/css/styles.css

@@ -1,78 +1,174 @@
 body {
+    font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
-    font-family: Arial, sans-serif;
-    height: 100vh;
-    width: 100vw;
 }
 
-html {
+header {
-    background: linear-gradient(#1e4e9c, #9198e5);
+    background-color: #fff;
-    height: 100%;
+    padding: 10px 20px;
+    text-align: center;
+    font-size: 24px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    margin: 5px auto;
+}
+
+header nav {
+    display: flex;
+    justify-content: normal;
+    align-items: center;
+}
+
+header nav a {
+    text-decoration: none;
+    color: #000;
+    margin-left: 20px;
+    font-size: 18px;
+}
+
+.hero-section-1 {
+    background-image: linear-gradient(to bottom, #337cf2, #fff);
+    padding: 100px 20px;
     width: 100%;
 }
 
+.hero-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
 
-.container {
+.hero-illustration {
-    position: absolute;
+    width: 40%;
-    top: 50%;
+    height: 500px;
-    left: 50%;
+    background-size: cover;
-    transform: translate(-50%, -50%);
+    background-position: center;
-    max-width: 600px;
-    padding: 20px;
-    background-color: rgba(0, 0, 0, 0.5);
     border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    text-align: center;
-    color: #fff;
 }
 
-.coming-soon {
+.hero-illustration img {
-    text-align: center;
+    width: 100%;
-    max-width: 600px;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 30px;
+}
+
+.hero-text {
+    width: 60%;
     padding: 20px;
 }
 
-.logo img {
+.hero-text h1 {
-    width: 150px;
+    font-size: 48px;
-    margin-bottom: 20px;
+    font-weight: bold;
+    color: #000;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-h1 {
+.hero-text p {
-    font-size: 2.5rem;
+    font-size: 18px;
-    margin: 10px 0;
+    color: #000;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-p {
+.hero-section-2 {
-    font-size: 1.2rem;
+    background-color: #337cf2;
-    margin: 10px 0 20px;
+    padding: 100px;
+    text-align: center;
+    width: 100%;
 }
-
+.hero-section-2 form {
-.subscription {
-    margin-top: 20px;
-}
-
-.subscription input {
     padding: 10px;
     font-size: 1rem;
     width: calc(100% - 110px);
-    border: none;
-    border-radius: 10px;
-    outline: none;
 }
 
-.subscription button {
+.hero-section-2 input {
+    padding: 10px;
+    width: 15%;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.hero-section-2 button {
     padding: 10px 20px;
-    font-size: 1rem;
-    background: #ff4500;
     border: none;
-    border-radius: 10px;
+    border-radius: 5px;
-    color: #fff;
     cursor: pointer;
-    outline: none;
-    margin-top: 10px;
 }
 
-.subscription button:hover {
+.hero-section-3 {
-    background: #e03e00;
+    width: 100%;
-}
+}
+
+.hero-section-3 h2 {
+    margin-top: 0;
+    text-align: center;
+}
+
+.feature-cards {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.feature-card {
+    background-color: #fff;
+    padding: 20px;
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+    margin: 20px;
+    width: 30%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.feature-card h3 {
+    margin-top: 0;
+    text-align: center;
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.feature-card ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+}
+
+.feature-card li {
+    margin-bottom: 10px;
+    font-size: 16px;
+    color: #666;
+}
+
+.feature-card li::before {
+    content: "\2022";
+    font-size: 16px;
+    color: #337cf2;
+    margin-right: 10px;
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    width: 100%;
+    margin: 0 auto;
+}
+
+footer {
+    background-color: #333;
+    color: #fff;
+    padding: 10px;
+    text-align: center;
+    clear: both;
+}

static/js/main.js

@@ -16,3 +16,12 @@ document.getElementById("notify-button").addEventListener("click", async () => {
         alert("Please enter a valid email.");
     }
 });
+
+window.addEventListener('scroll', function() {
+    var footerHeight = document.querySelector('footer').offsetHeight;
+    if (window.scrollY + window.innerHeight >= document.body.offsetHeight - footerHeight) {
+            document.querySelector('footer').style.display = 'block';
+        } else {
+            document.querySelector('footer').style.display = 'none';
+        }
+});

templates/index.html

@@ -3,19 +3,99 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>RideAware Landing Page</title>
+    <title>RideAware</title>
     <link rel="stylesheet" href="/static/css/styles.css">
 </head>
 <body>
-    <div class="container">
+    <header>
-        <h1>RideAware</h1>
+        <nav>
-        <h2>Coming Soon!</h2>
+            <span>Ride</span><span style="color: #1e4e9c;">Aware</span>
-        <p>Be the first to know when we launch. Subscribe below:</p>
+            <a href="#">Features</a>
-        <div class="subscription">
+            <a href="#">Pricing</a>
-            <input id="email-input" type="email" placeholder="Enter your email" required />
+        </nav>
-            <button id="notify-button">Notify Me</button>
+    </header>
-        </div>
+    <main>
-    </div>
+        <section class="hero-section-1">
-    <script src="/static/js/main.js"></script>
+            <div class="hero-content">
+                <div class="hero-illustration">
+                    <img src="/static/assets/undraw_indoor-bike_9lxj.svg" alt="Cycling Illustration">
+                </div>
+                <div class="hero-text">
+                    <h1>Train with Focus. Ride with Awareness</h1>
+                    <br>
+                    <p>RideAware is a comprehensive cycling training platform designed to help riders stay aware of their performance, progress, and goals.</p>
+                </div>
+            </div>
+        </section>
+
+        <section class="hero-section-2">
+            <h2>Get notified when we’re launching</h2>
+            <p>Sign up to receive updates and special offers as we prepare to launch.</p>
+
+            <div class="subscription">
+                <input id="email-input" type="email" placeholder="Enter your email" required />
+                <button id="notify-button">Notify Me</button>
+            </div>
+
+
+        </section>
+        <section class="hero-section-3">
+            <h2>Features</h2>
+            <div class="feature-cards">
+                <div class="feature-card">
+                    <h3>Workout Planning</h3>
+                    <ul>
+                        <li>Customizable Training Plans: Allow users to create customized training plans based on their goals and fitness level.</li>
+                        <li>Workout Scheduling: Provide a feature to schedule workouts and set reminders.</li>
+                        <li>Goal Setting: Allow users to set and track their fitness goals.</li>
+                    </ul>
+                </div>
+                <div class="feature-card">
+                    <h3>Workout Tracking</h3>
+                    <ul>
+                        <li>Workout Logging: Allow users to log their workouts, including exercises, sets, reps, and weight.</li>
+                        <li>Data Analysis: Provide tools to analyze user data, including charts, graphs, and statistics.</li>
+                        <li>Progress Tracking: Allow users to track their progress over time.</li>
+                    </ul>
+                </div>
+                <div class="feature-card">
+                    <h3>Training and Coaching</h3>
+                    <ul>
+                        <li>Coaching and Guidance: Provide coaching and guidance to help users achieve their fitness goals.</li>
+                        <li>Virtual Training Rides: Offer immersive virtual training rides to boost users' cycling performance.</li>
+                        <li>Structured Workouts: Offer structured workouts to help users improve their fitness and performance.</li>
+                    </ul>
+                </div>
+                <div class="feature-card">
+                    <h3>Nutrition and Recovery</h3>
+                    <ul>
+                        <li>Nutrition Planning: Provide tools to help users plan and track their nutrition.</li>
+                        <li>Recovery Planning: Offer resources and tools to help users plan and track their recovery.</li>
+                        <li>Injury Prevention and Management: Provide resources and tools to help users prevent and manage injuries.</li>
+                    </ul>
+                </div>
+                <div class="feature-card">
+                    <h3>Social and Community</h3>
+                    <ul>
+                        <li>Social Sharing: Allow users to share their workouts and progress on social media.</li>
+                        <li>Community Forum: Create a community forum where users can connect with each other and share their experiences.</li>
+                        <li>Leaderboards: Provide leaderboards to encourage competition and motivation.</li>
+                    </ul>
+                </div>
+                <div class="feature-card">
+                    <h3>Integration and Data</h3>
+                    <ul>
+                        <li>Integration with Wearable Devices: Integrate with wearable devices to track user activity and health metrics.</li>
+                        <li>Integration with Music Services: Integrate with music services to provide a more engaging workout experience.</li>
+                        <li>Data Import/Export: Allow users to import and export their data to other platforms.</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+    </main>
+    <footer>
+        Copyright &copy; 2025 RideAware. All rights reserved.
+    </footer>
+     <script src="/static/js/main.js"></script>
 </body>
 </html>