src/app/page.tsx

@@ -9,7 +9,7 @@ import FaqBase from '@/components/sections/faq/FaqBase';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import { Shield, ArrowRight, Star, Zap, CheckCircle } from 'lucide-react';
+import { Zap, CheckCircle } from 'lucide-react';
 
 export default function HomePage() {
   const navItems = [
@@ -27,7 +27,7 @@ export default function HomePage() {
         <HeroOverlay title="Transform Your Future" description="Innovating tomorrow with state-of-the-art solutions today." buttons={[{ text: "Get Started", href: "/contact" }]} />
       </div>
       <div id="features" data-section="features">
-        <FeatureCardEight title="Powerful Features" description="Everything you need to scale." textboxLayout="default" features={[{ title: "Fast", description: "High performance" }, { title: "Secure", description: "Top protection" }]} useInvertedBackground={false} />
+        <FeatureCardEight title="Powerful Features" description="Everything you need to scale." textboxLayout="default" features={[{ title: "Fast", description: "High performance", imageSrc: "https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=800&auto=format&fit=crop" }, { title: "Secure", description: "Top protection", imageSrc: "https://images.unsplash.com/photo-1563986768609-322da13575f3?q=80&w=800&auto=format&fit=crop" }]} useInvertedBackground={false} />
       </div>
       <div id="status" data-section="status">
         <MetricCardOne title="Performance Stats" description="Key metrics that drive our growth." metrics={[{ id: "1", value: "99%", title: "Uptime", description: "Continuous service", icon: Zap }, { id: "2", value: "2M+", title: "Users", description: "Community reach", icon: CheckCircle }]} gridVariant="uniform-all-items-equal" animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />