Update site to include updates about service subscriptions

components/sections/FeaturesGrid.tsx

@@ -10,6 +10,7 @@ import {
   Settings,
   Server,
   Users,
+  RefreshCw,
 } from 'lucide-react';
 
 const features = [
@@ -61,6 +62,12 @@ const features = [
     icon: Users,
     color: 'from-cyan-500 to-cyan-600',
   },
+  {
+    name: 'Service Subscriptions',
+    description: 'Auto-subscribe to domain services with dynamic synchronization.',
+    icon: RefreshCw,
+    color: 'from-orange-500 to-orange-600',
+  },
 ];
 
 export default function FeaturesGrid() {
@@ -79,6 +86,7 @@ export default function FeaturesGrid() {
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
           {features.map((feature, index) => {
             const Icon = feature.icon;
+            const isLastItem = index === features.length - 1;
 
             return (
               <motion.div
@@ -87,7 +95,7 @@ export default function FeaturesGrid() {
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true }}
                 transition={{ duration: 0.5, delay: index * 0.1 }}
-                className="relative group"
+                className={`relative group ${isLastItem ? 'lg:col-start-2 lg:col-span-2' : ''}`}
               >
                 <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 hover:border-blue-500 dark:hover:border-blue-500 transition-all hover:shadow-lg h-full">
                   <div className={`inline-flex p-3 rounded-lg bg-gradient-to-r ${feature.color} mb-4`}>