Merge pull request 'fix/landing_page' (#7 ) from fix/landing_page into main

Reviewed-on: #7 Reviewed-by: Mihir Motiyani <mihir@midastix.com>
fix : added animation and mobile view in footer section
2025-08-06 10:46:46 +05:30 · 2025-08-02 12:09:49 +00:00 · 2025-08-02 12:05:48 +00:00 · 2025-08-02 11:42:25 +00:00 · 2025-08-02 08:19:02 +00:00 · 2025-08-02 07:24:11 +00:00
76 changed files with 14598 additions and 18081 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -1,50 +1,50 @@
-kind: pipeline
-name: Build Image
-
-steps:
-  # - name: Lint Check
-  #   image: node:21-alpine
-  #   commands:
-  #     - yarn install
-  #     # - yarn lint
-
-  - name: Build Docker Image
-    image: plugins/docker
-    settings:
-      build_args: "API_BASE_URL=https://quadraedge-api.midastix.com"
-      username:
-        from_secret: docker_username
-      password:
-        from_secret: docker_password
-      repo: git.midastix.com/ci-docker-repo-user/quadraedge
-      registry: git.midastix.com
-    when:
-      branch:
-        - main
-      event:
-        - push
-
-  - name: Deploy image
-    image: appleboy/drone-ssh
-    settings:
-      host: quadraedge.in
-      username: quadraedge
-      key:
-        from_secret: server_ssh_pkey
-      port: 22
-      command_timeout: 3m
-      script:
-        - echo "Deploying image"
-        - sudo /opt/deployable/quadraedge/docker/deploy.sh
-        - echo "Completed Deployment"
-    when:
-      branch:
-        - main
-      event:
-        - push
-# trigger:
-#   branch:
-#     - main
-#     - feature/env_api_url
-#   event:
-#     - push
+kind: pipeline
+name: Build Image
+
+steps:
+  # - name: Lint Check
+  #   image: node:21-alpine
+  #   commands:
+  #     - yarn install
+  #     # - yarn lint
+
+  - name: Build Docker Image
+    image: plugins/docker
+    settings:
+      build_args: "API_BASE_URL=https://quadraedge-api.midastix.com"
+      username:
+        from_secret: docker_username
+      password:
+        from_secret: docker_password
+      repo: git.midastix.com/ci-docker-repo-user/quadraedge
+      registry: git.midastix.com
+    when:
+      branch:
+        - main
+      event:
+        - push
+
+  - name: Deploy image
+    image: appleboy/drone-ssh
+    settings:
+      host: quadraedge.in
+      username: quadraedge
+      key:
+        from_secret: server_ssh_pkey
+      port: 22
+      command_timeout: 3m
+      script:
+        - echo "Deploying image"
+        - sudo /opt/deployable/quadraedge/docker/deploy.sh
+        - echo "Completed Deployment"
+    when:
+      branch:
+        - main
+      event:
+        - push
+# trigger:
+#   branch:
+#     - main
+#     - feature/env_api_url
+#   event:
+#     - push
--- a/.gitignore
+++ b/.gitignore
@ -1,23 +1,23 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@ -1 +1 @@
-nodeLinker: node-modules
+nodeLinker: node-modules
--- a/62
+++ b/62
@ -1,31 +1,31 @@
-FROM node:24-alpine AS builder
-
-ARG API_BASE_URL="https://mfs-api.midastix.com"
-
-ENV REACT_APP_API_BASE_URL $API_BASE_URL
-
-WORKDIR /app
-
-COPY package.json package.json
-COPY yarn.lock yarn.lock
-
-# RUN yarn install --frozen-lockfile
-RUN yarn install
-
-# COPY . .
-COPY public public
-COPY src src
-COPY tsconfig.json tsconfig.json
-# COPY .yarnrc.yml .yarnrc.yml
-
-RUN yarn build
-
-
-FROM scratch
-
-WORKDIR /app
-
-COPY --from=builder /app/build ./build
-
-CMD ["sh"]
-
+FROM node:24-alpine AS builder
+
+ARG API_BASE_URL="https://mfs-api.midastix.com"
+
+ENV REACT_APP_API_BASE_URL $API_BASE_URL
+
+WORKDIR /app
+
+COPY package.json package.json
+COPY yarn.lock yarn.lock
+
+# RUN yarn install --frozen-lockfile
+RUN yarn install
+
+# COPY . .
+COPY public public
+COPY src src
+COPY tsconfig.json tsconfig.json
+# COPY .yarnrc.yml .yarnrc.yml
+
+RUN yarn build
+
+
+FROM scratch
+
+WORKDIR /app
+
+COPY --from=builder /app/build ./build
+
+CMD ["sh"]
+
--- a/README.md
+++ b/README.md
@ -1,46 +1,46 @@
-# Getting Started with Create React App
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `yarn start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-### `yarn test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `yarn build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `yarn eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `yarn eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
--- a/package.json
+++ b/package.json
@ -1,62 +1,63 @@
-{
-  "name": "edfechfrontend",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^6.4.12",
-    "@mui/material": "^6.4.12",
-    "@mui/styled-engine-sc": "^6.1.2",
-    "@mui/types": "^7.2.17",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.0.1",
-    "@types/node": "^16.7.13",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.0.0",
-    "framer-motion": "^12.23.0",
-    "next": "^15.1.6",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-icons": "^5.5.0",
-    "react-intersection-observer": "^9.15.1",
-    "react-router-dom": "^6.27.0",
-    "react-scripts": "5.0.1",
-    "react-slick": "^0.30.3",
-    "slick-carousel": "^1.8.1",
-    "styled-components": "^6.1.13",
-    "typed.js": "^2.1.0",
-    "typescript": "^4.4.2",
-    "web-vitals": "^2.1.0"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@types/react-icons": "^2.2.7",
-    "@types/react-slick": "^0.23.13"
-  }
-}
+{
+  "name": "edfechfrontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^6.4.12",
+    "@mui/material": "^6.4.12",
+    "@mui/styled-engine-sc": "^6.1.2",
+    "@mui/types": "^7.2.17",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.13",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.0.0",
+    "framer-motion": "^12.23.0",
+    "next": "^15.1.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.5.0",
+    "react-intersection-observer": "^9.15.1",
+    "react-router-dom": "^6.27.0",
+    "react-scripts": "5.0.1",
+    "react-slick": "^0.30.3",
+    "slick-carousel": "^1.8.1",
+    "styled-components": "^6.1.13",
+    "typed.js": "^2.1.0",
+    "typescript": "^4.4.2",
+    "web-vitals": "^2.1.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/react-icons": "^2.2.7",
+    "@types/react-slick": "^0.23.13"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+}
--- a/public/index.html
+++ b/public/index.html
@ -1,22 +1,22 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Quadra Edge</title>
-  </head>
-  <body style="margin:0">
-    <div id="root"></div>
-  </body>
-</html>
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Quadra Edge</title>
-  </head>
-  <body style="margin:0">
-    <div id="root"></div>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Quadra Edge</title>
+  </head>
+  <body style="margin:0">
+    <div id="root"></div>
+  </body>
+</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Quadra Edge</title>
+  </head>
+  <body style="margin:0">
+    <div id="root"></div>
+  </body>
+</html>
--- a/public/manifest.json
+++ b/public/manifest.json
@ -1,25 +1,25 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/public/robots.txt
+++ b/public/robots.txt
@ -1,3 +1,3 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/src/App.css
+++ b/src/App.css
@ -1,38 +1,38 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@ -1,9 +1,9 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,24 +1,24 @@
-// import AboutUsPage from "./components/aboutus";
-import AboutUs from "./components/aboutus/aboutus";
-import Footer from "./components/footer/footer";
-import Header from "./components/header/header";
-import Hero from "./components/hero/hero";
-import OurWorks from "./components/ourwork/ourwork";
-import Services from "./components/services/services";
-import Testimonials from "./components/testomonials/testomonias";
-
-function App() {
-  return (
-    <div>
-      <Header />
-      <Hero />
-      <Services />
-      <OurWorks />
-      <AboutUs />
-      <Testimonials />
-      <Footer />
-    </div>
-  );
-}
-
-export default App;
+// import AboutUsPage from "./components/aboutus";
+import AboutUs from "./components/aboutus/aboutus";
+import Footer from "./components/footer/footer";
+import Header from "./components/header/header";
+import Hero from "./components/hero/hero";
+import OurWorks from "./components/ourwork/ourwork";
+import Services from "./components/services/services";
+import Testimonials from "./components/testomonials/testomonias";
+
+function App() {
+  return (
+    <div>
+      <Header />
+      <Hero />
+      <Services />
+      <OurWorks />
+      <AboutUs />
+      <Testimonials />
+      <Footer />
+    </div>
+  );
+}
+
+export default App;
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@ -1,152 +1,152 @@
-import { useState } from "react";
-import { AppBar, Toolbar, IconButton, Box, Typography, Container } from "@mui/material";
-import { motion } from "framer-motion";
-import { Outlet } from "react-router-dom";
-import MenuIcon from "@mui/icons-material/Menu";
-import CloseIcon from "@mui/icons-material/Close";
-import smallone from "../qsmall.png";
-import big from "../QUDRAEDGELOGOTRANSPARENTBLACKfinal.png";
-
-export default function Layout() {
-    const [menuOpen, setMenuOpen] = useState(false);
-
-    return (
-        <Box sx={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
-            
-            {/* HEADER */}
-            <AppBar position="static" sx={{ background: "transparent", boxShadow: "none", overflow: "hidden", paddingRight: '0px' }}>
-                <Toolbar sx={{ position: "relative", height: "64px", display: "flex", justifyContent: "space-between", alignItems: "center", paddingRight: '0px' }}>
-                    
-                    {/* Expanding Menu Animation (Right to Left) */}
-                    <motion.div
-                        initial={{ width: "0%", right: 0 }}
-                        animate={{ width: menuOpen ? "100%" : "0%" }}
-                        transition={{ duration: 0.5 }}
-                        style={{
-                            position: "absolute",
-                            top: 0,
-                            right: 0,
-                            height: "100%",
-                            background: "black",
-                            zIndex: -1,
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "flex-end",
-                            overflow: "hidden",
-                        }}
-                    >
-                        {/* Menu Items - Now Horizontal */}
-                        {menuOpen && (
-                            <motion.div
-                                initial={{ opacity: 0, x: 20 }}
-                                animate={{ opacity: 1, x: 0 }}
-                                transition={{ delay: 0.2, duration: 0.5 }}
-                                style={{ 
-                                    display: "flex", 
-                                    flexDirection: "row", 
-                                    alignItems: "center", 
-                                    gap: "40px", 
-                                    color: "white",
-                                    paddingRight: "90px"
-                                }}
-                            >
-                                <Typography 
-                                    
-                                    variant="h6" 
-                                    component="a" 
-                                    href="#" 
-                                    sx={{ 
-                                        color:'white',
-                                        cursor: "pointer", 
-                                        "&:hover": { color: "#f5a623" },
-                                        whiteSpace: "nowrap"
-                                    }}
-                                >
-                                    Home
-                                </Typography>
-                                <Typography 
-                                    variant="h6" 
-                                    component="a" 
-                                    href="#" 
-                                    sx={{ 
-                                        color:'white',
-                                        cursor: "pointer", 
-                                        "&:hover": { color: "#f5a623" },
-                                        whiteSpace: "nowrap"
-                                    }}
-                                >
-                                    About
-                                </Typography>
-                                <Typography 
-                                    variant="h6" 
-                                    component="a" 
-                                    href="#" 
-                                    sx={{ 
-                                        color:'white',
-                                        cursor: "pointer", 
-                                        "&:hover": { color: "#f5a623" },
-                                        whiteSpace: "nowrap"
-                                    }}
-                                >
-                                    Services
-                                </Typography>
-                                <Typography 
-                                    variant="h6" 
-                                    component="a" 
-                                    href="#" 
-                                    sx={{ 
-                                        color:'white',
-                                        cursor: "pointer", 
-                                        "&:hover": { color: "#f5a623" },
-                                        whiteSpace: "nowrap"
-                                    }}
-                                >
-                                    Contact
-                                </Typography>
-                            </motion.div>
-                        )}
-                    </motion.div>
-
-                    {/* Left Side Logo Animation */}
-                    <Box
-                        sx={{ position: "relative", width: 50, height: 50, overflow: "hidden" }}
-                        onMouseEnter={(e) => (e.currentTarget.style.width = "120px")}
-                        onMouseLeave={(e) => (e.currentTarget.style.width = "40px")}
-                    >
-                        <img src={smallone} alt="Logo" width={50} height={50} />
-                        <motion.div
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 1 }}
-                            transition={{ duration: 0.3 }}
-                            style={{ position: "absolute", top: 0, left: 50 }}
-                        >
-                            <img src={big} alt="Full Logo" width={100} height={50} />
-                        </motion.div>
-                    </Box>
-
-                    {/* Right Side Menu Button */}
-                    <IconButton onClick={() => setMenuOpen(!menuOpen)}>
-                        <motion.div animate={{ rotate: menuOpen ? 135 : 0 }} transition={{ duration: 0.5 }}>
-                            {menuOpen ? <CloseIcon sx={{ color: "white" }} /> : <MenuIcon />}
-                        </motion.div>
-                    </IconButton>
-
-                </Toolbar>
-            </AppBar>
-
-            {/* MAIN CONTENT */}
-            <Box sx={{ flexGrow: 1 }}>
-                <Outlet />
-            </Box>
-
-            {/* FOOTER */}
-            <Box sx={{ backgroundColor: "black", color: "white", textAlign: "center", padding: "10px 0", marginTop: "auto" }}>
-                <Container>
-                    <Typography variant="body2">
-                        © {new Date().getFullYear()} QudraEdge. All Rights Reserved.
-                    </Typography>
-                </Container>
-            </Box>
-        </Box>
-    );
+import { useState } from "react";
+import { AppBar, Toolbar, IconButton, Box, Typography, Container } from "@mui/material";
+import { motion } from "framer-motion";
+import { Outlet } from "react-router-dom";
+import MenuIcon from "@mui/icons-material/Menu";
+import CloseIcon from "@mui/icons-material/Close";
+import smallone from "../qsmall.png";
+import big from "../QUDRAEDGELOGOTRANSPARENTBLACKfinal.png";
+
+export default function Layout() {
+    const [menuOpen, setMenuOpen] = useState(false);
+
+    return (
+        <Box sx={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
+            
+            {/* HEADER */}
+            <AppBar position="static" sx={{ background: "transparent", boxShadow: "none", overflow: "hidden", paddingRight: '0px' }}>
+                <Toolbar sx={{ position: "relative", height: "64px", display: "flex", justifyContent: "space-between", alignItems: "center", paddingRight: '0px' }}>
+                    
+                    {/* Expanding Menu Animation (Right to Left) */}
+                    <motion.div
+                        initial={{ width: "0%", right: 0 }}
+                        animate={{ width: menuOpen ? "100%" : "0%" }}
+                        transition={{ duration: 0.5 }}
+                        style={{
+                            position: "absolute",
+                            top: 0,
+                            right: 0,
+                            height: "100%",
+                            background: "black",
+                            zIndex: -1,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "flex-end",
+                            overflow: "hidden",
+                        }}
+                    >
+                        {/* Menu Items - Now Horizontal */}
+                        {menuOpen && (
+                            <motion.div
+                                initial={{ opacity: 0, x: 20 }}
+                                animate={{ opacity: 1, x: 0 }}
+                                transition={{ delay: 0.2, duration: 0.5 }}
+                                style={{ 
+                                    display: "flex", 
+                                    flexDirection: "row", 
+                                    alignItems: "center", 
+                                    gap: "40px", 
+                                    color: "white",
+                                    paddingRight: "90px"
+                                }}
+                            >
+                                <Typography 
+                                    
+                                    variant="h6" 
+                                    component="a" 
+                                    href="#" 
+                                    sx={{ 
+                                        color:'white',
+                                        cursor: "pointer", 
+                                        "&:hover": { color: "#f5a623" },
+                                        whiteSpace: "nowrap"
+                                    }}
+                                >
+                                    Home
+                                </Typography>
+                                <Typography 
+                                    variant="h6" 
+                                    component="a" 
+                                    href="#" 
+                                    sx={{ 
+                                        color:'white',
+                                        cursor: "pointer", 
+                                        "&:hover": { color: "#f5a623" },
+                                        whiteSpace: "nowrap"
+                                    }}
+                                >
+                                    About
+                                </Typography>
+                                <Typography 
+                                    variant="h6" 
+                                    component="a" 
+                                    href="#" 
+                                    sx={{ 
+                                        color:'white',
+                                        cursor: "pointer", 
+                                        "&:hover": { color: "#f5a623" },
+                                        whiteSpace: "nowrap"
+                                    }}
+                                >
+                                    Services
+                                </Typography>
+                                <Typography 
+                                    variant="h6" 
+                                    component="a" 
+                                    href="#" 
+                                    sx={{ 
+                                        color:'white',
+                                        cursor: "pointer", 
+                                        "&:hover": { color: "#f5a623" },
+                                        whiteSpace: "nowrap"
+                                    }}
+                                >
+                                    Contact
+                                </Typography>
+                            </motion.div>
+                        )}
+                    </motion.div>
+
+                    {/* Left Side Logo Animation */}
+                    <Box
+                        sx={{ position: "relative", width: 50, height: 50, overflow: "hidden" }}
+                        onMouseEnter={(e) => (e.currentTarget.style.width = "120px")}
+                        onMouseLeave={(e) => (e.currentTarget.style.width = "40px")}
+                    >
+                        <img src={smallone} alt="Logo" width={50} height={50} />
+                        <motion.div
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            transition={{ duration: 0.3 }}
+                            style={{ position: "absolute", top: 0, left: 50 }}
+                        >
+                            <img src={big} alt="Full Logo" width={100} height={50} />
+                        </motion.div>
+                    </Box>
+
+                    {/* Right Side Menu Button */}
+                    <IconButton onClick={() => setMenuOpen(!menuOpen)}>
+                        <motion.div animate={{ rotate: menuOpen ? 135 : 0 }} transition={{ duration: 0.5 }}>
+                            {menuOpen ? <CloseIcon sx={{ color: "white" }} /> : <MenuIcon />}
+                        </motion.div>
+                    </IconButton>
+
+                </Toolbar>
+            </AppBar>
+
+            {/* MAIN CONTENT */}
+            <Box sx={{ flexGrow: 1 }}>
+                <Outlet />
+            </Box>
+
+            {/* FOOTER */}
+            <Box sx={{ backgroundColor: "black", color: "white", textAlign: "center", padding: "10px 0", marginTop: "auto" }}>
+                <Container>
+                    <Typography variant="body2">
+                        © {new Date().getFullYear()} QudraEdge. All Rights Reserved.
+                    </Typography>
+                </Container>
+            </Box>
+        </Box>
+    );
 }
--- a/src/components/QE
+++ b/src/components/QE
--- a/src/components/QE
+++ b/src/components/QE
--- a/src/components/QE
+++ b/src/components/QE
--- a/src/components/QE
+++ b/src/components/QE
--- a/src/components/QE
+++ b/src/components/QE
--- a/src/components/QE
+++ b/src/components/QE
--- a/src/components/QE
+++ b/src/components/QE
--- a/src/components/QE
+++ b/src/components/QE
--- a/src/components/QE
+++ b/src/components/QE
--- a/design/Projects.png
+++ b/design/Projects.png
--- a/src/components/QE
+++ b/src/components/QE
--- a/2=OnClick/OnHover.png
+++ b/2=OnClick/OnHover.png
--- a/src/components/QE
+++ b/src/components/QE
--- a/src/components/QE
+++ b/src/components/QE
--- a/src/components/QE
+++ b/src/components/QE
--- a/design/entypo-social_linkedin-with-circle.png
+++ b/design/entypo-social_linkedin-with-circle.png
--- a/design/entypo-social_youtube-with-circle.png
+++ b/design/entypo-social_youtube-with-circle.png
--- a/design/fluent_arrow-up-20-filled-1.png
+++ b/design/fluent_arrow-up-20-filled-1.png
--- a/design/fluent_arrow-up-20-filled-2.png
+++ b/design/fluent_arrow-up-20-filled-2.png
--- a/design/fluent_arrow-up-20-filled-3.png
+++ b/design/fluent_arrow-up-20-filled-3.png
--- a/design/fluent_arrow-up-20-filled-4.png
+++ b/design/fluent_arrow-up-20-filled-4.png
--- a/design/fluent_arrow-up-20-filled.png
+++ b/design/fluent_arrow-up-20-filled.png
--- a/design/fluent_call-24-filled.png
+++ b/design/fluent_call-24-filled.png
--- a/design/ic_outline-facebook.png
+++ b/design/ic_outline-facebook.png
--- a/design/ic_round-plus.png
+++ b/design/ic_round-plus.png
--- a/design/mage_instagram-circle.png
+++ b/design/mage_instagram-circle.png
--- a/design/material-symbols_close-rounded-1.png
+++ b/design/material-symbols_close-rounded-1.png
--- a/design/material-symbols_close-rounded.png
+++ b/design/material-symbols_close-rounded.png
--- a/design/material-symbols_mail-rounded.png
+++ b/design/material-symbols_mail-rounded.png
--- a/design/material-symbols_menu-rounded-1.png
+++ b/design/material-symbols_menu-rounded-1.png
--- a/design/material-symbols_menu-rounded.png
+++ b/design/material-symbols_menu-rounded.png
--- a/design/material-symbols_star-rounded.png
+++ b/design/material-symbols_star-rounded.png
--- a/design/octicon_dot-24-1.png
+++ b/design/octicon_dot-24-1.png
--- a/design/octicon_dot-24.png
+++ b/design/octicon_dot-24.png
--- a/design/ri_map-pin-fill.png
+++ b/design/ri_map-pin-fill.png
--- a/src/components/aboutus.tsx
+++ b/src/components/aboutus.tsx
--- a/src/components/aboutus/aboutus.tsx
+++ b/src/components/aboutus/aboutus.tsx
@ -1,44 +1,209 @@
-import { Box, Typography, Button } from "@mui/material";
-import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
-
-const AboutUs = () => {
-  return (
-    <Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 10, px: 3 }}>
-      <Box textAlign="center" maxWidth={800} mx="auto">
-        <Typography variant="h4" fontWeight="bold" gutterBottom>
-          About Us
-        </Typography>
-        <Typography variant="body1" paragraph>
-          Lorem ipsum dolor sit amet consectetur. Nisl sed sed tortor eros. Enim
-          hendrerit elit interdum malesuada sit dis est pharetra suspendisse. In
-          dolor venenatis ultricies aliquet lacinia. Faucibus commodo eu gravida
-          auctor eu et sit ut. Sed praesent sed odio aliquam in fermentum. Sit
-          vitae morbi sodales sem velit eu tempus velit nunc. Turpis in in
-          luctus et nulla purus nibh ut. Enim sed fermentum purus molestie
-          parturient morbi nunc aliquet. Aliquam sed etiam turpis non lectus
-          commodo cras leo gravida.
-        </Typography>
-        <Button
-          variant="outlined"
-          endIcon={<ArrowOutwardIcon />}
-          sx={{
-            mt: 2,
-            borderColor: "#00FFD1",
-            color: "#00FFD1",
-            borderRadius: "30px",
-            fontWeight: "bold",
-            px: 4,
-            "&:hover": {
-              backgroundColor: "#00FFD1",
-              color: "#000",
-            },
-          }}
-        >
-          GET IN TOUCH
-        </Button>
-      </Box>
-    </Box>
-  );
-};
-
-export default AboutUs;
+import { Box, Typography, Button } from "@mui/material";
+import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
+import { motion, Variants, Transition } from "framer-motion";
+
+const AboutUs = () => {
+  // Type-safe animation variants
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.3,
+        duration: 0.8,
+      },
+    },
+  };
+
+  const itemVariants: Variants = {
+    hidden: { y: 30, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.8,
+        ease: [0.16, 1, 0.3, 1], // Cubic bezier curve for easeOut
+      },
+    },
+  };
+
+  const titleVariants: Variants = {
+    ...itemVariants,
+    hover: {
+      scale: 1.02,
+      transition: {
+        repeat: Infinity,
+        repeatType: "reverse",
+        duration: 1.5,
+      } as Transition,
+    },
+  };
+
+  const underlineVariants: Variants = {
+    hidden: { width: 0 },
+    visible: {
+      width: "80px",
+      transition: {
+        delay: 0.5,
+        duration: 0.8,
+      },
+    },
+    hover: {
+      width: "120px",
+      backgroundColor: "#00e1ff",
+    },
+  };
+
+  const buttonContainerVariants: Variants = {
+    ...itemVariants,
+    hover: {
+      scale: 1.05,
+      transition: {
+        type: "spring",
+        stiffness: 400,
+      },
+    },
+  };
+
+  return (
+    <Box
+      component={motion.div}
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      viewport={{ once: true, margin: "-100px" }}
+      sx={{
+        backgroundColor: "#1d2733",
+        color: "#fff",
+        py: { xs: 8, md: 12 },
+        px: 3,
+      }}
+    >
+      <Box
+        component={motion.div}
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        viewport={{ once: true }}
+        sx={{
+          textAlign: "center",
+          maxWidth: 800,
+          mx: "auto",
+        }}
+      >
+        {/* Title Section */}
+        <Box
+          component={motion.div}
+          variants={titleVariants}
+          whileHover="hover"
+          sx={{ mb: 4 }}
+        >
+          <Typography
+            variant="h2"
+            sx={{
+              fontFamily: "'Cormorant Garamond', serif",
+              fontWeight: 600,
+              fontSize: { xs: "2.5rem", md: "3rem" },
+              letterSpacing: "1px",
+              position: "relative",
+              textShadow: "0 0 8px rgba(0, 225, 255, 0.3)",
+            }}
+          >
+            About Us
+            <Box
+              component={motion.div}
+              variants={underlineVariants}
+              initial="hidden"
+              animate="visible"
+              whileHover="hover"
+              sx={{
+                height: "3px",
+                background: "linear-gradient(90deg, #00e1ff, transparent)",
+                margin: "20px auto 0",
+                borderRadius: "2px",
+              }}
+            />
+          </Typography>
+        </Box>
+
+        {/* Content Section */}
+        <Box component={motion.div} variants={itemVariants} sx={{ mb: 4 }}>
+          <Typography
+            paragraph
+            sx={{
+              fontFamily: "'Montserrat', sans-serif",
+              fontSize: { xs: "1rem", md: "1.1rem" },
+              lineHeight: 1.9,
+              fontWeight: 300,
+              color: "rgba(255,255,255,0.85)",
+            }}
+          >
+            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsum
+            repellendus aperiam, nobis debitis nam nemo dolorum! Suscipit
+            voluptatibus eum tenetur accusantium eveniet iure, optio illum
+            minima, quo mollitia vitae dolorem.
+          </Typography>
+        </Box>
+
+        {/* Button Section */}
+        <Box
+          component={motion.div}
+          variants={buttonContainerVariants}
+          whileHover="hover"
+        >
+          <Button
+            variant="outlined"
+            endIcon={
+              <motion.div
+                animate={{ x: [0, 5, 0] }}
+                transition={{
+                  duration: 1.5,
+                  repeat: Infinity,
+                  ease: "easeInOut",
+                }}
+              >
+                <ArrowOutwardIcon />
+              </motion.div>
+            }
+            sx={{
+              borderColor: "#00e1ff",
+              color: "#00e1ff",
+              borderRadius: "30px",
+              fontWeight: 500,
+              px: 3,
+              py: 1.1,
+              fontFamily: "'Montserrat', sans-serif",
+              letterSpacing: "1px",
+              fontSize: "0.9rem",
+              textTransform: "uppercase",
+              position: "relative",
+              overflow: "hidden",
+              "&:hover": {
+                backgroundColor: "rgba(0, 225, 255, 0.1)",
+                boxShadow: "0 0 15px rgba(0, 225, 255, 0.4)",
+                "&::before": {
+                  transform: "translateX(0)",
+                },
+              },
+              "&::before": {
+                content: '""',
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                background:
+                  "linear-gradient(90deg, transparent, rgba(0, 225, 255, 0.2), transparent)",
+                transform: "translateX(-100%)",
+                transition: "transform 0.6s ease",
+              },
+            }}
+          >
+            GET IN TOUCH
+          </Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default AboutUs;
--- a/src/components/footer/footer.tsx
+++ b/src/components/footer/footer.tsx
@ -1,96 +1,298 @@
-import React from 'react';
-import {
-  Box, Container, Grid, Typography, Link, Divider, Stack, useMediaQuery, useTheme
-} from '@mui/material';
-import {
-  Instagram, YouTube, Facebook, LinkedIn
-} from '@mui/icons-material';
-import { motion } from 'framer-motion';
-
-export default function Footer() {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-
-  return (
-    <Box sx={{ backgroundColor: '#0F111A', color: '#fff', pt: 6, pb: 2 }}>
-      <Container maxWidth="lg">
-        <motion.div
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8 }}
-        >
-          <Grid container spacing={4}>
-            {/* Column 1: Explore Links */}
-            <Grid item xs={12} sm={6} md={3}>
-              <Stack spacing={1}>
-                <Link href="#" color="inherit" underline="hover">About Us</Link>
-                <Link href="#" color="inherit" underline="hover">Portfolio</Link>
-                <Link href="#" color="inherit" underline="hover">Blogs</Link>
-                <Link href="#" color="inherit" underline="hover">Services</Link>
-              </Stack>
-            </Grid>
-
-            {/* Column 2: Support Links */}
-            <Grid item xs={12} sm={6} md={3}>
-              <Stack spacing={1}>
-                <Link href="#" color="inherit" underline="hover">FAQ’s</Link>
-                <Link href="#" color="inherit" underline="hover">Terms & Conditions</Link>
-                <Link href="#" color="inherit" underline="hover">Privacy Policy</Link>
-              </Stack>
-            </Grid>
-
-            {/* Column 3: Logo (only visible on md+) */}
-            {!isMobile && (
-              <Grid item xs={12} sm={6} md={3}>
-                <Box sx={{ display: 'flex', justifyContent: { sm: 'center', md: 'flex-end' }, mb: 2 }}>
-                  <img
-                    src="/logo.png" // Replace with actual logo
-                    alt="Quadra Edge"
-                    style={{ maxWidth: '180px', height: 'auto' }}
-                  />
-                </Box>
-              </Grid>
-            )}
-
-            {/* Column 4: Contact Info + Socials */}
-            <Grid item xs={12} sm={6} md={3}>
-              {/* Mobile: show logo here instead */}
-              {isMobile && (
-                <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
-                  <img
-                    src="/logo.png" // Replace with actual logo
-                    alt="Quadra Edge"
-                    style={{ maxWidth: '180px', height: 'auto' }}
-                  />
-                </Box>
-              )}
-
-              <Typography fontWeight={600} gutterBottom>Contact Us</Typography>
-              <Typography variant="body2" mb={1}>Number</Typography>
-              <Typography variant="body2">Address</Typography>
-
-              <Stack
-                direction="row"
-                spacing={2}
-                sx={{ mt: 2 }}
-              >
-                <Link href="#"><Instagram sx={{ color: '#00E0FF' }} /></Link>
-                <Link href="#"><YouTube sx={{ color: '#00E0FF' }} /></Link>
-                <Link href="#"><Facebook sx={{ color: '#00E0FF' }} /></Link>
-                <Link href="#"><LinkedIn sx={{ color: '#00E0FF' }} /></Link>
-              </Stack>
-            </Grid>
-          </Grid>
-
-          <Divider sx={{ my: 4, borderColor: '#00E0FF' }} />
-
-          <Box textAlign="center">
-            <Typography variant="body2" sx={{ color: '#00E0FF' }}>
-              Copyright © 2025 QuadraEdge
-            </Typography>
-          </Box>
-        </motion.div>
-      </Container>
-    </Box>
-  );
-}
+import React from "react";
+import {
+  Box,
+  Container,
+  Grid,
+  Typography,
+  Link,
+  Divider,
+  Stack,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import { Instagram, YouTube, Facebook, LinkedIn } from "@mui/icons-material";
+import { motion, Variants } from "framer-motion";
+
+export default function Footer() {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const isTablet = useMediaQuery(theme.breakpoints.between("sm", "md"));
+
+  // Animation variants
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        when: "beforeChildren",
+      },
+    },
+  };
+
+  const itemVariants: Variants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.5,
+        ease: "easeOut",
+      },
+    },
+    hover: {
+      scale: 1.05,
+      color: "#00E0FF",
+      transition: { duration: 0.2 },
+    },
+  };
+
+  const socialIconVariants: Variants = {
+    hidden: { scale: 0 },
+    visible: {
+      scale: 1,
+      transition: {
+        type: "spring",
+        stiffness: 500,
+        damping: 15,
+      },
+    },
+    hover: {
+      scale: 1.2,
+      transition: { duration: 0.2 },
+    },
+  };
+
+  return (
+    <Box
+      component="footer"
+      sx={{
+        backgroundColor: "#0F111A",
+        color: "#fff",
+        pt: 8,
+        pb: 4,
+        overflow: "hidden",
+      }}
+    >
+      <Container maxWidth="lg">
+        <motion.div
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: "-50px" }}
+          variants={containerVariants}
+        >
+          <Grid container spacing={isMobile ? 3 : 4}>
+            {/* Column 1: Explore Links */}
+            <Grid item xs={12} sm={6} md={3}>
+              <Typography
+                component={motion.div}
+                variants={itemVariants}
+                variant="h6"
+                fontWeight={600}
+                gutterBottom
+                sx={{ color: "#00E0FF" }}
+              >
+                Explore
+              </Typography>
+              <Stack spacing={1}>
+                {["About Us", "Portfolio", "Blogs", "Services"].map((item) => (
+                  <Link
+                    key={item}
+                    component={motion.a}
+                    variants={itemVariants}
+                    whileHover="hover"
+                    href="#"
+                    color="inherit"
+                    underline="hover"
+                    sx={{
+                      display: "inline-block",
+                      transition: "color 0.2s ease",
+                    }}
+                  >
+                    {item}
+                  </Link>
+                ))}
+              </Stack>
+            </Grid>
+
+            {/* Column 2: Support Links */}
+            <Grid item xs={12} sm={6} md={3}>
+              <Typography
+                component={motion.div}
+                variants={itemVariants}
+                variant="h6"
+                fontWeight={600}
+                gutterBottom
+                sx={{ color: "#00E0FF" }}
+              >
+                Support
+              </Typography>
+              <Stack spacing={1}>
+                {["FAQ’s", "Terms & Conditions", "Privacy Policy"].map(
+                  (item) => (
+                    <Link
+                      key={item}
+                      component={motion.a}
+                      variants={itemVariants}
+                      whileHover="hover"
+                      href="#"
+                      color="inherit"
+                      underline="hover"
+                      sx={{
+                        display: "inline-block",
+                        transition: "color 0.2s ease",
+                      }}
+                    >
+                      {item}
+                    </Link>
+                  )
+                )}
+              </Stack>
+            </Grid>
+
+            {/* Column 3: Logo */}
+            <Grid item xs={12} sm={6} md={3}>
+              <Box
+                component={motion.div}
+                variants={itemVariants}
+                sx={{
+                  display: "flex",
+                  justifyContent: isMobile
+                    ? "flex-start"
+                    : isTablet
+                    ? "center"
+                    : "flex-end",
+                  mb: 2,
+                  height: "100%",
+                  alignItems: isMobile ? "flex-start" : "center",
+                }}
+              >
+                <motion.img
+                  initial={{ scale: 0 }}
+                  animate={{ scale: 1 }}
+                  transition={{
+                    type: "spring",
+                    stiffness: 300,
+                    damping: 15,
+                    delay: 0.2,
+                  }}
+                  src="/logo.png"
+                  alt="Quadra Edge"
+                  style={{
+                    maxWidth: isMobile ? "140px" : "180px",
+                    height: "auto",
+                    filter: "drop-shadow(0 0 8px rgba(0, 224, 255, 0.4))",
+                  }}
+                />
+              </Box>
+            </Grid>
+
+            {/* Column 4: Contact Info + Socials */}
+            <Grid item xs={12} sm={6} md={3}>
+              <Typography
+                component={motion.div}
+                variants={itemVariants}
+                variant="h6"
+                fontWeight={600}
+                gutterBottom
+                sx={{ color: "#00E0FF" }}
+              >
+                Contact Us
+              </Typography>
+
+              <Typography
+                component={motion.div}
+                variants={itemVariants}
+                variant="body2"
+                mb={1}
+              >
+                +1 (123) 456-7890
+              </Typography>
+
+              <Typography
+                component={motion.div}
+                variants={itemVariants}
+                variant="body2"
+              >
+                123 Business Ave, Suite 100
+                <br />
+                New York, NY 10001
+              </Typography>
+
+              <Stack
+                direction="row"
+                spacing={2}
+                sx={{ mt: 3 }}
+                component={motion.div}
+                variants={containerVariants}
+              >
+                {[
+                  { icon: <Instagram />, name: "Instagram" },
+                  { icon: <YouTube />, name: "YouTube" },
+                  { icon: <Facebook />, name: "Facebook" },
+                  { icon: <LinkedIn />, name: "LinkedIn" },
+                ].map((social, index) => (
+                  <Link
+                    key={social.name}
+                    component={motion.a}
+                    variants={socialIconVariants}
+                    whileHover="hover"
+                    href="#"
+                    sx={{
+                      color: "#00E0FF",
+                      display: "flex",
+                      alignItems: "center",
+                    }}
+                    aria-label={social.name}
+                  >
+                    {React.cloneElement(social.icon, {
+                      sx: {
+                        fontSize: isMobile ? "1.8rem" : "2rem",
+                        transition: "transform 0.2s ease",
+                      },
+                    })}
+                  </Link>
+                ))}
+              </Stack>
+            </Grid>
+          </Grid>
+
+          <Divider
+            component={motion.hr}
+            initial={{ scaleX: 0 }}
+            whileInView={{ scaleX: 1 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            sx={{
+              my: 4,
+              borderColor: "#00E0FF",
+              borderBottomWidth: 2,
+              opacity: 0.6,
+            }}
+          />
+
+          <Box
+            component={motion.div}
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.4 }}
+            textAlign="center"
+          >
+            <Typography
+              variant="body2"
+              sx={{
+                color: "#00E0FF",
+                fontSize: isMobile ? "0.8rem" : "0.9rem",
+                letterSpacing: "0.5px",
+              }}
+            >
+              Copyright © {new Date().getFullYear()} QuadraEdge. All rights
+              reserved.
+            </Typography>
+          </Box>
+        </motion.div>
+      </Container>
+    </Box>
+  );
+}
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@ -1,151 +1,201 @@
-import React, { useState } from "react";
-import {
-  AppBar,
-  Toolbar,
-  Typography,
-  IconButton,
-  Drawer,
-  List,
-  ListItem,
-  ListItemText,
-  Button,
-  useMediaQuery,
-  useTheme,
-  Box,
-  Container,
-  ListItemButton,
-} from "@mui/material";
-import MenuIcon from "@mui/icons-material/Menu";
-import { motion } from "framer-motion";
-
-const navItems = ["Home", "Services", "Portfolio", "About Us", "Blog"];
-
-const Header = () => {
-  const [mobileOpen, setMobileOpen] = useState(false);
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
-
-  const toggleDrawer = () => {
-    setMobileOpen(!mobileOpen);
-  };
-
-  const drawer = (
-    <Box sx={{ width: 250, backgroundColor: "#000" }} onClick={toggleDrawer}>
-      <List>
-        {navItems.map((item) => (
-          <ListItemButton component="a" href="#" key={item}>
-            <ListItemText primary={item} sx={{ color: "#fff" }} />
-          </ListItemButton>
-        ))}
-        <ListItem disablePadding>
-          <Button
-            variant="outlined"
-            fullWidth
-            sx={{
-              borderColor: "#00E0FF",
-              color: "#00E0FF",
-              backgroundColor: "transparent",
-              borderRadius: "8px",
-              m: 2,
-              "&:hover": {
-                backgroundColor: "#00E0FF",
-                color: "#000",
-              },
-            }}
-          >
-            Contact Us
-          </Button>
-        </ListItem>
-      </List>
-    </Box>
-  );
-
-  return (
-    <AppBar
-      position="sticky"
-      sx={{ backgroundColor: "#000", boxShadow: "none" }}
-    >
-      <Container maxWidth="lg">
-        <Toolbar sx={{ justifyContent: "space-between", padding: "16px 0" }}>
-          <motion.div
-            initial={{ opacity: 0, y: -10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6 }}
-          >
-            <Typography variant="h6" sx={{ fontWeight: 700, color: "#fff" }}>
-              QUADRA EDGE
-            </Typography>
-          </motion.div>
-
-          {isMobile ? (
-            <>
-              <IconButton color="inherit" edge="end" onClick={toggleDrawer}>
-                <MenuIcon sx={{ color: "#fff" }} />
-              </IconButton>
-              <Drawer
-                anchor="right"
-                open={mobileOpen}
-                onClose={toggleDrawer}
-                sx={{ "& .MuiDrawer-paper": { backgroundColor: "#000" } }}
-              >
-                {drawer}
-              </Drawer>
-            </>
-          ) : (
-            <Box sx={{ display: "flex", gap: 4, alignItems: "center" }}>
-              {navItems.map((item, index) => (
-                <motion.div
-                  key={item}
-                  initial={{ opacity: 0, y: -5 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.1 * index }}
-                >
-                  <Typography
-                    variant="body1"
-                    component="a"
-                    href="#"
-                    sx={{
-                      color: "#fff",
-                      textDecoration: "none",
-                      "&:hover": {
-                        color: "#00E0FF",
-                      },
-                    }}
-                  >
-                    {item}
-                  </Typography>
-                </motion.div>
-              ))}
-              <motion.div
-                initial={{ opacity: 0, y: -5 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: 0.5 }}
-              >
-                <Button
-                  variant="outlined"
-                  sx={{
-                    borderColor: "#00E0FF",
-                    color: "#00E0FF",
-                    backgroundColor: "transparent",
-                    borderRadius: "8px",
-                    textTransform: "none",
-                    padding: "8px 24px",
-                    "&:hover": {
-                      backgroundColor: "#00E0FF",
-                      color: "#000",
-                      borderColor: "#00E0FF",
-                    },
-                  }}
-                >
-                  Contact Us
-                </Button>
-              </motion.div>
-            </Box>
-          )}
-        </Toolbar>
-      </Container>
-    </AppBar>
-  );
-};
-
-export default Header;
+import React, { useState } from "react";
+import {
+  AppBar,
+  Toolbar,
+  IconButton,
+  Drawer,
+  List,
+  ListItemText,
+  Button,
+  useMediaQuery,
+  useTheme,
+  Box,
+  Container,
+  ListItemButton,
+  Divider,
+} from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
+import { motion } from "framer-motion";
+import HomeIcon from "@mui/icons-material/Home";
+import BuildIcon from "@mui/icons-material/Build";
+import WorkIcon from "@mui/icons-material/Work";
+import InfoIcon from "@mui/icons-material/Info";
+import ArticleIcon from "@mui/icons-material/Article";
+import logo from "../QE Website design/Logo.png";
+
+const navItems = [
+  { label: "Home", icon: <HomeIcon />, href: "#" },
+  { label: "Services", icon: <BuildIcon />, href: "#" },
+  { label: "Portfolio", icon: <WorkIcon />, href: "#" },
+  { label: "About Us", icon: <InfoIcon />, href: "#" },
+  { label: "Blog", icon: <ArticleIcon />, href: "#" },
+];
+
+const Header = () => {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+
+  const toggleDrawer = () => setMobileOpen(!mobileOpen);
+
+  const drawer = (
+    <Box
+      sx={{ width: 260, height: "100%", backgroundColor: "#000" }}
+      onClick={toggleDrawer}
+    >
+      <ListItemButton
+        component="a"
+        href="#"
+        sx={{ justifyContent: "center", my: 2 }}
+      >
+        <Box component="img" src={logo} alt="Logo" sx={{ height: 40 }} />
+      </ListItemButton>
+      <Divider sx={{ backgroundColor: "#444" }} />
+      <Box>
+        {navItems.map((item) => (
+          <ListItemButton component="a" href={item.href} key={item.label}>
+            <Box
+              sx={{ display: "flex", alignItems: "center", color: "#00E0FF" }}
+            >
+              <Box sx={{ mr: 2 }}>{item.icon}</Box>
+              <ListItemText primary={item.label} sx={{ color: "#fff" }} />
+            </Box>
+          </ListItemButton>
+        ))}
+      </Box>
+      <Divider sx={{ backgroundColor: "#444", my: 2 }} />
+      <Box px={2}>
+        <Button
+          variant="outlined"
+          fullWidth
+          sx={{
+            borderColor: "#00E0FF",
+            color: "#00E0FF",
+            borderRadius: "24px",
+            fontWeight: 600,
+            textTransform: "none",
+            "&:hover": {
+              backgroundColor: "#00E0FF",
+              color: "#000",
+            },
+          }}
+        >
+          Contact Us
+        </Button>
+      </Box>
+    </Box>
+  );
+
+  return (
+    <AppBar
+      position="sticky"
+      sx={{ backgroundColor: "#000", boxShadow: "none" }}
+    >
+      <Container maxWidth="lg">
+        <Toolbar sx={{ justifyContent: "space-between", py: 1.5 }}>
+          {isMobile ? (
+            <>
+              <IconButton edge="end" onClick={toggleDrawer}>
+                <MenuIcon sx={{ color: "#fff" }} />
+              </IconButton>
+              <Drawer
+                anchor="right"
+                open={mobileOpen}
+                onClose={toggleDrawer}
+                sx={{ "& .MuiDrawer-paper": { backgroundColor: "#000" } }}
+              >
+                {drawer}
+              </Drawer>
+            </>
+          ) : (
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                width: "100%",
+              }}
+            >
+              {/* Left - Logo */}
+              <motion.div
+                initial={{ opacity: 0, x: -10 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.6 }}
+              >
+                <Box
+                  component="a"
+                  href="#"
+                  sx={{ display: "flex", alignItems: "center" }}
+                >
+                  <Box
+                    component="img"
+                    src={logo}
+                    alt="Logo"
+                    sx={{ height: 40, width: "auto", objectFit: "contain" }}
+                  />
+                </Box>
+              </motion.div>
+
+              {/* Center - Navigation */}
+              <Box sx={{ display: "flex", gap: 4, alignItems: "center" }}>
+                {navItems.map((item, index) => (
+                  <motion.div
+                    key={item.label}
+                    initial={{ opacity: 0, y: -5 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.1 * index }}
+                  >
+                    <Box
+                      component="a"
+                      href={item.href}
+                      sx={{
+                        color: "#fff",
+                        textDecoration: "none",
+                        fontWeight: 500,
+                        fontSize: "1rem",
+                        "&:hover": {
+                          color: "#00E0FF",
+                        },
+                      }}
+                    >
+                      {item.label}
+                    </Box>
+                  </motion.div>
+                ))}
+              </Box>
+
+              {/* Right - Contact Us */}
+              <motion.div
+                initial={{ opacity: 0, x: 10 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.6 }}
+              >
+                <Button
+                  variant="outlined"
+                  sx={{
+                    borderColor: "#00E0FF",
+                    color: "#00E0FF",
+                    borderRadius: "24px",
+                    textTransform: "none",
+                    fontWeight: 600,
+                    px: 3,
+                    py: 1,
+                    "&:hover": {
+                      backgroundColor: "#00E0FF",
+                      color: "#000",
+                      borderColor: "#00E0FF",
+                    },
+                  }}
+                >
+                  Contact Us
+                </Button>
+              </motion.div>
+            </Box>
+          )}
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+};
+
+export default Header;
--- a/src/components/hero/hero.tsx
+++ b/src/components/hero/hero.tsx
@ -1,49 +1,102 @@
-import { Box, Button, Container, Grid, Typography } from "@mui/material";
-import { motion } from "framer-motion";
-import backgroundImg from "../hero/Frame 22.png";
-export default function Hero() {
-  return (
-    <Box sx={{ backgroundColor: "#0F111A", color: "#fff", py: 10 }}>
-      <Container maxWidth="lg">
-        <motion.div
-          initial={{ opacity: 0, y: -20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8 }}
-        >
-          <Grid container>
-            <Grid item md={6}>
-              <Typography variant="h3" fontWeight="bold" gutterBottom>
-                We Create <br />
-                Brands That Stick
-              </Typography>
-            </Grid>
-            <Grid item md={6}>
-              <Typography variant="body1" maxWidth="sm">
-                We help founders grow through bold design, sharp strategy, and
-                smart marketing that drives recognition, engagement and
-                long-term brand loyalty.
-              </Typography>
-              <Button
-                variant="outlined"
-                sx={{
-                  mt: 4,
-                  borderColor: "#00E0FF",
-                  color: "#00E0FF",
-                  "&:hover": {
-                    backgroundColor: "#00E0FF",
-                    color: "#000",
-                  },
-                }}
-              >
-                Get in Touch
-              </Button>
-            </Grid>
-          </Grid>
-        </motion.div>
-      </Container>
-      <Box width="100%">
-        <img src={backgroundImg} alt="" width={"100%"} />
-      </Box>
-    </Box>
-  );
-}
+import { Box, Button, Container, Grid, Typography } from "@mui/material";
+import { motion } from "framer-motion";
+import backgroundImg from "../hero/Frame 22.png";
+
+export default function Hero() {
+  return (
+    <Box sx={{ backgroundColor: "#0F111A", color: "#fff", py: 10 }}>
+      <Container maxWidth="lg">
+        <motion.div
+          initial={{ opacity: 0, y: -30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 1 }}
+        >
+          <Grid container spacing={4} alignItems="center">
+            <Grid item xs={12} md={6}>
+              <Box>
+                <Typography
+                  variant="h2"
+                  fontWeight="bold"
+                  gutterBottom
+                  sx={{
+                    fontSize: { xs: "2rem", sm: "2.8rem", md: "3.4rem" },
+                    lineHeight: 1.2,
+                  }}
+                >
+                  We Create <br />
+                  Brands That Stick
+                </Typography>
+
+                {/* Sliding second line after 7s */}
+                <motion.div
+                  initial={{ opacity: 0, x: 50 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: 7, duration: 1 }}
+                >
+                  <Typography
+                    variant="h5"
+                    sx={{
+                      mt: 2,
+                      fontWeight: 300,
+                      color: "#00E0FF",
+                      fontStyle: "italic",
+                    }}
+                  >
+                    "Let your brand speak before you do."
+                  </Typography>
+                </motion.div>
+              </Box>
+            </Grid>
+
+            <Grid item xs={12} md={6}>
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 1, duration: 1 }}
+              >
+                <Typography
+                  variant="body1"
+                  sx={{ maxWidth: "500px", fontSize: "1.1rem", color: "#ccc" }}
+                >
+                  We help founders grow through bold design, sharp strategy, and
+                  smart marketing that drives recognition, engagement and
+                  long-term brand loyalty.
+                </Typography>
+                <Button
+                  variant="outlined"
+                  sx={{
+                    mt: 4,
+                    borderColor: "#00E0FF",
+                    color: "#00E0FF",
+                    borderRadius: "24px",
+                    px: 4,
+                    py: 1.5,
+                    textTransform: "none",
+                    fontWeight: 600,
+                    "&:hover": {
+                      backgroundColor: "#00E0FF",
+                      color: "#000",
+                    },
+                  }}
+                >
+                  Get in Touch
+                </Button>
+              </motion.div>
+            </Grid>
+          </Grid>
+        </motion.div>
+      </Container>
+
+      <Box width="100%" mt={8}>
+        <motion.img
+          src={backgroundImg}
+          alt="Hero Background"
+          width="100%"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 1.5, duration: 1 }}
+        />
+      </Box>
+    </Box>
+  );
+}
--- a/src/components/landingpage/landingpage.tsx
+++ b/src/components/landingpage/landingpage.tsx
@ -1,33 +1,33 @@
-
-import React from 'react';
-// import AppRoutes from './routes';
-// import Header from './components/landingpage/landingpagecomponents/header';
-import { Box } from '@mui/material';
-import HeroSection from './landingpagecomponents/CarouselSection';
-import WhoWeAre from './landingpagecomponents/whoweare';
-import OurExpertise from './landingpagecomponents/ourexperties';
-import TopBrands from './landingpagecomponents/brands';
-import CaseStudies from './landingpagecomponents/casestudy';
-import StatsSection from './landingpagecomponents/scrollanimationsection';
-import ContactForm from './landingpagecomponents/contactus';
-// import router from './routes';
-
-
-const LandingPage: React.FC = () => {
-    return (
-        <Box>
-            {/* <AnimatedHeader /> */}
-            <HeroSection />
-            <WhoWeAre />
-            <OurExpertise />
-            <TopBrands />
-            <StatsSection/>
-            <CaseStudies/>
-            <ContactForm />
-            
-        </Box>
-
-    );
-};
-
-export default LandingPage;
+
+import React from 'react';
+// import AppRoutes from './routes';
+// import Header from './components/landingpage/landingpagecomponents/header';
+import { Box } from '@mui/material';
+import HeroSection from './landingpagecomponents/CarouselSection';
+import WhoWeAre from './landingpagecomponents/whoweare';
+import OurExpertise from './landingpagecomponents/ourexperties';
+import TopBrands from './landingpagecomponents/brands';
+import CaseStudies from './landingpagecomponents/casestudy';
+import StatsSection from './landingpagecomponents/scrollanimationsection';
+import ContactForm from './landingpagecomponents/contactus';
+// import router from './routes';
+
+
+const LandingPage: React.FC = () => {
+    return (
+        <Box>
+            {/* <AnimatedHeader /> */}
+            <HeroSection />
+            <WhoWeAre />
+            <OurExpertise />
+            <TopBrands />
+            <StatsSection/>
+            <CaseStudies/>
+            <ContactForm />
+            
+        </Box>
+
+    );
+};
+
+export default LandingPage;
--- a/src/components/landingpage/landingpagebase.tsx
+++ b/src/components/landingpage/landingpagebase.tsx
@ -1,12 +1,12 @@
-import React from 'react';
-import { Outlet } from 'react-router-dom';
-import { Box } from '@mui/material';
-// import CopyrightFooter from '../../assets/copyright';
-
-export const LandingBase: React.FC = () => {
-  return (
-    <Box>
-      <Outlet />
-    </Box>
-  );
-};
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import { Box } from '@mui/material';
+// import CopyrightFooter from '../../assets/copyright';
+
+export const LandingBase: React.FC = () => {
+  return (
+    <Box>
+      <Outlet />
+    </Box>
+  );
+};
--- a/src/components/landingpage/landingpagecomponents/CarouselSection.tsx
+++ b/src/components/landingpage/landingpagecomponents/CarouselSection.tsx
@ -1,99 +1,99 @@
-import React from "react";
-import { Box, Button, Grid, Typography } from "@mui/material";
-import background from "../../../image-removebg-preview (21).png";
-
-const HeroSection: React.FC = () => {
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        height: { md: "90vh", xs: "80vh" },
-        backgroundColor: "#f5f5f5",
-        padding: { xs: 3, md: 9 },
-      }}
-    >
-      <Grid
-        container
-        spacing={2}
-        sx={{
-          alignItems: "center",
-          justifyContent: { xs: "center", md: "space-between" }, 
-          textAlign: { xs: "center", md: "left" },
-        }}
-      >
-        {/* Left Content */}
-        <Grid item xs={12} md={8}>
-          <Typography
-            variant="h3"
-            sx={{ fontSize: { xs: "2rem", md: "3rem" } }}
-          >
-           We Don’t Just Market. We Make You <b>Unstoppable</b>.
-          </Typography>
-          {/* <Typography
-            variant="h3"
-            sx={{
-              fontWeight: 200,
-              fontSize: { xs: "2rem", md: "3rem" },
-              mt: 1,
-            }}
-          >
-            DIGITAL AGENCY
-          </Typography> */}
-          <Typography
-            variant="body1"
-            sx={{
-              mt: 2,
-              fontSize: { xs: "1rem", md: "1.2rem" },
-              color: "#666",
-              maxWidth: "90%",
-            }}
-          >
-            Cut through the noise with strategies that deliver measurable success. Let’s make it happen.
-          </Typography>
-          <Button
-            variant="outlined"
-            sx={{
-              mt: 3,
-              borderColor: "black",
-              color: "black",
-              fontSize: "1rem",
-              padding: "10px 20px",
-              borderRadius: "50px",
-              fontWeight: "bold",
-              "&:hover": {
-                borderColor: "black",
-                backgroundColor: "#e0e0e0",
-              },
-            }}
-          >
-            WATCH VIDEO
-          </Button>
-        </Grid>
-
-        {/* Right Image */}
-        <Grid
-          item
-          xs={12}
-          md={4}
-          sx={{
-            display: "flex",
-            justifyContent: "center",
-          }}
-        >
-          <Box
-            component="img"
-            src={background}
-            alt="Coffee Cup"
-            sx={{
-              width: { xs: "200px", md: "90%" },
-            }}
-          />
-        </Grid>
-      </Grid>
-    </Box>
-  );
-};
-
-export default HeroSection;
+import React from "react";
+import { Box, Button, Grid, Typography } from "@mui/material";
+import background from "../../../image-removebg-preview (21).png";
+
+const HeroSection: React.FC = () => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: { md: "90vh", xs: "80vh" },
+        backgroundColor: "#f5f5f5",
+        padding: { xs: 3, md: 9 },
+      }}
+    >
+      <Grid
+        container
+        spacing={2}
+        sx={{
+          alignItems: "center",
+          justifyContent: { xs: "center", md: "space-between" }, 
+          textAlign: { xs: "center", md: "left" },
+        }}
+      >
+        {/* Left Content */}
+        <Grid item xs={12} md={8}>
+          <Typography
+            variant="h3"
+            sx={{ fontSize: { xs: "2rem", md: "3rem" } }}
+          >
+           We Don’t Just Market. We Make You <b>Unstoppable</b>.
+          </Typography>
+          {/* <Typography
+            variant="h3"
+            sx={{
+              fontWeight: 200,
+              fontSize: { xs: "2rem", md: "3rem" },
+              mt: 1,
+            }}
+          >
+            DIGITAL AGENCY
+          </Typography> */}
+          <Typography
+            variant="body1"
+            sx={{
+              mt: 2,
+              fontSize: { xs: "1rem", md: "1.2rem" },
+              color: "#666",
+              maxWidth: "90%",
+            }}
+          >
+            Cut through the noise with strategies that deliver measurable success. Let’s make it happen.
+          </Typography>
+          <Button
+            variant="outlined"
+            sx={{
+              mt: 3,
+              borderColor: "black",
+              color: "black",
+              fontSize: "1rem",
+              padding: "10px 20px",
+              borderRadius: "50px",
+              fontWeight: "bold",
+              "&:hover": {
+                borderColor: "black",
+                backgroundColor: "#e0e0e0",
+              },
+            }}
+          >
+            WATCH VIDEO
+          </Button>
+        </Grid>
+
+        {/* Right Image */}
+        <Grid
+          item
+          xs={12}
+          md={4}
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+          }}
+        >
+          <Box
+            component="img"
+            src={background}
+            alt="Coffee Cup"
+            sx={{
+              width: { xs: "200px", md: "90%" },
+            }}
+          />
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default HeroSection;
--- a/src/components/landingpage/landingpagecomponents/brands.tsx
+++ b/src/components/landingpage/landingpagecomponents/brands.tsx
@ -1,47 +1,47 @@
-import React from "react";
-import { Box, Typography, Grid, Card, CardMedia } from "@mui/material";
-import brandimage from "../../../brandimage.jpg"
-
-const brands = [
-  { name: "Hockey India", img: brandimage },
-  { name: "J. Hampstead", img: brandimage },
-  { name: "Tim Hortons", img: brandimage },
-  { name: "Brand 4", img: brandimage },
-  { name: "Brand 5", img: brandimage },
-  { name: "Brand 6", img: brandimage },
-  { name: "Hockey India", img: brandimage },
-  { name: "J. Hampstead", img: brandimage },
-  { name: "Tim Hortons", img: brandimage },
- 
-];
-
-const TopBrands = () => {
-  return (
-    <Box sx={{ backgroundColor: "#16110f", py: 6, textAlign: "center" }}>
-      <Typography variant="h4" sx={{  color: "white",  display: "inline-block", pb: 1 }}>
-        TOP <span style={{ fontWeight: "bold" }}>BRANDS</span>
-      </Typography>
-      <Typography sx={{ color: "#A0A0A0", maxWidth: "1200px", mx: "auto", mt: 2, lineHeight: 1.9 }}>
-        Here's a look at the clients we've worked with. If you'd like to work with the
-        best digital agency too, we'd love to hear from you. Drop us a line and we'll
-        look forward to brewing something fresh for you!
-      </Typography>
-      <Grid container spacing={2} justifyContent="center" sx={{ mt: 9  }}>
-        {brands.map((brand, index) => (
-          <Grid item xs={12} sm={6} md={4} key={index}>
-            <Card sx={{ backgroundColor: "#EAEAEA", p: 2, display: "flex", justifyContent: "center", maxWidth: "320px", mx: "auto" }}>
-              <CardMedia
-                component="img"
-                src={brand.img}
-                alt={brand.name}
-                sx={{ maxWidth: "100%", objectFit: "contain" }}
-              />
-            </Card>
-          </Grid>
-        ))}
-      </Grid>
-    </Box>
-  );
-};
-
+import React from "react";
+import { Box, Typography, Grid, Card, CardMedia } from "@mui/material";
+import brandimage from "../../../brandimage.jpg"
+
+const brands = [
+  { name: "Hockey India", img: brandimage },
+  { name: "J. Hampstead", img: brandimage },
+  { name: "Tim Hortons", img: brandimage },
+  { name: "Brand 4", img: brandimage },
+  { name: "Brand 5", img: brandimage },
+  { name: "Brand 6", img: brandimage },
+  { name: "Hockey India", img: brandimage },
+  { name: "J. Hampstead", img: brandimage },
+  { name: "Tim Hortons", img: brandimage },
+ 
+];
+
+const TopBrands = () => {
+  return (
+    <Box sx={{ backgroundColor: "#16110f", py: 6, textAlign: "center" }}>
+      <Typography variant="h4" sx={{  color: "white",  display: "inline-block", pb: 1 }}>
+        TOP <span style={{ fontWeight: "bold" }}>BRANDS</span>
+      </Typography>
+      <Typography sx={{ color: "#A0A0A0", maxWidth: "1200px", mx: "auto", mt: 2, lineHeight: 1.9 }}>
+        Here's a look at the clients we've worked with. If you'd like to work with the
+        best digital agency too, we'd love to hear from you. Drop us a line and we'll
+        look forward to brewing something fresh for you!
+      </Typography>
+      <Grid container spacing={2} justifyContent="center" sx={{ mt: 9  }}>
+        {brands.map((brand, index) => (
+          <Grid item xs={12} sm={6} md={4} key={index}>
+            <Card sx={{ backgroundColor: "#EAEAEA", p: 2, display: "flex", justifyContent: "center", maxWidth: "320px", mx: "auto" }}>
+              <CardMedia
+                component="img"
+                src={brand.img}
+                alt={brand.name}
+                sx={{ maxWidth: "100%", objectFit: "contain" }}
+              />
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+};
+
 export default TopBrands;
--- a/src/components/landingpage/landingpagecomponents/casestudy.tsx
+++ b/src/components/landingpage/landingpagecomponents/casestudy.tsx
@ -1,106 +1,106 @@
-import React, { useState } from "react";
-import { Box, Card, Grid, Typography, Button } from "@mui/material";
-import background from "../../../dark-background.jpg";
-
-const CaseStudies: React.FC = () => {
-  return (
-    <Box sx={{ px: 5, py: 3, height: "900px", marginTop: 20 }}>
-      <Grid container spacing={5} justifyContent="center">
-        {/* First Card */}
-        <Grid item xs={12} md={5.5}>
-          <HoverCard
-            title="It All Starts At Kaziranga University"
-            description="Kaziranga University, A Prestigious Educational..."
-            image={background}
-          />
-          {/* Bottom Section */}
-          <Box textAlign="left" mt={4}>
-            <Typography variant="body1">
-              Check out more digital marketing case studies
-            </Typography>
-            <Button
-              variant="outlined"
-              sx={{ mt: 2, borderRadius: "50px", px: 4, py: 1 }}
-            >
-              VIEW MORE
-            </Button>
-          </Box>
-        </Grid>
-
-        {/* Second Card with Heading */}
-        <Grid item xs={12} md={5.5}>
-          <Typography variant="h4" fontWeight="bold" sx={{ mb: 3, mt: 4 }}>
-            CASE <span style={{ fontWeight: "normal" }}>STUDIES</span>
-          </Typography>
-          <HoverCard
-            title="Instagram AR Filter"
-            description="We Came Up With A Unique AR Filter On..."
-            image={background}
-          />
-        </Grid>
-      </Grid>
-    </Box>
-  );
-};
-
-const HoverCard: React.FC<{ title: string; description: string; image: string }> = ({
-  title,
-  description,
-  image,
-}) => {
-  const [hover, setHover] = useState(false);
-
-  return (
-    <Card
-      sx={{
-        position: "relative",
-        borderRadius: 2,
-        overflow: "hidden",
-        boxShadow: 3,
-        height: "90vh",
-        width: "30vw",
-        cursor: "pointer",
-        transition: "0.5s",
-      }}
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
-    >
-      <Box
-        component="img"
-        src={image}
-        alt={title}
-        sx={{
-          width: "100%",
-          height: "100%",
-          objectFit: "cover",
-          position: "absolute",
-          top: 0,
-          left: 0,
-          transition: "0.5s",
-          filter: hover ? "brightness(0.5)" : "brightness(1)",
-        }}
-      />
-      {hover && (
-        <Box
-          sx={{
-            position: "absolute",
-            bottom: 0,
-            width: "100%",
-            background: "rgba(0, 0, 0, 0.6)",
-            color: "white",
-            p: 3,
-            opacity: hover ? 1 : 0,
-            transition: "opacity 0.3s ease-in-out",
-          }}
-        >
-          <Typography variant="h6" fontWeight="bold">
-            {title}
-          </Typography>
-          <Typography variant="body2">{description}</Typography>
-        </Box>
-      )}
-    </Card>
-  );
-};
-
-export default CaseStudies;
+import React, { useState } from "react";
+import { Box, Card, Grid, Typography, Button } from "@mui/material";
+import background from "../../../dark-background.jpg";
+
+const CaseStudies: React.FC = () => {
+  return (
+    <Box sx={{ px: 5, py: 3, height: "900px", marginTop: 20 }}>
+      <Grid container spacing={5} justifyContent="center">
+        {/* First Card */}
+        <Grid item xs={12} md={5.5}>
+          <HoverCard
+            title="It All Starts At Kaziranga University"
+            description="Kaziranga University, A Prestigious Educational..."
+            image={background}
+          />
+          {/* Bottom Section */}
+          <Box textAlign="left" mt={4}>
+            <Typography variant="body1">
+              Check out more digital marketing case studies
+            </Typography>
+            <Button
+              variant="outlined"
+              sx={{ mt: 2, borderRadius: "50px", px: 4, py: 1 }}
+            >
+              VIEW MORE
+            </Button>
+          </Box>
+        </Grid>
+
+        {/* Second Card with Heading */}
+        <Grid item xs={12} md={5.5}>
+          <Typography variant="h4" fontWeight="bold" sx={{ mb: 3, mt: 4 }}>
+            CASE <span style={{ fontWeight: "normal" }}>STUDIES</span>
+          </Typography>
+          <HoverCard
+            title="Instagram AR Filter"
+            description="We Came Up With A Unique AR Filter On..."
+            image={background}
+          />
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+const HoverCard: React.FC<{ title: string; description: string; image: string }> = ({
+  title,
+  description,
+  image,
+}) => {
+  const [hover, setHover] = useState(false);
+
+  return (
+    <Card
+      sx={{
+        position: "relative",
+        borderRadius: 2,
+        overflow: "hidden",
+        boxShadow: 3,
+        height: "90vh",
+        width: "30vw",
+        cursor: "pointer",
+        transition: "0.5s",
+      }}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+    >
+      <Box
+        component="img"
+        src={image}
+        alt={title}
+        sx={{
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          transition: "0.5s",
+          filter: hover ? "brightness(0.5)" : "brightness(1)",
+        }}
+      />
+      {hover && (
+        <Box
+          sx={{
+            position: "absolute",
+            bottom: 0,
+            width: "100%",
+            background: "rgba(0, 0, 0, 0.6)",
+            color: "white",
+            p: 3,
+            opacity: hover ? 1 : 0,
+            transition: "opacity 0.3s ease-in-out",
+          }}
+        >
+          <Typography variant="h6" fontWeight="bold">
+            {title}
+          </Typography>
+          <Typography variant="body2">{description}</Typography>
+        </Box>
+      )}
+    </Card>
+  );
+};
+
+export default CaseStudies;
--- a/src/components/landingpage/landingpagecomponents/contactus.tsx
+++ b/src/components/landingpage/landingpagecomponents/contactus.tsx
@ -1,116 +1,116 @@
-import React, { useState, useEffect } from "react";
-import { TextField, Button, Box, Typography, Grid, InputAdornment, IconButton } from "@mui/material";
-import { Person, Phone, Email, Chat, Facebook, Twitter, LinkedIn, Instagram } from "@mui/icons-material";
-
-const changingTexts = ["Strategy", "Innovation", "Growth", "Transformation", "Impact"];
-
-const ContactForm: React.FC = () => {
-  const [currentText, setCurrentText] = useState<string>(changingTexts[0]);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentText((prevText) => {
-        const currentIndex = changingTexts.indexOf(prevText);
-        return changingTexts[(currentIndex + 1) % changingTexts.length];
-      });
-    }, 1000);
-
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <Box sx={{ minHeight: "100vh", width: "100%", display: "flex", alignItems: "center", justifyContent: "center", bgcolor: "#16110f", color: "white", p: 4 }}>
-      <Grid container spacing={4} alignItems="center" justifyContent="space-between">
-
-        {/* Left Side */}
-        <Grid item xs={12} md={5}>
-          <Typography variant="h1" fontWeight="bold">Let's Talk</Typography>
-          <Typography variant="h1" fontWeight="bold" color="orange" sx={{ transition: "all 0.5s ease-in-out" }}>
-            {currentText}
-          </Typography>
-          <Typography variant="h6" mt={2}>
-            Let's discuss your project at <span style={{ color: "orange" }}>ideas@digitallatte.in</span>
-          </Typography>
-
-          {/* Social Media Icons */}
-          <Box sx={{ display: "flex", gap: 2, mt: 3 }}>
-            <IconButton sx={{ color: "white" }}><Facebook /></IconButton>
-            <IconButton sx={{ color: "white" }}><Twitter /></IconButton>
-            <IconButton sx={{ color: "white" }}><LinkedIn /></IconButton>
-            <IconButton sx={{ color: "white" }}><Instagram /></IconButton>
-          </Box>
-        </Grid>
-
-        {/* Right Side - Contact Form */}
-        <Grid item xs={12} md={6}>
-          <Box component="form" sx={{ bgcolor: "#16110f", p: 4, borderRadius: 2 }}>
-
-            <TextField
-              fullWidth
-              variant="standard"
-              placeholder="Name*"
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <Person sx={{ color: "orange" }} />
-                  </InputAdornment>
-                ),
-              }}
-              sx={{ mb: 4, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }}
-            />
-
-            <Box sx={{ display: "flex", gap: 2, alignItems: "center" }}>
-              <TextField
-                sx={{ flex: 1, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }}
-                variant="standard"
-                placeholder="Contact*"
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <Phone sx={{ color: "orange" }} />
-                    </InputAdornment>
-                  ),
-                }}
-              />
-
-              <TextField
-                sx={{ flex: 1, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }}
-                variant="standard"
-                placeholder="Email*"
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <Email sx={{ color: "orange" }} />
-                    </InputAdornment>
-                  ),
-                }}
-              />
-            </Box>
-
-            <TextField
-              fullWidth
-              variant="standard"
-              placeholder="Message*"
-              multiline
-              rows={4}
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <Chat sx={{ color: "orange" }} />
-                  </InputAdornment>
-                ),
-              }}
-              sx={{ mb: 3, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }}
-            />
-
-            <Button variant="contained" sx={{ bgcolor: "orange", color: "black", fontWeight: "bold", borderRadius: "20px", py: 1.5 }}>
-              SEND MESSAGE
-            </Button>
-          </Box>
-        </Grid>
-      </Grid>
-    </Box>
-  );
-};
-
-export default ContactForm;
+import React, { useState, useEffect } from "react";
+import { TextField, Button, Box, Typography, Grid, InputAdornment, IconButton } from "@mui/material";
+import { Person, Phone, Email, Chat, Facebook, Twitter, LinkedIn, Instagram } from "@mui/icons-material";
+
+const changingTexts = ["Strategy", "Innovation", "Growth", "Transformation", "Impact"];
+
+const ContactForm: React.FC = () => {
+  const [currentText, setCurrentText] = useState<string>(changingTexts[0]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentText((prevText) => {
+        const currentIndex = changingTexts.indexOf(prevText);
+        return changingTexts[(currentIndex + 1) % changingTexts.length];
+      });
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <Box sx={{ minHeight: "100vh", width: "100%", display: "flex", alignItems: "center", justifyContent: "center", bgcolor: "#16110f", color: "white", p: 4 }}>
+      <Grid container spacing={4} alignItems="center" justifyContent="space-between">
+
+        {/* Left Side */}
+        <Grid item xs={12} md={5}>
+          <Typography variant="h1" fontWeight="bold">Let's Talk</Typography>
+          <Typography variant="h1" fontWeight="bold" color="orange" sx={{ transition: "all 0.5s ease-in-out" }}>
+            {currentText}
+          </Typography>
+          <Typography variant="h6" mt={2}>
+            Let's discuss your project at <span style={{ color: "orange" }}>ideas@digitallatte.in</span>
+          </Typography>
+
+          {/* Social Media Icons */}
+          <Box sx={{ display: "flex", gap: 2, mt: 3 }}>
+            <IconButton sx={{ color: "white" }}><Facebook /></IconButton>
+            <IconButton sx={{ color: "white" }}><Twitter /></IconButton>
+            <IconButton sx={{ color: "white" }}><LinkedIn /></IconButton>
+            <IconButton sx={{ color: "white" }}><Instagram /></IconButton>
+          </Box>
+        </Grid>
+
+        {/* Right Side - Contact Form */}
+        <Grid item xs={12} md={6}>
+          <Box component="form" sx={{ bgcolor: "#16110f", p: 4, borderRadius: 2 }}>
+
+            <TextField
+              fullWidth
+              variant="standard"
+              placeholder="Name*"
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <Person sx={{ color: "orange" }} />
+                  </InputAdornment>
+                ),
+              }}
+              sx={{ mb: 4, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }}
+            />
+
+            <Box sx={{ display: "flex", gap: 2, alignItems: "center" }}>
+              <TextField
+                sx={{ flex: 1, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }}
+                variant="standard"
+                placeholder="Contact*"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <Phone sx={{ color: "orange" }} />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+
+              <TextField
+                sx={{ flex: 1, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }}
+                variant="standard"
+                placeholder="Email*"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <Email sx={{ color: "orange" }} />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+            </Box>
+
+            <TextField
+              fullWidth
+              variant="standard"
+              placeholder="Message*"
+              multiline
+              rows={4}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <Chat sx={{ color: "orange" }} />
+                  </InputAdornment>
+                ),
+              }}
+              sx={{ mb: 3, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }}
+            />
+
+            <Button variant="contained" sx={{ bgcolor: "orange", color: "black", fontWeight: "bold", borderRadius: "20px", py: 1.5 }}>
+              SEND MESSAGE
+            </Button>
+          </Box>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default ContactForm;
--- a/src/components/landingpage/landingpagecomponents/ourexperties.tsx
+++ b/src/components/landingpage/landingpagecomponents/ourexperties.tsx
@ -1,117 +1,117 @@
-import React, { useState, useEffect } from "react";
-import { Box, Grid, Typography } from "@mui/material";
-import { Computer, Brush, Code } from "@mui/icons-material"; // Import relevant icons
-
-const expertiseCategories = ["DIGITAL", "DESIGN", "DEVELOPMENT"];
-
-const OurExpertise: React.FC = () => {
-  const [currentText, setCurrentText] = useState(expertiseCategories[0]);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentText((prevText) => {
-        const currentIndex = expertiseCategories.indexOf(prevText);
-        const nextIndex = (currentIndex + 1) % expertiseCategories.length;
-        return expertiseCategories[nextIndex];
-      });
-    }, 2000);
-
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <Box
-      sx={{
-        backgroundColor: "#ffffff",
-        color: "#000000",
-        minHeight: "100vh",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: "60px 20px",
-      }}
-    >
-      <Typography variant="h3" fontWeight={700} gutterBottom sx={{ color: "#333" }}>
-        OUR <span style={{ fontWeight: 300 }}>EXPERTISE</span>
-      </Typography>
-      <Typography variant="body1" sx={{ color: "#666", textAlign: "center", marginBottom: 3, maxWidth: "800px" }}>
-        We combine data insights with design thinking to build strategies and experiences that transform businesses.
-      </Typography>
-      <Typography variant="h4" fontWeight={700} sx={{ marginBottom: 5, textTransform: "uppercase", color: "#555", fontSize: "3rem" }}>
-        {currentText}
-      </Typography>
-      <Grid container justifyContent="center" sx={{ maxWidth: "1000px", margin: "0 auto" }}>
-        {[
-          {
-            title: "Content Marketing",
-            icon: <Computer sx={{ fontSize: 50, color: "#F7931E" }} />, // Digital icon
-            bgColor: "#16110f",
-            items: [
-              "Blog & article writing",
-              "Website copy & landing pages",
-              "Video content & infographics",
-              "Email & newsletter marketing",
-            ],
-          },
-          {
-            title: "Web Design & Development",
-            icon: <Brush sx={{ fontSize: 50, color: "#F7931E" }} />, // Design icon
-            bgColor: "#49332a",
-            items: [
-              "Custom website design",
-              "WordPress & eCommerce development",
-              "Speed optimization & mobile-first design",
-              "UX/UI improvements",
-             
-            ],
-          },
-          {
-            title: "DEVELOPMENT",
-            icon: <Code sx={{ fontSize: 50, color: "#F7931E" }} />, // Development icon
-            bgColor: "#16110f",
-            items: [
-              "Website & Microsite Development",
-              "Mobile Apps & Websites",
-              "Content Management Systems (CMS)",
-              "Website Maintenance & Security",
-              "Ecommerce Solutions",
-              "Digital Strategy Consulting",
-              "Video Content Creation",
-            ],
-          },
-        ].map((category, index) => (
-          <Grid item xs={12} sm={6} md={4} key={index} sx={{ display: "flex" }}>
-            <Box
-              sx={{
-                backgroundColor: category.bgColor,
-                flex: 1,
-                padding: "40px 20px",
-                textAlign: "center",
-                boxShadow: "0 4px 10px rgba(0, 0, 0, 0.1)",
-                color: "#fff",
-                minHeight: "500px",
-                display: "flex",
-                flexDirection: "column",
-                justifyContent: "center",
-                alignItems: "center",
-              }}
-            >
-              {category.icon} {/* Render the icon above the title */}
-              <Typography variant="h6" fontWeight={700} color="#F7931E" gutterBottom sx={{ marginTop: 2 }}>
-                {category.title}
-              </Typography>
-              {category.items.map((item, i) => (
-                <Typography key={i} variant="body2" sx={{ color: "#ddd", marginBottom: 1 }}>
-                  {item}
-                </Typography>
-              ))}
-            </Box>
-          </Grid>
-        ))}
-      </Grid>
-    </Box>
-  );
-};
-
-export default OurExpertise;
+import React, { useState, useEffect } from "react";
+import { Box, Grid, Typography } from "@mui/material";
+import { Computer, Brush, Code } from "@mui/icons-material"; // Import relevant icons
+
+const expertiseCategories = ["DIGITAL", "DESIGN", "DEVELOPMENT"];
+
+const OurExpertise: React.FC = () => {
+  const [currentText, setCurrentText] = useState(expertiseCategories[0]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentText((prevText) => {
+        const currentIndex = expertiseCategories.indexOf(prevText);
+        const nextIndex = (currentIndex + 1) % expertiseCategories.length;
+        return expertiseCategories[nextIndex];
+      });
+    }, 2000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <Box
+      sx={{
+        backgroundColor: "#ffffff",
+        color: "#000000",
+        minHeight: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "60px 20px",
+      }}
+    >
+      <Typography variant="h3" fontWeight={700} gutterBottom sx={{ color: "#333" }}>
+        OUR <span style={{ fontWeight: 300 }}>EXPERTISE</span>
+      </Typography>
+      <Typography variant="body1" sx={{ color: "#666", textAlign: "center", marginBottom: 3, maxWidth: "800px" }}>
+        We combine data insights with design thinking to build strategies and experiences that transform businesses.
+      </Typography>
+      <Typography variant="h4" fontWeight={700} sx={{ marginBottom: 5, textTransform: "uppercase", color: "#555", fontSize: "3rem" }}>
+        {currentText}
+      </Typography>
+      <Grid container justifyContent="center" sx={{ maxWidth: "1000px", margin: "0 auto" }}>
+        {[
+          {
+            title: "Content Marketing",
+            icon: <Computer sx={{ fontSize: 50, color: "#F7931E" }} />, // Digital icon
+            bgColor: "#16110f",
+            items: [
+              "Blog & article writing",
+              "Website copy & landing pages",
+              "Video content & infographics",
+              "Email & newsletter marketing",
+            ],
+          },
+          {
+            title: "Web Design & Development",
+            icon: <Brush sx={{ fontSize: 50, color: "#F7931E" }} />, // Design icon
+            bgColor: "#49332a",
+            items: [
+              "Custom website design",
+              "WordPress & eCommerce development",
+              "Speed optimization & mobile-first design",
+              "UX/UI improvements",
+             
+            ],
+          },
+          {
+            title: "DEVELOPMENT",
+            icon: <Code sx={{ fontSize: 50, color: "#F7931E" }} />, // Development icon
+            bgColor: "#16110f",
+            items: [
+              "Website & Microsite Development",
+              "Mobile Apps & Websites",
+              "Content Management Systems (CMS)",
+              "Website Maintenance & Security",
+              "Ecommerce Solutions",
+              "Digital Strategy Consulting",
+              "Video Content Creation",
+            ],
+          },
+        ].map((category, index) => (
+          <Grid item xs={12} sm={6} md={4} key={index} sx={{ display: "flex" }}>
+            <Box
+              sx={{
+                backgroundColor: category.bgColor,
+                flex: 1,
+                padding: "40px 20px",
+                textAlign: "center",
+                boxShadow: "0 4px 10px rgba(0, 0, 0, 0.1)",
+                color: "#fff",
+                minHeight: "500px",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              {category.icon} {/* Render the icon above the title */}
+              <Typography variant="h6" fontWeight={700} color="#F7931E" gutterBottom sx={{ marginTop: 2 }}>
+                {category.title}
+              </Typography>
+              {category.items.map((item, i) => (
+                <Typography key={i} variant="body2" sx={{ color: "#ddd", marginBottom: 1 }}>
+                  {item}
+                </Typography>
+              ))}
+            </Box>
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+};
+
+export default OurExpertise;
--- a/src/components/landingpage/landingpagecomponents/scrollanimationsection.tsx
+++ b/src/components/landingpage/landingpagecomponents/scrollanimationsection.tsx
@ -1,83 +1,83 @@
-import React, { useEffect, useState } from "react";
-import { Box, Grid, Typography } from "@mui/material";
-import { motion, useAnimation } from "framer-motion";
-import { useInView } from "react-intersection-observer";
-import darkbackground from "../../../dark-background.jpg"
-
-// Counter Component
-const Counter = ({ target, label, icon }: { target: number; label: string; icon: React.ReactNode }) => {
-  const controls = useAnimation();
-  const [count, setCount] = useState(0);
-  const { ref, inView } = useInView({ triggerOnce: true });
-
-  useEffect(() => {
-    if (inView) {
-      let start = 0;
-      const step = Math.ceil(target / 50);
-      const interval = setInterval(() => {
-        start += step;
-        setCount(start > target ? target : start);
-        if (start >= target) clearInterval(interval);
-      }, 20);
-    }
-  }, [inView, target]);
-
-  return (
-    <motion.div ref={ref} animate={controls} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}>
-      <Box textAlign="center">
-        {icon}
-        <Typography variant="h6" color="white" sx={{ mt: 1 }}>
-          {label}
-        </Typography>
-        <Typography variant="h4" fontWeight="bold" color="white">
-          {count}
-        </Typography>
-      </Box>
-    </motion.div>
-  );
-};
-
-
-const StatsSection = () => {
-  return (
-    <Box
-      sx={{
-        position: "relative",
-        backgroundImage: `url(${darkbackground})`,
-        backgroundSize: "cover",
-        backgroundAttachment: "fixed", 
-        backgroundPosition: "center",
-        minHeight: "80vh",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        color: "white",
-        py: 10,
-      }}
-    >
-      <Grid container spacing={1} justifyContent="center">
-        {/* Coffee Cups */}
-        <Grid item xs={6} md={3}>
-          <Counter target={20800} label="COFFEE CUPS" icon={<Typography fontSize={40}>☕</Typography>} />
-        </Grid>
-
-        {/* Projects */}
-        <Grid item xs={6} md={3}>
-          <Counter target={575} label="PROJECTS" icon={<Typography fontSize={40}>💼</Typography>} />
-        </Grid>
-
-        {/* Working Days */}
-        <Grid item xs={6} md={3}>
-          <Counter target={4412} label="WORKING DAYS" icon={<Typography fontSize={40}>🖱️</Typography>} />
-        </Grid>
-
-        {/* Clients */}
-        <Grid item xs={6} md={3}>
-          <Counter target={498} label="CLIENTS" icon={<Typography fontSize={40}>👥</Typography>} />
-        </Grid>
-      </Grid>
-    </Box>
-  );
-};
-
-export default StatsSection;
+import React, { useEffect, useState } from "react";
+import { Box, Grid, Typography } from "@mui/material";
+import { motion, useAnimation } from "framer-motion";
+import { useInView } from "react-intersection-observer";
+import darkbackground from "../../../dark-background.jpg"
+
+// Counter Component
+const Counter = ({ target, label, icon }: { target: number; label: string; icon: React.ReactNode }) => {
+  const controls = useAnimation();
+  const [count, setCount] = useState(0);
+  const { ref, inView } = useInView({ triggerOnce: true });
+
+  useEffect(() => {
+    if (inView) {
+      let start = 0;
+      const step = Math.ceil(target / 50);
+      const interval = setInterval(() => {
+        start += step;
+        setCount(start > target ? target : start);
+        if (start >= target) clearInterval(interval);
+      }, 20);
+    }
+  }, [inView, target]);
+
+  return (
+    <motion.div ref={ref} animate={controls} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}>
+      <Box textAlign="center">
+        {icon}
+        <Typography variant="h6" color="white" sx={{ mt: 1 }}>
+          {label}
+        </Typography>
+        <Typography variant="h4" fontWeight="bold" color="white">
+          {count}
+        </Typography>
+      </Box>
+    </motion.div>
+  );
+};
+
+
+const StatsSection = () => {
+  return (
+    <Box
+      sx={{
+        position: "relative",
+        backgroundImage: `url(${darkbackground})`,
+        backgroundSize: "cover",
+        backgroundAttachment: "fixed", 
+        backgroundPosition: "center",
+        minHeight: "80vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "white",
+        py: 10,
+      }}
+    >
+      <Grid container spacing={1} justifyContent="center">
+        {/* Coffee Cups */}
+        <Grid item xs={6} md={3}>
+          <Counter target={20800} label="COFFEE CUPS" icon={<Typography fontSize={40}>☕</Typography>} />
+        </Grid>
+
+        {/* Projects */}
+        <Grid item xs={6} md={3}>
+          <Counter target={575} label="PROJECTS" icon={<Typography fontSize={40}>💼</Typography>} />
+        </Grid>
+
+        {/* Working Days */}
+        <Grid item xs={6} md={3}>
+          <Counter target={4412} label="WORKING DAYS" icon={<Typography fontSize={40}>🖱️</Typography>} />
+        </Grid>
+
+        {/* Clients */}
+        <Grid item xs={6} md={3}>
+          <Counter target={498} label="CLIENTS" icon={<Typography fontSize={40}>👥</Typography>} />
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default StatsSection;
--- a/src/components/landingpage/landingpagecomponents/whoweare.tsx
+++ b/src/components/landingpage/landingpagecomponents/whoweare.tsx
@ -1,75 +1,75 @@
-import React from "react";
-import { Box, Grid, Typography, Link } from "@mui/material";
-import coffeeCharacter from "../../../imagetwo.png";
-import brainLightbulb from "../../../imageone.png";
-
-const WhoWeAre: React.FC = () => {
-  return (
-    <Box
-      sx={{
-        backgroundColor: "#15100E",
-        color: "white",
-        minHeight: "100vh",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: { xs: "40px 20px", md: "80px 100px" },
-      }}
-    >
-      <Grid container spacing={6} alignItems="center">
-        {/* Left Text Content */}
-        <Grid item xs={12} md={6}>
-          <Typography variant="h3" fontWeight={700} gutterBottom>
-            WHO <span style={{ fontWeight: 300 }}>WE ARE</span>
-          </Typography>
-          <Typography
-            variant="body1"
-            sx={{ color: "#b0b0b0", lineHeight: 1.8, marginBottom: 2, letterSpacing: "0.05em", wordSpacing: "0.1em" }}
-          >
-            At <b>Quadraedge</b>, we believe that true marketing success comes from mastering all four edges—PR, Marketing, Tech, and Media. As a team of three passionate marketers, we built Quadraedge to be a powerhouse that integrates these four pillars, ensuring brands don’t just exist online but thrive.
-          </Typography>
-          <Typography
-            variant="body1"
-            sx={{ color: "#b0b0b0", lineHeight: 1.8, marginBottom: 3, letterSpacing: "0.05em", wordSpacing: "0.1em" }}
-          >
-           We saw a gap in the industry—businesses struggling to balance visibility, technology, engagement, and storytelling. So, we combined our expertise to create a <b>360-degree marketing approach</b> that brings together:
-          </Typography>
-          <Link href="#" underline="hover" sx={{ color: "#b0b0b0", fontSize: "1rem", fontWeight: 600 }}>
-            READ MORE
-          </Link>
-        </Grid>
-
-        {/* Right Image Section */}
-        <Grid item xs={12} md={6} container spacing={2} justifyContent="center">
-          <Grid item xs={6}>
-            <Box
-              component="img"
-              src={brainLightbulb}
-              alt="Brain Lightbulb"
-              sx={{
-                width: "95%",
-                boxShadow: "10px 10px 20px rgba(0, 0, 0, 0.3)",
-                transform: "rotate(-5deg)", 
-              }}
-            />
-          </Grid>
-          <Grid item xs={6}>
-            <Box
-              component="img"
-              src={coffeeCharacter}
-              alt="Coffee Character"
-              sx={{
-                width: "95%",
-                boxShadow: "10px 10px 20px rgba(0, 0, 0, 0.3)",
-                transform: "rotate(5deg)", 
-              }}
-            />
-          </Grid>
-
-        </Grid>
-      </Grid>
-    </Box>
-  );
-};
-
+import React from "react";
+import { Box, Grid, Typography, Link } from "@mui/material";
+import coffeeCharacter from "../../../imagetwo.png";
+import brainLightbulb from "../../../imageone.png";
+
+const WhoWeAre: React.FC = () => {
+  return (
+    <Box
+      sx={{
+        backgroundColor: "#15100E",
+        color: "white",
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: { xs: "40px 20px", md: "80px 100px" },
+      }}
+    >
+      <Grid container spacing={6} alignItems="center">
+        {/* Left Text Content */}
+        <Grid item xs={12} md={6}>
+          <Typography variant="h3" fontWeight={700} gutterBottom>
+            WHO <span style={{ fontWeight: 300 }}>WE ARE</span>
+          </Typography>
+          <Typography
+            variant="body1"
+            sx={{ color: "#b0b0b0", lineHeight: 1.8, marginBottom: 2, letterSpacing: "0.05em", wordSpacing: "0.1em" }}
+          >
+            At <b>Quadraedge</b>, we believe that true marketing success comes from mastering all four edges—PR, Marketing, Tech, and Media. As a team of three passionate marketers, we built Quadraedge to be a powerhouse that integrates these four pillars, ensuring brands don’t just exist online but thrive.
+          </Typography>
+          <Typography
+            variant="body1"
+            sx={{ color: "#b0b0b0", lineHeight: 1.8, marginBottom: 3, letterSpacing: "0.05em", wordSpacing: "0.1em" }}
+          >
+           We saw a gap in the industry—businesses struggling to balance visibility, technology, engagement, and storytelling. So, we combined our expertise to create a <b>360-degree marketing approach</b> that brings together:
+          </Typography>
+          <Link href="#" underline="hover" sx={{ color: "#b0b0b0", fontSize: "1rem", fontWeight: 600 }}>
+            READ MORE
+          </Link>
+        </Grid>
+
+        {/* Right Image Section */}
+        <Grid item xs={12} md={6} container spacing={2} justifyContent="center">
+          <Grid item xs={6}>
+            <Box
+              component="img"
+              src={brainLightbulb}
+              alt="Brain Lightbulb"
+              sx={{
+                width: "95%",
+                boxShadow: "10px 10px 20px rgba(0, 0, 0, 0.3)",
+                transform: "rotate(-5deg)", 
+              }}
+            />
+          </Grid>
+          <Grid item xs={6}>
+            <Box
+              component="img"
+              src={coffeeCharacter}
+              alt="Coffee Character"
+              sx={{
+                width: "95%",
+                boxShadow: "10px 10px 20px rgba(0, 0, 0, 0.3)",
+                transform: "rotate(5deg)", 
+              }}
+            />
+          </Grid>
+
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
 export default WhoWeAre;
--- a/src/components/mottopage/MottoSection.tsx
+++ b/src/components/mottopage/MottoSection.tsx
@ -1,61 +1,61 @@
-import { Box, Typography, Container } from "@mui/material";
-import mottoimage from "../../whowearemotto.png"
-const MottoSection: React.FC = () => {
-  return (
-    <Box>
-      {/* Top Section */}
-      <Box sx={{ backgroundColor: "#F7F7F7", py: 6, pl: 5, textAlign: "left" }}>
-        <Typography
-          variant="h3"
-          sx={{
-            fontWeight: 500,
-            fontSize: { xs: "2rem", md: "3.5rem" },
-            letterSpacing: 2,
-          }}
-        >
-          OUR <span style={{ fontWeight: "bold" }}>MOTTO</span>
-        </Typography>
-      </Box>
-
-      {/* Bottom Black Section */}
-      <Box sx={{ backgroundColor: "#15100E", py: 6 }}>
-        <Container maxWidth="md">
-          <Typography
-            variant="body1"
-            sx={{
-              color: "#A0A0A0",
-              fontSize: { xs: "1rem", md: "1.25rem" },
-              textAlign: "center",
-              lineHeight: 1.8,
-            }}
-          >
-            Ideas excite us, they shape the future, add value, and signal change. 
-            Through fresh ideas, we blend together beautiful designs, functional 
-            digital strategies, and engaging experiences.
-            <br />
-            Here are values that define us, principles that guide us, and words 
-            that we live by.
-          </Typography>
-        </Container>
-      </Box>
-
-      {/* Image Section */}
-      <Box
-        sx={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-        
-        }}
-      >
-        <img
-          src={mottoimage} 
-          alt="Motto Image"
-          style={{ maxWidth: "90%", height: "auto", borderRadius: "8px" }}
-        />
-      </Box>
-    </Box>
-  );
-};
-
-export default MottoSection;
+import { Box, Typography, Container } from "@mui/material";
+import mottoimage from "../../whowearemotto.png"
+const MottoSection: React.FC = () => {
+  return (
+    <Box>
+      {/* Top Section */}
+      <Box sx={{ backgroundColor: "#F7F7F7", py: 6, pl: 5, textAlign: "left" }}>
+        <Typography
+          variant="h3"
+          sx={{
+            fontWeight: 500,
+            fontSize: { xs: "2rem", md: "3.5rem" },
+            letterSpacing: 2,
+          }}
+        >
+          OUR <span style={{ fontWeight: "bold" }}>MOTTO</span>
+        </Typography>
+      </Box>
+
+      {/* Bottom Black Section */}
+      <Box sx={{ backgroundColor: "#15100E", py: 6 }}>
+        <Container maxWidth="md">
+          <Typography
+            variant="body1"
+            sx={{
+              color: "#A0A0A0",
+              fontSize: { xs: "1rem", md: "1.25rem" },
+              textAlign: "center",
+              lineHeight: 1.8,
+            }}
+          >
+            Ideas excite us, they shape the future, add value, and signal change. 
+            Through fresh ideas, we blend together beautiful designs, functional 
+            digital strategies, and engaging experiences.
+            <br />
+            Here are values that define us, principles that guide us, and words 
+            that we live by.
+          </Typography>
+        </Container>
+      </Box>
+
+      {/* Image Section */}
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        
+        }}
+      >
+        <img
+          src={mottoimage} 
+          alt="Motto Image"
+          style={{ maxWidth: "90%", height: "auto", borderRadius: "8px" }}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default MottoSection;
--- a/src/components/mottopage/mottobase.tsx
+++ b/src/components/mottopage/mottobase.tsx
@ -1,12 +1,12 @@
-import React from 'react';
-import { Outlet } from 'react-router-dom';
-import { Box } from '@mui/material';
-// import CopyrightFooter from '../../assets/copyright';
-
-export const MottoBase: React.FC = () => {
-  return (
-    <Box>
-      <Outlet />
-    </Box>
-  );
-};
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import { Box } from '@mui/material';
+// import CopyrightFooter from '../../assets/copyright';
+
+export const MottoBase: React.FC = () => {
+  return (
+    <Box>
+      <Outlet />
+    </Box>
+  );
+};
--- a/src/components/ourwork/ourwork.tsx
+++ b/src/components/ourwork/ourwork.tsx
@ -1,116 +1,220 @@
-import {
-  Box,
-  Card,
-  CardContent,
-  CardMedia,
-  Grid,
-  Typography,
-  Button,
-} from "@mui/material";
-import portfolioImg from "../ourwork/Rectangle 6.png";
-
-const works = [
-  {
-    title: "Project Name",
-    image: portfolioImg,
-  },
-  {
-    title: "Project Name",
-    image: portfolioImg,
-  },
-  {
-    title: "Project Name",
-    image: portfolioImg,
-  },
-];
-
-const OurWorks = () => {
-  return (
-    <Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 8, px: 2 }}>
-      <Typography variant="h4" align="center" fontWeight="bold" gutterBottom>
-        Our Works
-      </Typography>
-      <Typography variant="subtitle1" align="center" mb={6}>
-        We’ve helped brands grow through bold strategy and creative execution.
-        Explore our recent success stories.
-      </Typography>
-
-      <Grid container spacing={4} justifyContent="center">
-        {works.map((work, index) => (
-          <Grid item xs={12} sm={6} md={4} key={index}>
-            <Card
-              sx={{
-                borderRadius: 3,
-                overflow: "hidden",
-                bgcolor: "#fff",
-                maxWidth: 320,
-                margin: "0 auto",
-              }}
-              elevation={3}
-            >
-              <CardContent>
-                <Typography
-                  variant="subtitle1"
-                  fontWeight="bold"
-                  color="Black"
-                  gutterBottom
-                >
-                  {work.title}
-                </Typography>
-              </CardContent>
-              <CardMedia
-                component="img"
-                image={work.image}
-                alt={work.title}
-                sx={{
-                  objectFit: "contain",
-                  height: 250,
-                  px: 2,
-                }}
-              />
-              <CardContent>
-                <Button
-                  variant="contained"
-                  fullWidth
-                  sx={{
-                    backgroundColor: "#000",
-                    color: "#00FFD1",
-                    fontWeight: "bold",
-                    "&:hover": {
-                      backgroundColor: "#333",
-                    },
-                    borderRadius: "30px",
-                  }}
-                >
-                  VIEW DEMO
-                </Button>
-              </CardContent>
-            </Card>
-          </Grid>
-        ))}
-      </Grid>
-
-      <Box mt={6} display="flex" justifyContent="center">
-        <Button
-          variant="outlined"
-          sx={{
-            borderRadius: "30px",
-            borderColor: "#00FFD1",
-            color: "#00FFD1",
-            px: 4,
-            py: 1.5,
-            fontWeight: "bold",
-            "&:hover": {
-              backgroundColor: "#00FFD1",
-              color: "#000",
-            },
-          }}
-        >
-          VIEW FULL PORTFOLIO →
-        </Button>
-      </Box>
-    </Box>
-  );
-};
-
-export default OurWorks;
+import {
+  Box,
+  Card,
+  CardContent,
+  CardMedia,
+  Grid,
+  Typography,
+  Button,
+  Container,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import { motion } from "framer-motion";
+import portfolioImg from "../ourwork/Rectangle 6.png";
+
+const works = [
+  {
+    title: "Project Aurora",
+    image: portfolioImg,
+    description: "Modern web design with seamless user experience",
+  },
+  {
+    title: "Project Nexus",
+    image: portfolioImg,
+    description: "Mobile application development for enterprise",
+  },
+  {
+    title: "Project Horizon",
+    image: portfolioImg,
+    description: "Brand identity and marketing campaign",
+  },
+];
+
+const OurWorks = () => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
+  return (
+    <Box
+      sx={{
+        backgroundColor: "#1d2733",
+        color: "#fff",
+        py: 8,
+        px: { xs: 2, sm: 4 },
+      }}
+    >
+      <Container maxWidth="md">
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+        >
+          <Typography
+            variant="h4"
+            align="center"
+            fontWeight={700}
+            gutterBottom
+            sx={{
+              mb: 2,
+              fontFamily: "'Montserrat', sans-serif",
+              letterSpacing: 0.5,
+            }}
+          >
+            Our Portfolio
+          </Typography>
+          <Typography
+            variant="subtitle1"
+            align="center"
+            mb={6}
+            sx={{
+              maxWidth: 600,
+              mx: "auto",
+              color: "rgba(255,255,255,0.8)",
+              fontFamily: "'Open Sans', sans-serif",
+            }}
+          >
+            We craft digital experiences that drive results
+          </Typography>
+        </motion.div>
+
+        <Grid container spacing={isMobile ? 3 : 4} justifyContent="center">
+          {works.map((work, index) => (
+            <Grid item xs={12} sm={6} md={4} key={index}>
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                viewport={{ once: true }}
+                whileHover={{ y: -5 }}
+              >
+                <Card
+                  sx={{
+                    borderRadius: 2,
+                    overflow: "hidden",
+                    bgcolor: "#fff",
+                    maxWidth: 320,
+                    height: "100%",
+                    display: "flex",
+                    flexDirection: "column",
+                    boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
+                    transition: "all 0.3s ease",
+                    "&:hover": {
+                      boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
+                    },
+                  }}
+                >
+                  <Box
+                    sx={{
+                      height: 180,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      bgcolor: "#f8f9fa",
+                      overflow: "hidden",
+                    }}
+                  >
+                    <CardMedia
+                      component="img"
+                      image={work.image}
+                      alt={work.title}
+                      sx={{
+                        width: "90%",
+                        height: "90%",
+                        objectFit: "contain",
+                        transition: "transform 0.3s ease",
+                        "&:hover": {
+                          transform: "scale(1.05)",
+                        },
+                      }}
+                    />
+                  </Box>
+                  <CardContent sx={{ flexGrow: 1, px: 3, py: 2 }}>
+                    <Typography
+                      variant="h6"
+                      fontWeight={600}
+                      color="#000"
+                      gutterBottom
+                      sx={{
+                        fontFamily: "'Montserrat', sans-serif",
+                        fontSize: "1.1rem",
+                      }}
+                    >
+                      {work.title}
+                    </Typography>
+                    <Typography
+                      variant="body2"
+                      color="#000"
+                      sx={{
+                        mb: 2,
+                        fontFamily: "'Open Sans', sans-serif",
+                        fontSize: "0.875rem",
+                      }}
+                    >
+                      {work.description}
+                    </Typography>
+                  </CardContent>
+                  <CardContent sx={{ px: 3, py: 0, pb: 3 }}>
+                    <Button
+                      variant="outlined"
+                      fullWidth
+                      sx={{
+                        borderRadius: "20px",
+                        border: "1px solid #000",
+                        color: "#000",
+                        fontWeight: 600,
+                        py: 1,
+                        fontSize: "0.8rem",
+                        textTransform: "none",
+                        letterSpacing: 0.5,
+                        fontFamily: "'Montserrat', sans-serif",
+                        "&:hover": {
+                          backgroundColor: "#000",
+                          color: "#fff",
+                          border: "1px solid #000",
+                        },
+                        transition: "all 0.3s ease",
+                      }}
+                    >
+                      View Case Study
+                    </Button>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            </Grid>
+          ))}
+        </Grid>
+
+        <Box mt={6} display="flex" justifyContent="center">
+          <motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }}>
+            <Button
+              variant="outlined"
+              sx={{
+                borderRadius: "20px",
+                border: "1px solid #00E0FF",
+                color: "#00E0FF",
+                px: 4,
+                py: 1,
+                fontWeight: 600,
+                fontSize: "0.9rem",
+                textTransform: "none",
+                letterSpacing: 0.5,
+                fontFamily: "'Montserrat', sans-serif",
+                "&:hover": {
+                  backgroundColor: "rgba(0, 225, 255, 0.19)",
+                  border: "1px solid #00e1ff",
+                },
+                transition: "all 0.3s ease",
+              }}
+            >
+              Explore Full Portfolio
+            </Button>
+          </motion.div>
+        </Box>
+      </Container>
+    </Box>
+  );
+};
+
+export default OurWorks;
--- a/src/components/services/services.tsx
+++ b/src/components/services/services.tsx
@ -1,238 +1,316 @@
-import {
-  Box,
-  Card,
-  CardContent,
-  CardMedia,
-  Typography,
-  Container,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
-import { motion, AnimatePresence, PanInfo } from "framer-motion";
-import { useState } from "react";
-import serviceImage from "../services/Image Wrapper.png";
-
-const services = [
-  {
-    title: "Design",
-    description:
-      "Lorem ipsum dolor sit amet consectetur. Non aliquam justo hendrerit vitae lacus. Cursus purus dictumst scelerisque vitae ultricies turpis aliquam turpis.",
-    image: `${serviceImage}`,
-  },
-  {
-    title: "Development",
-    description:
-      "Lorem ipsum dolor sit amet consectetur. Non aliquam justo hendrerit vitae lacus. Cursus purus dictumst scelerisque vitae ultricies turpis aliquam turpis.",
-    image: `${serviceImage}`,
-  },
-  {
-    title: "Marketing",
-    description:
-      "Lorem ipsum dolor sit amet consectetur. Non aliquam justo hendrerit vitae lacus. Cursus purus dictumst scelerisque vitae ultricies turpis aliquam turpis.",
-    image: `${serviceImage}`,
-  },
-];
-
-const Services = () => {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
-  const [currentIndex, setCurrentIndex] = useState(0);
-
-  const handleDragEnd = (
-    event: MouseEvent | TouchEvent | PointerEvent,
-    info: PanInfo
-  ) => {
-    if (info.offset.x > 50) {
-      // Swiped right
-      setCurrentIndex((prev) => (prev === 0 ? services.length - 1 : prev - 1));
-    } else if (info.offset.x < -50) {
-      // Swiped left
-      setCurrentIndex((prev) => (prev === services.length - 1 ? 0 : prev + 1));
-    }
-  };
-
-  return (
-    <Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 8 }}>
-      <Container maxWidth="lg">
-        <motion.div
-          initial={{ opacity: 0, y: -20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6 }}
-          viewport={{ once: true }}
-        >
-          <Typography
-            variant="h4"
-            align="center"
-            fontWeight="bold"
-            gutterBottom
-          >
-            Services
-          </Typography>
-          <Typography variant="subtitle1" align="center" mb={6}>
-            We offer design, development & marketing services
-          </Typography>
-        </motion.div>
-
-        {isMobile ? (
-          <Box sx={{ position: "relative", height: 400, overflow: "hidden" }}>
-            <AnimatePresence initial={false}>
-              <motion.div
-                key={currentIndex}
-                drag="x"
-                onDragEnd={handleDragEnd}
-                dragConstraints={{ left: 0, right: 0 }}
-                initial={{ x: 300, opacity: 0 }}
-                animate={{ x: 0, opacity: 1 }}
-                exit={{ x: -300, opacity: 0 }}
-                transition={{ type: "spring", stiffness: 300, damping: 30 }}
-                style={{
-                  position: "absolute",
-                  width: "100%",
-                  padding: "0 16px",
-                }}
-              >
-                <Card
-                  sx={{
-                    borderRadius: 5,
-                    overflow: "hidden",
-                    height: "100%",
-                    bgcolor: "#fff",
-                    display: "flex",
-                    flexDirection: "column",
-                    maxWidth: 345,
-                    mx: "auto",
-                  }}
-                  elevation={3}
-                >
-                  <Box
-                    sx={{
-                      height: 200,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      overflow: "hidden",
-                    }}
-                  >
-                    <CardMedia
-                      component="img"
-                      image={services[currentIndex].image}
-                      alt={services[currentIndex].title}
-                      sx={{
-                        objectFit: "contain",
-                        width: "100%",
-                        height: "100%",
-                      }}
-                    />
-                  </Box>
-                  <CardContent sx={{ flexGrow: 1 }}>
-                    <Typography
-                      variant="h6"
-                      fontWeight="bold"
-                      gutterBottom
-                      color="black"
-                    >
-                      {services[currentIndex].title}
-                    </Typography>
-                    <Typography variant="body2" color="black">
-                      {services[currentIndex].description}
-                    </Typography>
-                  </CardContent>
-                </Card>
-              </motion.div>
-            </AnimatePresence>
-
-            {/* Dots indicator */}
-            <Box
-              sx={{
-                display: "flex",
-                justifyContent: "center",
-                mt: 2,
-                gap: 1,
-              }}
-            >
-              {services.map((_, index) => (
-                <Box
-                  key={index}
-                  onClick={() => setCurrentIndex(index)}
-                  sx={{
-                    width: 10,
-                    height: 10,
-                    borderRadius: "50%",
-                    bgcolor: index === currentIndex ? "#00E0FF" : "#ffffff80",
-                    cursor: "pointer",
-                  }}
-                />
-              ))}
-            </Box>
-          </Box>
-        ) : (
-          <Box
-            sx={{
-              display: "grid",
-              gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
-              gap: 4,
-            }}
-          >
-            {services.map((service, index) => (
-              <motion.div
-                key={index}
-                whileHover={{ y: -5 }}
-                transition={{ duration: 0.3 }}
-              >
-                <Card
-                  sx={{
-                    borderRadius: 5,
-                    overflow: "hidden",
-                    height: "100%",
-                    bgcolor: "#fff",
-                    display: "flex",
-                    flexDirection: "column",
-                  }}
-                  elevation={3}
-                >
-                  <Box
-                    sx={{
-                      height: 200,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      overflow: "hidden",
-                    }}
-                  >
-                    <motion.div whileHover={{ scale: 1.05 }}>
-                      <CardMedia
-                        component="img"
-                        image={service.image}
-                        alt={service.title}
-                        sx={{
-                          objectFit: "contain",
-                          width: "100%",
-                          height: "100%",
-                        }}
-                      />
-                    </motion.div>
-                  </Box>
-                  <CardContent sx={{ flexGrow: 1 }}>
-                    <Typography
-                      variant="h6"
-                      fontWeight="bold"
-                      gutterBottom
-                      color="black"
-                    >
-                      {service.title}
-                    </Typography>
-                    <Typography variant="body2" color="black">
-                      {service.description}
-                    </Typography>
-                  </CardContent>
-                </Card>
-              </motion.div>
-            ))}
-          </Box>
-        )}
-      </Container>
-    </Box>
-  );
-};
-
-export default Services;
+import {
+  Box,
+  Card,
+  CardContent,
+  CardMedia,
+  Typography,
+  Container,
+  useMediaQuery,
+  useTheme,
+  Grid,
+} from "@mui/material";
+import { motion, AnimatePresence, PanInfo } from "framer-motion";
+import { useState } from "react";
+import serviceImage from "../services/Image Wrapper.png";
+
+const services = [
+  {
+    title: "Design",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Non aliquam justo hendrerit vitae lacus. Cursus purus dictumst scelerisque vitae ultricies turpis aliquam turpis.",
+    image: `${serviceImage}`,
+  },
+  {
+    title: "Development",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Non aliquam justo hendrerit vitae lacus. Cursus purus dictumst scelerisque vitae ultricies turpis aliquam turpis.",
+    image: `${serviceImage}`,
+  },
+  {
+    title: "Marketing",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Non aliquam justo hendrerit vitae lacus. Cursus purus dictumst scelerisque vitae ultricies turpis aliquam turpis.",
+    image: `${serviceImage}`,
+  },
+];
+
+const Services = () => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [hoveredCard, setHoveredCard] = useState<number | null>(null);
+
+  const handleDragEnd = (
+    event: MouseEvent | TouchEvent | PointerEvent,
+    info: PanInfo
+  ) => {
+    if (info.offset.x > 50) {
+      setCurrentIndex((prev) => (prev === 0 ? services.length - 1 : prev - 1));
+    } else if (info.offset.x < -50) {
+      setCurrentIndex((prev) => (prev === services.length - 1 ? 0 : prev + 1));
+    }
+  };
+
+  return (
+    <Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 8 }}>
+      <Container maxWidth="lg">
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true, margin: "-100px" }}
+        >
+          <Typography
+            variant="h4"
+            align="center"
+            fontWeight="bold"
+            gutterBottom
+            sx={{ mb: 2 }}
+          >
+            Our Services
+          </Typography>
+          <Typography
+            variant="subtitle1"
+            align="center"
+            mb={6}
+            sx={{ maxWidth: 600, mx: "auto" }}
+          >
+            Professional solutions tailored to your needs
+          </Typography>
+        </motion.div>
+
+        {isMobile ? (
+          <Box sx={{ position: "relative", height: 380 }}>
+            <AnimatePresence initial={false}>
+              <motion.div
+                key={currentIndex}
+                drag="x"
+                onDragEnd={handleDragEnd}
+                dragConstraints={{ left: 0, right: 0 }}
+                initial={{ x: 300, opacity: 0 }}
+                animate={{ x: 0, opacity: 1 }}
+                exit={{ x: -300, opacity: 0 }}
+                transition={{ type: "spring", stiffness: 300, damping: 30 }}
+                style={{
+                  position: "absolute",
+                  width: "100%",
+                  padding: "0 16px",
+                }}
+              >
+                <motion.div
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  <Card
+                    sx={{
+                      borderRadius: 2,
+                      overflow: "hidden",
+                      height: "100%",
+                      bgcolor: "#fff",
+                      display: "flex",
+                      flexDirection: "column",
+                      maxWidth: 300,
+                      mx: "auto",
+                      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+                    }}
+                  >
+                    <Box
+                      sx={{
+                        width: "100%",
+                        height: 150,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        bgcolor: "#f8f9fa",
+                        overflow: "hidden",
+                      }}
+                    >
+                      <motion.div
+                        animate={{
+                          scale: hoveredCard === currentIndex ? 1.05 : 1,
+                          y: hoveredCard === currentIndex ? -5 : 0,
+                        }}
+                        transition={{ duration: 0.3 }}
+                        style={{ width: "100%" }}
+                      >
+                        <CardMedia
+                          component="img"
+                          image={services[currentIndex].image}
+                          alt={services[currentIndex].title}
+                          sx={{
+                            width: "100%",
+                            height: "auto",
+                            objectFit: "cover",
+                          }}
+                        />
+                      </motion.div>
+                    </Box>
+                    <CardContent sx={{ flexGrow: 1 }}>
+                      <Typography
+                        variant="h6"
+                        fontWeight="bold"
+                        gutterBottom
+                        color="#000"
+                      >
+                        {services[currentIndex].title}
+                      </Typography>
+                      <Typography variant="body2" color="#000" sx={{ mb: 2 }}>
+                        {services[currentIndex].description}
+                      </Typography>
+                      <motion.div
+                        whileHover={{ x: 5 }}
+                        transition={{ type: "spring", stiffness: 300 }}
+                      >
+                        <Typography
+                          variant="caption"
+                          color="primary"
+                          fontWeight="bold"
+                          sx={{ cursor: "pointer" }}
+                        >
+                          Learn more →
+                        </Typography>
+                      </motion.div>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+              </motion.div>
+            </AnimatePresence>
+
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "center",
+                mt: 3,
+                gap: 1.5,
+              }}
+            >
+              {services.map((_, index) => (
+                <motion.div
+                  key={index}
+                  onClick={() => setCurrentIndex(index)}
+                  whileHover={{ scale: 1.2 }}
+                  whileTap={{ scale: 0.9 }}
+                >
+                  <Box
+                    sx={{
+                      width: 10,
+                      height: 10,
+                      borderRadius: "50%",
+                      bgcolor: index === currentIndex ? "#00E0FF" : "#ffffff80",
+                      cursor: "pointer",
+                    }}
+                  />
+                </motion.div>
+              ))}
+            </Box>
+          </Box>
+        ) : (
+          <Grid container spacing={3} justifyContent="center">
+            {services.map((service, index) => (
+              <Grid
+                item
+                xs={12}
+                sm={6}
+                md={4}
+                key={index}
+                sx={{ display: "flex", justifyContent: "center" }}
+              >
+                <motion.div
+                  initial={{ opacity: 0, y: 50 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                  viewport={{ once: true, margin: "-100px" }}
+                  onHoverStart={() => setHoveredCard(index)}
+                  onHoverEnd={() => setHoveredCard(null)}
+                  style={{ width: "100%", maxWidth: 280 }}
+                >
+                  <motion.div
+                    whileHover={{
+                      y: -8,
+                      boxShadow: "0 15px 30px -5px rgba(0, 0, 0, 0.2)",
+                    }}
+                    transition={{ type: "spring", stiffness: 400, damping: 10 }}
+                    style={{ height: "100%" }}
+                  >
+                    <Card
+                      sx={{
+                        borderRadius: 2,
+                        overflow: "hidden",
+                        height: "100%",
+                        bgcolor: "#fff",
+                        display: "flex",
+                        flexDirection: "column",
+                        boxShadow: "0 5px 15px rgba(0, 0, 0, 0.1)",
+                        width: "100%",
+                      }}
+                    >
+                      <Box
+                        sx={{
+                          width: "100%",
+                          height: 160,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          bgcolor: "#f8f9fa",
+                          overflow: "hidden",
+                        }}
+                      >
+                        <motion.div
+                          animate={{
+                            scale: hoveredCard === index ? 1.1 : 1,
+                            y: hoveredCard === index ? -5 : 0,
+                          }}
+                          transition={{ duration: 0.3 }}
+                          style={{ width: "100%" }}
+                        >
+                          <CardMedia
+                            component="img"
+                            image={service.image}
+                            alt={service.title}
+                            sx={{
+                              width: "100%",
+                              height: "auto",
+                              objectFit: "cover",
+                            }}
+                          />
+                        </motion.div>
+                      </Box>
+                      <CardContent sx={{ flexGrow: 1 }}>
+                        <Typography
+                          variant="h6"
+                          fontWeight="bold"
+                          gutterBottom
+                          color="#000"
+                        >
+                          {service.title}
+                        </Typography>
+                        <Typography variant="body2" color="#000" sx={{ mb: 2 }}>
+                          {service.description}
+                        </Typography>
+                        <motion.div
+                          whileHover={{ x: 5 }}
+                          transition={{ type: "spring", stiffness: 300 }}
+                        >
+                          <Typography
+                            variant="caption"
+                            color="primary"
+                            fontWeight="bold"
+                            sx={{ cursor: "pointer" }}
+                          >
+                            Learn more →
+                          </Typography>
+                        </motion.div>
+                      </CardContent>
+                    </Card>
+                  </motion.div>
+                </motion.div>
+              </Grid>
+            ))}
+          </Grid>
+        )}
+      </Container>
+    </Box>
+  );
+};
+
+export default Services;
--- a/src/components/testomonials/testomonias.tsx
+++ b/src/components/testomonials/testomonias.tsx
@ -1,100 +1,350 @@
-import {
-  Avatar,
-  Box,
-  Card,
-  CardContent,
-  Grid,
-  Typography,
-} from "@mui/material";
-import testimonialImg from "../testomonials/b7bef0298c881712fbc6437106d2aaef27c4fad8.jpg";
-
-const testimonials = [
-  {
-    name: "Name",
-    role: "Role",
-    company: "Company Name & Logo",
-    feedback:
-      "Lorem ipsum dolor sit amet consectetur. Vitae dictum quam senectus posuere sit justo est turpis interdum. Ut vitae platea et adipiscing nisl.",
-    rating: 5,
-  },
-  {
-    name: "John Dae",
-    role: "Sr Manager",
-    company: "Wells Fargo",
-    feedback:
-      "Lorem ipsum dolor sit amet consectetur. Vitae dictum quam senectus posuere sit justo est turpis interdum. Ut vitae platea et adipiscing nisl.",
-    rating: 5,
-  },
-  {
-    name: "Name",
-    role: "Role",
-    company: "Company Name & Logo",
-    feedback:
-      "Lorem ipsum dolor sit amet consectetur. Vitae dictum quam senectus posuere sit justo est turpis interdum. Ut vitae platea et adipiscing nisl.",
-    rating: 4,
-  },
-];
-
-const Testimonials = () => {
-  return (
-    <Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 10, px: 3 }}>
-      <Box textAlign="center" mb={6}>
-        <Typography variant="h4" fontWeight="bold" gutterBottom>
-          Testimonials
-        </Typography>
-        <Typography variant="subtitle1">
-          Don’t just take our word for it -- hear directly from our clients
-        </Typography>
-      </Box>
-
-      <Grid container spacing={4} justifyContent="center">
-        {testimonials.map((t, idx) => (
-          <Grid item xs={12} sm={6} md={4} key={idx}>
-            <Card
-              sx={{
-                borderRadius: 3,
-                maxWidth: 320,
-                margin: "0 auto",
-                textAlign: "center",
-                py: 3,
-              }}
-            >
-              <Avatar
-                src={testimonialImg}
-                alt={t.name}
-                sx={{ width: 100, height: 100, margin: "0 auto", mb: 2 }}
-              />
-              <CardContent>
-                <Typography variant="subtitle1" fontWeight="bold">
-                  {t.name} ,{" "}
-                  <span style={{ fontWeight: "normal" }}>{t.role}</span>
-                </Typography>
-                <Typography variant="body2" color="text.secondary" mb={1}>
-                  {t.company}
-                </Typography>
-                <Typography variant="body2" color="text.secondary" mb={2}>
-                  {t.feedback}
-                </Typography>
-                <Box>
-                  {Array.from({ length: 5 }).map((_, i) => (
-                    <span
-                      key={i}
-                      style={{
-                        color: i < t.rating ? "#00FFD1" : "#ccc",
-                        fontSize: "1.2rem",
-                      }}
-                    >
-                      ★
-                    </span>
-                  ))}
-                </Box>
-              </CardContent>
-            </Card>
-          </Grid>
-        ))}
-      </Grid>
-    </Box>
-  );
-};
-
-export default Testimonials;
+import {
+  Avatar,
+  Box,
+  Card,
+  CardContent,
+  Typography,
+  IconButton,
+} from "@mui/material";
+import { motion, AnimatePresence, useAnimation, Variants } from "framer-motion";
+import { useEffect, useState } from "react";
+import { KeyboardArrowLeft, KeyboardArrowRight } from "@mui/icons-material";
+import testimonialImg from "../testomonials/b7bef0298c881712fbc6437106d2aaef27c4fad8.jpg";
+
+const testimonials = [
+  {
+    name: "Sarah Johnson",
+    role: "Marketing Director",
+    company: "Tech Innovations Inc.",
+    feedback: "Working with this team transformed our digital presence.",
+    rating: 5,
+  },
+  {
+    name: "Michael Chen",
+    role: "Sr. Manager",
+    company: "Wells Fargo",
+    feedback: "Exceptional service from start to finish.",
+    rating: 5,
+  },
+  {
+    name: "Emily Rodriguez",
+    role: "Product Owner",
+    company: "Nexus Enterprises",
+    feedback: "The team's technical expertise was outstanding.",
+    rating: 4,
+  },
+];
+
+// Properly typed animation variants
+const containerVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.2,
+      duration: 0.8,
+    },
+  },
+};
+
+const itemVariants: Variants = {
+  hidden: { y: 50, opacity: 0 },
+  visible: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      duration: 0.6,
+      ease: "easeOut", // Using string literal instead of array
+    },
+  },
+  hover: {
+    y: -10,
+    transition: { duration: 0.3 },
+  },
+};
+
+const Testimonials = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isMobile, setIsMobile] = useState(false);
+  const controls = useAnimation();
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 600);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  useEffect(() => {
+    if (!isMobile) return;
+
+    const timer = setInterval(() => {
+      handleNext();
+    }, 5000);
+
+    return () => clearInterval(timer);
+  }, [currentIndex, isMobile]);
+
+  const handleNext = () => {
+    controls
+      .start({
+        x: "-100%",
+        opacity: 0,
+        transition: { duration: 0.3 },
+      })
+      .then(() => {
+        setCurrentIndex((prev) => (prev + 1) % testimonials.length);
+        controls
+          .start({
+            x: "100%",
+            opacity: 0,
+          })
+          .then(() => {
+            controls.start({
+              x: 0,
+              opacity: 1,
+              transition: { duration: 0.5 },
+            });
+          });
+      });
+  };
+
+  const handlePrev = () => {
+    controls
+      .start({
+        x: "100%",
+        opacity: 0,
+        transition: { duration: 0.3 },
+      })
+      .then(() => {
+        setCurrentIndex(
+          (prev) => (prev - 1 + testimonials.length) % testimonials.length
+        );
+        controls
+          .start({
+            x: "-100%",
+            opacity: 0,
+          })
+          .then(() => {
+            controls.start({
+              x: 0,
+              opacity: 1,
+              transition: { duration: 0.5 },
+            });
+          });
+      });
+  };
+
+  return (
+    <Box
+      sx={{
+        backgroundColor: "#1d2733",
+        color: "#fff",
+        py: { xs: 6, md: 10 },
+        px: { xs: 2, md: 3 },
+        overflow: "hidden",
+      }}
+    >
+      {/* Header Section */}
+      <Box
+        component={motion.div}
+        initial="hidden"
+        animate="visible"
+        variants={containerVariants}
+        textAlign="center"
+        mb={{ xs: 4, md: 6 }}
+        sx={{ maxWidth: 800, mx: "auto" }}
+      >
+        <Typography variant="h3" fontWeight="bold" gutterBottom>
+          Testimonials
+        </Typography>
+        <Typography variant="subtitle1">
+          Don't just take our word for it
+        </Typography>
+      </Box>
+
+      {/* Mobile Carousel */}
+      {isMobile ? (
+        <Box sx={{ position: "relative", height: 450 }}>
+          <AnimatePresence>
+            <Box
+              component={motion.div}
+              key={currentIndex}
+              animate={controls}
+              initial={{ x: 0, opacity: 1 }}
+              exit={{ x: 0, opacity: 0 }}
+              sx={{
+                position: "absolute",
+                width: "100%",
+                display: "flex",
+                justifyContent: "center",
+              }}
+            >
+              <TestimonialCard testimonial={testimonials[currentIndex]} />
+            </Box>
+          </AnimatePresence>
+
+          <NavigationArrows handlePrev={handlePrev} handleNext={handleNext} />
+        </Box>
+      ) : (
+        /* Desktop Grid */
+        <Box
+          component={motion.div}
+          initial="hidden"
+          animate="visible"
+          variants={containerVariants}
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+            flexWrap: "wrap",
+            gap: 4,
+            px: { md: 4 },
+          }}
+        >
+          {testimonials.map((t, idx) => (
+            <Box
+              key={idx}
+              component={motion.div}
+              variants={itemVariants}
+              whileHover="hover"
+              sx={{
+                width: { md: 350 },
+                flex: { md: "1 1 300px" },
+              }}
+            >
+              <TestimonialCard testimonial={t} />
+            </Box>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+// Extracted Card Component
+const TestimonialCard = ({
+  testimonial,
+}: {
+  testimonial: (typeof testimonials)[0];
+}) => (
+  <Card
+    sx={{
+      borderRadius: 3,
+      width: "100%",
+      minHeight: 400,
+      textAlign: "center",
+      py: 3,
+      px: 2,
+      background: "linear-gradient(145deg, #1d2733, #232f3e)",
+      boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
+      border: "1px solid rgba(0, 225, 255, 0.1)",
+      transition: "all 0.3s ease",
+      "&:hover": {
+        boxShadow: "0 12px 40px rgba(0, 225, 255, 0.15)",
+        borderColor: "rgba(0, 225, 255, 0.3)",
+        transform: "translateY(-5px)",
+      },
+    }}
+  >
+    <Avatar
+      src={testimonialImg}
+      alt={testimonial.name}
+      sx={{
+        width: 80,
+        height: 80,
+        margin: "0 auto",
+        mb: 2,
+        border: "2px solid #00e1ff",
+        boxShadow: "0 0 15px rgba(0, 225, 255, 0.4)",
+      }}
+    />
+    <CardContent>
+      <Typography variant="h6" fontWeight="bold" color="#00e1ff">
+        {testimonial.name}
+      </Typography>
+      <Typography variant="subtitle1" color="rgba(255,255,255,0.8)" mb={0.5}>
+        {testimonial.role}
+      </Typography>
+      <Typography variant="body2" color="rgba(255,255,255,0.6)" mb={2}>
+        {testimonial.company}
+      </Typography>
+      <Typography
+        variant="body1"
+        color="rgba(255,255,255,0.8)"
+        mb={3}
+        fontStyle="italic"
+      >
+        {testimonial.feedback}
+      </Typography>
+      <Box>
+        {Array.from({ length: 5 }).map((_, i) => (
+          <Box
+            component="span"
+            key={i}
+            sx={{
+              color:
+                i < testimonial.rating ? "#00e1ff" : "rgba(255,255,255,0.2)",
+              fontSize: "1.5rem",
+              mx: 0.5,
+              textShadow:
+                i < testimonial.rating
+                  ? "0 0 8px rgba(0, 225, 255, 0.5)"
+                  : "none",
+            }}
+          >
+            ★
+          </Box>
+        ))}
+      </Box>
+    </CardContent>
+  </Card>
+);
+
+// Extracted Navigation Component
+const NavigationArrows = ({
+  handlePrev,
+  handleNext,
+}: {
+  handlePrev: () => void;
+  handleNext: () => void;
+}) => (
+  <>
+    <IconButton
+      onClick={handlePrev}
+      sx={{
+        position: "absolute",
+        left: 10,
+        top: "50%",
+        transform: "translateY(-50%)",
+        color: "#00e1ff",
+        backgroundColor: "rgba(0, 225, 255, 0.1)",
+        "&:hover": {
+          backgroundColor: "rgba(0, 225, 255, 0.2)",
+        },
+      }}
+    >
+      <KeyboardArrowLeft fontSize="large" />
+    </IconButton>
+
+    <IconButton
+      onClick={handleNext}
+      sx={{
+        position: "absolute",
+        right: 10,
+        top: "50%",
+        transform: "translateY(-50%)",
+        color: "#00e1ff",
+        backgroundColor: "rgba(0, 225, 255, 0.1)",
+        "&:hover": {
+          backgroundColor: "rgba(0, 225, 255, 0.2)",
+        },
+      }}
+    >
+      <KeyboardArrowRight fontSize="large" />
+    </IconButton>
+  </>
+);
+
+export default Testimonials;
--- a/src/index.css
+++ b/src/index.css
@ -1,13 +1,13 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,15 +1,15 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import { CssBaseline, ThemeProvider } from '@mui/material';
-import theme from './theme';
-
-const root = ReactDOM.createRoot(document.getElementById('root')!);
-root.render(
-  <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <App />
-    </ThemeProvider>
-  </React.StrictMode>
-);
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import { CssBaseline, ThemeProvider } from '@mui/material';
+import theme from './theme';
+
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
+  <React.StrictMode>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <App />
+    </ThemeProvider>
+  </React.StrictMode>
+);
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@ -1 +1 @@
-/// <reference types="react-scripts" />
+/// <reference types="react-scripts" />
--- a/src/reportWebVitals.ts
+++ b/src/reportWebVitals.ts
@ -1,15 +1,15 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
--- a/src/routes.tsx
+++ b/src/routes.tsx
@ -1,56 +1,56 @@
-import { createBrowserRouter, Navigate } from "react-router-dom";
-import Layout from "./components/Layout";
-import LandingPage from "./components/landingpage/landingpage";
-import { LandingBase } from "./components/landingpage/landingpagebase";
-import { MottoBase } from "./components/mottopage/mottobase";
-import MottoSection from "./components/mottopage/MottoSection";
-import AboutUsPage from "./components/aboutus";
-
-const router = createBrowserRouter([
-    {
-      path: '',
-      element: <Layout />, 
-      children: [
-        {
-          index: true,
-          element: <Navigate to='home' />,
-        },
-        {
-          path: 'home',
-          element: <LandingBase />,
-          children: [
-            {
-              index: true,
-              element: <LandingPage />, 
-            },
-          ],
-        },
-        {
-          path: 'aboutUs',
-          element: <LandingBase />,
-          children: [
-            {
-              index: true,
-              element: <AboutUsPage />, 
-            },
-          ],
-        },
-        {
-          path: 'motto',
-          element: <MottoBase />,
-          children: [
-            {
-              index: true,
-              element: <MottoSection />, 
-            },
-          ],
-        }
-        
-        
-      ]
-    },
-    
-  ]);
-  
-  export default router;
+import { createBrowserRouter, Navigate } from "react-router-dom";
+import Layout from "./components/Layout";
+import LandingPage from "./components/landingpage/landingpage";
+import { LandingBase } from "./components/landingpage/landingpagebase";
+import { MottoBase } from "./components/mottopage/mottobase";
+import MottoSection from "./components/mottopage/MottoSection";
+import AboutUsPage from "./components/aboutus";
+
+const router = createBrowserRouter([
+    {
+      path: '',
+      element: <Layout />, 
+      children: [
+        {
+          index: true,
+          element: <Navigate to='home' />,
+        },
+        {
+          path: 'home',
+          element: <LandingBase />,
+          children: [
+            {
+              index: true,
+              element: <LandingPage />, 
+            },
+          ],
+        },
+        {
+          path: 'aboutUs',
+          element: <LandingBase />,
+          children: [
+            {
+              index: true,
+              element: <AboutUsPage />, 
+            },
+          ],
+        },
+        {
+          path: 'motto',
+          element: <MottoBase />,
+          children: [
+            {
+              index: true,
+              element: <MottoSection />, 
+            },
+          ],
+        }
+        
+        
+      ]
+    },
+    
+  ]);
+  
+  export default router;
  
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@ -1,5 +1,5 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
--- a/src/theme.ts
+++ b/src/theme.ts
@ -1,19 +1,19 @@
-import { createTheme } from '@mui/material/styles';
-
-const theme = createTheme({
-  palette: {
-    mode: 'dark',
-    primary: {
-      main: '#00E0FF',
-    },
-    background: {
-      default: '#0F111A',
-      paper: '#1B1E2E',
-    },
-  },
-  typography: {
-    fontFamily: 'Inter, sans-serif',
-  },
-});
-
-export default theme;
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  palette: {
+    mode: 'dark',
+    primary: {
+      main: '#00E0FF',
+    },
+    background: {
+      default: '#0F111A',
+      paper: '#1B1E2E',
+    },
+  },
+  typography: {
+    fontFamily: 'Inter, sans-serif',
+  },
+});
+
+export default theme;
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,26 +1,26 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": [
-    "src"
-  ]
-}
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Mihir Motiyani	f62bf4d480	Merge pull request 'fix/landing_page' (#7 ) from fix/landing_page into main continuous-integration/drone/push Build is passing Details Reviewed-on: #7 Reviewed-by: Mihir Motiyani <mihir@midastix.com>	2025-08-06 10:46:46 +05:30
hardik	dd872ea234	fix : added animation and mobile view in footer section continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2025-08-02 12:09:49 +00:00
hardik	0a31567b38	fix : added animation and mobile view in testimonial section	2025-08-02 12:05:48 +00:00
hardik	e863382af9	fix : changed css of about us segment continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2025-08-02 11:42:25 +00:00
hardik	f20e8591cb	fix : added animation and responsiveness in portfolio segment continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2025-08-02 08:19:02 +00:00
hardik	ae41722019	fix : added text animation and responsiveness in hero section	2025-08-02 07:24:11 +00:00
hardik	efcd9290bc	fix : changed layout of header and added a logo	2025-08-02 07:19:30 +00:00
Mihir Motiyani	d0dc2e8ff2	Merge pull request 'fix : frozen file issue' (#6 ) from feature/new_segment into main continuous-integration/drone/push Build is passing Details Reviewed-on: #6	2025-07-23 22:50:17 +05:30