opensource/driver.js
3
0
Fork 0
mirror of https://github.com/kamranahmedse/driver.js.git synced 2026-10-30 19:27:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update opensource banner border

Browse Source
This commit is contained in:
Kamran Ahmed
2025-02-03 01:03:29 +00:00
parent d0e57d99b7
commit be9e7e53a3
2 changed files with 85 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/components/Features.astro
+84
View File
@@ -0,0 +1,84 @@
---
import { Earth, Smartphone, Settings, Feather, Code2, Layers, Keyboard } from "lucide-react";
import Container from "./Container.astro";
---
<div class="py-0 mb-16 bg-white">
<Container>
<div class="max-w-screen-lg">
<h2 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-4 md:mb-6">Nothing else like it</h2>
<p class="text-base md:text-xl lg:text-2xl text-black mb-10 md:mb-14 lg:mb-16">
Lightweight with no external dependencies, supports all major browsers and is highly customizable.
</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10 lg:gap-4">
<div class="group bg-yellow-50 p-6 rounded-xl transition-colors">
<div class="flex justify-center items-center mb-4 w-12 h-12 rounded-xl bg-yellow-300 lg:h-14 lg:w-14">
<Earth className="w-6 h-6 text-black lg:w-7 lg:h-7" />
</div>
<h3 class="mb-3 text-xl md:text-2xl font-bold text-black">Browser Support</h3>
<p class="text-gray-600 md:text-lg">
Works in all modern browsers including Chrome, IE9+, Safari, Firefox and Opera
</p>
</div>
<div class="group bg-yellow-50 p-6 rounded-xl transition-colors">
<div class="flex justify-center items-center mb-4 w-12 h-12 rounded-xl bg-yellow-300 lg:h-14 lg:w-14">
<Smartphone className="w-6 h-6 text-black lg:w-7 lg:h-7" />
</div>
<h3 class="mb-3 text-xl md:text-2xl font-bold text-black">Mobile Ready</h3>
<p class="text-gray-600 md:text-lg">Works on desktop, tablets and mobile devices</p>
</div>
<div class="group bg-yellow-50 p-6 rounded-xl transition-colors">
<div class="flex justify-center items-center mb-4 w-12 h-12 rounded-xl bg-yellow-300 lg:h-14 lg:w-14">
<Settings className="w-6 h-6 text-black lg:w-7 lg:h-7" />
</div>
<h3 class="mb-3 text-xl md:text-2xl font-bold text-black">Highly Customizable</h3>
<p class="text-gray-600 md:text-lg">Powerful API that allows you to customize it to your needs</p>
</div>
<div class="group bg-yellow-50 p-6 rounded-xl transition-colors">
<div class="flex justify-center items-center mb-4 w-12 h-12 rounded-xl bg-yellow-300 lg:h-14 lg:w-14">
<Feather className="w-6 h-6 text-black lg:w-7 lg:h-7" />
</div>
<h3 class="mb-3 text-xl md:text-2xl font-bold text-black">Lightweight</h3>
<p class="text-gray-600 md:text-lg">
Only 5KB minified, compared to other libraries which are typically >12KB minified
</p>
</div>
<div class="group bg-yellow-50 p-6 rounded-xl transition-colors">
<div class="flex justify-center items-center mb-4 w-12 h-12 rounded-xl bg-yellow-300 lg:h-14 lg:w-14">
<Code2 className="w-6 h-6 text-black lg:w-7 lg:h-7" />
</div>
<h3 class="mb-3 text-xl md:text-2xl font-bold text-black">No Dependencies</h3>
<p class="text-gray-600 md:text-lg">Simple to use with absolutely no external dependencies</p>
</div>
<div class="group bg-yellow-50 p-6 rounded-xl transition-colors">
<div class="flex justify-center items-center mb-4 w-12 h-12 rounded-xl bg-yellow-300 lg:h-14 lg:w-14">
<Layers className="w-6 h-6 text-black lg:w-7 lg:h-7" />
</div>
<h3 class="mb-3 text-xl md:text-2xl font-bold text-black">Feature Rich</h3>
<p class="text-gray-600 md:text-lg">Create powerful feature introductions for your web applications</p>
</div>
<div class="group bg-yellow-50 p-6 rounded-xl transition-colors">
<div class="flex justify-center items-center mb-4 w-12 h-12 rounded-xl bg-yellow-300 lg:h-14 lg:w-14">
<span class="w-6 h-6 text-black lg:w-7 lg:h-7 font-black">MIT</span>
</div>
<h3 class="mb-3 text-xl md:text-2xl font-bold text-black">MIT License</h3>
<p class="text-gray-600 md:text-lg">Free for both personal and commercial use</p>
</div>
<div class="group bg-yellow-50 p-6 rounded-xl transition-colors">
<div class="flex justify-center items-center mb-4 w-12 h-12 rounded-xl bg-yellow-300 lg:h-14 lg:w-14">
<Keyboard className="w-6 h-6 text-black lg:w-7 lg:h-7" />
</div>
<h3 class="mb-3 text-xl md:text-2xl font-bold text-black">Keyboard Control</h3>
<p class="text-gray-600 md:text-lg">All actions can be controlled via keyboard</p>
</div>
<div class="group bg-yellow-50 p-6 rounded-xl transition-colors">
<div class="flex justify-center items-center mb-4 w-12 h-12 rounded-xl bg-yellow-300 lg:h-14 lg:w-14">
<span class="w-6 h-6 text-black lg:w-7 lg:h-7 font-black">ALL</span>
</div>
<h3 class="mb-3 text-xl md:text-2xl font-bold text-black">Highlight Anything</h3>
<p class="text-gray-600 md:text-lg">Highlight any element on the page</p>
</div>
</div>
</Container>
</div>
docs/src/components/OpenSourceLove.astro
+1 -1
View File
@@ -4,7 +4,7 @@ import { getFormattedStars } from "../lib/github";
const starCount = getFormattedStars('kamranahmedse/driver.js');
---
<div class="py-10 md:py-12 lg:py-24 bg-white text-black border-t-2 border-t-black">
<div class="py-10 md:py-12 lg:py-24 bg-white text-black border-t">
<Container>
<div class="flex items-center">
<div>