src/App.tsx

@@ -5,8 +5,8 @@ import FeaturesComparison from '@/components/sections/features/FeaturesCompariso
 import FooterSimpleMedia from '@/components/sections/footer/FooterSimpleMedia';
 import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
+import RecentWorks from '@/components/sections/works/RecentWorks';
 import NavbarCentered from '@/components/ui/NavbarCentered';
-import logoImg from "@/assets/logo.svg";
 import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
 import { Droplets, Flame, Wrench } from "lucide-react";
 import { useEffect } from "react";
@@ -21,10 +21,10 @@ export default function App() {
   }, []);
 
   return (
-    <div className="app-container">
+    <div className="app-container relative z-10 isolate">
   <div id="nav" data-section="nav">
       <NavbarCentered
-      logo={<img src={logoImg} alt="Apex Plumbing" className="h-8 w-auto" />}
+      logo={<img src="/logo.png" alt="Apex Plumbing" className="h-8 w-auto" />}
       navItems={[
         {
           name: "Services",
@@ -34,6 +34,10 @@ export default function App() {
           name: "About",
           href: "#about",
         },
+        {
+          name: "Works",
+          href: "#works",
+        },
         {
           name: "FAQ",
           href: "#faq",
@@ -148,6 +152,10 @@ export default function App() {
     />
   </div>
 
+  <div id="works" data-section="works">
+    <RecentWorks />
+  </div>
+
   <div id="testimonials" data-section="testimonials">
       <TestimonialRatingCards
       tag="Happy Clients"

src/components/sections/works/RecentWorks.tsx

@@ -0,0 +1,60 @@
+import TextAnimation from "@/components/ui/TextAnimation";
+
+const works = [
+  {
+    imageSrc: "http://img.b2bpic.net/free-photo/plumber-at-work-in-a-bathroom-plumbing-repair-service-assemble-and-install-concept_169016-14295.jpg",
+    alt: "Plumber at work in a bathroom",
+  },
+  {
+    imageSrc: "http://img.b2bpic.net/free-photo/plumber-installing-new-water-tap-kitchen_169016-14300.jpg",
+    alt: "Plumber installing new water tap in kitchen",
+  },
+  {
+    imageSrc: "http://img.b2bpic.net/free-photo/plumber-working-on-a-kitchen-sink_169016-14298.jpg",
+    alt: "Plumber working on a kitchen sink",
+  },
+  {
+    imageSrc: "http://img.b2bpic.net/free-photo/plumber-fixing-a-sink-in-the-bathroom_169016-14297.jpg",
+    alt: "Plumber fixing a sink in the bathroom",
+  },
+];
+
+const RecentWorks = () => {
+  return (
+    <section aria-label="Recent works section" className="py-20">
+      <div className="flex flex-col gap-8 mx-auto w-content-width">
+        <div className="flex flex-col items-center gap-3 md:gap-2">
+          <span className="px-3 py-1 text-sm card rounded">Our Portfolio</span>
+
+          <TextAnimation
+            text="Our Recent Works"
+            variant="slide-up"
+            tag="h2"
+            className="text-6xl font-medium text-center text-balance"
+          />
+
+          <TextAnimation
+            text="A showcase of our quality plumbing solutions and satisfied customers."
+            variant="slide-up"
+            tag="p"
+            className="md:max-w-6/10 text-lg leading-tight text-center"
+          />
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
+          {works.map((work, index) => (
+            <div key={index} className="overflow-hidden rounded card h-80 group">
+              <img
+                src={work.imageSrc}
+                alt={work.alt}
+                className="object-cover w-full h-full transition-transform duration-300 ease-in-out group-hover:scale-105"
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default RecentWorks;

src/index.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=${inter.variable}+${openSans.variable}:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap');
 @import "tailwindcss";
 @import "./styles/masks.css";
 @import "./styles/animations.css";
@@ -88,7 +88,7 @@
   --color-background-accent: var(--background-accent);
 
   /* Fonts */
-  --font-sans: '${inter.variable} ${openSans.variable}', sans-serif;
+  --font-sans: 'Inter', 'Open Sans', sans-serif;
   --font-mono: monospace;
 
   /* Border Radius */
@@ -134,33 +134,18 @@ html {
 
 body {
   margin: 0;
-  background-color: var(--background);
   color: var(--foreground);
-  font-family: '${inter.variable} ${openSans.variable}', sans-serif;
+  font-family: 'Inter', 'Open Sans', sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
   overscroll-behavior-y: none;
+  background: linear-gradient(60deg, var(--background) 0%, var(--background-accent) 50%, var(--background) 100%);
+  background-size: 200% 200%;
+  animation: moveGradient 15s ease infinite;
 }
 
 .app-container {
-  position: relative;
-  isolation: isolate;
-}
-
-.app-container::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  z-index: -1;
-  background: linear-gradient(
-    60deg,
-    var(--background) 0%,
-    var(--accent) 50%,
-    var(--background) 100%
-  );
-  background-size: 400% 400%;
-  animation: moveGradient 15s ease infinite;
 }
 
 h1,
@@ -169,7 +154,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: '${inter.variable} ${openSans.variable}', sans-serif;
+  font-family: 'Inter', 'Open Sans', sans-serif;
 }
 
 button {