wayfabrik.github.io/index.html at main · TechEruption/wayfabrik.github.io · 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
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WayFabrik</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

</head>
<body>
    <header>
        <h2 class="logo">WayFabrik</h2>
        <input type="checkbox" id="menu-toggle">
        <label for="menu-toggle" class="menu-icon">
            <i class="fas fa-bars"></i>
            <i class="fas fa-times"></i>
        </label>
        <nav class="navigationbar">
            <a class="on" href="/">Home</a>
            <a id="toggleSelect" href="pages/devlog/">Devlog</a>
            <a href="pages/about/">About</a>
            <a href="pages/contact/">Contact Us</a>
            <a href="#waiting-list" class="on nav-ctg">DOWNLOAD</a>
        </nav>
    </header>


    <div class="hero">
        <div class="hero-content">
            <div class="hero-text-container">
                <p class="hero-text">Navigate Smarter, Travel Faster!</p>
                <p class="hero-smol-text">Find the best routes, avoid traffic, and reach your destination effortlessly with real-time AI-powered navigation.</p>
                <div class="hero-buttons">
                    <a href="#waiting-list" class="btn download-btn">Download Now</a>
                    <a href="#learn" class="btn learn-btn">Learn More</a>
                </div>
            </div>
        </div>
        <img src="assets/mockup.png" alt="mockup" class="hero-image">
    </div>


    <section class="features" id="learn">
        <h2>Key Features (What Makes Us Unique?)</h2>
        <div class="features-container">
            <div class="feature-card">
                <img src="assets/smart-route.jpeg" alt="Smart Route Optimization">
                <h3>🛣 Smart Route Optimization</h3>
                <p>A* shortest routes to get you there faster.</p>
            </div>
            <div class="feature-card">
                <img src="assets/traffic.jpg" alt="Live Traffic Alerts">
                <h3>🚦 Live Traffic Alerts</h3>
                <p>Avoid congested areas with real-time updates.</p>
            </div>
            <div class="feature-card">
                <img src="assets/petrol.jpeg" alt="Nearby Facilities Finder">
                <h3>⛽ Nearby Facilities Finder</h3>
                <p>Find petrol pumps, charging stations, and more.</p>
            </div>
            <div class="feature-card">
                <img src="assets/reroutes.jpg" alt="Adaptive Route Adjustments">
                <h3>🔄 Adaptive Route Adjustments</h3>
                <p>Reroutes based on real-time conditions.</p>
            </div>
            <div class="feature-card">
                <img src="assets/Crowdsourcing.jpg" alt="Crowdsourced & Verified Data">
                <h3>📍 Crowdsourced & Verified Data</h3>
                <p>User-powered accuracy for the best experience.</p>
            </div>
        </div>
    </section>


    <h1 class="how-works">HOW IT WORKS</h1>
    <section class="roadmap how-works">
        <div class="line"></div>
        <div class="step">
            <div class="step-icon"><img src="assets/waypoint.png" alt="waypoint"></div>
            <div class="step-content">Enter Your Destination – Type or speak your location.</div>
        </div>
        <div class="step">
            <div class="step-icon"><img src="assets/waypoint.png" alt="waypoint"></div>
            <div class="step-content">Get Real-Time Routes – AI suggests the fastest, safest path.</div>
        </div>
        <div class="step">
            <div class="step-icon"><img src="assets/waypoint.png" alt="waypoint"></div>
            <div class="step-content">Live Updates – See traffic, road conditions, and nearby stops.</div>
        </div>
        <div class="step">
            <div class="step-icon"><img src="assets/waypoint.png" alt="waypoint"></div>
            <div class="step-content">Navigate & Optimize – Adaptive routing based on real-time data.</div>
        </div>
        <div class="step">
            <div class="step-icon"><img src="assets/waypoint.png" alt="waypoint"></div>
            <div class="step-content">Reach Destination Faster – Arrive efficiently with the best route.</div>
        </div>

    </section>

    <section class="waiting-list" id="waiting-list">
        <h2>Join the Waiting List</h2>
        <p>Be the first to experience WayFabrik! Sign up now.</p>
        <a href="/pages/waitinglist/" target="_blank" class="waiting-list-btn">Join Now</a>
    </section>

    <footer>
        <div class="footer-container">
            <p>&copy; 2025 WayFabrik. All rights reserved.</p>
            <nav class="footer-nav">
                <a href="#">Privacy Policy</a>
                <a href="#">Terms of Service</a>
                <a href="#">Support</a>
            </nav>
            <div class="social-links">
                <a href="https://www.instagram.com/wayfabrik/" target="_blank">
                    <i class="fab fa-instagram"></i>
                </a>
                <a href="https://github.com/wayfabrik" target="_blank">
                    <i class="fab fa-github"></i>
                </a>
            </div>
        </div>
    </footer>


    <script src="script.js"></script>
</body>
</html>