add servies page with content and a typing words feature to contact page

components/services-feature.tsx

@@ -0,0 +1,97 @@
+import './services-feature.css';
+
+export type Service = {
+  title: string;
+  description: string;
+};
+
+const services: Service[] = [
+  {
+    title: 'Custom Web Design',
+    description:
+      'Tailored layouts and branding that reflect your business and engage your audience from the first visit.',
+  },
+  {
+    title: 'Web Development',
+    description:
+      'Fast, reliable sites built with modern frameworks—scalable architecture that grows with your company.',
+  },
+  {
+    title: 'E-commerce',
+    description:
+      'Online stores with smooth checkout, inventory management, and payment integrations that convert.',
+  },
+  {
+    title: 'Performance & SEO',
+    description:
+      'Optimised load times, accessibility, and search visibility so customers can find and use your site.',
+  },
+  {
+    title: 'Hosting & Maintenance',
+    description:
+      'Secure hosting, updates, backups, and monitoring so your site stays online and up to date.',
+  },
+  {
+    title: 'APIs & Integrations',
+    description:
+      'Connect CRMs, booking systems, analytics, and third-party tools into one cohesive workflow.',
+  },
+];
+
+function ServiceFeatureCard({ title, 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>
+        </div>
+        <h3 className="service-feature-title">{title}</h3>
+        <p className="service-feature-description">{description}</p>
+      </div>
+    </article>
+  );
+}
+
+type ServicesFeatureProps = {
+  heading?: string;
+  subheading?: string;
+  items?: Service[];
+};
+
+export default function ServicesFeature({
+  heading = 'What we offer',
+  subheading = 'End-to-end web solutions for businesses of every size.',
+  items = services,
+}: ServicesFeatureProps) {
+  return (
+    <section className="services-feature w-full">
+      <header className="mb-10 max-w-2xl">
+        <h2 className="mb-3 text-4xl font-bold tracking-tight text-heading md:text-5xl">
+          {heading}
+        </h2>
+        <p className="text-lg text-body lg:text-xl">{subheading}</p>
+      </header>
+      <ul className="services-feature-grid">
+        {items.map((service) => (
+          <li key={service.title} className="list-none">
+            <ServiceFeatureCard {...service} />
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}