File size: 4,958 Bytes
be9e7e5 |
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 |
---
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>
|