diff --git a/bun.lock b/bun.lock
index ace049f..a5dc5d9 100644
--- a/bun.lock
+++ b/bun.lock
@@ -11,12 +11,16 @@
         "@fortawesome/free-regular-svg-icons": "^6.7.2",
         "@fortawesome/free-solid-svg-icons": "^6.7.2",
         "@fortawesome/react-fontawesome": "^0.2.6",
+        "@radix-ui/react-slot": "^1.3.0",
         "@reduxjs/toolkit": "^2.12.0",
         "clsx": "^2.1.1",
         "date-fns": "^4.4.0",
+        "framer-motion": "^12.42.2",
+        "lucide-react": "^1.25.0",
         "react": "^19.2.7",
         "react-confetti-explosion": "^3.0.3",
         "react-dom": "^19.2.7",
+        "react-helmet-async": "^3.0.0",
         "react-redux": "^9.3.0",
         "react-router-dom": "^7.18.1",
         "tailwind-merge": "^3.6.0",
@@ -197,6 +201,10 @@
 
     "@pkgr/core": ["@pkgr/core@0.3.6", "", {}, "sha512-SEeaJLb3qBNF/OaXnaR1NmmBbFYk1zC0ZH/52fATcRPLFg/p791YrcyFFy44Bo9sLaGuSuLp5Q6axbb/O+v/RA=="],
 
+    "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-rYOP8OMnuuPMQF1uhPVlGNcCDlkokKqGFE3JcxFViIkAXP7EvFWUliJAstrapypaBLJNHbZL6jGhbVDGTwmVhA=="],
+
+    "@radix-ui/react-slot": ["@radix-ui/react-slot@1.3.0", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-MojKku4U/miO8Av4Dkb+ctMAQx7JmY96LmtDQlAarCRtd7rN52QCSzBF+XAvr5S6coSVj9HEPBgHAHKEJVk/WA=="],
+
     "@reduxjs/toolkit": ["@reduxjs/toolkit@2.12.0", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@standard-schema/utils": "^0.3.0", "immer": "^11.0.0", "redux": "^5.0.1", "redux-thunk": "^3.1.0", "reselect": "^5.1.0" }, "peerDependencies": { "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" }, "optionalPeers": ["react", "react-redux"] }, "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw=="],
 
     "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-beta.27", "", {}, "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA=="],
@@ -511,6 +519,8 @@
 
     "flatted": ["flatted@3.4.2", "", {}, "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA=="],
 
+    "framer-motion": ["framer-motion@12.42.2", "", { "dependencies": { "motion-dom": "^12.42.2", "motion-utils": "^12.39.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-5XY9luDiu0oHfHBjpDthFMh0ES+122w6p/papSJBweMkO8Sn+PW2QaEgRblQBpWFnuvZS5qvarpt/hO2pjGmnw=="],
+
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 
     "gensync": ["gensync@1.0.0-beta.2", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="],
@@ -531,6 +541,8 @@
 
     "imurmurhash": ["imurmurhash@0.1.4", "", {}, "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="],
 
+    "invariant": ["invariant@2.2.4", "", { "dependencies": { "loose-envify": "^1.0.0" } }, "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA=="],
+
     "is-arrayish": ["is-arrayish@0.2.1", "", {}, "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="],
 
     "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
@@ -601,6 +613,8 @@
 
     "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
 
+    "lucide-react": ["lucide-react@1.25.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-/mdJTRbiwcLOQ1NZZK1amZF9rIZyvO18D6r9TngE6TG1NmqHgFuT4eE7Xrkm9UsXMbBJD1NlfwHVltCDWHrOTw=="],
+
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
     "merge2": ["merge2@1.4.1", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],
@@ -611,6 +625,10 @@
 
     "mlly": ["mlly@1.8.2", "", { "dependencies": { "acorn": "^8.16.0", "pathe": "^2.0.3", "pkg-types": "^1.3.1", "ufo": "^1.6.3" } }, "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA=="],
 
+    "motion-dom": ["motion-dom@12.42.2", "", { "dependencies": { "motion-utils": "^12.39.0" } }, "sha512-5gIMWLp/PycBtJRJWRgjxke5n8dlvkSn2DrYW+tr3XcqAZY1xZh6BJyooJXCM8wdfM7wfMjkBJNLge1CKPUIRA=="],
+
+    "motion-utils": ["motion-utils@12.39.0", "", {}, "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ=="],
+
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
     "nanoid": ["nanoid@3.3.15", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA=="],
@@ -669,6 +687,10 @@
 
     "react-dom": ["react-dom@19.2.7", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.7" } }, "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ=="],
 
+    "react-fast-compare": ["react-fast-compare@3.2.2", "", {}, "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="],
+
+    "react-helmet-async": ["react-helmet-async@3.0.0", "", { "dependencies": { "invariant": "^2.2.4", "react-fast-compare": "^3.2.2", "shallowequal": "^1.1.0" }, "peerDependencies": { "react": "^16.6.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-nA3IEZfXiclgrz4KLxAhqJqIfFDuvzQwlKwpdmzZIuC1KNSghDEIXmyU0TKtbM+NafnkICcwx8CECFrZ/sL/1w=="],
+
     "react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
     "react-redux": ["react-redux@9.3.0", "", { "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { "@types/react": "^18.2.25 || ^19", "react": "^18.0 || ^19", "redux": "^5.0.0" }, "optionalPeers": ["@types/react", "redux"] }, "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g=="],
@@ -699,6 +721,8 @@
 
     "set-cookie-parser": ["set-cookie-parser@2.7.2", "", {}, "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw=="],
 
+    "shallowequal": ["shallowequal@1.1.0", "", {}, "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="],
+
     "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="],
 
     "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],
diff --git a/index.html b/index.html
index 5b0d039..a26c04a 100644
--- a/index.html
+++ b/index.html
@@ -2,13 +2,17 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Lakshmikanta Patra | FrontendFixer [&hearts;]</title>
+    <meta name="theme-color" content="#14b8a6" />
+
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/site.webmanifest" />
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="src/main.tsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
index ab777a0..1a9291f 100644
--- a/package.json
+++ b/package.json
@@ -21,12 +21,16 @@
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.6",
+    "@radix-ui/react-slot": "^1.3.0",
     "@reduxjs/toolkit": "^2.12.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
+    "framer-motion": "^12.42.2",
+    "lucide-react": "^1.25.0",
     "react": "^19.2.7",
     "react-confetti-explosion": "^3.0.3",
     "react-dom": "^19.2.7",
+    "react-helmet-async": "^3.0.0",
     "react-redux": "^9.3.0",
     "react-router-dom": "^7.18.1",
     "tailwind-merge": "^3.6.0",
diff --git a/public/Lakshmikanta.pdf b/public/Lakshmikanta.pdf
deleted file mode 100644
index cdffd35..0000000
Binary files a/public/Lakshmikanta.pdf and /dev/null differ
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
new file mode 100644
index 0000000..f459fcc
Binary files /dev/null and b/public/android-chrome-192x192.png differ
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
new file mode 100644
index 0000000..f71def1
Binary files /dev/null and b/public/android-chrome-512x512.png differ
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000..affa9a8
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/demo.webp b/public/demo.webp
deleted file mode 100644
index 7d791df..0000000
Binary files a/public/demo.webp and /dev/null differ
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
new file mode 100644
index 0000000..d5a15e3
Binary files /dev/null and b/public/favicon-16x16.png differ
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
new file mode 100644
index 0000000..9624341
Binary files /dev/null and b/public/favicon-32x32.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..ccad1ed
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/og-image.png b/public/og-image.png
new file mode 100644
index 0000000..1922960
Binary files /dev/null and b/public/og-image.png differ
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000..4f20ecd
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://frontendfixer.dev/sitemap.xml
diff --git a/public/site.webmanifest b/public/site.webmanifest
new file mode 100644
index 0000000..7d8262d
--- /dev/null
+++ b/public/site.webmanifest
@@ -0,0 +1,21 @@
+{
+  "name": "FrontendFixer",
+  "short_name": "FrontendFixer",
+  "description": "Full-Stack Developer for SaaS & MVPs",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#09090B",
+  "theme_color": "#14b8a6",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/public/sitemap.xml b/public/sitemap.xml
new file mode 100644
index 0000000..af18137
--- /dev/null
+++ b/public/sitemap.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://frontendfixer.dev/</loc>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+</urlset>
diff --git a/public/twitter-image.png b/public/twitter-image.png
new file mode 100644
index 0000000..1922960
Binary files /dev/null and b/public/twitter-image.png differ
diff --git a/src/App.tsx b/src/App.tsx
index 04789dd..7e70868 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,18 +1,20 @@
 import { Route, Routes } from 'react-router-dom';
 
-import Weeding from '#routes/Weeding';
+import { SEO } from '#/components/common/SEO';
+import Navigation from '#routes/Navigation.tsx';
 
 import Home from './routes/Home';
-import Navigation from './routes/navigation';
 
 const App = () => {
   return (
-    <Routes>
-      <Route path="/" element={<Navigation />}>
-        <Route index element={<Home />} />
-      </Route>
-      <Route path="weeding" element={<Weeding />} />
-    </Routes>
+    <>
+      <SEO />
+      <Routes>
+        <Route path="/" element={<Navigation />}>
+          <Route index element={<Home />} />
+        </Route>
+      </Routes>
+    </>
   );
 };
 
diff --git a/src/assets/images/portfolio/hero-dashboard.webp b/src/assets/images/portfolio/hero-dashboard.webp
new file mode 100644
index 0000000..0da2b4f
Binary files /dev/null and b/src/assets/images/portfolio/hero-dashboard.webp differ
diff --git a/src/assets/images/portfolio/profile-placeholder.webp b/src/assets/images/portfolio/profile-placeholder.webp
new file mode 100644
index 0000000..f13c16a
Binary files /dev/null and b/src/assets/images/portfolio/profile-placeholder.webp differ
diff --git a/src/assets/images/portfolio/vaultdrive-dashboard.webp b/src/assets/images/portfolio/vaultdrive-dashboard.webp
new file mode 100644
index 0000000..960c99d
Binary files /dev/null and b/src/assets/images/portfolio/vaultdrive-dashboard.webp differ
diff --git a/src/assets/images/portfolio/workspace-placeholder.png b/src/assets/images/portfolio/workspace-placeholder.png
new file mode 100644
index 0000000..835478c
Binary files /dev/null and b/src/assets/images/portfolio/workspace-placeholder.png differ
diff --git a/src/components/AltHeroSection.tsx b/src/components/AltHeroSection.tsx
deleted file mode 100644
index d1229bf..0000000
--- a/src/components/AltHeroSection.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import heroImage from '#assets/images/hero-alt.webp';
-// import HeroIllustration from '#assets/images/hero-illustration.webp';
-
-const AltHeroSection = () => {
-  return (
-    <div className="flex flex-col items-center justify-center">
-      <div className="my-16 flex flex-col items-center px-3 pb-6 sm:mt-20 sm:mb-20">
-        <h1 className="animate-text from-primary-600 to-primary-600 mb-16 bg-linear-to-r via-rose-500 bg-clip-text text-center text-5xl font-black text-transparent md:w-3/4 md:text-7xl lg:text-9xl">
-          FullStack Web Developer
-        </h1>
-        <p className="text-dark-900 max-w-[52ch] text-center text-2xl dark:text-white">
-          Transforming Ideas into Immersive User Experiences with the Power of{' '}
-          <strong>NodeJs</strong> and <strong>PHP</strong>
-        </p>
-      </div>
-      <div>
-        <img
-          src={heroImage}
-          alt="image of three people discussing their coding skill and development "
-          aria-label="image of three people discussing their coding skill and development "
-          className="mx-auto w-full md:w-2/3 lg:w-1/2"
-        />
-      </div>
-    </div>
-  );
-};
-
-export default AltHeroSection;
diff --git a/src/components/BackToTop.tsx b/src/components/BackToTop.tsx
deleted file mode 100644
index 120967f..0000000
--- a/src/components/BackToTop.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { faArrowCircleUp } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useEffect, useState } from 'react';
-
-const BackToTop = () => {
-  const [visible, setVisible] = useState(false);
-  const [top, setTop] = useState(0);
-
-  const handleClick = () => {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
-
-  useEffect(() => {
-    const intersectionObserver = new IntersectionObserver(entries => {
-      setTop(entries[0].boundingClientRect.top);
-      if (top <= 0) {
-        return setVisible(true);
-      } else setVisible(false);
-    });
-    window.addEventListener('scroll', () => {
-      intersectionObserver.observe(document.querySelectorAll('section')[1]);
-    });
-  }, [top]);
-
-  return (
-    <div
-      className="animate-slideLeft fixed right-0 bottom-6 z-50 w-14 rounded-l-full bg-red-500 shadow-lg"
-      hidden={!visible}
-    >
-      <button
-        onClick={handleClick}
-        className="animate-fadeIn grid h-10 w-10 place-content-center rounded-full p-2 text-2xl text-white"
-      >
-        <FontAwesomeIcon icon={faArrowCircleUp} />
-      </button>
-    </div>
-  );
-};
-
-export default BackToTop;
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
deleted file mode 100644
index 0b678a7..0000000
--- a/src/components/Button.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { ReactNode } from 'react';
-
-import { cn } from '#/lib/cn';
-
-type ButtonType = {
-  type?: 'button' | 'submit' | 'reset' | undefined;
-  fullWidth?: boolean;
-  children?: ReactNode;
-  onClick?: () => void;
-  buttonType?: 'secondary' | 'inverted' | undefined;
-  disabled?: boolean;
-  className?: string;
-};
-
-const Button = ({
-  type,
-  fullWidth,
-  children,
-  onClick,
-  disabled,
-  buttonType,
-  className,
-}: ButtonType) => {
-  return (
-    <button
-      type={type}
-      onClick={onClick}
-      disabled={disabled}
-      className={cn(
-        `transition-color disabled:bg-dark-500 disabled:text-white-full flex items-center justify-center gap-4 rounded-lg px-5 py-2 font-medium duration-300`,
-        fullWidth && 'w-full',
-        buttonType === 'secondary' &&
-          'bg-secondary hover:bg-secondary-500 text-white',
-        buttonType === 'inverted' &&
-          'border-primary text-dark hover:bg-primary border-2 hover:text-white',
-        buttonType !== 'secondary' &&
-          'bg-primary hover:bg-primary-600 dark:bg-primary-500 dark:text-dark-800 dark:hover:bg-primary-400 text-white',
-        className,
-      )}
-    >
-      {children}
-    </button>
-  );
-};
-
-export default Button;
diff --git a/src/components/CVDownloadButton.tsx b/src/components/CVDownloadButton.tsx
deleted file mode 100644
index e557127..0000000
--- a/src/components/CVDownloadButton.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import Button from './Button';
-
-const downloadFile = () => {
-  const element = document.createElement('a');
-  element.href = '/Lakshmikanta.pdf';
-  element.download = 'Lakshmikanta.pdf';
-  document.body.appendChild(element);
-  element.click();
-};
-
-const CVDownloadButton = ({
-  buttonType,
-}: {
-  buttonType?: 'secondary' | 'inverted' | undefined;
-}) => {
-  return (
-    <Button onClick={downloadFile} buttonType={buttonType}>
-      Download CV
-    </Button>
-  );
-};
-
-export default CVDownloadButton;
diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx
deleted file mode 100644
index 8447a14..0000000
--- a/src/components/Contact.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useSelector } from 'react-redux';
-
-import connectImg from '#assets/images/connect1.svg';
-import { RootState } from '#store/store';
-
-import ContactForm from './ContactForm';
-import MessageSent from './MessageSent';
-
-const Contact = () => {
-  const { form } = useSelector((state: RootState) => state);
-
-  return (
-    <div className="grid grid-cols-1 sm:grid-cols-2">
-      <div className="flex items-center">
-        <img
-          src={connectImg}
-          alt=""
-          className="mx-auto h-64 w-64 sm:h-96 sm:w-96"
-        />
-      </div>
-      <div className="bg-secondary/40 rounded-xl sm:max-w-lg">
-        {form.status !== 'completed' ? <ContactForm /> : <MessageSent />}
-      </div>
-    </div>
-  );
-};
-
-export default Contact;
diff --git a/src/components/ContactCapsule.tsx b/src/components/ContactCapsule.tsx
deleted file mode 100644
index 5cfb8a8..0000000
--- a/src/components/ContactCapsule.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-const ContactCapsule = () => {
-  return (
-    <div className="bg-secondary flex items-center justify-center rounded-2xl p-10 shadow-md">
-      <h2 className="text-center font-serif text-4xl font-bold text-white drop-shadow-md lg:text-6xl">
-        Get in touch with me
-      </h2>
-    </div>
-  );
-};
-
-export default ContactCapsule;
diff --git a/src/components/ContactForm.tsx b/src/components/ContactForm.tsx
deleted file mode 100644
index 802efa0..0000000
--- a/src/components/ContactForm.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import emailjs from '@emailjs/browser';
-import { faPaperPlane } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { ChangeEvent, FormEvent, useRef, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import validator from 'validator';
-
-import { cn } from '#/lib/cn';
-import { setFormData, setFormStatus } from '#store/reducer/FormSlice';
-import { AppDispatch, RootState } from '#store/store';
-
-import Button from './Button';
-import Spinner from './Spinner';
-
-const ContactForm = () => {
-  const initialState = { name: '', email: '', message: '' };
-  const [inputs, setInputs] = useState(initialState);
-  const formEl = useRef<HTMLFormElement>(null);
-
-  const { form } = useSelector((state: RootState) => state);
-  const dispatch: AppDispatch = useDispatch();
-
-  const errors: { name: string; errorMessage: string }[] = [];
-  const validationSchema = [
-    {
-      name: 'name',
-      valid: validator.isLength(inputs.name, { min: 1 }),
-      error: 'Name must be between 4-20 characters',
-    },
-    {
-      name: 'email',
-      valid: validator.isEmail(inputs.email),
-      error: 'Enter valid email',
-    },
-    {
-      name: 'message',
-      valid: validator.isLength(inputs.message, { min: 20 }),
-      error: 'Message must be at least 20 characters',
-    },
-  ];
-  validationSchema.forEach(check => {
-    if (!check.valid) {
-      return errors.push({ name: check.name, errorMessage: check.error });
-    }
-    errors.filter(err => err.name === check.name);
-  });
-
-  const handleChange = (
-    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    setInputs({ ...inputs, [e.target.name]: e.target.value });
-  };
-
-  const handelSubmit = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    if (errors.length > 0) return;
-    dispatch(setFormData(inputs));
-    dispatch(setFormStatus('loading'));
-    if (formEl.current == null) throw new Error();
-
-    const res = await emailjs.sendForm(
-      'service_qdjdol9',
-      'template_lobv7nq',
-      formEl.current,
-      'G0MWsjYi9pbxnAwfJ',
-    );
-    if (res.status === 200) {
-      return dispatch(setFormStatus('completed'));
-    }
-    return dispatch(setFormStatus('rejected'));
-  };
-
-  return (
-    <form
-      ref={formEl}
-      className="flex flex-col gap-4 px-4 py-8"
-      onSubmit={handelSubmit}
-    >
-      <div className="input__group">
-        <input
-          type="text"
-          id="name"
-          value={inputs.name}
-          name="name"
-          onChange={handleChange}
-          required
-        />
-        <label
-          htmlFor="name"
-          className={cn(inputs.name.length > 0 && 'active')}
-        >
-          Enter your Name
-        </label>
-      </div>
-      <div className="input__group">
-        <input
-          type="email"
-          name="email"
-          id="email"
-          value={inputs.email}
-          onChange={handleChange}
-          required
-        />
-        <label
-          htmlFor="email"
-          className={cn(inputs.email.length > 0 && 'active')}
-        >
-          Enter Your Email
-        </label>
-      </div>
-      <div className="input__group">
-        {!validator.isLength(inputs.message, { min: 20 }) ? (
-          <span className="pointer-events-none absolute right-2 bottom-1 text-[12px] text-red-400">
-            Message should be at least 20 characters
-          </span>
-        ) : (
-          ''
-        )}
-        <textarea
-          name="message"
-          id="message"
-          cols={30}
-          rows={5}
-          value={inputs.message}
-          onChange={handleChange}
-          required
-        />
-        <label
-          htmlFor="message"
-          className={cn(inputs.message.length > 0 && 'active')}
-        >
-          Message
-        </label>
-      </div>
-      {form.status === 'rejected' ? (
-        <span className="animate-slideUp -mt-6 block text-center text-sm font-medium text-red-700">
-          Network error. Please try again!
-        </span>
-      ) : (
-        ''
-      )}
-      <Button fullWidth buttonType="secondary">
-        {form.status === 'loading' ? (
-          <Spinner size={6} />
-        ) : (
-          <>
-            <FontAwesomeIcon icon={faPaperPlane} />
-            <span>Message</span>
-          </>
-        )}
-      </Button>
-    </form>
-  );
-};
-
-export default ContactForm;
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
deleted file mode 100644
index cd0dada..0000000
--- a/src/components/Container.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { ReactNode } from 'react';
-
-import { cn } from '#/lib/cn';
-
-const Container = ({
-  children,
-  fullWidth,
-}: {
-  children: ReactNode;
-  fullWidth?: boolean;
-}) => {
-  return (
-    <div
-      className={cn(
-        `max-w-360`,
-        fullWidth && 'w-full',
-        !fullWidth && 'w-[96%]',
-        `mx-auto`,
-      )}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default Container;
diff --git a/src/components/CountDown.tsx b/src/components/CountDown.tsx
deleted file mode 100644
index 004adca..0000000
--- a/src/components/CountDown.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Duration } from 'date-fns';
-
-// Helper function to format numbers with leading zeros (e.g., 5 -> 05)
-const formatTime = (time: number | undefined) => {
-  return time && time < 10 ? `0${time}` : (time ?? 0);
-};
-
-// Main Countdown component
-const Countdown = ({ duration }: { duration: Duration }) => {
-  return (
-    <div className="p-3">
-      <div className="grid grid-cols-[repeat(3,minmax(100px,1fr))] gap-4 text-center">
-        <div className="transform rounded-xl bg-purple-800 p-4 shadow-md transition-transform duration-200 hover:-translate-y-1">
-          <div className="text-7xl font-bold text-yellow-300">
-            {formatTime(duration.years ?? 0)}
-          </div>
-          <div className="text-lg text-gray-300">Years</div>
-        </div>
-
-        <div className="transform rounded-xl bg-purple-800 p-4 shadow-md transition-transform duration-200 hover:-translate-y-1">
-          <div className="text-7xl font-bold text-blue-300">
-            {formatTime(duration.months ?? 0)}
-          </div>
-          <div className="text-lg text-gray-300">Months</div>
-        </div>
-
-        <div className="transform rounded-xl bg-purple-800 p-4 shadow-md transition-transform duration-200 hover:-translate-y-1">
-          <div className="text-7xl font-bold text-green-300">
-            {formatTime(duration.days)}
-          </div>
-          <div className="text-lg text-gray-300">Days</div>
-        </div>
-      </div>
-    </div>
-  );
-};
-export default Countdown;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
deleted file mode 100644
index 4f36e59..0000000
--- a/src/components/Footer.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import Logo from './Logo';
-import SocialLinks from './SocialLinks';
-
-const Footer = () => {
-  return (
-    <div className="flex flex-col items-center justify-center gap-4">
-      <div className="flex flex-col items-center gap-10">
-        <Logo large variant="dark" />
-
-        <p className="max-w-sm text-center font-serif text-xl text-gray-300">
-          Transforming Ideas into Immersive User Experiences with the Power of
-          Web Development
-        </p>
-
-        <SocialLinks inverted />
-      </div>
-      <div className="flex flex-col items-center gap-1">
-        <p className="text-white">
-          Made with <span className="text-xl text-red-600">&#9829;</span> by{' '}
-          <a
-            href="https://github.com/frontendfixer"
-            className="underline hover:text-blue-400"
-          >
-            Lakshmikanta
-          </a>
-        </p>
-        <p className="font-sm text-gray-500">&copy; All right reserved 2024</p>
-      </div>
-    </div>
-  );
-};
-
-export default Footer;
diff --git a/src/components/GlassLaptopPanel.tsx b/src/components/GlassLaptopPanel.tsx
new file mode 100644
index 0000000..5504a85
--- /dev/null
+++ b/src/components/GlassLaptopPanel.tsx
@@ -0,0 +1,42 @@
+import { cn } from '#lib/utils';
+
+interface Props {
+  image: string;
+  alt: string;
+}
+
+export function GlassLaptopPanel({ image, alt }: Props) {
+  return (
+    <div className="relative">
+      {/* Background Glow */}
+      <div className="bg-accent-primary/20 absolute inset-0 -z-10 scale-90 rounded-full blur-[120px]" />
+
+      <div
+        className={cn(
+          'group',
+          'border-border bg-surface/80 overflow-hidden rounded-3xl border',
+          'shadow-[0_20px_80px_rgba(0,0,0,0.45)]',
+          'transition-all duration-500 hover:-translate-y-1',
+        )}
+      >
+        {/* Window Bar */}
+        <div className="border-border flex h-11 items-center gap-2 border-b px-5">
+          <span className="h-3 w-3 rounded-full bg-red-500/70" />
+          <span className="h-3 w-3 rounded-full bg-yellow-500/70" />
+          <span className="h-3 w-3 rounded-full bg-green-500/70" />
+        </div>
+
+        <div className="aspect-16/10 overflow-hidden">
+          <img
+            src={image}
+            alt={alt}
+            loading="eager"
+            className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"
+          />
+        </div>
+
+        <div className="pointer-events-none absolute inset-0 rounded-3xl ring-1 ring-white/5" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ImageModal.tsx b/src/components/ImageModal.tsx
deleted file mode 100644
index ba3f74b..0000000
--- a/src/components/ImageModal.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { faGithub } from '@fortawesome/free-brands-svg-icons';
-import { faClose, faEye } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-import { ProjectType } from '#data/Projects';
-
-const ImageModal = ({
-  onClick,
-  project,
-}: {
-  onClick: () => void;
-  project: ProjectType;
-}) => {
-  return (
-    <>
-      <div className="fixed inset-0 h-screen w-screen bg-black/50 backdrop-blur-[2px]" />
-      <div className="dark:bg-dark-500 fixed top-1/2 left-1/2 z-10 w-[90%] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white px-2 py-6 md:w-4/5 md:px-4 lg:w-2/5">
-        <div className="relative grid grid-cols-1 gap-4">
-          <FontAwesomeIcon
-            icon={faClose}
-            className="bg-dark-900 dark:text-dark-900 absolute -top-9 -right-6 h-8 w-8 cursor-pointer rounded-full p-1 text-white md:-right-8 dark:bg-white"
-            onClick={onClick}
-          />
-          <h2 className="border-b p-2 font-serif text-xl font-bold">
-            {project.title}
-          </h2>
-          <img
-            src={project.image}
-            alt={project.title}
-            className="h-full max-w-full rounded-lg object-cover"
-          />
-          <div className="grid grid-cols-2 gap-5">
-            <a
-              href={project.url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center justify-center gap-2 rounded-md bg-blue-600 py-2 text-sm font-medium text-white transition-colors duration-300 ease-in-out hover:bg-blue-400"
-            >
-              <FontAwesomeIcon icon={faEye} />
-              <span>See Live</span>
-            </a>
-            <a
-              href={project.repo}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="bg-dark-900 hover:bg-dark-700 flex items-center justify-center gap-2 rounded-md py-2 text-sm font-medium text-white transition-colors duration-300 ease-in-out"
-            >
-              <FontAwesomeIcon icon={faGithub} />
-              <span>Source Code</span>
-            </a>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default ImageModal;
diff --git a/src/components/Intro.tsx b/src/components/Intro.tsx
deleted file mode 100644
index 241d430..0000000
--- a/src/components/Intro.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-const Intro = () => {
-  return (
-    <div className="grid place-content-center text-white">
-      <h2 className="mb-3 text-3xl font-bold sm:text-center sm:text-4xl">
-        Hi, I’m Lakshmikanta. Nice to meet you.
-      </h2>
-      <p className="mx-auto max-w-[50ch] text-lg sm:text-center">
-        Passionate about creating beautiful and functional websites and
-        applications, with a solid foundation in Next.js, TypeScript, HTML5,
-        CSS3, PHP, and MySQL. Eager to leverage creativity and technical skills
-        to contribute to dynamic web development projects. Committed to
-        continuous learning and staying updated with the latest industry trends.
-      </p>
-    </div>
-  );
-};
-
-export default Intro;
diff --git a/src/components/LanguageAndTool.tsx b/src/components/LanguageAndTool.tsx
deleted file mode 100644
index b9a1157..0000000
--- a/src/components/LanguageAndTool.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import AppsIcon from '#assets/images/icons/apps.svg?react';
-import BlocksIcon from '#assets/images/icons/blocks.svg?react';
-import CodeIcon from '#assets/images/icons/code.svg?react';
-import { frameworks, languages, tools } from '#data/Skills';
-
-const LanguageAndTool = () => {
-  return (
-    <div className="dark:bg-dark-700 mx-auto -mt-20 flex w-full flex-col overflow-hidden rounded-3xl bg-white p-3 shadow-lg md:w-[96%] md:flex-row md:p-4 lg:p-6">
-      <div className="border-dark-300 mb-4 flex flex-col border-b-2 border-dashed pb-4 md:mr-4 md:mb-0 md:w-1/3 md:border-r-2 md:border-b-0 md:pr-4 md:pb-0 lg:w-[50%]">
-        <div className="mx-auto mb-5 rounded-full bg-blue-300 p-4">
-          <CodeIcon className="h-12 w-12" />
-        </div>
-        <h3 className="text-dark-900 text-center text-xl font-bold md:text-3xl dark:text-gray-50">
-          Languages
-        </h3>
-        <div className="justify-items-between mt-4 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
-          {languages.map(({ id, name, Icon }) => (
-            <div
-              key={id}
-              className="text-dark flex items-center justify-between rounded-lg bg-gray-500/30 px-4 py-2 transition-all duration-200 ease-in-out hover:scale-105 hover:cursor-pointer hover:shadow-md dark:bg-white"
-            >
-              <Icon className="h-12 w-12" />
-              <h3 className="ml-auto text-xl font-medium">{name}</h3>
-            </div>
-          ))}
-        </div>
-      </div>
-      <div className="border-dark-300 mb-4 flex flex-col border-b-2 border-dashed pb-4 md:mr-4 md:mb-0 md:w-1/3 md:border-r-2 md:border-b-0 md:pr-4 md:pb-0 lg:w-[25%]">
-        <div className="mx-auto mb-5 rounded-full bg-blue-300 p-4">
-          <BlocksIcon className="h-12 w-12" />
-          {/* <img src={toolsIcon} alt="" aria-hidden className="h-12 w-12" /> */}
-        </div>
-        <h3 className="text-dark-900 text-center text-xl font-bold md:text-3xl dark:text-gray-50">
-          Frameworks
-        </h3>
-        <div className="justify-items-between mt-4 grid h-full grid-cols-1 gap-4 lg:grid-cols-2">
-          {frameworks.map(({ id, name, Icon }) => (
-            <div
-              key={id}
-              className="text-dark flex items-center justify-between gap-2 rounded-lg bg-gray-500/30 p-4 transition-all duration-200 ease-in-out hover:scale-105 hover:cursor-pointer hover:shadow-md lg:flex-col lg:gap-4 dark:bg-white"
-            >
-              <Icon className="h-12 w-12" />
-              <h3 className="text-xl font-medium">{name}</h3>
-            </div>
-          ))}
-        </div>
-      </div>
-      <div className="flex flex-col md:w-1/3 lg:w-[25%]">
-        <div className="mx-auto mb-5 rounded-full bg-blue-300 p-4">
-          <AppsIcon className="h-12 w-12" />
-          {/* <img src={toolsIcon} alt="" aria-hidden className="h-12 w-12" /> */}
-        </div>
-        <h3 className="text-dark-900 text-center text-xl font-bold md:text-3xl dark:text-gray-50">
-          Tools
-        </h3>
-        <div className="justify-items-between mt-4 grid h-full grid-cols-1 gap-4 lg:grid-cols-2">
-          {tools.map(({ id, name, Icon }) => (
-            <div
-              key={id}
-              className="text-dark flex items-center justify-between gap-2 rounded-lg bg-gray-500/30 p-4 transition-all duration-200 ease-in-out hover:scale-105 hover:cursor-pointer hover:shadow-md lg:flex-col lg:gap-4 dark:bg-white"
-            >
-              <Icon className="h-12 w-12" />
-              <h3 className="text-xl font-medium">{name}</h3>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default LanguageAndTool;
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
deleted file mode 100644
index 078f7a6..0000000
--- a/src/components/Logo.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Link } from 'react-router-dom';
-
-import { cn } from '#/lib/cn';
-
-const Logo = ({ large, variant }: { large?: boolean; variant: string }) => {
-  return (
-    <Link to="/">
-      <svg
-        viewBox="0 0 233.462 44.648"
-        xmlns="http://www.w3.org/2000/svg"
-        className={cn(
-          large ? 'w-48' : 'w-32',
-          variant === 'dark' ? 'text-white' : 'text-dark dark:text-white',
-        )}
-      >
-        <g style={{ display: 'inline' }}>
-          <path
-            style={{
-              display: 'inline',
-              mixBlendMode: 'normal',
-              fill: `${
-                variant === 'dark'
-                  ? 'var(--color-primary-400)'
-                  : 'var(--color-primary-600)'
-              }`,
-              fillOpacity: 1,
-              stroke: 'none',
-              strokeWidth: 0.26,
-            }}
-            d="M43.084 152.283v43.174h90.68v-43.174zm47.747.922c1.174 0 2.141.38 2.902 1.141.76.76 1.14 1.728 1.14 2.902 0 1.174-.38 2.142-1.14 2.902-.76.761-1.728 1.141-2.902 1.141-1.174 0-2.142-.38-2.903-1.14-.76-.761-1.14-1.729-1.14-2.903s.38-2.141 1.14-2.902c.761-.76 1.729-1.14 2.903-1.14zm-23.714.471c1.985 0 3.886.166 5.705.497l-.595 5.556a46.444 46.444 0 0 0-2.852-.273 40.203 40.203 0 0 0-2.406-.074c-4.416 0-6.623 2.563-6.623 7.689v3.473h10.591v5.308H60.346v15.528h-6.102v-15.528h-8.111v-5.308h8.11v-3.225c0-9.095 4.292-13.643 12.874-13.643zm12.552 11.41h14.46v20.737h7.913v5.557H78.18v-5.557h9.848v-15.18h-8.36zm26.813 0h7.194l5.432 8.633 5.432-8.632h7.194l-9.674 13.096 9.674 13.197h-7.194l-5.556-8.608-5.308 8.608h-7.194l9.55-12.998z"
-            transform="translate(8.884 -151.444)"
-          />
-          <path
-            style={{
-              display: 'inline',
-              fill: 'currentColor',
-              strokeWidth: 0.26,
-            }}
-            d="m35.367 151.444-13.94 31.948-23.167-9.252v-.694l17.09-6.226v-6.201l-24.234 9.773v6.002l28.054 11.733-3.3 7.565h6.177l19.522-44.648zm164.455 9.823v6.2l18.108 6.103v.446l-18.108 6.102v6.201l24.756-9.525v-6.002zm-50.973 3.323c-3.804 0-6.755 1.191-8.855 3.572-2.084 2.382-3.126 5.722-3.126 10.021 0 4.416 1.224 7.806 3.671 10.17 2.464 2.349 5.962 3.523 10.493 3.523a58.63 58.63 0 0 0 3.571-.124c1.356-.083 2.853-.273 4.49-.57l-.645-5.656a52.075 52.075 0 0 1-3.423.52 32.69 32.69 0 0 1-3.398.174c-4.68 0-7.516-1.819-8.508-5.457h17.115c.1-1.075.149-2.207.149-3.398 0-4.15-1.009-7.318-3.026-9.5-2.001-2.183-4.837-3.275-8.508-3.275zm35.991 0c-4.349 0-6.656 2.25-6.92 6.747h-.819l-.818-6.25h-9.798v5.308h4.688v15.676h-5.68v5.309h18.058v-5.309h-6.276v-6.002c0-3.159.463-5.598 1.389-7.318.943-1.72 2.348-2.58 4.217-2.58 1.257 0 2.166.373 2.728 1.117.58.744.869 1.968.869 3.67h6.101c0-6.911-2.58-10.368-7.739-10.368zm-35.942 5.532c1.77 0 3.15.537 4.143 1.612.992 1.059 1.488 2.596 1.488 4.614h-11.683c.232-2.001.868-3.539 1.91-4.614 1.042-1.075 2.423-1.612 4.142-1.612z"
-            transform="translate(8.884 -151.444)"
-          />
-        </g>
-      </svg>
-    </Link>
-  );
-};
-
-export default Logo;
diff --git a/src/components/MessageSent.tsx b/src/components/MessageSent.tsx
deleted file mode 100644
index eea1192..0000000
--- a/src/components/MessageSent.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useSelector } from 'react-redux';
-
-import sendIcon from '#assets/images/message_send.svg';
-import { RootState } from '#store/store';
-
-const MessageSent = () => {
-  const {
-    form: {
-      data: { name },
-    },
-  } = useSelector((state: RootState) => state);
-
-  return (
-    <div className="animate-fadeIn grid h-full place-content-center pb-8">
-      <img src={sendIcon} alt="" aria-hidden className="h-60 w-60" />
-      <div className="flex flex-col items-center gap-2">
-        <h2 className="-mt-8 flex flex-col items-center text-4xl font-bold text-white">
-          Thank you!
-          <span className="text-white-full text-3xl font-bold capitalize">
-            {name}
-          </span>
-        </h2>
-        <p className="text-xl dark:text-white">We will get to you soon.</p>
-      </div>
-    </div>
-  );
-};
-
-export default MessageSent;
diff --git a/src/components/NavigationMenu.tsx b/src/components/NavigationMenu.tsx
deleted file mode 100644
index f53fa83..0000000
--- a/src/components/NavigationMenu.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { MouseEvent } from 'react';
-
-import { cn } from '#/lib/cn';
-
-import CVDownloadButton from './CVDownloadButton';
-import ThemeSwitcher from './ThemeSwitcher';
-
-type MenuItem = {
-  id: number;
-  itemName: string;
-  path: string;
-};
-const menuItems: MenuItem[] = [
-  {
-    id: 1,
-    itemName: 'About',
-    path: '#about',
-  },
-  {
-    id: 2,
-    itemName: 'Projects',
-    path: '#projects',
-  },
-  {
-    id: 3,
-    itemName: 'Contact',
-    path: '#contact',
-  },
-];
-
-const NavigationMenu = ({ openState }: { openState: boolean }) => {
-  const handelNavigation = (e: MouseEvent<HTMLAnchorElement>) => {
-    e.preventDefault();
-    const path = (e.target as HTMLAnchorElement).getAttribute('href');
-    if (!path) return;
-    document.querySelector(path)?.scrollIntoView({
-      behavior: 'smooth',
-      block: 'start',
-      inline: 'start',
-    });
-  };
-
-  return (
-    <>
-      {/* Desktop Navbar */}
-      <nav className="hidden items-center gap-2 md:flex">
-        <ThemeSwitcher className="mr-8" />
-        <ul className="flex gap-2">
-          {menuItems.map(item => (
-            <li key={item.id}>
-              <a
-                href={item.path}
-                className="text-dark rounded-md px-4 py-2 font-medium transition-colors duration-200 ease-linear hover:bg-gray-700 hover:text-white dark:text-white"
-                onClick={handelNavigation}
-              >
-                {item.itemName}
-              </a>
-            </li>
-          ))}
-        </ul>
-        <CVDownloadButton />
-      </nav>
-      {/* Mobile Navbar */}
-      <nav
-        className={cn(
-          'bg-white-full dark:bg-dark-700 mt-3 grid w-full overflow-hidden rounded-md px-3 transition-[grid-template-rows] duration-300 ease-linear md:hidden',
-          !openState ? 'grid-rows-[0fr]' : 'grid-rows-[1fr]',
-        )}
-      >
-        <div
-          className={cn(
-            'min-h-0 transition-[visibility] duration-300',
-            !openState ? 'invisible' : 'visible',
-          )}
-        >
-          <ul className="mt-1 flex flex-col gap-1 py-6">
-            <>
-              {menuItems.map(item => (
-                <li key={item.id} className="flex">
-                  <a
-                    href={item.path}
-                    onClick={handelNavigation}
-                    className="transition-color dark:hover:bg-dark-300 text-dark dark:bg-dark-900 relative w-full rounded-sm bg-white py-2 text-center font-medium duration-1000 ease-linear hover:bg-gray-300 dark:text-white"
-                  >
-                    {item.itemName}
-                  </a>
-                </li>
-              ))}
-            </>
-          </ul>
-          <div className="mb-3 flex items-center justify-between">
-            <ThemeSwitcher />
-            <CVDownloadButton />
-          </div>
-        </div>
-      </nav>
-    </>
-  );
-};
-
-export default NavigationMenu;
diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
deleted file mode 100644
index 4eee0d4..0000000
--- a/src/components/ProjectCard.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { faGithub } from '@fortawesome/free-brands-svg-icons';
-import { faEye } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useState } from 'react';
-
-import { ProjectType } from '#data/Projects';
-
-import ImageModal from './ImageModal';
-
-const ProjectCard = ({ project }: { project: ProjectType }) => {
-  const [openModal, setOpenModal] = useState(false);
-
-  const handelImageClick = () => {
-    setOpenModal(!openModal);
-  };
-  const handelClose = () => {
-    setOpenModal(!openModal);
-  };
-
-  return (
-    <div className="bg-white-full dark:bg-dark-700 overflow-hidden rounded-xl shadow-md">
-      <>
-        <a
-          onClick={handelImageClick}
-          className="cursor-pointer transition-all duration-500"
-          aria-label="open image with live link and repo url"
-        >
-          <img
-            src={project.image}
-            alt={project.title}
-            className="h-full max-h-[350px] max-w-full object-cover"
-          />
-          {openModal && <ImageModal onClick={handelClose} project={project} />}
-        </a>
-      </>
-
-      <div className="bg-white-full dark:bg-dark/10 flex flex-col justify-between p-4">
-        <h3 className="text-dark-900 text-center font-serif text-xl font-bold dark:text-white">
-          {project.title}
-        </h3>
-        <div className="mx-auto my-2 w-full rounded-md bg-slate-400/20 pt-2 pb-3">
-          <h4 className="mb-2 text-center text-sm font-medium capitalize dark:text-white">
-            Coding done with
-          </h4>
-          <div className="mx-3 flex flex-wrap gap-2">
-            {project.development.language
-              ?.filter(el => el !== 'HTML' && el !== 'CSS')
-              .map((el, i) => (
-                <span
-                  key={i}
-                  style={{
-                    display: 'inline-block',
-                    borderRadius: '4px',
-                    backgroundColor: `hsl(${Math.floor(
-                      Math.random() * 360,
-                    )},96%,80%)`,
-                    paddingInline: '10px',
-                    paddingBlock: '4px',
-                    fontSize: '12px',
-                    fontWeight: '500',
-                  }}
-                >
-                  #{el}
-                </span>
-              ))}
-          </div>
-        </div>
-        <div className="grid grid-cols-2 gap-5">
-          <a
-            href={project.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="bg-secondary hover:bg-secondary-500 flex items-center justify-center gap-2 rounded-md py-2 text-sm font-medium text-white transition-colors duration-300 ease-in-out"
-          >
-            <FontAwesomeIcon icon={faEye} />
-            <span>See Live</span>
-          </a>
-          <a
-            href={project.repo}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="bg-dark-900 hover:bg-dark-700 flex items-center justify-center gap-2 rounded-md py-2 text-sm font-medium text-white transition-colors duration-300 ease-in-out"
-          >
-            <FontAwesomeIcon icon={faGithub} />
-            <span>Source Code</span>
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ProjectCard;
diff --git a/src/components/RecentWork.tsx b/src/components/RecentWork.tsx
deleted file mode 100644
index 3441fe9..0000000
--- a/src/components/RecentWork.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import Projects from '#data/Projects';
-
-import ProjectCard from './ProjectCard';
-
-const featuredProject = Projects.filter(project => project.featured);
-
-const RecentWork = () => {
-  return (
-    <div id="project-grid">
-      {featuredProject.map(project => {
-        return <ProjectCard project={project} key={project.id} />;
-      })}
-    </div>
-  );
-};
-
-export default RecentWork;
diff --git a/src/components/SocialLinks.tsx b/src/components/SocialLinks.tsx
deleted file mode 100644
index a66239c..0000000
--- a/src/components/SocialLinks.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-import { cn } from '#/lib/cn';
-import { SocialLink, socialLinks } from '#data/Social';
-
-const SocialLinks = ({ inverted }: { inverted?: boolean }) => {
-  return (
-    <div className="flex items-center gap-4">
-      {socialLinks.map((link: SocialLink) => (
-        <a href={link.url} key={link.id} target="_blank">
-          <FontAwesomeIcon
-            icon={link.icon}
-            className={cn(
-              'h-8 w-8',
-              inverted ? 'text-white-full' : 'text-dark',
-              'hover:text-primary dark:hover:text-primary-400 shadow-xs transition-transform duration-300 ease-linear hover:-translate-y-1 dark:text-white',
-            )}
-          />
-        </a>
-      ))}
-    </div>
-  );
-};
-
-export default SocialLinks;
diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
deleted file mode 100644
index b2ac18a..0000000
--- a/src/components/Spinner.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { cn } from '#/lib/cn';
-
-const Spinner = ({ size }: { size: number }) => {
-  return (
-    <div
-      className={cn(
-        'relative',
-        `w-${size} h-${size}`,
-        'border-secondary-400 border-t-white-full animate-spin rounded-full border-4',
-      )}
-    >
-      <span className="sr-only">Loading...</span>
-    </div>
-  );
-};
-
-export default Spinner;
diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
deleted file mode 100644
index bd9e047..0000000
--- a/src/components/ThemeSwitcher.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-
-import { toggleTheme } from '#store/reducer/ThemeReducer';
-import { RootState } from '#store/store';
-
-import ToggleButton from './ToggleButton';
-
-const ThemeSwitcher = ({ className }: { className?: string }) => {
-  const theme = useSelector((state: RootState) => state.theme);
-  const dispatch = useDispatch();
-
-  const handleChange = () => {
-    const setTheme = theme === 'dark' ? 'light' : 'dark';
-    dispatch(toggleTheme(setTheme));
-  };
-
-  useEffect(() => {
-    document.documentElement.removeAttribute('class');
-    document.documentElement.classList.add(theme);
-    localStorage.setItem('theme', theme);
-  }, [theme]);
-  return (
-    <div className={className}>
-      <ToggleButton isDarkMode={theme === 'dark'} onClick={handleChange} />
-    </div>
-  );
-};
-
-export default ThemeSwitcher;
diff --git a/src/components/ToggleButton.tsx b/src/components/ToggleButton.tsx
deleted file mode 100644
index 173fdc7..0000000
--- a/src/components/ToggleButton.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-import { cn } from '#/lib/cn';
-
-const ToggleButton = ({
-  isDarkMode,
-  onClick,
-}: {
-  isDarkMode: boolean;
-  onClick: () => void;
-}) => {
-  return (
-    <div
-      className={cn(
-        'border-primary relative flex h-[27px] w-[54px] cursor-pointer items-center justify-between rounded-full border-2 px-1 transition-colors duration-300 ease-linear',
-        isDarkMode ? 'bg-primary-400' : 'bg-white',
-      )}
-      onClick={onClick}
-    >
-      <FontAwesomeIcon icon={faMoon} className="text-dark-900 h-4 w-4" />
-      <span
-        className={cn(
-          `bg-primary absolute top-1/2 h-5 w-5 -translate-y-1/2 rounded-full shadow-md transition-all duration-300 ease-linear`,
-          !isDarkMode ? 'left-[3px]' : 'left-[28px]',
-        )}
-      />
-      <FontAwesomeIcon icon={faSun} className="text-dark-900 h-4 w-4" />
-    </div>
-  );
-};
-
-export default ToggleButton;
diff --git a/src/components/common/SEO.tsx b/src/components/common/SEO.tsx
new file mode 100644
index 0000000..9192bfc
--- /dev/null
+++ b/src/components/common/SEO.tsx
@@ -0,0 +1,136 @@
+import { Helmet } from 'react-helmet-async';
+
+import { siteConfig } from '#/config/site';
+
+export interface SEOProps {
+  title?: string;
+  description?: string;
+  image?: string;
+  url?: string;
+  type?: string;
+  keywords?: string[];
+}
+
+function resolveUrl(path: string): string {
+  if (path.startsWith('http://') || path.startsWith('https://')) {
+    return path;
+  }
+
+  const base = siteConfig.url.replace(/\/$/, '');
+  const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+
+  return `${base}${normalizedPath}`;
+}
+
+function buildTitle(pageTitle?: string): string {
+  if (!pageTitle) {
+    return siteConfig.title;
+  }
+
+  if (pageTitle === siteConfig.siteName || pageTitle === siteConfig.title) {
+    return siteConfig.title;
+  }
+
+  return `${pageTitle} | ${siteConfig.siteName}`;
+}
+
+function buildStructuredData() {
+  const logoUrl = resolveUrl('/android-chrome-512x512.png');
+  const sameAs = [siteConfig.github, siteConfig.linkedin];
+
+  const person = {
+    '@context': 'https://schema.org',
+    '@type': 'Person',
+    name: siteConfig.author,
+    url: siteConfig.url,
+    email: siteConfig.email,
+    jobTitle: 'Full Stack Engineer',
+    sameAs,
+  };
+
+  const website = {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    name: siteConfig.siteName,
+    url: siteConfig.url,
+    description: siteConfig.description,
+    inLanguage: siteConfig.language,
+    publisher: {
+      '@type': 'Organization',
+      name: siteConfig.siteName,
+      url: siteConfig.url,
+    },
+  };
+
+  const organization = {
+    '@context': 'https://schema.org',
+    '@type': 'Organization',
+    name: siteConfig.siteName,
+    url: siteConfig.url,
+    logo: logoUrl,
+    email: siteConfig.email,
+    sameAs,
+  };
+
+  return { person, website, organization };
+}
+
+export function SEO({
+  title,
+  description,
+  image,
+  url,
+  type,
+  keywords,
+}: SEOProps = {}) {
+  const resolvedTitle = buildTitle(title);
+  const resolvedDescription = description ?? siteConfig.description;
+  const resolvedUrl = resolveUrl(url ?? '/');
+  const resolvedImage = resolveUrl(image ?? '/og-image.png');
+  const resolvedTwitterImage = resolveUrl(image ?? '/twitter-image.png');
+  const resolvedType = type ?? siteConfig.openGraph.type;
+  const resolvedKeywords = (keywords ?? siteConfig.keywords).join(', ');
+  const { person, website, organization } = buildStructuredData();
+
+  return (
+    <Helmet>
+      <html lang={siteConfig.language} />
+
+      <title>{resolvedTitle}</title>
+      <meta name="description" content={resolvedDescription} />
+      <meta name="keywords" content={resolvedKeywords} />
+      <meta name="author" content={siteConfig.author} />
+      <meta name="theme-color" content={siteConfig.themeColor} />
+      <meta name="robots" content={siteConfig.robots} />
+
+      <link rel="canonical" href={resolvedUrl} />
+
+      <meta property="og:title" content={resolvedTitle} />
+      <meta property="og:description" content={resolvedDescription} />
+      <meta property="og:type" content={resolvedType} />
+      <meta property="og:url" content={resolvedUrl} />
+      <meta property="og:site_name" content={siteConfig.openGraph.siteName} />
+      <meta property="og:locale" content={siteConfig.locale} />
+      <meta property="og:image" content={resolvedImage} />
+      <meta
+        property="og:image:width"
+        content={String(siteConfig.openGraph.imageWidth)}
+      />
+      <meta
+        property="og:image:height"
+        content={String(siteConfig.openGraph.imageHeight)}
+      />
+
+      <meta name="twitter:card" content={siteConfig.twitter.card} />
+      <meta name="twitter:site" content={siteConfig.twitter.site} />
+      <meta name="twitter:creator" content={siteConfig.twitter.creator} />
+      <meta name="twitter:title" content={resolvedTitle} />
+      <meta name="twitter:description" content={resolvedDescription} />
+      <meta name="twitter:image" content={resolvedTwitterImage} />
+
+      <script type="application/ld+json">{JSON.stringify(person)}</script>
+      <script type="application/ld+json">{JSON.stringify(website)}</script>
+      <script type="application/ld+json">{JSON.stringify(organization)}</script>
+    </Helmet>
+  );
+}
diff --git a/src/components/sections/About.tsx b/src/components/sections/About.tsx
new file mode 100644
index 0000000..1b1c9d9
--- /dev/null
+++ b/src/components/sections/About.tsx
@@ -0,0 +1,127 @@
+import { ArrowUpRight, BriefcaseBusiness, Cloud, Code2 } from 'lucide-react';
+
+import profilePlaceholder from '#assets/images/portfolio/profile-placeholder.webp';
+
+import { Reveal } from '../ui/Reveal';
+import { Section } from '../ui/Section';
+
+const strengths = [
+  {
+    icon: Code2,
+    title: 'Full Stack Development',
+    description: 'Modern React, TypeScript, NestJS and scalable APIs.',
+  },
+  {
+    icon: Cloud,
+    title: 'Cloud Architecture',
+    description:
+      'AWS, serverless workloads, storage and backend infrastructure.',
+  },
+  {
+    icon: BriefcaseBusiness,
+    title: 'Product Engineering',
+    description: 'Building SaaS products from MVP to production.',
+  },
+];
+
+export function About() {
+  return (
+    <Section
+      id="about"
+      className="border-border bg-surface/20 overflow-hidden border-y"
+    >
+      <div className="grid items-center gap-16 lg:grid-cols-[420px_1fr]">
+        {/* Image */}
+        <Reveal>
+          <div className="relative mx-auto w-full max-w-sm">
+            <div className="glass-panel overflow-hidden rounded-3xl">
+              <img
+                src={profilePlaceholder}
+                alt="Profile placeholder"
+                loading="lazy"
+                className="aspect-square w-full object-cover"
+              />
+            </div>
+
+            <div className="glass-panel absolute -right-5 -bottom-5 rounded-2xl px-5 py-4">
+              <div className="text-accent-primary text-lg font-semibold">
+                Available
+              </div>
+
+              <div className="text-text-muted text-sm">
+                For Freelance Projects
+              </div>
+            </div>
+          </div>
+        </Reveal>
+
+        {/* Content */}
+        <div>
+          <Reveal>
+            <div className="text-accent-primary mb-4 text-sm font-semibold tracking-[0.2em] uppercase">
+              About Me
+            </div>
+
+            <h2 className="max-w-3xl text-4xl leading-tight font-bold md:text-5xl">
+              Building modern SaaS products with
+              <span className="text-accent-primary">
+                {' '}
+                scalable architecture
+              </span>
+              .
+            </h2>
+          </Reveal>
+
+          <Reveal delay={0.08}>
+            <p className="text-text-secondary mt-8 max-w-3xl text-lg leading-8">
+              I'm Lakshmikanta Patra, a Full Stack Engineer focused on building
+              secure, scalable SaaS applications with React, NestJS, TypeScript,
+              and AWS.
+            </p>
+
+            <p className="text-text-secondary mt-6 max-w-3xl text-lg leading-8">
+              I enjoy solving backend architecture challenges, designing
+              cloud-native systems, and creating clean user experiences that are
+              fast, maintainable, and built for long-term growth.
+            </p>
+          </Reveal>
+
+          {/* Strengths */}
+          <Reveal delay={0.15}>
+            <div className="mt-10 grid gap-5 md:grid-cols-3">
+              {strengths.map(item => {
+                const Icon = item.icon;
+
+                return (
+                  <div
+                    key={item.title}
+                    className="border-border bg-surface rounded-2xl border p-6"
+                  >
+                    <Icon className="text-accent-primary mb-4 h-6 w-6" />
+
+                    <h3 className="mb-2 font-semibold">{item.title}</h3>
+
+                    <p className="text-text-secondary text-sm leading-6">
+                      {item.description}
+                    </p>
+                  </div>
+                );
+              })}
+            </div>
+          </Reveal>
+
+          {/* CTA */}
+          <Reveal delay={0.2}>
+            <a
+              href="#contact"
+              className="text-accent-primary mt-10 inline-flex items-center gap-2 font-medium transition-opacity hover:opacity-80"
+            >
+              Let's build something great together
+              <ArrowUpRight className="h-5 w-5" />
+            </a>
+          </Reveal>
+        </div>
+      </div>
+    </Section>
+  );
+}
diff --git a/src/components/sections/Contact.tsx b/src/components/sections/Contact.tsx
new file mode 100644
index 0000000..6c55f0d
--- /dev/null
+++ b/src/components/sections/Contact.tsx
@@ -0,0 +1,187 @@
+import emailjs from '@emailjs/browser';
+import { faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ArrowUpRight, Loader2, Mail, MapPin, Send } from 'lucide-react';
+import { ChangeEvent, FormEvent, useMemo, useRef, useState } from 'react';
+import validator from 'validator';
+
+import workspaceImage from '#assets/images/portfolio/workspace-placeholder.png';
+
+import { Button } from '../ui/Button';
+import { Reveal } from '../ui/Reveal';
+import { Section } from '../ui/Section';
+
+export function Contact() {
+  const initial = { name: '', email: '', message: '' };
+  const [inputs, setInputs] = useState(initial);
+  const [status, setStatus] = useState<
+    'idle' | 'loading' | 'completed' | 'rejected'
+  >('idle');
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const errors = useMemo(
+    () => ({
+      name: inputs.name.trim().length < 2,
+      email: !validator.isEmail(inputs.email),
+      message: inputs.message.trim().length < 20,
+    }),
+    [inputs],
+  );
+
+  const invalid = errors.name || errors.email || errors.message;
+
+  const onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+    setInputs(v => ({ ...v, [e.target.name]: e.target.value }));
+
+  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (invalid || !formRef.current) return;
+    setStatus('loading');
+    try {
+      const res = await emailjs.sendForm(
+        'service_qdjdol9',
+        'template_lobv7nq',
+        formRef.current,
+        'G0MWsjYi9pbxnAwfJ',
+      );
+      if (res.status === 200) {
+        setInputs(initial);
+        setStatus('completed');
+      } else setStatus('rejected');
+    } catch {
+      setStatus('rejected');
+    }
+  };
+
+  return (
+    <Section id="contact">
+      <div className="mx-auto mb-16 max-w-2xl text-center">
+        <Reveal>
+          <p className="text-accent-primary mb-3 text-sm font-semibold tracking-[0.2em] uppercase">
+            Contact
+          </p>
+          <h2 className="text-4xl font-bold md:text-5xl">
+            Let's build your next SaaS product.
+          </h2>
+          <p className="text-text-secondary mt-5 text-lg">
+            Have an idea or an existing application that needs improvement?
+            Let's discuss it.
+          </p>
+        </Reveal>
+      </div>
+
+      <div className="grid gap-12 lg:grid-cols-[1fr_1.2fr]">
+        <Reveal>
+          <div className="glass-panel overflow-hidden rounded-3xl">
+            <img
+              src={workspaceImage}
+              alt="Workspace"
+              className="aspect-video w-full object-cover"
+            />
+            <div className="space-y-3 p-4">
+              <div>
+                <h3 className="text-xl font-semibold">
+                  Available for Freelance
+                </h3>
+                <p className="text-text-secondary mt-2">
+                  I usually respond within 24 hours.
+                </p>
+              </div>
+
+              <div className="space-y-3 text-sm">
+                <div className="flex items-center gap-3">
+                  <Mail className="text-accent-primary h-4 w-4" />
+                  <span>frontendfixer@email.com</span>
+                </div>
+
+                <div className="flex items-center gap-3">
+                  <MapPin className="text-accent-primary h-4 w-4" />
+                  <span>India · Remote Worldwide</span>
+                </div>
+              </div>
+
+              <div className="flex gap-3 pt-2">
+                <a
+                  href="https://github.com/frontendfixer"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <FontAwesomeIcon icon={faGithub} />
+                </a>
+                <a
+                  href="https://linkedin.com/mr.lakshmikanta"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <FontAwesomeIcon icon={faLinkedin} />
+                </a>
+              </div>
+            </div>
+          </div>
+        </Reveal>
+
+        <Reveal delay={0.1}>
+          <form ref={formRef} onSubmit={onSubmit} className="space-y-5">
+            <input
+              className="bg-surface border-border w-full rounded-xl border px-4 py-3"
+              name="name"
+              placeholder="Your Name"
+              value={inputs.name}
+              onChange={onChange}
+            />
+            <input
+              className="bg-surface border-border w-full rounded-xl border px-4 py-3"
+              name="email"
+              type="email"
+              placeholder="Email Address"
+              value={inputs.email}
+              onChange={onChange}
+            />
+            <textarea
+              className="bg-surface border-border min-h-40 w-full rounded-xl border px-4 py-3"
+              name="message"
+              placeholder="Tell me about your project..."
+              value={inputs.message}
+              onChange={onChange}
+            />
+
+            {status == 'completed' && (
+              <p className="text-sm text-green-400">
+                Thanks! I'll get back to you shortly.
+              </p>
+            )}
+
+            {status == 'rejected' && (
+              <p className="text-sm text-red-400">
+                Failed to send. Please try again.
+              </p>
+            )}
+
+            <Button
+              type="submit"
+              size="lg"
+              disabled={status == 'loading' || invalid}
+              className="w-full gap-2"
+            >
+              {status == 'loading' ? (
+                <Loader2 className="h-5 w-5 animate-spin" />
+              ) : (
+                <>
+                  Send Message <Send className="h-4 w-4" />
+                </>
+              )}
+            </Button>
+
+            <a
+              href="#hero"
+              className="text-accent-primary inline-flex items-center gap-2 text-sm"
+            >
+              Back to top
+              <ArrowUpRight className="h-4 w-4" />
+            </a>
+          </form>
+        </Reveal>
+      </div>
+    </Section>
+  );
+}
diff --git a/src/components/sections/ContactButton.tsx b/src/components/sections/ContactButton.tsx
new file mode 100644
index 0000000..0b93b27
--- /dev/null
+++ b/src/components/sections/ContactButton.tsx
@@ -0,0 +1,21 @@
+import { ArrowRight } from 'lucide-react';
+
+import { Button } from '#components/ui/Button.tsx';
+
+interface ContactButtonProps {
+  text?: string;
+  className?: string;
+}
+
+export function ContactButton({ text, className }: ContactButtonProps) {
+  return (
+    <Button asChild size="lg" variant="cta" className={className}>
+      <a href="#contact">
+        <span className="flex items-center gap-2">
+          {text ?? 'Start Your Project'}
+          <ArrowRight className="h-5 w-5 transition-transform duration-300 group-hover:translate-x-1" />
+        </span>
+      </a>
+    </Button>
+  );
+}
diff --git a/src/components/sections/FAQ.tsx b/src/components/sections/FAQ.tsx
new file mode 100644
index 0000000..07242ed
--- /dev/null
+++ b/src/components/sections/FAQ.tsx
@@ -0,0 +1,87 @@
+import { ChevronDown } from 'lucide-react';
+import { useState } from 'react';
+
+import { cn } from '#lib/utils';
+
+import { Reveal } from '../ui/Reveal';
+import { Section } from '../ui/Section';
+
+const faqs = [
+  {
+    question: 'How do we get started?',
+    answer:
+      "We'll begin with a discovery call to discuss your project goals, technical requirements, timeline, and budget. After that, I'll provide a clear proposal with milestones and estimated delivery.",
+  },
+  {
+    question: 'What kinds of projects do you work on?',
+    answer:
+      'I build modern SaaS applications, custom web platforms, REST APIs, cloud-native backend systems, and scalable frontend applications using React, Next.js, NestJS, TypeScript, and AWS.',
+  },
+  {
+    question: 'Can you improve or maintain an existing application?',
+    answer:
+      'Absolutely. I can optimize performance, refactor legacy code, implement new features, migrate applications to modern architectures, and provide ongoing maintenance and technical support.',
+  },
+  {
+    question: 'Do you provide post-launch support?',
+    answer:
+      'Yes. I offer post-launch maintenance, bug fixes, feature enhancements, infrastructure improvements, and long-term technical support to keep your application reliable and scalable.',
+  },
+];
+
+export function FAQ() {
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+
+  return (
+    <Section id="faq" className="bg-surface/20 border-border border-y">
+      <Reveal>
+        <div className="mx-auto mb-16 max-w-2xl text-center md:mb-24">
+          <h2 className="mb-6 text-3xl font-bold md:text-5xl">
+            Common Questions
+          </h2>
+          <p className="text-text-secondary text-lg">
+            Details about my process, availability, and how we can work
+            together.
+          </p>
+        </div>
+      </Reveal>
+
+      <div className="mx-auto max-w-3xl space-y-4">
+        {faqs.map((faq, i) => (
+          <Reveal key={i} delay={i * 0.1}>
+            <div className="glass-panel overflow-hidden rounded-2xl">
+              <button
+                className="flex w-full items-center justify-between px-6 py-5 text-left focus:outline-hidden"
+                onClick={() => setOpenIndex(openIndex === i ? null : i)}
+              >
+                <span className="text-lg font-medium text-white">
+                  {faq.question}
+                </span>
+                <ChevronDown
+                  className={cn(
+                    'text-text-muted h-5 w-5 transition-transform duration-300',
+                    openIndex === i && 'rotate-180',
+                  )}
+                />
+              </button>
+              <div
+                className={cn(
+                  'grid transition-all duration-300 ease-in-out',
+                  openIndex === i
+                    ? 'grid-rows-[1fr] opacity-100'
+                    : 'grid-rows-[0fr] opacity-0',
+                )}
+              >
+                <div className="overflow-hidden">
+                  <div className="text-text-secondary px-6 pb-5 leading-relaxed">
+                    {faq.answer}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Reveal>
+        ))}
+      </div>
+    </Section>
+  );
+}
diff --git a/src/components/sections/FeaturedProject.tsx b/src/components/sections/FeaturedProject.tsx
new file mode 100644
index 0000000..25f1a69
--- /dev/null
+++ b/src/components/sections/FeaturedProject.tsx
@@ -0,0 +1,137 @@
+import { faExternalLink } from '@fortawesome/free-solid-svg-icons';
+import { CheckCircle2, Lock, Rocket, Server } from 'lucide-react';
+
+import vaultDashboard from '#assets/images/portfolio/vaultdrive-dashboard.webp';
+import { GlassLaptopPanel } from '#components/GlassLaptopPanel';
+import { LinkButton } from '#components/ui/LinkButton';
+
+import { Reveal } from '../ui/Reveal';
+import { Section } from '../ui/Section';
+
+const highlights = [
+  {
+    icon: Lock,
+    title: 'Secure',
+    value: 'RBAC & ABAC',
+  },
+  {
+    icon: Rocket,
+    title: 'Scalable',
+    value: 'Lambda + SQS',
+  },
+  {
+    icon: Server,
+    title: 'Cloud Native',
+    value: 'AWS + Cloudflare R2',
+  },
+];
+
+const features = [
+  'Multi Bucket Storage',
+  'Frontend Presigned Uploads',
+  'Background Workers',
+  'Thumbnail Processing',
+];
+
+const technologies = [
+  'TanStack Start',
+  'NestJS',
+  'AWS',
+  'Lambda',
+  'Prisma',
+  'Docker',
+  'MySQL',
+  'Cloudflare R2',
+];
+
+export function FeaturedProject() {
+  return (
+    <Section id="featured-project">
+      <Reveal>
+        <div className="mx-auto mb-16 max-w-2xl text-center">
+          <div className="text-accent-primary border-border bg-surface mb-5 inline-flex items-center gap-2 rounded-full border px-4 py-2 text-xs font-semibold tracking-[0.18em] uppercase">
+            <span className="bg-accent-primary h-2 w-2 rounded-full" />
+            Featured Project
+          </div>
+
+          <h2 className="text-4xl font-bold md:text-5xl">VaultDrive</h2>
+
+          <p className="text-text-secondary mt-5 text-lg leading-8">
+            Enterprise cloud storage platform built for secure file management,
+            scalable uploads, and modern cloud infrastructure.
+          </p>
+        </div>
+      </Reveal>
+
+      <div className="grid items-center gap-16 lg:grid-cols-12">
+        {/* Screenshot */}
+        <Reveal className="lg:col-span-6">
+          <GlassLaptopPanel image={vaultDashboard} alt="VaultDrive dashboard" />
+        </Reveal>
+
+        {/* Content */}
+        <div className="space-y-8 lg:col-span-6">
+          {/* Highlight Cards */}
+          <Reveal delay={0.1}>
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+              {highlights.map(item => {
+                const Icon = item.icon;
+
+                return (
+                  <div
+                    key={item.title}
+                    className="border-border bg-surface rounded-2xl border p-5"
+                  >
+                    <Icon className="text-accent-primary mb-4 h-5 w-5" />
+
+                    <h3 className="mb-1 font-semibold">{item.title}</h3>
+
+                    <p className="text-text-secondary text-sm">{item.value}</p>
+                  </div>
+                );
+              })}
+            </div>
+          </Reveal>
+
+          {/* Feature List */}
+          <Reveal delay={0.2}>
+            <div className="grid gap-4 sm:grid-cols-2">
+              {features.map(feature => (
+                <div key={feature} className="flex items-center gap-3">
+                  <CheckCircle2 className="text-accent-primary h-5 w-5 shrink-0" />
+
+                  <span className="text-text-secondary text-sm">{feature}</span>
+                </div>
+              ))}
+            </div>
+          </Reveal>
+
+          {/* Technology */}
+          <Reveal delay={0.3}>
+            <div className="flex flex-wrap gap-2">
+              {technologies.map(tech => (
+                <span
+                  key={tech}
+                  className="border-border bg-surface text-text-muted rounded-full border px-3 py-1 text-xs"
+                >
+                  {tech}
+                </span>
+              ))}
+            </div>
+          </Reveal>
+
+          {/* CTA */}
+          <Reveal delay={0.4}>
+            <LinkButton
+              variant="primary"
+              href="https://drive.vaultdrive.app"
+              icon={faExternalLink}
+              label="Explore VaultDrive"
+              className="gap-2"
+            />
+          </Reveal>
+        </div>
+      </div>
+    </Section>
+  );
+}
diff --git a/src/components/sections/Footer.tsx b/src/components/sections/Footer.tsx
new file mode 100644
index 0000000..d02ab9d
--- /dev/null
+++ b/src/components/sections/Footer.tsx
@@ -0,0 +1,115 @@
+import { faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ArrowUpRight, Mail } from 'lucide-react';
+
+import { Container } from '../ui/Container';
+
+export function Footer() {
+  const year = new Date().getFullYear();
+
+  return (
+    <footer className="border-border bg-surface/30 border-t">
+      <Container>
+        <div className="flex flex-col gap-12 py-16 lg:flex-row lg:items-start lg:justify-between">
+          {/* Brand */}
+          <div className="max-w-md">
+            <a href="#hero" className="inline-flex items-center gap-3">
+              <div className="bg-accent-primary flex h-10 w-10 items-center justify-center rounded-xl font-bold text-black">
+                LP
+              </div>
+
+              <div>
+                <h3 className="text-lg font-semibold">Lakshmikanta Patra</h3>
+
+                <p className="text-text-muted text-sm">Full Stack Engineer</p>
+              </div>
+            </a>
+
+            <p className="text-text-secondary mt-6 leading-7">
+              Building scalable SaaS applications with React, NestJS, TypeScript
+              and AWS. Available for freelance projects worldwide.
+            </p>
+          </div>
+
+          {/* Navigation */}
+          <div>
+            <h4 className="mb-5 font-semibold">Navigation</h4>
+
+            <nav className="flex flex-col gap-3 text-sm">
+              <a
+                href="#services"
+                className="hover:text-accent-primary transition-colors"
+              >
+                Services
+              </a>
+
+              <a
+                href="#about"
+                className="hover:text-accent-primary transition-colors"
+              >
+                About
+              </a>
+
+              <a
+                href="#contact"
+                className="hover:text-accent-primary transition-colors"
+              >
+                Contact
+              </a>
+            </nav>
+          </div>
+
+          {/* Connect */}
+          <div>
+            <h4 className="mb-5 font-semibold">Connect</h4>
+
+            <div className="space-y-4">
+              <a
+                href="mailto:frontendfixer@email.com"
+                className="text-text-secondary hover:text-accent-primary flex items-center gap-3 transition-colors"
+              >
+                <Mail className="h-4 w-4" />
+                frontendfixer@email.com
+              </a>
+
+              <a
+                href="https://github.com/frontendfixer"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-text-secondary hover:text-accent-primary flex items-center gap-3 transition-colors"
+              >
+                <FontAwesomeIcon icon={faGithub} className="h-4 w-4" />
+                GitHub
+              </a>
+
+              <a
+                href="https://linkedin.com/in/frontendfixer"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-text-secondary hover:text-accent-primary flex items-center gap-3 transition-colors"
+              >
+                <FontAwesomeIcon icon={faLinkedin} className="h-4 w-4" />
+                LinkedIn
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <div className="border-border flex flex-col items-center justify-between gap-5 border-t py-6 text-sm md:flex-row">
+          <p className="text-text-muted">
+            © {year} Lakshmikanta Patra. Built with React, TypeScript & Tailwind
+            CSS.
+          </p>
+
+          <a
+            href="#hero"
+            className="text-accent-primary hover:text-accent-secondary inline-flex items-center gap-2 font-medium transition-colors"
+          >
+            Back to top
+            <ArrowUpRight className="h-4 w-4" />
+          </a>
+        </div>
+      </Container>
+    </footer>
+  );
+}
diff --git a/src/components/sections/HeroSection.tsx b/src/components/sections/HeroSection.tsx
new file mode 100644
index 0000000..cc0ebab
--- /dev/null
+++ b/src/components/sections/HeroSection.tsx
@@ -0,0 +1,104 @@
+import { Briefcase } from 'lucide-react';
+import { ReactNode } from 'react';
+
+import heroDashboard from '#assets/images/portfolio/hero-dashboard.webp';
+import { GlassLaptopPanel } from '#components/GlassLaptopPanel';
+import { ContactButton } from '#components/sections/ContactButton';
+
+import { Container } from '../ui/Container';
+import { Reveal } from '../ui/Reveal';
+
+function Accent({ children }: { children: ReactNode }) {
+  return (
+    <span className="from-accent-primary to-accent-secondary bg-linear-to-r bg-clip-text text-transparent">
+      {children}
+    </span>
+  );
+}
+
+function TrustItem({ children }: { children: ReactNode }) {
+  return (
+    <div className="text-text-secondary flex items-center gap-2 text-sm">
+      <span className="bg-accent-primary h-2 w-2 rounded-full" />
+      {children}
+    </div>
+  );
+}
+
+export function HeroSection() {
+  return (
+    <section
+      id="hero"
+      className="relative overflow-hidden pt-32 pb-20 md:pt-48 md:pb-32"
+    >
+      {/* Background Glow */}
+      <div className="bg-accent-primary/10 pointer-events-none absolute top-0 left-1/2 h-[520px] w-full max-w-3xl -translate-x-1/2 rounded-full blur-[120px]" />
+
+      <Container>
+        <div className="grid items-center gap-16 lg:grid-cols-[3fr_2fr]">
+          <div>
+            {/* Availability Badge */}
+            <Reveal>
+              <div className="border-border bg-surface/70 mb-6 inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm backdrop-blur-md">
+                <Briefcase className="text-accent-primary h-4 w-4" />
+                <span className="text-text-secondary">
+                  Available for freelance projects
+                </span>
+              </div>
+            </Reveal>
+
+            {/* Headline */}
+            <Reveal delay={0.05}>
+              <h1 className="max-w-3xl text-5xl leading-[1.05] font-bold tracking-tight text-balance md:text-6xl lg:text-7xl">
+                I build production-ready <Accent>SaaS</Accent> platforms
+                <br />
+                from MVP to <Accent>enterprise-grade</Accent> infrastructure
+              </h1>
+            </Reveal>
+
+            {/* Description */}
+            <Reveal delay={0.1}>
+              <p className="text-text-secondary mt-8 max-w-xl text-lg leading-8 md:text-xl">
+                I help startups and growing businesses design, build, and scale
+                secure cloud-native SaaS products using React, NestJS, AWS, and
+                modern backend architecture.
+              </p>
+            </Reveal>
+
+            {/* CTA */}
+            <Reveal delay={0.15}>
+              <div className="mt-10 flex flex-wrap items-center gap-4">
+                <ContactButton />
+
+                {/*<a*/}
+                {/*  href="#projects"*/}
+                {/*  className="border-border hover:bg-surface inline-flex h-14 items-center justify-center rounded-2xl border px-8 text-base font-medium transition-all duration-300 hover:-translate-y-0.5"*/}
+                {/*>*/}
+                {/*  View Projects*/}
+                {/*  <ArrowRight className="ml-2 h-4 w-4" />*/}
+                {/*</a>*/}
+              </div>
+            </Reveal>
+
+            {/* Trust Row */}
+            <Reveal delay={0.2}>
+              <div className="mt-8 flex flex-wrap gap-x-6 gap-y-3">
+                <TrustItem>Available for freelance</TrustItem>
+                <TrustItem>Remote worldwide</TrustItem>
+                <TrustItem>Replies within 24 hours</TrustItem>
+              </div>
+            </Reveal>
+          </div>
+
+          {/* Hero Image */}
+          <Reveal delay={0.25} className="lg:justify-self-end">
+            <GlassLaptopPanel
+              image={heroDashboard}
+              alt="Premium SaaS analytics dashboard"
+            />
+          </Reveal>
+        </div>
+      </Container>
+    </section>
+  );
+}
diff --git a/src/components/sections/Metrics.tsx b/src/components/sections/Metrics.tsx
new file mode 100644
index 0000000..cea6470
--- /dev/null
+++ b/src/components/sections/Metrics.tsx
@@ -0,0 +1,32 @@
+import { Container } from '../ui/Container';
+import { Reveal } from '../ui/Reveal';
+const metrics = [
+  { value: '30+', label: 'Projects shipped' },
+  { value: '4+', label: 'Years in production' },
+  { value: '100%', label: 'On-time delivery' },
+  { value: '0', label: 'Data-loss incidents' },
+];
+export function Metrics() {
+  return (
+    <div className="bg-surface/30 border-border border-y py-20">
+      <Container>
+        <div className="divide-border/0 md:divide-border grid grid-cols-2 gap-8 divide-x md:grid-cols-4">
+          {metrics.map((metric, i) => (
+            <Reveal
+              key={metric.label}
+              delay={i * 0.1}
+              className="px-4 text-center"
+            >
+              <div className="to-text-secondary mb-2 bg-linear-to-br from-white bg-clip-text text-4xl font-bold tracking-tight text-transparent md:text-5xl">
+                {metric.value}
+              </div>
+              <div className="text-text-muted text-sm font-medium tracking-wider uppercase">
+                {metric.label}
+              </div>
+            </Reveal>
+          ))}
+        </div>
+      </Container>
+    </div>
+  );
+}
diff --git a/src/components/sections/Process.tsx b/src/components/sections/Process.tsx
new file mode 100644
index 0000000..d806c60
--- /dev/null
+++ b/src/components/sections/Process.tsx
@@ -0,0 +1,83 @@
+import { LifeBuoy, PenTool, Rocket, Search, Terminal } from 'lucide-react';
+
+import { Reveal } from '../ui/Reveal';
+import { Section } from '../ui/Section';
+const processSteps = [
+  {
+    icon: Search,
+    title: 'Discover',
+    description:
+      'Understanding your business goals, users, and technical requirements to define a clear scope.',
+  },
+  {
+    icon: PenTool,
+    title: 'Plan',
+    description:
+      'Architecting the database schema, API design, and selecting the optimal technology stack.',
+  },
+  {
+    icon: Terminal,
+    title: 'Develop',
+    description:
+      'Writing clean, typed, and tested code using modern frameworks and best practices.',
+  },
+  {
+    icon: Rocket,
+    title: 'Deploy',
+    description:
+      'Setting up CI/CD pipelines and deploying to cloud infrastructure with zero downtime.',
+  },
+  {
+    icon: LifeBuoy,
+    title: 'Support',
+    description:
+      'Monitoring performance, fixing edge-case bugs, and scaling architecture as needed.',
+  },
+];
+export function Process() {
+  return (
+    <Section id="process" className="bg-background">
+      <Reveal>
+        <div className="mx-auto mb-16 max-w-2xl text-center md:mb-24">
+          <h2 className="mb-6 text-3xl font-bold md:text-5xl">
+            Development Process
+          </h2>
+          <p className="text-text-secondary text-lg">
+            A structured, transparent approach to delivering enterprise-grade
+            software on time.
+          </p>
+        </div>
+      </Reveal>
+      <div className="relative mx-auto max-w-4xl">
+        <div className="bg-border absolute top-0 bottom-0 left-6.75 w-px -translate-x-1/2 md:left-1/2" />
+        <div className="flex flex-col gap-12 md:gap-24">
+          {processSteps.map((step, i) => {
+            const isEven = i % 2 === 0;
+            return (
+              <Reveal key={step.title} delay={i * 0.1}>
+                <div
+                  className={`relative flex flex-col items-center gap-8 md:flex-row md:justify-between md:gap-0 ${isEven ? 'md:flex-row-reverse' : ''}`}
+                >
+                  <div
+                    className={`w-full pl-16 md:w-[calc(50%-3rem)] md:pl-0 ${isEven ? 'md:text-left' : 'md:text-right'}`}
+                  >
+                    <h3 className="mb-2 text-xl font-bold text-white">
+                      {step.title}
+                    </h3>
+                    <p className="text-text-secondary">{step.description}</p>
+                  </div>
+                  <div className="bg-background border-surface absolute left-0 z-10 flex h-14 w-14 translate-x-0 items-center justify-center rounded-full border-2 md:left-1/2 md:-translate-x-1/2">
+                    <div className="bg-accent-primary/10 flex h-10 w-10 items-center justify-center rounded-full">
+                      <step.icon className="text-accent-primary h-5 w-5" />
+                    </div>
+                  </div>
+                  <div className="hidden w-[calc(50%-3rem)] md:block" />
+                </div>
+              </Reveal>
+            );
+          })}
+        </div>
+      </div>
+    </Section>
+  );
+}
diff --git a/src/components/sections/Services.tsx b/src/components/sections/Services.tsx
new file mode 100644
index 0000000..ac1e85a
--- /dev/null
+++ b/src/components/sections/Services.tsx
@@ -0,0 +1,60 @@
+import { Code2, Cpu, Database } from 'lucide-react';
+
+import { Reveal } from '../ui/Reveal';
+import { Section } from '../ui/Section';
+
+const services = [
+  {
+    icon: Code2,
+    title: 'SaaS & MVP Development',
+    description:
+      'End-to-end product builds — from architecture to launch, with REST/GraphQL APIs built on NestJS.',
+  },
+  {
+    icon: Database,
+    title: 'Backend & Cloud Architecture',
+    description:
+      'Resilient database schemas, microservices, and AWS/Docker/Cloudflare deployments tailored for scale.',
+  },
+  {
+    icon: Cpu,
+    title: 'Performance & Technical Consulting',
+    description:
+      'Auditing and accelerating slow Next.js/Node.js apps, plus strategic guidance for early-stage teams.',
+  },
+];
+export function Services() {
+  return (
+    <Section id="services" className="bg-background relative">
+      <div className="bg-noise pointer-events-none absolute inset-0 opacity-20" />
+
+      <Reveal>
+        <div className="mx-auto mb-16 max-w-2xl text-center md:mb-24">
+          <h2 className="mb-6 text-3xl font-bold md:text-5xl">
+            Expertise & Services
+          </h2>
+          <p className="text-text-secondary text-lg">
+            I specialize in the technical foundation required to launch and
+            scale successful software products.
+          </p>
+        </div>
+      </Reveal>
+
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {services.map((service, i) => (
+          <Reveal key={service.title} delay={i * 0.1}>
+            <div className="group glass-panel hover:bg-surface h-full rounded-3xl p-8 transition-colors duration-300">
+              <div className="bg-accent-primary/10 mb-6 flex h-12 w-12 items-center justify-center rounded-xl transition-transform duration-300 group-hover:scale-110">
+                <service.icon className="text-accent-primary h-6 w-6" />
+              </div>
+              <h3 className="mb-4 text-xl font-bold">{service.title}</h3>
+              <p className="text-text-secondary leading-relaxed">
+                {service.description}
+              </p>
+            </div>
+          </Reveal>
+        ))}
+      </div>
+    </Section>
+  );
+}
diff --git a/src/components/sections/TechStack.tsx b/src/components/sections/TechStack.tsx
new file mode 100644
index 0000000..66f7ccd
--- /dev/null
+++ b/src/components/sections/TechStack.tsx
@@ -0,0 +1,74 @@
+import { Reveal } from '../ui/Reveal';
+import { Section } from '../ui/Section';
+
+const techGroups = [
+  {
+    category: 'Frontend',
+    items: ['React', 'Next.js', 'TypeScript', 'Tailwind CSS', 'React Query'],
+  },
+  {
+    category: 'Backend',
+    items: ['NestJS', 'Node.js', 'REST APIs', 'GraphQL', 'Prisma ORM'],
+  },
+  {
+    category: 'Cloud & DevOps',
+    items: [
+      'AWS',
+      'Lambda',
+      'S3',
+      'Cloudflare',
+      'Docker',
+      'GitHub Actions',
+      'CI/CD',
+    ],
+  },
+  {
+    category: 'Databases',
+    items: ['MySQL', 'PostgreSQL', 'Redis'],
+  },
+];
+
+export function TechStack() {
+  return (
+    <Section id="tech-stack" className="border-border bg-surface/20 border-y">
+      <Reveal>
+        <div className="mx-auto mb-16 max-w-2xl text-center md:mb-24">
+          <h2 className="mb-6 text-3xl font-bold md:text-5xl">
+            Technical Arsenal
+          </h2>
+          <p className="text-text-secondary text-lg">
+            I build with modern, battle-tested technologies optimized for
+            developer experience and application performance.
+          </p>
+        </div>
+      </Reveal>
+
+      <div className="sxl:gap-12 grid grid-cols-1 gap-8 md:grid-cols-2">
+        {techGroups.map((group, i) => (
+          <Reveal key={group.category} delay={i * 0.1}>
+            <div>
+              <div className="mb-8 flex items-center gap-4">
+                <div className="bg-border h-px flex-1" />
+                <h3 className="text-text-muted text-sm font-medium tracking-widest uppercase">
+                  {group.category}
+                </h3>
+                <div className="bg-border h-px flex-1" />
+              </div>
+
+              <div className="flex flex-wrap justify-center gap-3">
+                {group.items.map(tech => (
+                  <div
+                    key={tech}
+                    className="bg-surface border-border hover:border-accent-primary/50 hover:bg-accent-primary/5 cursor-default rounded-xl border px-4 py-2 text-sm font-medium transition-colors"
+                  >
+                    {tech}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </Reveal>
+        ))}
+      </div>
+    </Section>
+  );
+}
diff --git a/src/components/sections/Testimonials.tsx b/src/components/sections/Testimonials.tsx
new file mode 100644
index 0000000..5b664f8
--- /dev/null
+++ b/src/components/sections/Testimonials.tsx
@@ -0,0 +1,64 @@
+import { Quote } from 'lucide-react';
+
+import { Reveal } from '../ui/Reveal';
+import { Section } from '../ui/Section';
+
+const testimonials = [
+  {
+    quote:
+      "An exceptional engineer who doesn't just write code, but solves complex business problems. Delivered our entire cloud infrastructure ahead of schedule.",
+    author: 'Sarah J.',
+    role: 'CTO, TechStartup',
+  },
+  {
+    quote:
+      'Transformed our legacy monolith into a performant, scalable Next.js and Node.js architecture. The performance gains were immediate.',
+    author: 'Michael T.',
+    role: 'Engineering Manager',
+  },
+  {
+    quote:
+      'Clean code, excellent communication, and a deep understanding of modern SaaS architecture. Highly recommended for any serious technical project.',
+    author: 'Elena R.',
+    role: 'Founder',
+  },
+];
+
+export function Testimonials() {
+  return (
+    <Section id="testimonials" className="bg-background relative">
+      <Reveal>
+        <div className="mx-auto mb-16 max-w-2xl text-center md:mb-24">
+          <h2 className="mb-6 text-3xl font-bold md:text-5xl">
+            Client Feedback
+          </h2>
+          <p className="text-text-secondary text-lg">
+            What engineering leaders and founders say about my work.
+          </p>
+        </div>
+      </Reveal>
+
+      <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
+        {testimonials.map((t, i) => (
+          <Reveal key={t.author} delay={i * 0.1}>
+            <div className="glass-panel relative flex h-full flex-col rounded-3xl p-8">
+              <Quote className="text-accent-primary/20 absolute top-6 right-6 h-10 w-10" />
+              <p className="text-text-secondary relative z-10 mb-8 flex-1 leading-relaxed">
+                "{t.quote}"
+              </p>
+              <div className="mt-auto flex items-center gap-4">
+                <div className="bg-surface border-border text-text-muted flex h-12 w-12 items-center justify-center rounded-full border font-bold">
+                  {t.author.charAt(0)}
+                </div>
+                <div>
+                  <div className="font-bold text-white">{t.author}</div>
+                  <div className="text-text-muted text-sm">{t.role}</div>
+                </div>
+              </div>
+            </div>
+          </Reveal>
+        ))}
+      </div>
+    </Section>
+  );
+}
diff --git a/src/components/sections/TrustStrip.tsx b/src/components/sections/TrustStrip.tsx
new file mode 100644
index 0000000..01081de
--- /dev/null
+++ b/src/components/sections/TrustStrip.tsx
@@ -0,0 +1,57 @@
+import { CheckCircle2 } from 'lucide-react';
+
+import { Container } from '../ui/Container';
+
+const expertise = [
+  'Full Stack Engineer',
+  'Next.js',
+  'NestJS',
+  'AWS',
+  'Cloud Architecture',
+  'TypeScript',
+];
+
+const trustSignals = [
+  'Available for Freelance',
+  'Replies within 24 Hours',
+  'Remote Worldwide',
+];
+
+export function TrustStrip() {
+  return (
+    <section className="border-border bg-surface/40 border-y backdrop-blur-sm">
+      <Container>
+        <div className="flex flex-col gap-6 py-6">
+          {/* Expertise */}
+          <div className="flex flex-wrap items-center justify-center gap-x-8 gap-y-3">
+            {expertise.map(item => (
+              <div
+                key={item}
+                className="text-text-muted flex items-center gap-2 text-sm font-medium tracking-[0.14em] uppercase"
+              >
+                <span className="bg-border h-1.5 w-1.5 rounded-full" />
+                {item}
+              </div>
+            ))}
+          </div>
+
+          {/* Divider */}
+          <div className="bg-border h-px w-full" />
+
+          {/* Trust Signals */}
+          <div className="flex flex-wrap items-center justify-center gap-x-8 gap-y-3">
+            {trustSignals.map(item => (
+              <div
+                key={item}
+                className="text-text-secondary flex items-center gap-2 text-sm"
+              >
+                <CheckCircle2 className="text-accent-primary h-4 w-4" />
+                <span>{item}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
new file mode 100644
index 0000000..a1f7f86
--- /dev/null
+++ b/src/components/ui/Button.tsx
@@ -0,0 +1,50 @@
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+
+import { cn } from '#lib/utils';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'cta';
+  size?: 'sm' | 'md' | 'lg' | 'icon';
+  asChild?: boolean;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    { className, variant = 'primary', size = 'md', asChild = false, ...props },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : 'button';
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(
+          'focus-visible:ring-border inline-flex items-center justify-center rounded-xl text-sm font-semibold whitespace-nowrap transition-colors focus-visible:ring-1 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
+          {
+            'bg-accent-primary hover:bg-accent-primary/90 text-black shadow-sm':
+              variant === 'primary',
+            'bg-secondary text-text-primary hover:bg-surface border-border border shadow-sm':
+              variant === 'secondary',
+            'border-border hover:bg-surface text-text-primary border bg-transparent':
+              variant === 'outline',
+            'hover:bg-surface text-text-primary': variant === 'ghost',
+            'text-accent-primary underline-offset-4 hover:underline':
+              variant === 'link',
+            'bg-gradient-to-r from-teal-400 to-cyan-500 text-black shadow-[0_10px_30px_rgba(6,182,212,0.28)] hover:-translate-y-0.5 hover:from-teal-300 hover:to-cyan-400 hover:shadow-[0_20px_50px_rgba(6,182,212,0.38)]':
+              variant === 'cta',
+            'h-9 px-4 py-2': size === 'md',
+            'h-8 rounded-lg px-3 text-xs': size === 'sm',
+            'h-11 rounded-xl px-8': size === 'lg',
+            'h-9 w-9': size === 'icon',
+          },
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { Button };
diff --git a/src/components/ui/Container.tsx b/src/components/ui/Container.tsx
new file mode 100644
index 0000000..8621c5f
--- /dev/null
+++ b/src/components/ui/Container.tsx
@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+
+import { cn } from '#lib/utils';
+
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  className?: string;
+}
+
+export function Container({ children, className }: ContainerProps) {
+  return (
+    <div className={cn('mx-auto w-full max-w-360 px-6 md:px-8', className)}>
+      {children}
+    </div>
+  );
+}
diff --git a/src/components/ui/LinkButton.tsx b/src/components/ui/LinkButton.tsx
new file mode 100644
index 0000000..4345aa0
--- /dev/null
+++ b/src/components/ui/LinkButton.tsx
@@ -0,0 +1,30 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React from 'react';
+
+import { Button } from '#components/ui/Button.tsx';
+
+interface LinkButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+  href: string;
+  label: string;
+  icon: IconProp;
+  variant?: 'primary' | 'secondary';
+  className?: string;
+}
+
+export function LinkButton({
+  href,
+  label,
+  icon,
+  variant = 'secondary',
+  className,
+}: LinkButtonProps) {
+  return (
+    <Button variant={variant} className={className} asChild>
+      <a target="_blank" href={href}>
+        {label}
+        <FontAwesomeIcon icon={icon} className="h-4 w-4" />
+      </a>
+    </Button>
+  );
+}
diff --git a/src/components/ui/Reveal.tsx b/src/components/ui/Reveal.tsx
new file mode 100644
index 0000000..b1ac8f6
--- /dev/null
+++ b/src/components/ui/Reveal.tsx
@@ -0,0 +1,39 @@
+import { motion, useReducedMotion } from 'framer-motion';
+import { ReactNode } from 'react';
+
+import { cn } from '#lib/utils';
+
+interface RevealProps {
+  children: ReactNode;
+  width?: 'fit-content' | '100%';
+  delay?: number;
+  className?: string;
+}
+
+const VIEWPORT = { once: true, margin: '-50px' };
+
+export function Reveal({
+  children,
+  width = '100%',
+  delay = 0,
+  className,
+}: RevealProps) {
+  const shouldReduceMotion = useReducedMotion();
+
+  return (
+    <div style={{ width }} className={cn('relative', className)}>
+      <motion.div
+        initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={VIEWPORT}
+        transition={{
+          duration: shouldReduceMotion ? 0 : 0.5,
+          delay: shouldReduceMotion ? 0 : delay,
+          ease: 'easeOut',
+        }}
+      >
+        {children}
+      </motion.div>
+    </div>
+  );
+}
diff --git a/src/components/ui/Section.tsx b/src/components/ui/Section.tsx
new file mode 100644
index 0000000..556d6f4
--- /dev/null
+++ b/src/components/ui/Section.tsx
@@ -0,0 +1,25 @@
+import React, { ReactNode } from 'react';
+
+import { cn } from '#lib/utils';
+
+interface SectionProps extends React.HTMLAttributes<HTMLDivElement> {
+  id?: string;
+  children: ReactNode;
+  containerClass?: string;
+  className?: string;
+}
+
+import { Container } from './Container';
+
+export function Section({
+  id,
+  className,
+  children,
+  containerClass,
+}: SectionProps) {
+  return (
+    <section id={id} className={cn('py-20 md:py-32', className)}>
+      <Container className={containerClass}>{children}</Container>
+    </section>
+  );
+}
diff --git a/src/config/site.ts b/src/config/site.ts
new file mode 100644
index 0000000..f62675f
--- /dev/null
+++ b/src/config/site.ts
@@ -0,0 +1,77 @@
+export interface OpenGraphConfig {
+  type: string;
+  image: string;
+  imageWidth: number;
+  imageHeight: number;
+  siteName: string;
+}
+
+export interface TwitterConfig {
+  card: 'summary' | 'summary_large_image' | 'app' | 'player';
+  site: string;
+  creator: string;
+  image: string;
+}
+
+export interface SiteConfig {
+  siteName: string;
+  title: string;
+  description: string;
+  url: string;
+  locale: string;
+  language: string;
+  author: string;
+  email: string;
+  github: string;
+  linkedin: string;
+  themeColor: string;
+  backgroundColor: string;
+  keywords: string[];
+  twitter: TwitterConfig;
+  openGraph: OpenGraphConfig;
+  robots: string;
+}
+
+const siteUrl = 'https://frontendfixer.dev';
+
+export const siteConfig: SiteConfig = {
+  siteName: 'FrontendFixer',
+  title: 'FrontendFixer | Full-Stack Developer for SaaS & MVPs',
+  description:
+    'I help startups and growing businesses design, build, and scale secure cloud-native SaaS products using React, NestJS, AWS, and modern backend architecture.',
+  url: siteUrl,
+  locale: 'en_US',
+  language: 'en',
+  author: 'Lakshmikanta Patra',
+  email: 'frontendfixer@email.com',
+  github: 'https://github.com/frontendfixer',
+  linkedin: 'https://linkedin.com/in/frontendfixer',
+  themeColor: '#14b8a6',
+  backgroundColor: '#09090B',
+  keywords: [
+    'full stack developer',
+    'SaaS developer',
+    'MVP development',
+    'React developer',
+    'NestJS',
+    'TypeScript',
+    'AWS',
+    'freelance developer',
+    'cloud-native applications',
+    'FrontendFixer',
+  ],
+  twitter: {
+    card: 'summary_large_image',
+    site: '@frontendfixer',
+    creator: '@frontendfixer',
+    image: `${siteUrl}/twitter-image.png`,
+  },
+  openGraph: {
+    type: 'website',
+    image: `${siteUrl}/og-image.png`,
+    imageWidth: 1200,
+    imageHeight: 630,
+    siteName: 'FrontendFixer',
+  },
+  robots: 'index, follow',
+};
diff --git a/src/data/Projects.ts b/src/data/Projects.ts
deleted file mode 100644
index e2b71a2..0000000
--- a/src/data/Projects.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import demoImg from '/demo.webp';
-
-import crwnClothing from './screenshot/crwn-clothing.webp';
-import elctricSkateboards from './screenshot/electric-skateboards-USA.webp';
-import forkifyRecipe from './screenshot/forkify-recipe-js.webp';
-import openTable from './screenshot/open-table.webp';
-import adminDashboard from './screenshot/react-admin-dashboard.webp';
-
-export type ProjectType = {
-  id: number;
-  title: string;
-  description?: string;
-  image: string;
-  repo: string;
-  url: string;
-  development: {
-    language?: string[];
-    tools?: string[];
-  };
-  featured: boolean;
-};
-
-const Projects: ProjectType[] = [
-  {
-    id: 1,
-    title: 'Crwn Clothing Online Store',
-    description: 'This is a project 1',
-    image: crwnClothing,
-    repo: 'https://github.com/frontendfixer/crwn-clothing-redux',
-    url: 'https://crwn-clothing-redux.vercel.app',
-    development: {
-      language: [
-        'firebase',
-        'react',
-        'typescript',
-        'HTML',
-        'CSS',
-        'redux',
-        'styled_components',
-      ],
-    },
-    featured: true,
-  },
-  {
-    id: 2,
-    title: 'Open Table | Book a Table at Any Restaurant',
-    description: 'This is a project 2',
-    image: openTable,
-    repo: 'https://github.com/frontendfixer/OpenTable-NextJS-App',
-    url: 'https://open-table-next-js-app.vercel.app',
-    development: {
-      language: [
-        'nextjs',
-        'react',
-        'typescript',
-        'redux',
-        'MUI',
-        'prisma',
-        'postgreSQL',
-        'HTML',
-        'CSS',
-      ],
-    },
-    featured: true,
-  },
-  {
-    id: 3,
-    title: 'Admin Dashboard | Build with React',
-    description: 'This is a project 2',
-    image: adminDashboard,
-    repo: 'https://github.com/frontendfixer/react-admin-ui',
-    url: 'https://react-admin-dashboard-self.vercel.app/',
-    development: {
-      language: ['react', 'typescript', 'recharts', 'MUI', 'HTML', 'CSS'],
-    },
-    featured: true,
-  },
-  {
-    id: 4,
-    title: 'Forkify | Search Recipe with Ingredients',
-    description: 'This is a project 4',
-    image: forkifyRecipe,
-    repo: 'https://github.com/frontendfixer/forkify-recipe-js',
-    url: 'https://forkify-recipe-js.vercel.app/#5ed6604691c37cdc054bd00c',
-    development: {
-      language: ['javascript', 'SASS', 'MVP_Architecture', 'HTML', 'CSS'],
-    },
-    featured: true,
-  },
-  {
-    id: 5,
-    title: 'Electric Skateboards USA',
-    description: 'This is a project 5',
-    image: elctricSkateboards,
-    repo: 'https://github.com/frontendfixer/electric-skateboards-USA',
-    url: 'https://frontendfixer.github.io/electric-skateboards-USA/',
-    development: {
-      language: ['javascript', 'SASS', 'Static HTML', 'HTML', 'CSS'],
-    },
-    featured: true,
-  },
-  {
-    id: 6,
-    title: 'Project 6',
-    description: 'This is a project 6',
-    image: demoImg,
-    repo: 'https://github.com',
-    url: 'https://www.google.com',
-    development: {
-      language: ['react', 'typescript', 'HTML', 'CSS', 'redux'],
-      tools: ['react', 'typescript'],
-    },
-    featured: false,
-  },
-];
-
-export default Projects;
diff --git a/src/data/Skills.ts b/src/data/Skills.ts
deleted file mode 100644
index 8462faf..0000000
--- a/src/data/Skills.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import AwsLogo from '#assets/images/icons/aws.svg?react';
-import CodeigniterLogo from '#assets/images/icons/codeigniter.svg?react';
-import CssLogo from '#assets/images/icons/css.svg?react';
-import ExpressLogo from '#assets/images/icons/express.svg?react';
-import FigmaLogo from '#assets/images/icons/figma.svg?react';
-import GithubLogo from '#assets/images/icons/github.svg?react';
-import GoLogo from '#assets/images/icons/go.svg?react';
-import HtmlLogo from '#assets/images/icons/html.svg?react';
-import MysqlLogo from '#assets/images/icons/mysql.svg?react';
-import NestJSLogo from '#assets/images/icons/nestjs.svg?react';
-import NextjsLogo from '#assets/images/icons/nextjs.svg?react';
-import NodeJSLogo from '#assets/images/icons/nodejs.svg?react';
-import PhotoshopLogo from '#assets/images/icons/photoshop.svg?react';
-import PhpLogo from '#assets/images/icons/php.svg?react';
-import PythonLogo from '#assets/images/icons/python.svg?react';
-import ReduxLogo from '#assets/images/icons/redux.svg?react';
-import SassLogo from '#assets/images/icons/sass.svg?react';
-import TypescriptLogo from '#assets/images/icons/typescript.svg?react';
-
-type PropsType = {
-  id: string;
-  name: string;
-  Icon: React.FunctionComponent<React.SVGProps<SVGAElement>>;
-  color: string;
-};
-
-export const languages = <PropsType[]>[
-  {
-    id: 'nodejs',
-    name: 'Nodejs',
-    Icon: NodeJSLogo,
-    color: '#61DBFB',
-  },
-  {
-    id: 'typescript',
-    name: 'Typescript',
-    Icon: TypescriptLogo,
-    color: '#61DBFB',
-  },
-  {
-    id: 'golang',
-    name: 'Go',
-    Icon: GoLogo,
-    color: '#61DBFB',
-  },
-  {
-    id: 'python',
-    name: 'Python',
-    Icon: PythonLogo,
-    color: '#61DBFB',
-  },
-  {
-    id: 'php',
-    name: 'PHP',
-    Icon: PhpLogo,
-    color: '#61DBFB',
-  },
-  {
-    id: 'redux',
-    name: 'Redux',
-    Icon: ReduxLogo,
-    color: '#61DBFB',
-  },
-  {
-    id: 'mysql',
-    name: 'MySQL',
-    Icon: MysqlLogo,
-    color: '#61DBFB',
-  },
-  {
-    id: 'html5',
-    name: 'HTML5',
-    Icon: HtmlLogo,
-    color: '#61DBFB',
-  },
-  {
-    id: 'css3',
-    name: 'CSS3',
-    Icon: CssLogo,
-    color: '#61DBFB',
-  },
-  {
-    id: 'sass',
-    name: 'SASS',
-    Icon: SassLogo,
-    color: '#61DBFB',
-  },
-];
-
-export const frameworks = <PropsType[]>[
-  {
-    id: 'nextjs',
-    name: 'Nextjs',
-    Icon: NextjsLogo,
-    color: '#61DBFB',
-  },
-  {
-    id: 'nestjs',
-    name: 'Nestjs',
-    Icon: NestJSLogo,
-    color: '#61DBFB',
-  },
-  {
-    id: 'express',
-    name: 'Express',
-    Icon: ExpressLogo,
-    color: '#61DBFB',
-  },
-  {
-    id: 'codeigniter',
-    name: 'Codeigniter',
-    Icon: CodeigniterLogo,
-    color: '#61DBFB',
-  },
-];
-
-export const tools = <PropsType[]>[
-  {
-    id: 'aws',
-    name: 'AWS Cloud',
-    Icon: AwsLogo,
-  },
-  {
-    id: 'github',
-    name: 'Github',
-    Icon: GithubLogo,
-  },
-  {
-    id: 'figma',
-    name: 'Figma',
-    Icon: FigmaLogo,
-  },
-  {
-    id: 'photoshop',
-    name: 'PhotoShop',
-    Icon: PhotoshopLogo,
-  },
-];
diff --git a/src/data/Social.ts b/src/data/Social.ts
deleted file mode 100644
index a55a88d..0000000
--- a/src/data/Social.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import {
-  faGithub,
-  faInstagram,
-  faLinkedin,
-  faTwitter,
-} from '@fortawesome/free-brands-svg-icons';
-
-export type SocialLink = {
-  id: number;
-  name: string;
-  url: string;
-  icon: IconProp;
-};
-
-export const socialLinks: SocialLink[] = [
-  {
-    id: 1,
-    name: 'GutHub',
-    url: 'https://git.new/frontendfixer',
-    icon: faGithub,
-  },
-  {
-    id: 2,
-    name: 'LinkedIn',
-    url: 'https://dub.sh/lakshmikanta-linkedin',
-    icon: faLinkedin,
-  },
-  {
-    id: 3,
-    name: 'Instagram',
-    url: 'https://dub.sh/frontendfixer-insta',
-    icon: faInstagram,
-  },
-  {
-    id: 4,
-    name: 'Twitter',
-    url: 'https://dub.sh/frontendfixer-x',
-    icon: faTwitter,
-  },
-];
diff --git a/src/data/screenshot/crwn-clothing.webp b/src/data/screenshot/crwn-clothing.webp
deleted file mode 100644
index 0c67727..0000000
Binary files a/src/data/screenshot/crwn-clothing.webp and /dev/null differ
diff --git a/src/data/screenshot/electric-skateboards-USA.webp b/src/data/screenshot/electric-skateboards-USA.webp
deleted file mode 100644
index 967df4f..0000000
Binary files a/src/data/screenshot/electric-skateboards-USA.webp and /dev/null differ
diff --git a/src/data/screenshot/forkify-recipe-js.webp b/src/data/screenshot/forkify-recipe-js.webp
deleted file mode 100644
index 9e267de..0000000
Binary files a/src/data/screenshot/forkify-recipe-js.webp and /dev/null differ
diff --git a/src/data/screenshot/open-table.webp b/src/data/screenshot/open-table.webp
deleted file mode 100644
index 37cff13..0000000
Binary files a/src/data/screenshot/open-table.webp and /dev/null differ
diff --git a/src/data/screenshot/react-admin-dashboard.webp b/src/data/screenshot/react-admin-dashboard.webp
deleted file mode 100644
index e62b10f..0000000
Binary files a/src/data/screenshot/react-admin-dashboard.webp and /dev/null differ
diff --git a/src/index.css b/src/index.css
index 760f3e4..3867a13 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,199 +1,70 @@
-@import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&family=Rubik:wght@300;400;500;700&display=swap')
-layer(base);
-
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 @import 'tailwindcss';
 
-@custom-variant dark (&:is(.dark *));
-
-@utility container {
-  margin-inline: auto;
-}
-
 @theme {
   --font-*: initial;
-  --font-sans: Rubik, sans-serif;
-  --font-serif: PT Serif, serif;
-
-  --spacing-base: 0.75rem;
-
-  --color-primary: hsl(180 100% 40%);
-  --color-primary-400: hsl(180 100% 76%);
-  --color-primary-500: hsl(180 90% 58%);
-  --color-primary-600: hsl(180 100% 40%);
-  --color-primary-700: hsl(180 80% 36%);
-
-  --color-secondary: hsl(259 100% 59%);
-  --color-secondary-400: hsl(259 100% 79%);
-  --color-secondary-500: hsl(259 100% 69%);
-  --color-secondary-600: hsl(259 100% 59%);
-  --color-secondary-700: hsl(259 100% 39%);
-
-  --color-white: hsl(240 21% 95%);
-  --color-white-full: hsl(255 100% 100%);
-
-  --color-dark: hsl(240 10% 14%);
-  --color-dark-300: hsl(240 10% 84%);
-  --color-dark-400: hsl(240 10% 70%);
-  --color-dark-500: hsl(240 10% 50%);
-  --color-dark-600: hsl(240 10% 40%);
-  --color-dark-700: hsl(240 10% 30%);
-  --color-dark-800: hsl(240 10% 20%);
-  --color-dark-900: hsl(240 10% 14%);
-
-  --animate-slideUp: slideUp 0.5s ease-in-out forwards;
-  --animate-slideLeft: slideLeft 0.5s ease-in-out forwards;
-  --animate-fadeIn: fadeIn 0.5s ease-in-out forwards;
-  --animate-text: text 5s ease infinite alternate;
-
-  @keyframes slideUp {
-    0% {
-      transform: translateY(100px) scale(0.8);
-    }
-    100% {
-      transform: translateY(0) scale(1);
-    }
-  }
-  @keyframes slideLeft {
-    0% {
-      transform: translateX(100px) scale(1.2, 1);
-    }
-    50% {
-      transform: translateX(0) scale(1.3, 1);
-    }
-    70% {
-      transform: translateX(0) scale(1.1, 1);
-    }
-    90% {
-      transform: translateX(0) scale(0.9, 1);
-    }
-    100% {
-      transform: translateX(0) scale(1);
-    }
-  }
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-      transform: scale(0.5);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-  @keyframes text {
-    0%,
-    100% {
-      background-size: 200% 200%;
-      background-position: left center;
-    }
-    50% {
-      background-size: 200% 200%;
-      background-position: right center;
-    }
-  }
+  --font-sans: 'Inter', sans-serif;
+  --font-display: 'Inter', sans-serif;
+
+  --color-background: #09090B;
+  --color-secondary: #111113;
+  --color-surface: #18181B;
+  --color-border: rgba(255, 255, 255, 0.08);
+
+  --color-accent-primary: #14b8a6;
+  --color-accent-secondary: #06b6d4;
+  --color-highlight: #10b981;
+
+  --color-text-primary: #ffffff;
+  --color-text-secondary: #a1a1aa;
+  --color-text-muted: #71717a;
+
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 20px;
+  --radius-4xl: 24px;
+
+  --shadow-small: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
+  --shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
 }
 
-/*
-  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
 @layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
+  :root {
+    color-scheme: dark;
   }
-}
-
-#project-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 24px;
-}
-
-#project-grid > div {
-  display: grid;
-}
-
-@media (min-width: 640px) {
-  #project-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  body {
+    background-color: var(--color-background);
+    color: var(--color-text-primary);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    overflow-x: hidden;
   }
-  #project-grid > div {
-    grid-template-columns: minmax(0, 1fr);
+  ::selection {
+    background-color: rgba(20, 184, 166, 0.3);
+    color: #ffffff;
   }
-  #project-grid > div:nth-child(1) {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    grid-column: 1/-1;
+  *, ::before, ::after {
+    border-color: var(--color-border);
   }
 }
 
-@media (min-width: 1024px) {
-  #project-grid {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-  #project-grid > div:nth-child(1),
-  #project-grid > div:nth-child(2) {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  #project-grid > div:nth-child(1) {
-    grid-column: 1/4;
-  }
-  #project-grid > div:nth-child(2) {
-    grid-column: 4/-1;
-  }
-
-  #project-grid > div:nth-child(3),
-  #project-grid > div:nth-child(4),
-  #project-grid > div:nth-child(5) {
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: auto minmax(0, 1fr);
-  }
-  #project-grid > div:nth-child(3) {
-    grid-column: 1/3;
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
   }
-  #project-grid > div:nth-child(4) {
-    grid-column: 3/5;
+  .bg-grid-pattern {
+    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+      linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+    background-size: 24px 24px;
   }
-  #project-grid > div:nth-child(5) {
-    grid-column: 5/-1;
+  .glass-panel {
+    background-color: rgba(24, 24, 27, 0.8);
+    backdrop-filter: blur(24px);
+    border: 1px solid var(--color-border);
+    box-shadow: var(--shadow-medium);
   }
 }
-
-.input__group {
-  @apply relative mb-4 grid;
-}
-
-.input__group:last-child {
-  @apply mb-0;
-}
-
-.input__group input,
-.input__group textarea {
-  font: inherit;
-  @apply border-dark-300 dark:border-dark-600 rounded-lg border bg-white px-4 py-2 outline-hidden;
-}
-
-.input__group input:focus,
-.input__group textarea:focus {
-  @apply border-primary;
-}
-
-.input__group label {
-  @apply pointer-events-none absolute left-4 top-2 capitalize text-gray-400 transition-all duration-300 ease-linear;
-}
-
-.input__group label.active,
-.input__group input:focus + label,
-.input__group textarea:focus + label {
-  top: -1.5rem;
-  font-size: 0.875rem;
-  left: 0.5rem;
-  @apply font-medium text-dark dark:text-white;
+html {
+  scroll-behavior: smooth;
 }
diff --git a/src/lib/cn.ts b/src/lib/cn.ts
deleted file mode 100644
index 8c5ddc6..0000000
--- a/src/lib/cn.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import clsx, { ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-export const cn = (...classes: ClassValue[]) => twMerge(clsx(...classes));
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..9ad0df4
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/src/main.tsx b/src/main.tsx
index c5cb173..6dca411 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,18 +2,17 @@ import './index.css';
 
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { Provider } from 'react-redux';
+import { HelmetProvider } from 'react-helmet-async';
 import { BrowserRouter } from 'react-router-dom';
 
 import App from './App';
-import { store } from './store/store';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <BrowserRouter>
-      <Provider store={store}>
+    <HelmetProvider>
+      <BrowserRouter>
         <App />
-      </Provider>
-    </BrowserRouter>
+      </BrowserRouter>
+    </HelmetProvider>
   </React.StrictMode>,
 );
diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx
index edf3b27..c71abc6 100644
--- a/src/routes/Home.tsx
+++ b/src/routes/Home.tsx
@@ -1,62 +1,34 @@
-import AltHeroSection from '#components/AltHeroSection';
-import BackToTop from '#components/BackToTop';
-import Contact from '#components/Contact';
-import ContactCapsule from '#components/ContactCapsule';
-import Container from '#components/Container';
-import Footer from '#components/Footer';
-import Intro from '#components/Intro';
-// import HeroSection from '#components/HeroSection';
-import LanguageAndTool from '#components/LanguageAndTool';
-import RecentWork from '#components/RecentWork';
+import { About } from '#components/sections/About';
+import { Contact } from '#components/sections/Contact';
+import { FAQ } from '#components/sections/FAQ';
+import { FeaturedProject } from '#components/sections/FeaturedProject';
+import { Footer } from '#components/sections/Footer';
+import { HeroSection } from '#components/sections/HeroSection';
+import { Metrics } from '#components/sections/Metrics';
+import { Process } from '#components/sections/Process';
+// import { ProjectsSection } from '#components/sections/ProjectsSection';
+import { Services } from '#components/sections/Services';
+import { TechStack } from '#components/sections/TechStack';
+import { Testimonials } from '#components/sections/Testimonials';
+import { TrustStrip } from '#components/sections/TrustStrip';
 
 const Home = () => {
   return (
-    <>
-      <BackToTop />
-      <main className="dark:bg-dark-900 bg-white">
-        <section id="hero">
-          <Container>
-            <AltHeroSection />
-          </Container>
-        </section>
-        <section id="about" className="pb-5">
-          <div className="bg-primary-700 pt-24 pb-32">
-            <div className="px-2 pb-16">
-              <Intro />
-            </div>
-            <h2 className="text-center text-4xl font-bold text-white drop-shadow-md lg:text-6xl">
-              Development Skills
-            </h2>
-          </div>
-          <Container>
-            <LanguageAndTool />
-          </Container>
-        </section>
-        <section className="pt-24 pb-16" id="projects">
-          <Container>
-            <h2 className="text-dark-900 mb-16 text-center text-4xl font-bold capitalize drop-shadow-md lg:text-6xl dark:text-gray-50">
-              My recent projects
-            </h2>
-            <RecentWork />
-          </Container>
-        </section>
-        <section id="contact" className="bg-secondary/20 mt-40 pb-16">
-          <Container>
-            <div className="relative -top-20">
-              <ContactCapsule />
-            </div>
-            <div>
-              <Contact />
-            </div>
-          </Container>
-        </section>
-      </main>
-      <footer className="bg-dark-900 pt-24 pb-6">
-        <Container>
-          <Footer />
-        </Container>
-      </footer>
-    </>
+    <main className="bg-background min-h-screen">
+      <HeroSection />
+      <TrustStrip />
+      <Metrics />
+      <FeaturedProject />
+      <Services />
+      <TechStack />
+      {/*<ProjectsSection />*/}
+      <Process />
+      <About />
+      <Testimonials />
+      <FAQ />
+      <Contact />
+      <Footer />
+    </main>
   );
 };
 
diff --git a/src/routes/Navigation.tsx b/src/routes/Navigation.tsx
new file mode 100644
index 0000000..9cf356a
--- /dev/null
+++ b/src/routes/Navigation.tsx
@@ -0,0 +1,137 @@
+import { Menu, Terminal, X } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Outlet } from 'react-router-dom';
+
+import { ContactButton } from '#components/sections/ContactButton.tsx';
+import { Button } from '#components/ui/Button';
+import { Container } from '#components/ui/Container';
+import { cn } from '#lib/utils';
+
+const navItems = [
+  { name: 'Services', href: '#services' },
+  { name: 'Process', href: '#process' },
+  { name: 'About', href: '#about' },
+];
+
+const Navigation = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => setScrolled(window.scrollY > 20);
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setIsOpen(false);
+    };
+    if (isOpen) window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen]);
+
+  return (
+    <>
+      <header
+        className={cn(
+          'fixed inset-x-0 top-0 z-50 border-b border-transparent transition-all duration-300',
+          scrolled
+            ? 'bg-background/80 border-border py-4 shadow-sm backdrop-blur-md'
+            : 'bg-transparent py-6',
+        )}
+      >
+        <Container>
+          <nav className="flex items-center justify-between">
+            <a
+              href="#hero"
+              className="group relative z-50 flex items-center gap-2"
+            >
+              <div className="bg-surface border-border group-hover:border-accent-primary/50 flex h-10 w-10 items-center justify-center rounded-xl border transition-colors">
+                <Terminal className="text-accent-primary group-hover:text-accent-secondary h-5 w-5 transition-colors" />
+              </div>
+              <span className="hidden font-bold tracking-tight sm:block">
+                FrontendFixer
+              </span>
+            </a>
+
+            {/* Desktop Nav */}
+            <div className="hidden items-center gap-8 md:flex">
+              <ul className="flex items-center gap-12">
+                {navItems.map(item => (
+                  <li key={item.name}>
+                    <a
+                      href={item.href}
+                      className="text-text-secondary group relative py-2 font-medium transition-colors hover:text-white"
+                    >
+                      {item.name}
+                      <span className="bg-accent-primary absolute bottom-0 left-0 h-0.5 w-full origin-left scale-x-0 transition-transform duration-300 group-hover:scale-x-100" />
+                    </a>
+                  </li>
+                ))}
+              </ul>
+              <div className="bg-border h-6 w-px" />
+              <ContactButton />
+            </div>
+
+            {/* Mobile Menu Toggle */}
+            <button
+              className="text-text-secondary relative z-50 p-2 hover:text-white focus:outline-hidden md:hidden"
+              onClick={() => setIsOpen(!isOpen)}
+              aria-label="Toggle Menu"
+            >
+              {isOpen ? (
+                <X className="h-6 w-6" />
+              ) : (
+                <Menu className="h-6 w-6" />
+              )}
+            </button>
+          </nav>
+        </Container>
+
+        {/* Mobile Menu Overlay */}
+        <div
+          className={cn(
+            'bg-background/95 fixed inset-0 z-40 flex flex-col items-center justify-center backdrop-blur-xl transition-all duration-500 ease-in-out md:hidden',
+            isOpen ? 'visible opacity-100' : 'invisible opacity-0',
+          )}
+        >
+          <ul className="flex flex-col items-center gap-8">
+            {navItems.map(item => (
+              <li key={item.name} className="overflow-hidden">
+                <a
+                  href={item.href}
+                  onClick={() => setIsOpen(false)}
+                  className={cn(
+                    'hover:text-accent-primary block text-2xl font-bold transition-transform duration-500',
+                    isOpen
+                      ? 'translate-y-0 opacity-100'
+                      : 'translate-y-8 opacity-0',
+                  )}
+                >
+                  {item.name}
+                </a>
+              </li>
+            ))}
+          </ul>
+          <div
+            className={cn(
+              'mt-12 transition-all delay-300 duration-500',
+              isOpen ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0',
+            )}
+          >
+            <Button asChild size="lg">
+              <a href="#contact" onClick={() => setIsOpen(false)}>
+                Hire Me
+              </a>
+            </Button>
+          </div>
+        </div>
+      </header>
+
+      <Outlet />
+    </>
+  );
+};
+
+export default Navigation;
diff --git a/src/routes/Weeding.tsx b/src/routes/Weeding.tsx
deleted file mode 100644
index f8f5e3d..0000000
--- a/src/routes/Weeding.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { Duration, intervalToDuration } from 'date-fns';
-import { useEffect, useState } from 'react';
-import ConfettiExplosion from 'react-confetti-explosion';
-
-import Button from '#components/Button';
-import Countdown from '#components/CountDown';
-
-const Weeding = () => {
-  const [password, setPassword] = useState('');
-  const [isSecret, setIsSecret] = useState(false);
-  const [errorMessage, setErrorMessage] = useState('');
-  const [duration, setDuration] = useState<Duration | null>(null);
-  const [weedingDate] = useState(new Date(import.meta.env.VITE_WEEDING_DATE));
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      const now = new Date();
-
-      const duration = intervalToDuration({
-        start: weedingDate,
-        end: now,
-      });
-
-      setDuration(duration);
-    }, 1000);
-
-    return () => clearInterval(timer);
-  }, [weedingDate]);
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    setErrorMessage('');
-    const secret = import.meta.env.VITE_SECRET;
-    if (password === secret) {
-      setIsSecret(true);
-    } else {
-      setErrorMessage('Oh no! Wrong key. Try again!');
-      setIsSecret(false);
-    }
-  };
-  useEffect(() => {
-    let timeoutId: NodeJS.Timeout;
-    if (errorMessage) {
-      timeoutId = setTimeout(() => setErrorMessage(''), 3000);
-    }
-    return () => clearTimeout(timeoutId);
-  }, [errorMessage]);
-
-  return (
-    <div className="grid h-dvh w-screen place-items-center bg-purple-400 p-6">
-      <div className="w-full max-w-(--breakpoint-sm) rounded-xl bg-purple-500 p-6 shadow-xl">
-        {!isSecret ? (
-          <form className="space-y-6" onSubmit={handleSubmit}>
-            <input
-              type="text"
-              value={password}
-              onChange={e => setPassword(e.target.value)}
-              className="w-full rounded-lg bg-purple-200 p-2 text-center text-5xl font-bold text-purple-800 outline-hidden placeholder:text-purple-400"
-              placeholder="SECRET"
-            />
-            <Button
-              fullWidth
-              className="h-14 bg-purple-900 hover:bg-purple-700 active:bg-purple-700"
-            >
-              Enter
-            </Button>
-            {errorMessage && (
-              <div className="text-center text-xl font-bold text-purple-900">
-                {errorMessage}
-              </div>
-            )}
-          </form>
-        ) : (
-          <div className="grid h-[300px] text-5xl font-bold text-purple-800">
-            <ConfettiExplosion particleCount={500} duration={5000} force={1} />
-            {duration && (
-              <div className="text-center">
-                <h3 className="mb-5 text-5xl text-white">Days Past</h3>
-                <Countdown duration={duration} />
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default Weeding;
diff --git a/src/routes/navigation.tsx b/src/routes/navigation.tsx
deleted file mode 100644
index 0d8c62d..0000000
--- a/src/routes/navigation.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { faBars } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useState } from 'react';
-import { useSelector } from 'react-redux';
-import { Outlet } from 'react-router-dom';
-
-import Container from '#components/Container';
-import Logo from '#components/Logo';
-import NavigationMenu from '#components/NavigationMenu';
-import { RootState } from '#store/store';
-
-const Navigation = () => {
-  const [open, setOpen] = useState(false);
-  const theme = useSelector((state: RootState) => state.theme);
-
-  return (
-    <>
-      <header className="dark:bg-dark relative bg-white">
-        <Container>
-          <div className="flex w-full flex-wrap items-center justify-between py-3">
-            <div className="flex w-full items-center justify-between gap-4 md:w-max">
-              <Logo variant={theme} large />
-              <button
-                data-collapse-toggle="navbar-default"
-                type="button"
-                className="inline-flex items-center justify-center rounded-sm border border-gray-700 p-1 text-sm text-gray-700 hover:text-gray-900 focus:ring-2 focus:ring-gray-600 focus:outline-hidden md:hidden dark:border-gray-200 dark:text-gray-200 dark:hover:text-gray-400"
-                aria-controls="navbar-default"
-                aria-expanded="false"
-                onClick={() => setOpen(!open)}
-              >
-                <span className="sr-only">Open main menu</span>
-                <FontAwesomeIcon icon={faBars} className="h-8 w-8" />
-              </button>
-            </div>
-            <NavigationMenu openState={open} />
-          </div>
-        </Container>
-      </header>
-      <Outlet />
-    </>
-  );
-};
-
-export default Navigation;
diff --git a/src/store/reducer/FormSlice.ts b/src/store/reducer/FormSlice.ts
deleted file mode 100644
index 37a8a87..0000000
--- a/src/store/reducer/FormSlice.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-
-export type FormStatus = 'loading' | 'completed' | 'rejected' | undefined;
-export type FormData = { name: string; email: string; message: string };
-type InitialState = {
-  data: FormData;
-  status: FormStatus;
-};
-
-const initialState: InitialState = {
-  data: { name: '', email: '', message: '' },
-  status: undefined,
-};
-
-export const formSlice = createSlice({
-  name: 'form',
-  initialState: initialState,
-  reducers: {
-    setFormData: (data, action: PayloadAction<FormData>) => {
-      return { ...data, data: action.payload };
-    },
-    setFormStatus: (status, action: PayloadAction<FormStatus>) => {
-      return { ...status, status: action.payload };
-    },
-  },
-});
-
-export default formSlice.reducer;
-export const { setFormData, setFormStatus } = formSlice.actions;
diff --git a/src/store/reducer/NavigationReducer.ts b/src/store/reducer/NavigationReducer.ts
deleted file mode 100644
index c377d24..0000000
--- a/src/store/reducer/NavigationReducer.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-
-type InitialState = {
-  value: {
-    isNavOpen: boolean;
-  };
-};
-
-const initialState: InitialState = {
-  value: {
-    isNavOpen: false,
-  },
-};
-
-export const navigationSlice = createSlice({
-  name: 'navigation',
-  initialState,
-  reducers: {
-    setOpen: (state: InitialState) => {
-      state.value.isNavOpen = !state.value.isNavOpen;
-    },
-  },
-});
-
-export const { setOpen } = navigationSlice.actions;
-
-export default navigationSlice.reducer;
diff --git a/src/store/reducer/ThemeReducer.ts b/src/store/reducer/ThemeReducer.ts
deleted file mode 100644
index e9ecf26..0000000
--- a/src/store/reducer/ThemeReducer.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-
-const getTheme = () => {
-  const theme = `${window?.localStorage?.getItem('theme')}`;
-  if (['light', 'dark'].includes(theme)) return theme;
-
-  const userMedia = window.matchMedia('(prefers-color-scheme: light)');
-  if (userMedia.matches) return 'light';
-
-  return 'dark';
-};
-
-const initialState = getTheme();
-
-export const themeSlice = createSlice({
-  name: 'theme',
-  initialState,
-  reducers: {
-    toggleTheme: (_, action) => action.payload,
-  },
-});
-
-export const { toggleTheme } = themeSlice.actions;
-
-export default themeSlice.reducer;
diff --git a/src/store/store.ts b/src/store/store.ts
deleted file mode 100644
index 55f3f05..0000000
--- a/src/store/store.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { configureStore } from '@reduxjs/toolkit';
-
-import formSlice from './reducer/FormSlice';
-import navigationSlice from './reducer/NavigationReducer';
-import themeSlice from './reducer/ThemeReducer';
-
-export const store = configureStore({
-  reducer: {
-    navigation: navigationSlice,
-    theme: themeSlice,
-    form: formSlice,
-  },
-});
-
-export type RootState = ReturnType<typeof store.getState>;
-export type AppDispatch = typeof store.dispatch;
diff --git a/tsconfig.json b/tsconfig.json
index f06579d..2c6e550 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -43,6 +43,12 @@
       ],
       "#lib/*": [
         "src/lib/*"
+      ],
+      "#config/*": [
+        "src/config/*"
+      ],
+      "#common/*": [
+        "src/components/common/*"
       ]
     }
   },