Use fontawesome for feature card icons as well

Author: leonard84

spock-website/index.html

@@ -87,58 +87,43 @@ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-100" data-
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
             <div data-aos="fade-up" data-aos-delay="100">
                 <div class="feature-card h-full">
-                    <svg viewBox="0 0 24 24">
-                        <rect x="4" y="4" width="16" height="16" rx="2"/>
-                    </svg>
+                    <div><i class="fas fa-receipt spock-blue-text"></i></div>
                     <h3 class="text-xl font-semibold text-gray-100 mb-2">Expressive Specifications</h3>
                     <p class="text-gray-300">Write tests that are easy to read and understand, even for
                         non-programmers.</p>
                 </div>
             </div>
             <div data-aos="fade-up" data-aos-delay="200">
                 <div class="feature-card h-full">
-                    <svg viewBox="0 0 24 24">
-                        <path d="M3 17l6-6 4 4 8-8"/>
-                    </svg>
+                    <div><i class="fas fa-masks-theater spock-blue-text"></i></div>
                     <h3 class="text-xl font-semibold text-gray-100 mb-2">Powerful Mocking</h3>
                     <p class="text-gray-300">Create flexible and powerful mocks and stubs with built-in support.</p>
                 </div>
             </div>
             <div data-aos="fade-up" data-aos-delay="300">
                 <div class="feature-card h-full">
-                    <svg viewBox="0 0 24 24">
-                        <circle cx="12" cy="12" r="10"/>
-                        <path d="M12 6v6l4 2"/>
-                    </svg>
+                    <div><i class="fas fa-vial-circle-check spock-blue-text"></i></div>
                     <h3 class="text-xl font-semibold text-gray-100 mb-2">JUnit Platform</h3>
                     <p class="text-gray-300">Seamless integration with JUnit 5+ and build tools.</p>
                 </div>
             </div>
             <div data-aos="fade-up" data-aos-delay="400">
                 <div class="feature-card h-full">
-                    <svg viewBox="0 0 24 24">
-                        <path d="M3 3h18v6H3zM3 15h18v6H3z"/>
-                        <path d="M9 9v6"/>
-                    </svg>
+                    <div><i class="fas fa-table-cells spock-blue-text"></i></div>
                     <h3 class="text-xl font-semibold text-gray-100 mb-2">Data-Driven Testing</h3>
                     <p class="text-gray-300">Easily run the same test with different sets of data.</p>
                 </div>
             </div>
             <div data-aos="fade-up" data-aos-delay="500">
                 <div class="feature-card h-full">
-                    <svg viewBox="0 0 24 24">
-                        <polygon points="12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2"/>
-                    </svg>
+                    <div><i class="fas fa-star spock-blue-text"></i></div>
                     <h3 class="text-xl font-semibold text-gray-100 mb-2">Groovy DSL</h3>
                     <p class="text-gray-300">Leverage the power and flexibility of the Groovy language.</p>
                 </div>
             </div>
             <div data-aos="fade-up" data-aos-delay="600">
                 <div class="feature-card h-full">
-                    <svg viewBox="0 0 24 24">
-                        <rect x="3" y="3" width="18" height="18" rx="2"/>
-                        <path d="M9 12l2 2 4-4"/>
-                    </svg>
+                    <div><i class="fas fa-circle-check spock-blue-text"></i></div>
                     <h3 class="text-xl font-semibold text-gray-100 mb-2">Built-in Matchers</h3>
                     <p class="text-gray-300">Use a rich set of matchers to verify expectations with clarity.</p>
                 </div>

spock-website/src/icons.ts

@@ -1,9 +1,9 @@
 import { library, dom } from '@fortawesome/fontawesome-svg-core';
-import { faBook, faCode, faLaptopCode, faComments, faCommentDots} from '@fortawesome/free-solid-svg-icons';
+import { faBook, faCode, faLaptopCode, faComments, faCommentDots, faReceipt, faMasksTheater, faVialCircleCheck, faTableCells, faStar, faCircleCheck} from '@fortawesome/free-solid-svg-icons';
 import { faGithub, faStackOverflow, faJava, faXTwitter, faMastodon, faBluesky } from '@fortawesome/free-brands-svg-icons';
 
 // Add icons to the library
-library.add(faGithub, faStackOverflow, faJava, faXTwitter, faMastodon, faBluesky, faBook, faCode, faLaptopCode, faComments, faCommentDots);
+library.add(faGithub, faStackOverflow, faJava, faXTwitter, faMastodon, faBluesky, faBook, faCode, faLaptopCode, faComments, faCommentDots, faReceipt, faMasksTheater, faVialCircleCheck, faTableCells, faStar, faCircleCheck);
 
 // Watch for <i> tags and replace with SVG
 dom.watch();