kamalsystem/about.html at main · KAMAL3887/kamalsystem · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Easy Park</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
  <style>
    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f0f0f0;
    }

    .about-section h2 {
      background: 50% 100% / 50% 50% no-repeat
                  radial-gradient(ellipse at bottom, #63d9e1, transparent, transparent);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-size: 4vw;
      font-family: "Source Sans Pro", sans-serif;
      animation: reveal 3000ms ease-in-out forwards 200ms,
                 glow 2500ms linear infinite 2000ms;
      position: relative;
      display: inline-block;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
    }

    @keyframes reveal {
      80% {
        letter-spacing: 8px;
      }
      100% {
        background-size: 300% 300%;
      }
    }

    @keyframes glow {
      40% {
        text-shadow: 0 0 8px #fff;
      }
    }

    .about-section p {
      font-size: 1.1em;
      color: #f9f9f9;
      max-width: 700px;
      margin: 0 auto 40px;
      line-height: 1.6;
    }

    .features {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      overflow: visible; /* Removed scrollbar */
    }


    .feature-box {
      flex: 1 0 22%;
      min-width: 250px;
      background-color: white;
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.6s ease;
      text-align: center;
    }

    .feature-box.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .feature-box:hover {
      transform: scale(1.03);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .feature-box h3 {
      color: #e63946;
      margin-bottom: 10px;
    }

    .feature-box p {
      color: #666;
      font-size: 0.95em;
    }
  </style>
</head>
<body>
  <!-- Hero Section -->
  <header class="relative h-screen bg-cover bg-center" style="background-image: url('img/main.jpg')">
    <div class="bg-black bg-opacity-60 h-full flex flex-col justify-between">
      <!-- Navigation -->
      <nav class="flex justify-between items-center p-6 text-white">
        <h1 class="text-2xl font-bold">EASYY <span class="text-red-500">PARK</span></h1>
        <ul class="flex space-x-6">
          <li><a href="index.html">Home</a></li>
          <li><a href="bookings.html">My Booking</a></li>
          <li><a href="testimonials.html">Testimonials</a></li>
          <li class="text-red-500 border-b-2 border-red-500"><a href="about.html">About us</a></li>
        </ul>
        <button onclick="window.location.href='contactus.html'" class="bg-red-500 px-4 py-2 rounded-full text-white">
          Contact us
        </button>
      </nav>

      <!-- About Section -->
      <section id="about-us" class="about-section flex flex-col items-center justify-center text-center flex-grow">
        <div class="max-w-6xl mx-auto px-4">
          <h2>About Us</h2>
          <p>
            We are committed to making parking easier, more affordable, and hassle-free.
            With our platform, you can search, compare, and book parking spaces in seconds.
            Whether you're traveling, shopping, or working, we've got a spot for you.
          </p>

          <div class="features">
            <div class="feature-box">
              <h3>✔ Easy Booking</h3>
              <p>Book a parking space in just a few clicks.</p>
            </div>
            <div class="feature-box">
              <h3>✔ Best Prices</h3>
              <p>Compare deals and save up to 60% on parking.</p>
            </div>
            <div class="feature-box">
              <h3>✔ Secure Locations</h3>
              <p>All listed parking spots are verified and safe.</p>
            </div>
            <div class="feature-box">
              <h3>✔ 24/7 Support</h3>
              <p>We’re here to help whenever you need us.</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  </header>

  <script>
    // Fade in feature boxes on scroll
    const boxes = document.querySelectorAll('.feature-box');

    const onScroll = () => {
      boxes.forEach(box => {
        const boxTop = box.getBoundingClientRect().top;
        const windowHeight = window.innerHeight;
        if (boxTop < windowHeight - 100) {
          box.classList.add('visible');
        }
      });
    };

    window.addEventListener('scroll', onScroll);
    window.addEventListener('load', onScroll);
  </script>
</body>
</html>