Skip to content

Commit 44432d0

Browse files
usmonovshohruxmirzousmonovshohruxmirzo
committed
refactor(features): replace emojis with font awesome icons
1 parent ce03218 commit 44432d0

File tree

1 file changed

+49
-45
lines changed

1 file changed

+49
-45
lines changed

‎src/components/sections/Features.astro‎

Lines changed: 49 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,17 @@
1+
---
2+
import {
3+
FaCode,
4+
FaBolt,
5+
FaCompass,
6+
FaSearch,
7+
FaDesktop,
8+
FaPalette,
9+
FaTools,
10+
FaBoxOpen,
11+
FaCogs
12+
} from "react-icons/fa";
13+
---
14+
115
<section id="features" class="py-16 px-6 pt-0 text-white min-h-screen flex items-center justify-center">
216
<div class="max-w-7xl mx-auto">
317
<div class="text-center mb-12">
@@ -7,68 +21,58 @@
721
</p>
822
</div>
923
<div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
10-
<article class="group relative p-10 bg-[#FC485033] backdrop-blur-xl rounded-xl border border-white/10 hover:border-[#FC485050] transition-all duration-300 w-full">
11-
<div class="text-5xl mb-8 text-[#FC4850]">🚀</div>
24+
<article class="group relative p-6 bg-[#222222]/80 backdrop-blur-xl rounded-xl border border-white/10 hover:border-[#FC485050] transition-all duration-300 w-full">
25+
<div class="text-5xl mb-8 text-[#FC4850]"><FaCode /></div>
1226
<h3 class="text-3xl font-semibold mb-4 text-white">Preconfigured LSP Support</h3>
13-
<p class="text-gray-300 text-lg">
14-
Seamless support for TypeScript, Python, C#, HTML, CSS, and more.
15-
</p>
27+
<p class="text-gray-300 text-lg">Seamless support for TypeScript, Python, C#, HTML, CSS, and more.</p>
1628
</article>
17-
<article class="group relative p-10 bg-[#FC485033] backdrop-blur-xl rounded-xl border border-white/10 hover:border-[#FC485050] transition-all duration-300 w-full">
18-
<div class="text-5xl mb-8 text-[#FC4850]">⚡</div>
29+
30+
<article class="group relative p-6 bg-[#222222]/80 backdrop-blur-xl rounded-xl border border-white/10 hover:border-[#FC485050] transition-all duration-300 w-full">
31+
<div class="text-5xl mb-8 text-[#FC4850]"><FaBolt /></div>
1932
<h3 class="text-3xl font-semibold mb-4 text-white">Autocompletion & Snippets</h3>
20-
<p class="text-gray-300 text-lg">
21-
Boost productivity with nvim-cmp and friendly-snippets.
22-
</p>
33+
<p class="text-gray-300 text-lg">Boost productivity with nvim-cmp and friendly-snippets.</p>
2334
</article>
24-
<article class="group relative p-10 bg-[#FC485033] backdrop-blur-xl rounded-xl border border-white/10 hover:border-[#FC485050] transition-all duration-300 w-full">
25-
<div class="text-5xl mb-8 text-[#FC4850]">🧭</div>
35+
36+
<article class="group relative p-6 bg-[#222222]/80 backdrop-blur-xl rounded-xl border border-white/10 hover:border-[#FC485050] transition-all duration-300 w-full">
37+
<div class="text-5xl mb-8 text-[#FC4850]"><FaCompass /></div>
2638
<h3 class="text-3xl font-semibold mb-4 text-white">File Explorer</h3>
27-
<p class="text-gray-300 text-lg">
28-
Navigate files effortlessly with integrated nvim-tree.
29-
</p>
39+
<p class="text-gray-300 text-lg">Navigate files effortlessly with integrated nvim-tree.</p>
3040
</article>
31-
<article class="group relative p-10 bg-[#FC485033] backdrop-blur-xl rounded-xl border border-white/10 hover:border-[#FC485050] transition-all duration-300 w-full">
32-
<div class="text-5xl mb-8 text-[#FC4850]">🔍</div>
41+
42+
<article class="group relative p-6 bg-[#222222]/80 backdrop-blur-xl rounded-xl border border-white/10 hover:border-[#FC485050] transition-all duration-300 w-full">
43+
<div class="text-5xl mb-8 text-[#FC4850]"><FaSearch /></div>
3344
<h3 class="text-3xl font-semibold mb-4 text-white">Fuzzy Finder</h3>
34-
<p class="text-gray-300 text-lg">
35-
Swiftly locate files and symbols with telescope.nvim.
36-
</p>
45+
<p class="text-gray-300 text-lg">Swiftly locate files and symbols with telescope.nvim.</p>
3746
</article>
38-
<article class="group relative p-10 bg-[#FC485033] backdrop-blur-xl rounded-xl border border-white/10 hover:border-[#FC485050] transition-all duration-300 w-full">
39-
<div class="text-5xl mb-8 text-[#FC4850]">🖥️</div>
47+
48+
<article class="group relative p-6 bg-[#222222]/80 backdrop-blur-xl rounded-xl border border-white/10 hover:border-[#FC485050] transition-all duration-300 w-full">
49+
<div class="text-5xl mb-8 text-[#FC4850]"><FaDesktop /></div>
4050
<h3 class="text-3xl font-semibold mb-4 text-white">Beautiful Dashboard</h3>
41-
<p class="text-gray-300 text-lg">
42-
Access projects and recent files with ease.
43-
</p>
51+
<p class="text-gray-300 text-lg">Access projects and recent files with ease.</p>
4452
</article>
45-
<article class="group relative p-10 bg-[#FC485033] backdrop-blur-xl rounded-xl border border-white/10 hover:border-[#FC485050] transition-all duration-300 w-full">
46-
<div class="text-5xl mb-8 text-[#FC4850]">🎨</div>
53+
54+
<article class="group relative p-6 bg-[#222222]/80 backdrop-blur-xl rounded-xl border border-white/10 hover:border-[#FC485050] transition-all duration-300 w-full">
55+
<div class="text-5xl mb-8 text-[#FC4850]"><FaPalette /></div>
4756
<h3 class="text-3xl font-semibold mb-4 text-white">20+ Themes</h3>
48-
<p class="text-gray-300 text-lg">
49-
Modern, clean UI with full transparency support.
50-
</p>
57+
<p class="text-gray-300 text-lg">Modern, clean UI with full transparency support.</p>
5158
</article>
52-
<article class="group relative p-10 bg-[#FC485033] backdrop-blur-xl rounded-xl border border-white/10 hover:border-[#FC485050] transition-all duration-300 w-full">
53-
<div class="text-5xl mb-8 text-[#FC4850]">🔧</div>
59+
60+
<article class="group relative p-6 bg-[#222222]/80 backdrop-blur-xl rounded-xl border border-white/10 hover:border-[#FC485050] transition-all duration-300 w-full">
61+
<div class="text-5xl mb-8 text-[#FC4850]"><FaTools /></div>
5462
<h3 class="text-3xl font-semibold mb-4 text-white">Lazy Loading Plugins</h3>
55-
<p class="text-gray-300 text-lg">
56-
Optimize performance with on-demand plugin loading.
57-
</p>
63+
<p class="text-gray-300 text-lg">Optimize performance with on-demand plugin loading.</p>
5864
</article>
59-
<article class="group relative p-10 bg-[#FC485033] backdrop-blur-xl rounded-xl border border-white/10 hover:border-[#FC485050] transition-all duration-300 w-full">
60-
<div class="text-5xl mb-8 text-[#FC4850]">📦</div>
65+
66+
<article class="group relative p-6 bg-[#222222]/80 backdrop-blur-xl rounded-xl border border-white/10 hover:border-[#FC485050] transition-all duration-300 w-full">
67+
<div class="text-5xl mb-8 text-[#FC4850]"><FaBoxOpen /></div>
6168
<h3 class="text-3xl font-semibold mb-4 text-white">Git Integration</h3>
62-
<p class="text-gray-300 text-lg">
63-
Streamlined version control with lazygit.
64-
</p>
69+
<p class="text-gray-300 text-lg">Streamlined version control with lazygit.</p>
6570
</article>
66-
<article class="group relative p-10 bg-[#FC485033] backdrop-blur-xl rounded-xl border border-white/10 hover:border-[#FC485050] transition-all duration-300 w-full">
67-
<div class="text-5xl mb-8 text-[#FC4850]">🛠️</div>
71+
72+
<article class="group relative p-6 bg-[#222222]/80 backdrop-blur-xl rounded-xl border border-white/10 hover:border-[#FC485050] transition-all duration-300 w-full">
73+
<div class="text-5xl mb-8 text-[#FC4850]"><FaCogs /></div>
6874
<h3 class="text-3xl font-semibold mb-4 text-white">Fully Customizable</h3>
69-
<p class="text-gray-300 text-lg">
70-
Tailor settings, plugins, and keybindings to your needs.
71-
</p>
75+
<p class="text-gray-300 text-lg">Tailor settings, plugins, and keybindings to your needs.</p>
7276
</article>
7377
</div>
7478
</div>

0 commit comments

Comments
 (0)