dev-git-com · CodeIdea1 · Jan 13, 2026 · Jan 14, 2026
diff --git a/next.config.mjs b/next.config.mjs
@@ -28,6 +28,18 @@ const withNextra = nextra({
 
 export default withNextra({
   pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'i.pravatar.cc',
+      },
+      {
+        protocol: 'https',
+        hostname: 'images.unsplash.com',
+      },
+    ],
+  },
   turbopack: {
     resolveAlias: {
       "next-mdx-import-source-file": "./mdx-components.js",

diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@lottiefiles/dotlottie-web": "^0.60.0",
     "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-aspect-ratio": "^1.1.7",
@@ -24,9 +25,12 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "embla-carousel-react": "^8.6.0",
-    "framer-motion": "^12.23.3",
-    "gsap": "^3.13.0",
+    "framer-motion": "^12.25.0",
+    "gsap": "^3.14.2",
     "jszip": "^3.10.1",
+    "lenis": "^1.3.17",
+    "lottie-colorify": "^0.8.0",
+    "lottie-web": "^5.13.0",
     "lucide-react": "^0.474.0",
     "motion": "^12.23.6",
     "next": "15.4.10",
@@ -55,4 +59,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
-}
+}
diff --git a/public/animation-card1-backup.lottie b/public/animation-card1-backup.lottie
diff --git a/public/animation-card1.html b/public/animation-card1.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="ad.size" content="width=336,height=280" />
+    <title>Campaign Ad</title>
+    <style>
+      html,
+      body { margin: 0; padding: 0; overflow: hidden; }
+      canvas { height: 100vh; width: 100vw; }
+    </style>
+  </head>
+  <body>
+    <canvas id="lottie" data-asset-name="ad.lottie" data-autoplay="true" data-loop="true"></canvas>
+    <script type="module" src="./bundle.js"></script>
+  </body>
+</html>
diff --git a/public/animation-card1.js b/public/animation-card1.js
diff --git a/public/animation-card1.lottie b/public/animation-card1.lottie
diff --git a/public/animation-card2.html b/public/animation-card2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="ad.size" content="width=250,height=250" />
+    <title>Campaign Ad</title>
+    <style>
+      html,
+      body { margin: 0; padding: 0; overflow: hidden; }
+      canvas { height: 100vh; width: 100vw; }
+    </style>
+  </head>
+  <body>
+    <canvas id="lottie" data-asset-name="ad.lottie" data-autoplay="true" data-loop="true"></canvas>
+    <script type="module" src="./bundle.js"></script>
+  </body>
+</html>
diff --git a/public/animation-card2.js b/public/animation-card2.js
diff --git a/public/animation-card2.lottie b/public/animation-card2.lottie
diff --git a/public/background-wave.json b/public/background-wave.json
diff --git a/public/fonts/le-murmure.otf b/public/fonts/le-murmure.otf
diff --git a/public/fonts/le-murmure.ttf b/public/fonts/le-murmure.ttf
diff --git a/public/fonts/webfonts/LeMurmure-Regular.eot b/public/fonts/webfonts/LeMurmure-Regular.eot
diff --git a/public/fonts/webfonts/LeMurmure-Regular.woff b/public/fonts/webfonts/LeMurmure-Regular.woff
diff --git a/public/fonts/webfonts/LeMurmure-Regular.woff2 b/public/fonts/webfonts/LeMurmure-Regular.woff2
diff --git a/public/hosting.svg b/public/hosting.svg
diff --git a/public/images/Ammar.png b/public/images/Ammar.png
diff --git a/public/images/Saja.png b/public/images/Saja.png
diff --git a/public/next.svg b/public/next.svg
diff --git a/src/app/(site)/globals.css b/src/app/(site)/globals.css
@@ -29,6 +29,8 @@
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
+    --color-section: black;
+    --color-light: #0e1117;
   }
   .dark {
     --background: 0 0% 3.9%;
@@ -61,8 +63,30 @@
 body {
   @apply bg-black text-white font-sans;
 }
-
+html {
+  overflow-x: hidden;
+}
 
 .slide-br {
   animation: slide-br 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-}
+}
+
+/* Space Grotesk font for all headings */
+h1, h2, h3, h4, h5, h6,
+[class*="title"],
+[class*="Title"],
+[class*="heading"],
+[class*="Heading"] {
+  font-family: var(--font-space-grotesk) !important;
+  font-optical-sizing: auto;
+
+}
+
+/* Le Murmure font for Team Member names*/
+@font-face {
+  font-family: 'Le Murmure';
+  src: url('/fonts/webfonts/LeMurmure-Regular.woff2') format('woff2'),
+    url('/fonts/webfonts/LeMurmure-Regular.woff') format('woff'),
+    url('/fonts/le-murmure.ttf') format('truetype'),
+    url('/fonts/le-murmure.otf') format('opentype');
+}
diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx
@@ -1,18 +1,9 @@
-import "../../shared/css/landing/landing-globals.css";
+import CardsSection from "@/shared/components/landing/CardsSection";
 import HeroSection from "@/shared/components/landing/HeroSection";
-import Cards from "@/shared/components/landing/Cards";
 import TimelineCards from "@/shared/components/landing/Timeline";
-import DeveloperTestimonials from "@/shared/components/landing/DeveloperTestimonials";
-import DataTable from "@/shared/components/landing/Table";
-import { Source_Code_Pro } from "next/font/google";
-import AnimatedGrid from "@/shared/components/landing/AnimatedGrid";
-import Footer from "@/shared/components/landing/Footer";
-
-const sourceCodePro = Source_Code_Pro({
-  subsets: ["latin"],
-  variable: "--font-source-code-pro",
-  display: "swap",
-});
+import ScrollProgressIndicator from "@/shared/components/landing/ScrollProgressIndicator";
+import TeamMemberList from "@/shared/components/landing/TeamMemberList";
+import DeveloperTestimonials from "@/shared/components/landing/DevelopertesTimonials";
 
 export const metadata = {
   title: "DEV GIT",
@@ -24,17 +15,13 @@ export const metadata = {
 
 const Home = () => {
   return (
-    <div
-      className={`landing-main ${sourceCodePro.variable} bg-black text-white relative min-h-screen overflow-x-hidden`}
-    >
-      <AnimatedGrid>
-        <HeroSection />
-        <Cards />
-        <DataTable />
-        <TimelineCards />
-        <DeveloperTestimonials />
-      </AnimatedGrid>
-      <Footer />
+    <div className="min-h-screen bg-black text-white">
+      <ScrollProgressIndicator />
+      <HeroSection />
+      <CardsSection />
+      <TimelineCards />
+      <DeveloperTestimonials />
+      <TeamMemberList />
     </div>
   );
 };

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -58,11 +58,27 @@
   }
 }
 
-body {
-  @apply bg-black text-white font-sans;
+html.lenis, html.lenis body {
+  height: auto;
 }
 
+.lenis.lenis-smooth {
+  scroll-behavior: auto !important;
+}
+
+.lenis.lenis-smooth [data-lenis-prevent] {
+  overscroll-behavior: contain;
+}
+
+.lenis.lenis-stopped {
+  overflow: hidden;
+}
+
+.lenis.lenis-smooth iframe {
+  pointer-events: none;
+}
 
 .slide-br {
   animation: slide-br 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-}
+}
+
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,5 @@
-import { Geist, Geist_Mono } from "next/font/google";
+import { Geist, Geist_Mono, Space_Grotesk } from "next/font/google";
+import LenisProvider from "@/shared/components/landing/LenisProvider";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -10,25 +11,23 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
+const spaceGrotesk = Space_Grotesk({
+  variable: "--font-space-grotesk",
+  subsets: ["latin"],
+  weight: ["300", "400", "500", "600", "700"],
+});
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className="dark" style={{ colorScheme: "dark" }}>
-      <head>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Mozilla+Text:wght@200..700&display=swap"
-          rel="stylesheet"
-        />
-      </head>
+    <html lang="en" className="dark lenis" style={{ colorScheme: "dark" }}>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased h-screen`}
+        className={`${geistSans.variable} ${geistMono.variable} ${spaceGrotesk.variable} antialiased h-screen`}
       >
-        {children}
+        <LenisProvider>{children}</LenisProvider>
       </body>
     </html>
   );