Budget-App/About.html at master · RuqoomTech/Budget-App · 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html lang="en" data-bs-theme="light">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Learn more about Budget Tracker's mission to simplify personal finance." />
  <meta name="author" content="Omar Aglan" />
  <title>About Us - Budget Tracker</title>

  <!-- Dependencies -->
  <link href="css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">

  <!-- Design System -->
  <link href="css/main.css" rel="stylesheet" />
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4f46e5">
</head>

<body>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark sticky-top">
    <div class="container">
      <a class="navbar-brand d-flex align-items-center gap-2" href="index.html">
        <i class="bi bi-wallet2 fs-4"></i>
        <span>Budget Tracker</span>
      </a>
      <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto gap-lg-3">
          <li class="nav-item"><a class="nav-link fw-semibold" href="index.html">Home</a></li>
          <li class="nav-item"><a class="nav-link fw-semibold" href="Budget.html">Dashboard</a></li>
          <li class="nav-item"><a class="nav-link active fw-semibold" href="About.html">About</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <main>
    <!-- Page Header -->
    <section class="py-5">
      <div class="container text-center">
        <div
          class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 rounded-pill mb-3 border border-primary border-opacity-10">
          Our Mission
        </div>
        <h1 class="display-4 fw-bold mb-3">Simplifying Financial Freedom</h1>
        <p class="lead text-muted mx-auto" style="max-width: 600px;">
          We believe that managing your money shouldn't be a chore. It should be intuitive, private, and empowering.
        </p>
      </div>
    </section>

    <!-- Story Section -->
    <section class="pb-5">
      <div class="container">
        <div class="card border-0 shadow-lg overflow-hidden">
          <div class="row g-0 align-items-center">
            <div class="col-lg-6 p-4 p-lg-5">
              <h2 class="fw-bold mb-4">Why we built this?</h2>
              <p class="text-muted mb-4">
                Traditional finance apps are often cluttered, require sensitive bank connections, or sell your data. We
                wanted to build something different.
              </p>
              <div class="d-flex flex-column gap-3">
                <div class="d-flex align-items-center gap-3">
                  <div class="icon-box bg-success bg-opacity-10 text-success rounded-circle p-2">
                    <i class="bi bi-check-lg"></i>
                  </div>
                  <span><strong>100% Offline Capable:</strong> Works without internet.</span>
                </div>
                <div class="d-flex align-items-center gap-3">
                  <div class="icon-box bg-success bg-opacity-10 text-success rounded-circle p-2">
                    <i class="bi bi-check-lg"></i>
                  </div>
                  <span><strong>Privacy First:</strong> Your data stays in your browser.</span>
                </div>
                <div class="d-flex align-items-center gap-3">
                  <div class="icon-box bg-success bg-opacity-10 text-success rounded-circle p-2">
                    <i class="bi bi-check-lg"></i>
                  </div>
                  <span><strong>Open Source:</strong> Transparent and community-driven.</span>
                </div>
              </div>
            </div>
            <div class="col-lg-6">
              <!-- Using inline background for the image to ensure it covers the area perfectly -->
              <div
                style="background-image: url('img/contBcg-1.jpeg'); background-size: cover; background-position: center; min-height: 400px; height: 100%;">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Core Values / Features Grid -->
    <section class="py-5 bg-light bg-opacity-50">
      <div class="container py-4">
        <div class="row g-4">
          <div class="col-md-4">
            <div class="card h-100 border-0 hover-lift text-center p-4">
              <div class="stat-icon bg-primary bg-opacity-10 text-primary mb-3 mx-auto">
                <i class="bi bi-laptop"></i>
              </div>
              <h5 class="fw-bold">Accessible Design</h5>
              <p class="text-muted small mb-0">Built with modern accessibility standards to ensure everyone can manage
                their finances effectively.</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card h-100 border-0 hover-lift text-center p-4">
              <div class="stat-icon bg-danger bg-opacity-10 text-danger mb-3 mx-auto">
                <i class="bi bi-shield-check"></i>
              </div>
              <h5 class="fw-bold">Zero Data Collection</h5>
              <p class="text-muted small mb-0">We don't track you. No cookies, no analytics, no external servers. Just
                you and your budget.</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card h-100 border-0 hover-lift text-center p-4">
              <div class="stat-icon bg-success bg-opacity-10 text-success mb-3 mx-auto">
                <i class="bi bi-lightning-charge"></i>
              </div>
              <h5 class="fw-bold">Lightning Fast</h5>
              <p class="text-muted small mb-0">Optimized performance using vanilla JavaScript and local storage for
                instant interactions.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- How it works -->
    <section class="py-5">
      <div class="container">
        <div class="text-center mb-5">
          <h2 class="fw-bold">How to get started</h2>
          <p class="text-muted">Three simple steps to financial control.</p>
        </div>

        <div class="row g-4 text-center">
          <div class="col-md-4 position-relative">
            <div class="display-1 fw-bold text-light mb-3" style="font-size: 6rem; line-height: 0.8;">1</div>
            <h5 class="fw-bold">Set a Budget</h5>
            <p class="text-muted small px-4">Define your monthly limit. Use our presets or enter a custom amount to
              guide your spending.</p>
          </div>
          <div class="col-md-4 position-relative">
            <div class="display-1 fw-bold text-light mb-3" style="font-size: 6rem; line-height: 0.8;">2</div>
            <h5 class="fw-bold">Track Expenses</h5>
            <p class="text-muted small px-4">Log every transaction. Categorize them to see exactly where your money is
              going.</p>
          </div>
          <div class="col-md-4 position-relative">
            <div class="display-1 fw-bold text-light mb-3" style="font-size: 6rem; line-height: 0.8;">3</div>
            <h5 class="fw-bold">Analyze & Save</h5>
            <p class="text-muted small px-4">Review your dashboard charts, identify trends, and adjust your habits to
              save more.</p>
          </div>
        </div>

        <div class="text-center mt-5">
          <a href="Budget.html" class="btn btn-primary btn-lg px-5 shadow-lg hover-lift">
            Start Now
          </a>
        </div>
      </div>
    </section>
  </main>

  <!-- Footer -->
  <footer class="py-5 bg-dark text-white mt-auto">
    <div class="container">
      <div class="row gy-4">
        <div class="col-lg-4">
          <a href="#" class="d-flex align-items-center gap-2 text-white text-decoration-none mb-3">
            <i class="bi bi-wallet2 fs-4"></i>
            <span class="fw-bold fs-5">Budget Tracker</span>
          </a>
          <p class="text-secondary">Empowering financial freedom through smart, private, and simple tools.</p>
        </div>
        <div class="col-lg-2 offset-lg-6">
          <h6 class="fw-bold mb-3">Links</h6>
          <ul class="list-unstyled text-secondary">
            <li class="mb-2"><a href="index.html" class="text-decoration-none text-secondary hover-white">Home</a></li>
            <li class="mb-2"><a href="Budget.html" class="text-decoration-none text-secondary hover-white">Dashboard</a>
            </li>
            <li class="mb-2"><a href="About.html" class="text-decoration-none text-secondary hover-white">About Us</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="border-top border-secondary border-opacity-25 pt-4 mt-4 text-center text-secondary small">
        <p class="mb-0">&copy; 2024 Budget Tracker. Open Source Project.</p>
      </div>
    </div>
  </footer>

  <!-- Scripts -->
  <script src="js/jquery-3.7.1.min.js"></script>
  <script src="js/bootstrap.bundle.min.js"></script>
</body>

</html>