added favicon and populated template text with real text

components/services-feature.tsx

@@ -1,63 +1,57 @@
 import './services-feature.css';
+import { ShoppingCart, Workflow, Server, CodeXml, Plug, Globe } from 'lucide-react';
 
 export type Service = {
   title: string;
+  icon: React.ReactNode;
   description: string;
 };
 
 const services: Service[] = [
   {
-    title: 'Custom Web Design',
+    title: 'Company Automation',
+    icon: <Workflow />,
     description:
-      'Tailored layouts and branding that reflect your business and engage your audience from the first visit.',
+      'Streamline operations and boost efficiency with custom automation solutions tailored to your business needs.',
   },
   {
     title: 'Web Development',
+    icon: <CodeXml />,
     description:
       'Fast, reliable sites built with modern frameworks—scalable architecture that grows with your company.',
   },
   {
     title: 'E-commerce',
+    icon: <ShoppingCart />,
     description:
-      'Online stores with smooth checkout, inventory management, and payment integrations that convert.',
+      'Online stores with smooth checkout, inventory management, and payment integrations that convert. Options inclide Shopify, WooCommerce, and custom solutions.',
   },
   {
-    title: 'Performance & SEO',
+    title: 'Custom Plugins & Extensions',
+    icon: <Plug />,
     description:
-      'Optimised load times, accessibility, and search visibility so customers can find and use your site.',
+      'Extend your website’s functionality with custom plugins and extensions tailored to your specific needs.',
   },
   {
     title: 'Hosting & Maintenance',
+    icon: <Server />,
     description:
-      'Secure hosting, updates, backups, and monitoring so your site stays online and up to date.',
+      'Secure hosting, updates, emails, backups, and monitoring so your site stays online and up to date.',
   },
   {
     title: 'APIs & Integrations',
+    icon: <Globe />,
     description:
       'Connect CRMs, booking systems, analytics, and third-party tools into one cohesive workflow.',
   },
 ];
 
-function ServiceFeatureCard({ title, description }: Service) {
+function ServiceFeatureCard({ title, icon, description }: Service) {
   return (
     <article className="service-feature">
       <div className="service-feature-body">
         <div className="service-feature-icon" aria-hidden="true">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <path
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
-            />
-          </svg>
+          {icon}
         </div>
         <h3 className="service-feature-title">{title}</h3>
         <p className="service-feature-description">{description}</p>
@@ -74,7 +68,7 @@ type ServicesFeatureProps = {
 
 export default function ServicesFeature({
   heading = 'What we offer',
-  subheading = 'End-to-end web solutions for businesses of every size.',
+  subheading = 'End-to-end web solutions for small to medium-sized businesses ',
   items = services,
 }: ServicesFeatureProps) {
   return (