Add footer

docs/src/pages/index.astro

@@ -77,4 +77,48 @@ import { ExampleButton } from "../components/examples/ExampleButton";
     </Container>
   </div>
 
+  <div class="py-32 bg-white text-black">
+    <Container>
+      <div class="flex items-center">
+        <div>
+          <h2 class="text-6xl font-bold mb-4">Loved by Thousands</h2>
+          <p class="text-2xl text-black mb-8">Driver.js is an <span class="font-bold">MIT licensed</span> opensource
+            project and is loved and used by
+            thousands of developers and companies around the world.</p>
+
+          <div class="flex gap-3">
+            <a href="#"
+               class="flex items-center font-bold text-2xl rounded-xl py-3 px-5 bg-yellow-300 border-yellow-300 hover:bg-yellow-400">
+              <span class="mr-3 inline-flex items-center"><img src="/github.svg" alt="Hero Image" class="h-7 mr-2" /> 14.7k</span>
+              GitHub Stars
+            </a>
+            <a href="#"
+               class="bg-black text-white flex items-center font-bold text-2xl border-4 border-black rounded-xl py-3 px-5 hover:bg-gray-800">
+              Start Using Driver.js
+            </a>
+          </div>
+        </div>
+        <img src="/thumbs.svg" alt="Hero Image" class="h-36 ml-16" />
+      </div>
+    </Container>
+  </div>
+
+  <div class="py-8 bg-black text-white">
+    <Container>
+      <p class="text-lg text-white text-center">
+        MIT Licensed &copy; 2023 <span class="mx-3">&middot;</span>
+        <a href="#" class="">
+          Docs
+        </a>
+        <a href="#" class="ml-5">
+          GitHub
+          <img src="/arrow.svg" class="h-3 inline-block ml-2" alt="GitHub" />
+        </a>
+        <a href="#" class=" ml-5">
+          Twitter
+          <img src="/arrow.svg" class="h-3 inline-block ml-2" alt="GitHub" />
+        </a>
+      </p>
+    </Container>
+  </div>
 </BaseLayout>