internal
/
QuadraEdge
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: internal:d0dc2e8ff21ea1036f199021e4c5263e04f23280
Branches Tags
internal:main
internal:fix/landing_page
internal:feature/new_segment
...
compare: internal:f62bf4d4806f69f4518eadcdeb5008987d2ef208
Branches Tags
internal:fix/landing_page
internal:main
internal:feature/new_segment

7 Commits
d0dc2e8ff2 ... f62bf4d480

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
76 changed files with 14598 additions and 18081 deletions
Show Stats Expand all files Collapse all files

100
.drone.yml
View File

@ -1,50 +1,50 @@
kind: pipeline kind: pipeline
name: Build Image name: Build Image
steps: steps:
# - name: Lint Check # - name: Lint Check
# image: node:21-alpine # image: node:21-alpine
# commands: # commands:
# - yarn install # - yarn install
# # - yarn lint # # - yarn lint
- name: Build Docker Image - name: Build Docker Image
image: plugins/docker image: plugins/docker
settings: settings:
build_args: "API_BASE_URL=https://quadraedge-api.midastix.com" build_args: "API_BASE_URL=https://quadraedge-api.midastix.com"
username: username:
from_secret: docker_username from_secret: docker_username
password: password:
from_secret: docker_password from_secret: docker_password
repo: git.midastix.com/ci-docker-repo-user/quadraedge repo: git.midastix.com/ci-docker-repo-user/quadraedge
registry: git.midastix.com registry: git.midastix.com
when: when:
branch: branch:
- main - main
event: event:
- push - push
- name: Deploy image - name: Deploy image
image: appleboy/drone-ssh image: appleboy/drone-ssh
settings: settings:
host: quadraedge.in host: quadraedge.in
username: quadraedge username: quadraedge
key: key:
from_secret: server_ssh_pkey from_secret: server_ssh_pkey
port: 22 port: 22
command_timeout: 3m command_timeout: 3m
script: script:
- echo "Deploying image" - echo "Deploying image"
- sudo /opt/deployable/quadraedge/docker/deploy.sh - sudo /opt/deployable/quadraedge/docker/deploy.sh
- echo "Completed Deployment" - echo "Completed Deployment"
when: when:
branch: branch:
- main - main
event: event:
- push - push
# trigger: # trigger:
# branch: # branch:
# - main # - main
# - feature/env_api_url # - feature/env_api_url
# event: # event:
# - push # - push

46
.gitignore vendored
View File

@ -1,23 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies # dependencies
/node_modules /node_modules
/.pnp /.pnp
.pnp.js .pnp.js
# testing # testing
/coverage /coverage
# production # production
/build /build
# misc # misc
.DS_Store .DS_Store
.env.local .env.local
.env.development.local .env.development.local
.env.test.local .env.test.local
.env.production.local .env.production.local
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*

2
.yarnrc.yml
View File

@ -1 +1 @@
nodeLinker: node-modules nodeLinker: node-modules

62
Dockerfile
View File

@ -1,31 +1,31 @@
FROM node:24-alpine AS builder FROM node:24-alpine AS builder
ARG API_BASE_URL="https://mfs-api.midastix.com" ARG API_BASE_URL="https://mfs-api.midastix.com"
ENV REACT_APP_API_BASE_URL $API_BASE_URL ENV REACT_APP_API_BASE_URL $API_BASE_URL
WORKDIR /app WORKDIR /app
COPY package.json package.json COPY package.json package.json
COPY yarn.lock yarn.lock COPY yarn.lock yarn.lock
# RUN yarn install --frozen-lockfile # RUN yarn install --frozen-lockfile
RUN yarn install RUN yarn install
# COPY . . # COPY . .
COPY public public COPY public public
COPY src src COPY src src
COPY tsconfig.json tsconfig.json COPY tsconfig.json tsconfig.json
# COPY .yarnrc.yml .yarnrc.yml # COPY .yarnrc.yml .yarnrc.yml
RUN yarn build RUN yarn build
FROM scratch FROM scratch
WORKDIR /app WORKDIR /app
COPY --from=builder /app/build ./build COPY --from=builder /app/build ./build
CMD ["sh"] CMD ["sh"]

92
README.md
View File

@ -1,46 +1,46 @@
# Getting Started with Create React App # Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts ## Available Scripts
In the project directory, you can run: In the project directory, you can run:
### `yarn start` ### `yarn start`
Runs the app in the development mode.\ Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.\ The page will reload if you make edits.\
You will also see any lint errors in the console. You will also see any lint errors in the console.
### `yarn test` ### `yarn test`
Launches the test runner in the interactive watch mode.\ 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. See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `yarn build` ### `yarn build`
Builds the app for production to the `build` folder.\ Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance. 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.\ The build is minified and the filenames include the hashes.\
Your app is ready to be deployed! Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `yarn eject` ### `yarn eject`
**Note: this is a one-way operation. Once you `eject`, you can’t go back!** **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. 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. 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. 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 ## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 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/). To learn React, check out the [React documentation](https://reactjs.org/).

125
package.json
View File

@ -1,62 +1,63 @@
{ {
"name": "edfechfrontend", "name": "edfechfrontend",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@emotion/react": "^11.14.0", "@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1", "@emotion/styled": "^11.14.1",
"@mui/icons-material": "^6.4.12", "@mui/icons-material": "^6.4.12",
"@mui/material": "^6.4.12", "@mui/material": "^6.4.12",
"@mui/styled-engine-sc": "^6.1.2", "@mui/styled-engine-sc": "^6.1.2",
"@mui/types": "^7.2.17", "@mui/types": "^7.2.17",
"@testing-library/jest-dom": "^5.14.1", "@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.0.0", "@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^13.2.1", "@testing-library/user-event": "^13.2.1",
"@types/jest": "^27.0.1", "@types/jest": "^27.0.1",
"@types/node": "^16.7.13", "@types/node": "^16.7.13",
"@types/react": "^18.3.11", "@types/react": "^18.3.11",
"@types/react-dom": "^18.0.0", "@types/react-dom": "^18.0.0",
"framer-motion": "^12.23.0", "framer-motion": "^12.23.0",
"next": "^15.1.6", "next": "^15.1.6",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-icons": "^5.5.0", "react-icons": "^5.5.0",
"react-intersection-observer": "^9.15.1", "react-intersection-observer": "^9.15.1",
"react-router-dom": "^6.27.0", "react-router-dom": "^6.27.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"react-slick": "^0.30.3", "react-slick": "^0.30.3",
"slick-carousel": "^1.8.1", "slick-carousel": "^1.8.1",
"styled-components": "^6.1.13", "styled-components": "^6.1.13",
"typed.js": "^2.1.0", "typed.js": "^2.1.0",
"typescript": "^4.4.2", "typescript": "^4.4.2",
"web-vitals": "^2.1.0" "web-vitals": "^2.1.0"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
"build": "react-scripts build", "build": "react-scripts build",
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject" "eject": "react-scripts eject"
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [
"react-app", "react-app",
"react-app/jest" "react-app/jest"
] ]
}, },
"browserslist": { "browserslist": {
"production": [ "production": [
">0.2%", ">0.2%",
"not dead", "not dead",
"not op_mini all" "not op_mini all"
], ],
"development": [ "development": [
"last 1 chrome version", "last 1 chrome version",
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version"
] ]
}, },
"devDependencies": { "devDependencies": {
"@types/react-icons": "^2.2.7", "@types/react-icons": "^2.2.7",
"@types/react-slick": "^0.23.13" "@types/react-slick": "^0.23.13"
} },
} "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
}

44
public/index.html
View File

@ -1,22 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quadra Edge</title> <title>Quadra Edge</title>
</head> </head>
<body style="margin:0"> <body style="margin:0">
<div id="root"></div> <div id="root"></div>
</body> </body>
</html> </html>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quadra Edge</title> <title>Quadra Edge</title>
</head> </head>
<body style="margin:0"> <body style="margin:0">
<div id="root"></div> <div id="root"></div>
</body> </body>
</html> </html>

50
public/manifest.json
View File

@ -1,25 +1,25 @@
{ {
"short_name": "React App", "short_name": "React App",
"name": "Create React App Sample", "name": "Create React App Sample",
"icons": [ "icons": [
{ {
"src": "favicon.ico", "src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16", "sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon" "type": "image/x-icon"
}, },
{ {
"src": "logo192.png", "src": "logo192.png",
"type": "image/png", "type": "image/png",
"sizes": "192x192" "sizes": "192x192"
}, },
{ {
"src": "logo512.png", "src": "logo512.png",
"type": "image/png", "type": "image/png",
"sizes": "512x512" "sizes": "512x512"
} }
], ],
"start_url": ".", "start_url": ".",
"display": "standalone", "display": "standalone",
"theme_color": "#000000", "theme_color": "#000000",
"background_color": "#ffffff" "background_color": "#ffffff"
} }

6
public/robots.txt
View File

@ -1,3 +1,3 @@
# https://www.robotstxt.org/robotstxt.html # https://www.robotstxt.org/robotstxt.html
User-agent: * User-agent: *
Disallow: Disallow:

76
src/App.css
View File

@ -1,38 +1,38 @@
.App { .App {
text-align: center; text-align: center;
} }
.App-logo { .App-logo {
height: 40vmin; height: 40vmin;
pointer-events: none; pointer-events: none;
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
.App-logo { .App-logo {
animation: App-logo-spin infinite 20s linear; animation: App-logo-spin infinite 20s linear;
} }
} }
.App-header { .App-header {
background-color: #282c34; background-color: #282c34;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: calc(10px + 2vmin); font-size: calc(10px + 2vmin);
color: white; color: white;
} }
.App-link { .App-link {
color: #61dafb; color: #61dafb;
} }
@keyframes App-logo-spin { @keyframes App-logo-spin {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }

18
src/App.test.tsx
View File

@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import { render, screen } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import App from './App'; import App from './App';
test('renders learn react link', () => { test('renders learn react link', () => {
render(<App />); render(<App />);
const linkElement = screen.getByText(/learn react/i); const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument(); expect(linkElement).toBeInTheDocument();
}); });

48
src/App.tsx
View File

@ -1,24 +1,24 @@
// import AboutUsPage from "./components/aboutus"; // import AboutUsPage from "./components/aboutus";
import AboutUs from "./components/aboutus/aboutus"; import AboutUs from "./components/aboutus/aboutus";
import Footer from "./components/footer/footer"; import Footer from "./components/footer/footer";
import Header from "./components/header/header"; import Header from "./components/header/header";
import Hero from "./components/hero/hero"; import Hero from "./components/hero/hero";
import OurWorks from "./components/ourwork/ourwork"; import OurWorks from "./components/ourwork/ourwork";
import Services from "./components/services/services"; import Services from "./components/services/services";
import Testimonials from "./components/testomonials/testomonias"; import Testimonials from "./components/testomonials/testomonias";
function App() { function App() {
return ( return (
<div> <div>
<Header /> <Header />
<Hero /> <Hero />
<Services /> <Services />
<OurWorks /> <OurWorks />
<AboutUs /> <AboutUs />
<Testimonials /> <Testimonials />
<Footer /> <Footer />
</div> </div>
); );
} }
export default App; export default App;

302
src/components/Layout.tsx
View File

@ -1,152 +1,152 @@
import { useState } from "react"; import { useState } from "react";
import { AppBar, Toolbar, IconButton, Box, Typography, Container } from "@mui/material"; import { AppBar, Toolbar, IconButton, Box, Typography, Container } from "@mui/material";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { Outlet } from "react-router-dom"; import { Outlet } from "react-router-dom";
import MenuIcon from "@mui/icons-material/Menu"; import MenuIcon from "@mui/icons-material/Menu";
import CloseIcon from "@mui/icons-material/Close"; import CloseIcon from "@mui/icons-material/Close";
import smallone from "../qsmall.png"; import smallone from "../qsmall.png";
import big from "../QUDRAEDGELOGOTRANSPARENTBLACKfinal.png"; import big from "../QUDRAEDGELOGOTRANSPARENTBLACKfinal.png";
export default function Layout() { export default function Layout() {
const [menuOpen, setMenuOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false);
return ( return (
<Box sx={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}> <Box sx={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
{/* HEADER */} {/* HEADER */}
<AppBar position="static" sx={{ background: "transparent", boxShadow: "none", overflow: "hidden", paddingRight: '0px' }}> <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' }}> <Toolbar sx={{ position: "relative", height: "64px", display: "flex", justifyContent: "space-between", alignItems: "center", paddingRight: '0px' }}>
{/* Expanding Menu Animation (Right to Left) */} {/* Expanding Menu Animation (Right to Left) */}
<motion.div <motion.div
initial={{ width: "0%", right: 0 }} initial={{ width: "0%", right: 0 }}
animate={{ width: menuOpen ? "100%" : "0%" }} animate={{ width: menuOpen ? "100%" : "0%" }}
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}
style={{ style={{
position: "absolute", position: "absolute",
top: 0, top: 0,
right: 0, right: 0,
height: "100%", height: "100%",
background: "black", background: "black",
zIndex: -1, zIndex: -1,
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "flex-end", justifyContent: "flex-end",
overflow: "hidden", overflow: "hidden",
}} }}
> >
{/* Menu Items - Now Horizontal */} {/* Menu Items - Now Horizontal */}
{menuOpen && ( {menuOpen && (
<motion.div <motion.div
initial={{ opacity: 0, x: 20 }} initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.2, duration: 0.5 }} transition={{ delay: 0.2, duration: 0.5 }}
style={{ style={{
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
gap: "40px", gap: "40px",
color: "white", color: "white",
paddingRight: "90px" paddingRight: "90px"
}} }}
> >
<Typography <Typography
variant="h6" variant="h6"
component="a" component="a"
href="#" href="#"
sx={{ sx={{
color:'white', color:'white',
cursor: "pointer", cursor: "pointer",
"&:hover": { color: "#f5a623" }, "&:hover": { color: "#f5a623" },
whiteSpace: "nowrap" whiteSpace: "nowrap"
}} }}
> >
Home Home
</Typography> </Typography>
<Typography <Typography
variant="h6" variant="h6"
component="a" component="a"
href="#" href="#"
sx={{ sx={{
color:'white', color:'white',
cursor: "pointer", cursor: "pointer",
"&:hover": { color: "#f5a623" }, "&:hover": { color: "#f5a623" },
whiteSpace: "nowrap" whiteSpace: "nowrap"
}} }}
> >
About About
</Typography> </Typography>
<Typography <Typography
variant="h6" variant="h6"
component="a" component="a"
href="#" href="#"
sx={{ sx={{
color:'white', color:'white',
cursor: "pointer", cursor: "pointer",
"&:hover": { color: "#f5a623" }, "&:hover": { color: "#f5a623" },
whiteSpace: "nowrap" whiteSpace: "nowrap"
}} }}
> >
Services Services
</Typography> </Typography>
<Typography <Typography
variant="h6" variant="h6"
component="a" component="a"
href="#" href="#"
sx={{ sx={{
color:'white', color:'white',
cursor: "pointer", cursor: "pointer",
"&:hover": { color: "#f5a623" }, "&:hover": { color: "#f5a623" },
whiteSpace: "nowrap" whiteSpace: "nowrap"
}} }}
> >
Contact Contact
</Typography> </Typography>
</motion.div> </motion.div>
)} )}
</motion.div> </motion.div>
{/* Left Side Logo Animation */} {/* Left Side Logo Animation */}
<Box <Box
sx={{ position: "relative", width: 50, height: 50, overflow: "hidden" }} sx={{ position: "relative", width: 50, height: 50, overflow: "hidden" }}
onMouseEnter={(e) => (e.currentTarget.style.width = "120px")} onMouseEnter={(e) => (e.currentTarget.style.width = "120px")}
onMouseLeave={(e) => (e.currentTarget.style.width = "40px")} onMouseLeave={(e) => (e.currentTarget.style.width = "40px")}
> >
<img src={smallone} alt="Logo" width={50} height={50} /> <img src={smallone} alt="Logo" width={50} height={50} />
<motion.div <motion.div
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
style={{ position: "absolute", top: 0, left: 50 }} style={{ position: "absolute", top: 0, left: 50 }}
> >
<img src={big} alt="Full Logo" width={100} height={50} /> <img src={big} alt="Full Logo" width={100} height={50} />
</motion.div> </motion.div>
</Box> </Box>
{/* Right Side Menu Button */} {/* Right Side Menu Button */}
<IconButton onClick={() => setMenuOpen(!menuOpen)}> <IconButton onClick={() => setMenuOpen(!menuOpen)}>
<motion.div animate={{ rotate: menuOpen ? 135 : 0 }} transition={{ duration: 0.5 }}> <motion.div animate={{ rotate: menuOpen ? 135 : 0 }} transition={{ duration: 0.5 }}>
{menuOpen ? <CloseIcon sx={{ color: "white" }} /> : <MenuIcon />} {menuOpen ? <CloseIcon sx={{ color: "white" }} /> : <MenuIcon />}
</motion.div> </motion.div>
</IconButton> </IconButton>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
{/* MAIN CONTENT */} {/* MAIN CONTENT */}
<Box sx={{ flexGrow: 1 }}> <Box sx={{ flexGrow: 1 }}>
<Outlet /> <Outlet />
</Box> </Box>
{/* FOOTER */} {/* FOOTER */}
<Box sx={{ backgroundColor: "black", color: "white", textAlign: "center", padding: "10px 0", marginTop: "auto" }}> <Box sx={{ backgroundColor: "black", color: "white", textAlign: "center", padding: "10px 0", marginTop: "auto" }}>
<Container> <Container>
<Typography variant="body2"> <Typography variant="body2">
© {new Date().getFullYear()} QudraEdge. All Rights Reserved. © {new Date().getFullYear()} QudraEdge. All Rights Reserved.
</Typography> </Typography>
</Container> </Container>
</Box> </Box>
</Box> </Box>
); );
} }

BIN
src/components/QE Website design/Ellipse 1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 311 B

BIN
src/components/QE Website design/Frame 32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 195 B

BIN
src/components/QE Website design/Logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/components/QE Website design/Navbar Brand-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
src/components/QE Website design/Navbar Brand-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/components/QE Website design/Navbar Brand-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/components/QE Website design/Navbar Brand-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/components/QE Website design/Navbar Brand-5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/components/QE Website design/Navbar Brand.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/components/QE Website design/Projects.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 MiB

BIN
src/components/QE Website design/Property 2=Default.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
src/components/QE Website design/Property 2=OnClick/OnHover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
src/components/QE Website design/QE logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/components/QE Website design/Rectangle 9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
src/components/QE Website design/Style Guide.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 422 KiB

BIN
src/components/QE Website design/entypo-social_linkedin-with-circle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 619 B

BIN
src/components/QE Website design/entypo-social_youtube-with-circle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 626 B

BIN
src/components/QE Website design/fluent_arrow-up-20-filled-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 472 B

BIN
src/components/QE Website design/fluent_arrow-up-20-filled-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/components/QE Website design/fluent_arrow-up-20-filled-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1017 B

BIN
src/components/QE Website design/fluent_arrow-up-20-filled-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/components/QE Website design/fluent_arrow-up-20-filled.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/components/QE Website design/fluent_call-24-filled.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 549 B

BIN
src/components/QE Website design/ic_outline-facebook.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 580 B

BIN
src/components/QE Website design/ic_round-plus.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 238 B

BIN
src/components/QE Website design/mage_instagram-circle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 671 B

BIN
src/components/QE Website design/material-symbols_close-rounded-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 329 B

BIN
src/components/QE Website design/material-symbols_close-rounded.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 336 B

BIN
src/components/QE Website design/material-symbols_mail-rounded.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 536 B

BIN
src/components/QE Website design/material-symbols_menu-rounded-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 265 B

BIN
src/components/QE Website design/material-symbols_menu-rounded.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 265 B

BIN
src/components/QE Website design/material-symbols_star-rounded.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 440 B

BIN
src/components/QE Website design/octicon_dot-24-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 287 B

BIN
src/components/QE Website design/octicon_dot-24.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 287 B

BIN
src/components/QE Website design/ri_map-pin-fill.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 716 B

1284
src/components/aboutus.tsx
View File

File diff suppressed because it is too large Load Diff

253
src/components/aboutus/aboutus.tsx
View File

@ -1,44 +1,209 @@
import { Box, Typography, Button } from "@mui/material"; import { Box, Typography, Button } from "@mui/material";
import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward"; import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
import { motion, Variants, Transition } from "framer-motion";
const AboutUs = () => {
return ( const AboutUs = () => {
<Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 10, px: 3 }}> // Type-safe animation variants
<Box textAlign="center" maxWidth={800} mx="auto"> const containerVariants: Variants = {
<Typography variant="h4" fontWeight="bold" gutterBottom> hidden: { opacity: 0 },
About Us visible: {
</Typography> opacity: 1,
<Typography variant="body1" paragraph> transition: {
Lorem ipsum dolor sit amet consectetur. Nisl sed sed tortor eros. Enim staggerChildren: 0.3,
hendrerit elit interdum malesuada sit dis est pharetra suspendisse. In duration: 0.8,
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 const itemVariants: Variants = {
commodo cras leo gravida. hidden: { y: 30, opacity: 0 },
</Typography> visible: {
<Button y: 0,
variant="outlined" opacity: 1,
endIcon={<ArrowOutwardIcon />} transition: {
sx={{ duration: 0.8,
mt: 2, ease: [0.16, 1, 0.3, 1], // Cubic bezier curve for easeOut
borderColor: "#00FFD1", },
color: "#00FFD1", },
borderRadius: "30px", };
fontWeight: "bold",
px: 4, const titleVariants: Variants = {
"&:hover": { ...itemVariants,
backgroundColor: "#00FFD1", hover: {
color: "#000", scale: 1.02,
}, transition: {
}} repeat: Infinity,
> repeatType: "reverse",
GET IN TOUCH duration: 1.5,
</Button> } as Transition,
</Box> },
</Box> };
);
}; const underlineVariants: Variants = {
hidden: { width: 0 },
export default AboutUs; 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;

394
src/components/footer/footer.tsx
View File

@ -1,96 +1,298 @@
import React from 'react'; import React from "react";
import { import {
Box, Container, Grid, Typography, Link, Divider, Stack, useMediaQuery, useTheme Box,
} from '@mui/material'; Container,
import { Grid,
Instagram, YouTube, Facebook, LinkedIn Typography,
} from '@mui/icons-material'; Link,
import { motion } from 'framer-motion'; Divider,
Stack,
export default function Footer() { useMediaQuery,
const theme = useTheme(); useTheme,
const isMobile = useMediaQuery(theme.breakpoints.down('sm')); } from "@mui/material";
import { Instagram, YouTube, Facebook, LinkedIn } from "@mui/icons-material";
return ( import { motion, Variants } from "framer-motion";
<Box sx={{ backgroundColor: '#0F111A', color: '#fff', pt: 6, pb: 2 }}>
<Container maxWidth="lg"> export default function Footer() {
<motion.div const theme = useTheme();
initial={{ opacity: 0, y: 10 }} const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
animate={{ opacity: 1, y: 0 }} const isTablet = useMediaQuery(theme.breakpoints.between("sm", "md"));
transition={{ duration: 0.8 }}
> // Animation variants
<Grid container spacing={4}> const containerVariants: Variants = {
{/* Column 1: Explore Links */} hidden: { opacity: 0 },
<Grid item xs={12} sm={6} md={3}> visible: {
<Stack spacing={1}> opacity: 1,
<Link href="#" color="inherit" underline="hover">About Us</Link> transition: {
<Link href="#" color="inherit" underline="hover">Portfolio</Link> staggerChildren: 0.1,
<Link href="#" color="inherit" underline="hover">Blogs</Link> when: "beforeChildren",
<Link href="#" color="inherit" underline="hover">Services</Link> },
</Stack> },
</Grid> };
{/* Column 2: Support Links */} const itemVariants: Variants = {
<Grid item xs={12} sm={6} md={3}> hidden: { y: 20, opacity: 0 },
<Stack spacing={1}> visible: {
<Link href="#" color="inherit" underline="hover">FAQ’s</Link> y: 0,
<Link href="#" color="inherit" underline="hover">Terms & Conditions</Link> opacity: 1,
<Link href="#" color="inherit" underline="hover">Privacy Policy</Link> transition: {
</Stack> duration: 0.5,
</Grid> ease: "easeOut",
},
{/* Column 3: Logo (only visible on md+) */} },
{!isMobile && ( hover: {
<Grid item xs={12} sm={6} md={3}> scale: 1.05,
<Box sx={{ display: 'flex', justifyContent: { sm: 'center', md: 'flex-end' }, mb: 2 }}> color: "#00E0FF",
<img transition: { duration: 0.2 },
src="/logo.png" // Replace with actual logo },
alt="Quadra Edge" };
style={{ maxWidth: '180px', height: 'auto' }}
/> const socialIconVariants: Variants = {
</Box> hidden: { scale: 0 },
</Grid> visible: {
)} scale: 1,
transition: {
{/* Column 4: Contact Info + Socials */} type: "spring",
<Grid item xs={12} sm={6} md={3}> stiffness: 500,
{/* Mobile: show logo here instead */} damping: 15,
{isMobile && ( },
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}> },
<img hover: {
src="/logo.png" // Replace with actual logo scale: 1.2,
alt="Quadra Edge" transition: { duration: 0.2 },
style={{ maxWidth: '180px', height: 'auto' }} },
/> };
</Box>
)} return (
<Box
<Typography fontWeight={600} gutterBottom>Contact Us</Typography> component="footer"
<Typography variant="body2" mb={1}>Number</Typography> sx={{
<Typography variant="body2">Address</Typography> backgroundColor: "#0F111A",
color: "#fff",
<Stack pt: 8,
direction="row" pb: 4,
spacing={2} overflow: "hidden",
sx={{ mt: 2 }} }}
> >
<Link href="#"><Instagram sx={{ color: '#00E0FF' }} /></Link> <Container maxWidth="lg">
<Link href="#"><YouTube sx={{ color: '#00E0FF' }} /></Link> <motion.div
<Link href="#"><Facebook sx={{ color: '#00E0FF' }} /></Link> initial="hidden"
<Link href="#"><LinkedIn sx={{ color: '#00E0FF' }} /></Link> whileInView="visible"
</Stack> viewport={{ once: true, margin: "-50px" }}
</Grid> variants={containerVariants}
</Grid> >
<Grid container spacing={isMobile ? 3 : 4}>
<Divider sx={{ my: 4, borderColor: '#00E0FF' }} /> {/* Column 1: Explore Links */}
<Grid item xs={12} sm={6} md={3}>
<Box textAlign="center"> <Typography
<Typography variant="body2" sx={{ color: '#00E0FF' }}> component={motion.div}
Copyright © 2025 QuadraEdge variants={itemVariants}
</Typography> variant="h6"
</Box> fontWeight={600}
</motion.div> gutterBottom
</Container> sx={{ color: "#00E0FF" }}
</Box> >
); 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>
);
}

352
src/components/header/header.tsx
View File

@ -1,151 +1,201 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { import {
AppBar, AppBar,
Toolbar, Toolbar,
Typography, IconButton,
IconButton, Drawer,
Drawer, List,
List, ListItemText,
ListItem, Button,
ListItemText, useMediaQuery,
Button, useTheme,
useMediaQuery, Box,
useTheme, Container,
Box, ListItemButton,
Container, Divider,
ListItemButton, } from "@mui/material";
} from "@mui/material"; import MenuIcon from "@mui/icons-material/Menu";
import MenuIcon from "@mui/icons-material/Menu"; import { motion } from "framer-motion";
import { motion } from "framer-motion"; import HomeIcon from "@mui/icons-material/Home";
import BuildIcon from "@mui/icons-material/Build";
const navItems = ["Home", "Services", "Portfolio", "About Us", "Blog"]; import WorkIcon from "@mui/icons-material/Work";
import InfoIcon from "@mui/icons-material/Info";
const Header = () => { import ArticleIcon from "@mui/icons-material/Article";
const [mobileOpen, setMobileOpen] = useState(false); import logo from "../QE Website design/Logo.png";
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("md")); const navItems = [
{ label: "Home", icon: <HomeIcon />, href: "#" },
const toggleDrawer = () => { { label: "Services", icon: <BuildIcon />, href: "#" },
setMobileOpen(!mobileOpen); { label: "Portfolio", icon: <WorkIcon />, href: "#" },
}; { label: "About Us", icon: <InfoIcon />, href: "#" },
{ label: "Blog", icon: <ArticleIcon />, href: "#" },
const drawer = ( ];
<Box sx={{ width: 250, backgroundColor: "#000" }} onClick={toggleDrawer}>
<List> const Header = () => {
{navItems.map((item) => ( const [mobileOpen, setMobileOpen] = useState(false);
<ListItemButton component="a" href="#" key={item}> const theme = useTheme();
<ListItemText primary={item} sx={{ color: "#fff" }} /> const isMobile = useMediaQuery(theme.breakpoints.down("md"));
</ListItemButton>
))} const toggleDrawer = () => setMobileOpen(!mobileOpen);
<ListItem disablePadding>
<Button const drawer = (
variant="outlined" <Box
fullWidth sx={{ width: 260, height: "100%", backgroundColor: "#000" }}
sx={{ onClick={toggleDrawer}
borderColor: "#00E0FF", >
color: "#00E0FF", <ListItemButton
backgroundColor: "transparent", component="a"
borderRadius: "8px", href="#"
m: 2, sx={{ justifyContent: "center", my: 2 }}
"&:hover": { >
backgroundColor: "#00E0FF", <Box component="img" src={logo} alt="Logo" sx={{ height: 40 }} />
color: "#000", </ListItemButton>
}, <Divider sx={{ backgroundColor: "#444" }} />
}} <Box>
> {navItems.map((item) => (
Contact Us <ListItemButton component="a" href={item.href} key={item.label}>
</Button> <Box
</ListItem> sx={{ display: "flex", alignItems: "center", color: "#00E0FF" }}
</List> >
</Box> <Box sx={{ mr: 2 }}>{item.icon}</Box>
); <ListItemText primary={item.label} sx={{ color: "#fff" }} />
</Box>
return ( </ListItemButton>
<AppBar ))}
position="sticky" </Box>
sx={{ backgroundColor: "#000", boxShadow: "none" }} <Divider sx={{ backgroundColor: "#444", my: 2 }} />
> <Box px={2}>
<Container maxWidth="lg"> <Button
<Toolbar sx={{ justifyContent: "space-between", padding: "16px 0" }}> variant="outlined"
<motion.div fullWidth
initial={{ opacity: 0, y: -10 }} sx={{
animate={{ opacity: 1, y: 0 }} borderColor: "#00E0FF",
transition={{ duration: 0.6 }} color: "#00E0FF",
> borderRadius: "24px",
<Typography variant="h6" sx={{ fontWeight: 700, color: "#fff" }}> fontWeight: 600,
QUADRA EDGE textTransform: "none",
</Typography> "&:hover": {
</motion.div> backgroundColor: "#00E0FF",
color: "#000",
{isMobile ? ( },
<> }}
<IconButton color="inherit" edge="end" onClick={toggleDrawer}> >
<MenuIcon sx={{ color: "#fff" }} /> Contact Us
</IconButton> </Button>
<Drawer </Box>
anchor="right" </Box>
open={mobileOpen} );
onClose={toggleDrawer}
sx={{ "& .MuiDrawer-paper": { backgroundColor: "#000" } }} return (
> <AppBar
{drawer} position="sticky"
</Drawer> sx={{ backgroundColor: "#000", boxShadow: "none" }}
</> >
) : ( <Container maxWidth="lg">
<Box sx={{ display: "flex", gap: 4, alignItems: "center" }}> <Toolbar sx={{ justifyContent: "space-between", py: 1.5 }}>
{navItems.map((item, index) => ( {isMobile ? (
<motion.div <>
key={item} <IconButton edge="end" onClick={toggleDrawer}>
initial={{ opacity: 0, y: -5 }} <MenuIcon sx={{ color: "#fff" }} />
animate={{ opacity: 1, y: 0 }} </IconButton>
transition={{ delay: 0.1 * index }} <Drawer
> anchor="right"
<Typography open={mobileOpen}
variant="body1" onClose={toggleDrawer}
component="a" sx={{ "& .MuiDrawer-paper": { backgroundColor: "#000" } }}
href="#" >
sx={{ {drawer}
color: "#fff", </Drawer>
textDecoration: "none", </>
"&:hover": { ) : (
color: "#00E0FF", <Box
}, sx={{
}} display: "flex",
> justifyContent: "space-between",
{item} alignItems: "center",
</Typography> width: "100%",
</motion.div> }}
))} >
<motion.div {/* Left - Logo */}
initial={{ opacity: 0, y: -5 }} <motion.div
animate={{ opacity: 1, y: 0 }} initial={{ opacity: 0, x: -10 }}
transition={{ delay: 0.5 }} animate={{ opacity: 1, x: 0 }}
> transition={{ duration: 0.6 }}
<Button >
variant="outlined" <Box
sx={{ component="a"
borderColor: "#00E0FF", href="#"
color: "#00E0FF", sx={{ display: "flex", alignItems: "center" }}
backgroundColor: "transparent", >
borderRadius: "8px", <Box
textTransform: "none", component="img"
padding: "8px 24px", src={logo}
"&:hover": { alt="Logo"
backgroundColor: "#00E0FF", sx={{ height: 40, width: "auto", objectFit: "contain" }}
color: "#000", />
borderColor: "#00E0FF", </Box>
}, </motion.div>
}}
> {/* Center - Navigation */}
Contact Us <Box sx={{ display: "flex", gap: 4, alignItems: "center" }}>
</Button> {navItems.map((item, index) => (
</motion.div> <motion.div
</Box> key={item.label}
)} initial={{ opacity: 0, y: -5 }}
</Toolbar> animate={{ opacity: 1, y: 0 }}
</Container> transition={{ delay: 0.1 * index }}
</AppBar> >
); <Box
}; component="a"
href={item.href}
export default Header; 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;

151
src/components/hero/hero.tsx
View File

@ -1,49 +1,102 @@
import { Box, Button, Container, Grid, Typography } from "@mui/material"; import { Box, Button, Container, Grid, Typography } from "@mui/material";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import backgroundImg from "../hero/Frame 22.png"; import backgroundImg from "../hero/Frame 22.png";
export default function Hero() {
return ( export default function Hero() {
<Box sx={{ backgroundColor: "#0F111A", color: "#fff", py: 10 }}> return (
<Container maxWidth="lg"> <Box sx={{ backgroundColor: "#0F111A", color: "#fff", py: 10 }}>
<motion.div <Container maxWidth="lg">
initial={{ opacity: 0, y: -20 }} <motion.div
animate={{ opacity: 1, y: 0 }} initial={{ opacity: 0, y: -30 }}
transition={{ duration: 0.8 }} animate={{ opacity: 1, y: 0 }}
> transition={{ duration: 1 }}
<Grid container> >
<Grid item md={6}> <Grid container spacing={4} alignItems="center">
<Typography variant="h3" fontWeight="bold" gutterBottom> <Grid item xs={12} md={6}>
We Create <br /> <Box>
Brands That Stick <Typography
</Typography> variant="h2"
</Grid> fontWeight="bold"
<Grid item md={6}> gutterBottom
<Typography variant="body1" maxWidth="sm"> sx={{
We help founders grow through bold design, sharp strategy, and fontSize: { xs: "2rem", sm: "2.8rem", md: "3.4rem" },
smart marketing that drives recognition, engagement and lineHeight: 1.2,
long-term brand loyalty. }}
</Typography> >
<Button We Create <br />
variant="outlined" Brands That Stick
sx={{ </Typography>
mt: 4,
borderColor: "#00E0FF", {/* Sliding second line after 7s */}
color: "#00E0FF", <motion.div
"&:hover": { initial={{ opacity: 0, x: 50 }}
backgroundColor: "#00E0FF", animate={{ opacity: 1, x: 0 }}
color: "#000", transition={{ delay: 7, duration: 1 }}
}, >
}} <Typography
> variant="h5"
Get in Touch sx={{
</Button> mt: 2,
</Grid> fontWeight: 300,
</Grid> color: "#00E0FF",
</motion.div> fontStyle: "italic",
</Container> }}
<Box width="100%"> >
<img src={backgroundImg} alt="" width={"100%"} /> "Let your brand speak before you do."
</Box> </Typography>
</Box> </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>
);
}

66
src/components/landingpage/landingpage.tsx
View File

@ -1,33 +1,33 @@
import React from 'react'; import React from 'react';
// import AppRoutes from './routes'; // import AppRoutes from './routes';
// import Header from './components/landingpage/landingpagecomponents/header'; // import Header from './components/landingpage/landingpagecomponents/header';
import { Box } from '@mui/material'; import { Box } from '@mui/material';
import HeroSection from './landingpagecomponents/CarouselSection'; import HeroSection from './landingpagecomponents/CarouselSection';
import WhoWeAre from './landingpagecomponents/whoweare'; import WhoWeAre from './landingpagecomponents/whoweare';
import OurExpertise from './landingpagecomponents/ourexperties'; import OurExpertise from './landingpagecomponents/ourexperties';
import TopBrands from './landingpagecomponents/brands'; import TopBrands from './landingpagecomponents/brands';
import CaseStudies from './landingpagecomponents/casestudy'; import CaseStudies from './landingpagecomponents/casestudy';
import StatsSection from './landingpagecomponents/scrollanimationsection'; import StatsSection from './landingpagecomponents/scrollanimationsection';
import ContactForm from './landingpagecomponents/contactus'; import ContactForm from './landingpagecomponents/contactus';
// import router from './routes'; // import router from './routes';
const LandingPage: React.FC = () => { const LandingPage: React.FC = () => {
return ( return (
<Box> <Box>
{/* <AnimatedHeader /> */} {/* <AnimatedHeader /> */}
<HeroSection /> <HeroSection />
<WhoWeAre /> <WhoWeAre />
<OurExpertise /> <OurExpertise />
<TopBrands /> <TopBrands />
<StatsSection/> <StatsSection/>
<CaseStudies/> <CaseStudies/>
<ContactForm /> <ContactForm />
</Box> </Box>
); );
}; };
export default LandingPage; export default LandingPage;

24
src/components/landingpage/landingpagebase.tsx
View File

@ -1,12 +1,12 @@
import React from 'react'; import React from 'react';
import { Outlet } from 'react-router-dom'; import { Outlet } from 'react-router-dom';
import { Box } from '@mui/material'; import { Box } from '@mui/material';
// import CopyrightFooter from '../../assets/copyright'; // import CopyrightFooter from '../../assets/copyright';
export const LandingBase: React.FC = () => { export const LandingBase: React.FC = () => {
return ( return (
<Box> <Box>
<Outlet /> <Outlet />
</Box> </Box>
); );
}; };

198
src/components/landingpage/landingpagecomponents/CarouselSection.tsx
View File

@ -1,99 +1,99 @@
import React from "react"; import React from "react";
import { Box, Button, Grid, Typography } from "@mui/material"; import { Box, Button, Grid, Typography } from "@mui/material";
import background from "../../../image-removebg-preview (21).png"; import background from "../../../image-removebg-preview (21).png";
const HeroSection: React.FC = () => { const HeroSection: React.FC = () => {
return ( return (
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
height: { md: "90vh", xs: "80vh" }, height: { md: "90vh", xs: "80vh" },
backgroundColor: "#f5f5f5", backgroundColor: "#f5f5f5",
padding: { xs: 3, md: 9 }, padding: { xs: 3, md: 9 },
}} }}
> >
<Grid <Grid
container container
spacing={2} spacing={2}
sx={{ sx={{
alignItems: "center", alignItems: "center",
justifyContent: { xs: "center", md: "space-between" }, justifyContent: { xs: "center", md: "space-between" },
textAlign: { xs: "center", md: "left" }, textAlign: { xs: "center", md: "left" },
}} }}
> >
{/* Left Content */} {/* Left Content */}
<Grid item xs={12} md={8}> <Grid item xs={12} md={8}>
<Typography <Typography
variant="h3" variant="h3"
sx={{ fontSize: { xs: "2rem", md: "3rem" } }} sx={{ fontSize: { xs: "2rem", md: "3rem" } }}
> >
We Don’t Just Market. We Make You <b>Unstoppable</b>. We Don’t Just Market. We Make You <b>Unstoppable</b>.
</Typography> </Typography>
{/* <Typography {/* <Typography
variant="h3" variant="h3"
sx={{ sx={{
fontWeight: 200, fontWeight: 200,
fontSize: { xs: "2rem", md: "3rem" }, fontSize: { xs: "2rem", md: "3rem" },
mt: 1, mt: 1,
}} }}
> >
DIGITAL AGENCY DIGITAL AGENCY
</Typography> */} </Typography> */}
<Typography <Typography
variant="body1" variant="body1"
sx={{ sx={{
mt: 2, mt: 2,
fontSize: { xs: "1rem", md: "1.2rem" }, fontSize: { xs: "1rem", md: "1.2rem" },
color: "#666", color: "#666",
maxWidth: "90%", maxWidth: "90%",
}} }}
> >
Cut through the noise with strategies that deliver measurable success. Let’s make it happen. Cut through the noise with strategies that deliver measurable success. Let’s make it happen.
</Typography> </Typography>
<Button <Button
variant="outlined" variant="outlined"
sx={{ sx={{
mt: 3, mt: 3,
borderColor: "black", borderColor: "black",
color: "black", color: "black",
fontSize: "1rem", fontSize: "1rem",
padding: "10px 20px", padding: "10px 20px",
borderRadius: "50px", borderRadius: "50px",
fontWeight: "bold", fontWeight: "bold",
"&:hover": { "&:hover": {
borderColor: "black", borderColor: "black",
backgroundColor: "#e0e0e0", backgroundColor: "#e0e0e0",
}, },
}} }}
> >
WATCH VIDEO WATCH VIDEO
</Button> </Button>
</Grid> </Grid>
{/* Right Image */} {/* Right Image */}
<Grid <Grid
item item
xs={12} xs={12}
md={4} md={4}
sx={{ sx={{
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
}} }}
> >
<Box <Box
component="img" component="img"
src={background} src={background}
alt="Coffee Cup" alt="Coffee Cup"
sx={{ sx={{
width: { xs: "200px", md: "90%" }, width: { xs: "200px", md: "90%" },
}} }}
/> />
</Grid> </Grid>
</Grid> </Grid>
</Box> </Box>
); );
}; };
export default HeroSection; export default HeroSection;

92
src/components/landingpage/landingpagecomponents/brands.tsx
View File

@ -1,47 +1,47 @@
import React from "react"; import React from "react";
import { Box, Typography, Grid, Card, CardMedia } from "@mui/material"; import { Box, Typography, Grid, Card, CardMedia } from "@mui/material";
import brandimage from "../../../brandimage.jpg" import brandimage from "../../../brandimage.jpg"
const brands = [ const brands = [
{ name: "Hockey India", img: brandimage }, { name: "Hockey India", img: brandimage },
{ name: "J. Hampstead", img: brandimage }, { name: "J. Hampstead", img: brandimage },
{ name: "Tim Hortons", img: brandimage }, { name: "Tim Hortons", img: brandimage },
{ name: "Brand 4", img: brandimage }, { name: "Brand 4", img: brandimage },
{ name: "Brand 5", img: brandimage }, { name: "Brand 5", img: brandimage },
{ name: "Brand 6", img: brandimage }, { name: "Brand 6", img: brandimage },
{ name: "Hockey India", img: brandimage }, { name: "Hockey India", img: brandimage },
{ name: "J. Hampstead", img: brandimage }, { name: "J. Hampstead", img: brandimage },
{ name: "Tim Hortons", img: brandimage }, { name: "Tim Hortons", img: brandimage },
]; ];
const TopBrands = () => { const TopBrands = () => {
return ( return (
<Box sx={{ backgroundColor: "#16110f", py: 6, textAlign: "center" }}> <Box sx={{ backgroundColor: "#16110f", py: 6, textAlign: "center" }}>
<Typography variant="h4" sx={{ color: "white", display: "inline-block", pb: 1 }}> <Typography variant="h4" sx={{ color: "white", display: "inline-block", pb: 1 }}>
TOP <span style={{ fontWeight: "bold" }}>BRANDS</span> TOP <span style={{ fontWeight: "bold" }}>BRANDS</span>
</Typography> </Typography>
<Typography sx={{ color: "#A0A0A0", maxWidth: "1200px", mx: "auto", mt: 2, lineHeight: 1.9 }}> <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 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 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! look forward to brewing something fresh for you!
</Typography> </Typography>
<Grid container spacing={2} justifyContent="center" sx={{ mt: 9 }}> <Grid container spacing={2} justifyContent="center" sx={{ mt: 9 }}>
{brands.map((brand, index) => ( {brands.map((brand, index) => (
<Grid item xs={12} sm={6} md={4} key={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" }}> <Card sx={{ backgroundColor: "#EAEAEA", p: 2, display: "flex", justifyContent: "center", maxWidth: "320px", mx: "auto" }}>
<CardMedia <CardMedia
component="img" component="img"
src={brand.img} src={brand.img}
alt={brand.name} alt={brand.name}
sx={{ maxWidth: "100%", objectFit: "contain" }} sx={{ maxWidth: "100%", objectFit: "contain" }}
/> />
</Card> </Card>
</Grid> </Grid>
))} ))}
</Grid> </Grid>
</Box> </Box>
); );
}; };
export default TopBrands; export default TopBrands;

212
src/components/landingpage/landingpagecomponents/casestudy.tsx
View File

@ -1,106 +1,106 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { Box, Card, Grid, Typography, Button } from "@mui/material"; import { Box, Card, Grid, Typography, Button } from "@mui/material";
import background from "../../../dark-background.jpg"; import background from "../../../dark-background.jpg";
const CaseStudies: React.FC = () => { const CaseStudies: React.FC = () => {
return ( return (
<Box sx={{ px: 5, py: 3, height: "900px", marginTop: 20 }}> <Box sx={{ px: 5, py: 3, height: "900px", marginTop: 20 }}>
<Grid container spacing={5} justifyContent="center"> <Grid container spacing={5} justifyContent="center">
{/* First Card */} {/* First Card */}
<Grid item xs={12} md={5.5}> <Grid item xs={12} md={5.5}>
<HoverCard <HoverCard
title="It All Starts At Kaziranga University" title="It All Starts At Kaziranga University"
description="Kaziranga University, A Prestigious Educational..." description="Kaziranga University, A Prestigious Educational..."
image={background} image={background}
/> />
{/* Bottom Section */} {/* Bottom Section */}
<Box textAlign="left" mt={4}> <Box textAlign="left" mt={4}>
<Typography variant="body1"> <Typography variant="body1">
Check out more digital marketing case studies Check out more digital marketing case studies
</Typography> </Typography>
<Button <Button
variant="outlined" variant="outlined"
sx={{ mt: 2, borderRadius: "50px", px: 4, py: 1 }} sx={{ mt: 2, borderRadius: "50px", px: 4, py: 1 }}
> >
VIEW MORE VIEW MORE
</Button> </Button>
</Box> </Box>
</Grid> </Grid>
{/* Second Card with Heading */} {/* Second Card with Heading */}
<Grid item xs={12} md={5.5}> <Grid item xs={12} md={5.5}>
<Typography variant="h4" fontWeight="bold" sx={{ mb: 3, mt: 4 }}> <Typography variant="h4" fontWeight="bold" sx={{ mb: 3, mt: 4 }}>
CASE <span style={{ fontWeight: "normal" }}>STUDIES</span> CASE <span style={{ fontWeight: "normal" }}>STUDIES</span>
</Typography> </Typography>
<HoverCard <HoverCard
title="Instagram AR Filter" title="Instagram AR Filter"
description="We Came Up With A Unique AR Filter On..." description="We Came Up With A Unique AR Filter On..."
image={background} image={background}
/> />
</Grid> </Grid>
</Grid> </Grid>
</Box> </Box>
); );
}; };
const HoverCard: React.FC<{ title: string; description: string; image: string }> = ({ const HoverCard: React.FC<{ title: string; description: string; image: string }> = ({
title, title,
description, description,
image, image,
}) => { }) => {
const [hover, setHover] = useState(false); const [hover, setHover] = useState(false);
return ( return (
<Card <Card
sx={{ sx={{
position: "relative", position: "relative",
borderRadius: 2, borderRadius: 2,
overflow: "hidden", overflow: "hidden",
boxShadow: 3, boxShadow: 3,
height: "90vh", height: "90vh",
width: "30vw", width: "30vw",
cursor: "pointer", cursor: "pointer",
transition: "0.5s", transition: "0.5s",
}} }}
onMouseEnter={() => setHover(true)} onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)} onMouseLeave={() => setHover(false)}
> >
<Box <Box
component="img" component="img"
src={image} src={image}
alt={title} alt={title}
sx={{ sx={{
width: "100%", width: "100%",
height: "100%", height: "100%",
objectFit: "cover", objectFit: "cover",
position: "absolute", position: "absolute",
top: 0, top: 0,
left: 0, left: 0,
transition: "0.5s", transition: "0.5s",
filter: hover ? "brightness(0.5)" : "brightness(1)", filter: hover ? "brightness(0.5)" : "brightness(1)",
}} }}
/> />
{hover && ( {hover && (
<Box <Box
sx={{ sx={{
position: "absolute", position: "absolute",
bottom: 0, bottom: 0,
width: "100%", width: "100%",
background: "rgba(0, 0, 0, 0.6)", background: "rgba(0, 0, 0, 0.6)",
color: "white", color: "white",
p: 3, p: 3,
opacity: hover ? 1 : 0, opacity: hover ? 1 : 0,
transition: "opacity 0.3s ease-in-out", transition: "opacity 0.3s ease-in-out",
}} }}
> >
<Typography variant="h6" fontWeight="bold"> <Typography variant="h6" fontWeight="bold">
{title} {title}
</Typography> </Typography>
<Typography variant="body2">{description}</Typography> <Typography variant="body2">{description}</Typography>
</Box> </Box>
)} )}
</Card> </Card>
); );
}; };
export default CaseStudies; export default CaseStudies;

232
src/components/landingpage/landingpagecomponents/contactus.tsx
View File

@ -1,116 +1,116 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { TextField, Button, Box, Typography, Grid, InputAdornment, IconButton } from "@mui/material"; import { TextField, Button, Box, Typography, Grid, InputAdornment, IconButton } from "@mui/material";
import { Person, Phone, Email, Chat, Facebook, Twitter, LinkedIn, Instagram } from "@mui/icons-material"; import { Person, Phone, Email, Chat, Facebook, Twitter, LinkedIn, Instagram } from "@mui/icons-material";
const changingTexts = ["Strategy", "Innovation", "Growth", "Transformation", "Impact"]; const changingTexts = ["Strategy", "Innovation", "Growth", "Transformation", "Impact"];
const ContactForm: React.FC = () => { const ContactForm: React.FC = () => {
const [currentText, setCurrentText] = useState<string>(changingTexts[0]); const [currentText, setCurrentText] = useState<string>(changingTexts[0]);
useEffect(() => { useEffect(() => {
const interval = setInterval(() => { const interval = setInterval(() => {
setCurrentText((prevText) => { setCurrentText((prevText) => {
const currentIndex = changingTexts.indexOf(prevText); const currentIndex = changingTexts.indexOf(prevText);
return changingTexts[(currentIndex + 1) % changingTexts.length]; return changingTexts[(currentIndex + 1) % changingTexts.length];
}); });
}, 1000); }, 1000);
return () => clearInterval(interval); return () => clearInterval(interval);
}, []); }, []);
return ( return (
<Box sx={{ minHeight: "100vh", width: "100%", display: "flex", alignItems: "center", justifyContent: "center", bgcolor: "#16110f", color: "white", p: 4 }}> <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"> <Grid container spacing={4} alignItems="center" justifyContent="space-between">
{/* Left Side */} {/* Left Side */}
<Grid item xs={12} md={5}> <Grid item xs={12} md={5}>
<Typography variant="h1" fontWeight="bold">Let's Talk</Typography> <Typography variant="h1" fontWeight="bold">Let's Talk</Typography>
<Typography variant="h1" fontWeight="bold" color="orange" sx={{ transition: "all 0.5s ease-in-out" }}> <Typography variant="h1" fontWeight="bold" color="orange" sx={{ transition: "all 0.5s ease-in-out" }}>
{currentText} {currentText}
</Typography> </Typography>
<Typography variant="h6" mt={2}> <Typography variant="h6" mt={2}>
Let's discuss your project at <span style={{ color: "orange" }}>ideas@digitallatte.in</span> Let's discuss your project at <span style={{ color: "orange" }}>ideas@digitallatte.in</span>
</Typography> </Typography>
{/* Social Media Icons */} {/* Social Media Icons */}
<Box sx={{ display: "flex", gap: 2, mt: 3 }}> <Box sx={{ display: "flex", gap: 2, mt: 3 }}>
<IconButton sx={{ color: "white" }}><Facebook /></IconButton> <IconButton sx={{ color: "white" }}><Facebook /></IconButton>
<IconButton sx={{ color: "white" }}><Twitter /></IconButton> <IconButton sx={{ color: "white" }}><Twitter /></IconButton>
<IconButton sx={{ color: "white" }}><LinkedIn /></IconButton> <IconButton sx={{ color: "white" }}><LinkedIn /></IconButton>
<IconButton sx={{ color: "white" }}><Instagram /></IconButton> <IconButton sx={{ color: "white" }}><Instagram /></IconButton>
</Box> </Box>
</Grid> </Grid>
{/* Right Side - Contact Form */} {/* Right Side - Contact Form */}
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Box component="form" sx={{ bgcolor: "#16110f", p: 4, borderRadius: 2 }}> <Box component="form" sx={{ bgcolor: "#16110f", p: 4, borderRadius: 2 }}>
<TextField <TextField
fullWidth fullWidth
variant="standard" variant="standard"
placeholder="Name*" placeholder="Name*"
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
<Person sx={{ color: "orange" }} /> <Person sx={{ color: "orange" }} />
</InputAdornment> </InputAdornment>
), ),
}} }}
sx={{ mb: 4, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }} sx={{ mb: 4, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }}
/> />
<Box sx={{ display: "flex", gap: 2, alignItems: "center" }}> <Box sx={{ display: "flex", gap: 2, alignItems: "center" }}>
<TextField <TextField
sx={{ flex: 1, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }} sx={{ flex: 1, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }}
variant="standard" variant="standard"
placeholder="Contact*" placeholder="Contact*"
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
<Phone sx={{ color: "orange" }} /> <Phone sx={{ color: "orange" }} />
</InputAdornment> </InputAdornment>
), ),
}} }}
/> />
<TextField <TextField
sx={{ flex: 1, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }} sx={{ flex: 1, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }}
variant="standard" variant="standard"
placeholder="Email*" placeholder="Email*"
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
<Email sx={{ color: "orange" }} /> <Email sx={{ color: "orange" }} />
</InputAdornment> </InputAdornment>
), ),
}} }}
/> />
</Box> </Box>
<TextField <TextField
fullWidth fullWidth
variant="standard" variant="standard"
placeholder="Message*" placeholder="Message*"
multiline multiline
rows={4} rows={4}
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
<Chat sx={{ color: "orange" }} /> <Chat sx={{ color: "orange" }} />
</InputAdornment> </InputAdornment>
), ),
}} }}
sx={{ mb: 3, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }} 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 }}> <Button variant="contained" sx={{ bgcolor: "orange", color: "black", fontWeight: "bold", borderRadius: "20px", py: 1.5 }}>
SEND MESSAGE SEND MESSAGE
</Button> </Button>
</Box> </Box>
</Grid> </Grid>
</Grid> </Grid>
</Box> </Box>
); );
}; };
export default ContactForm; export default ContactForm;

234
src/components/landingpage/landingpagecomponents/ourexperties.tsx
View File

@ -1,117 +1,117 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Box, Grid, Typography } from "@mui/material"; import { Box, Grid, Typography } from "@mui/material";
import { Computer, Brush, Code } from "@mui/icons-material"; // Import relevant icons import { Computer, Brush, Code } from "@mui/icons-material"; // Import relevant icons
const expertiseCategories = ["DIGITAL", "DESIGN", "DEVELOPMENT"]; const expertiseCategories = ["DIGITAL", "DESIGN", "DEVELOPMENT"];
const OurExpertise: React.FC = () => { const OurExpertise: React.FC = () => {
const [currentText, setCurrentText] = useState(expertiseCategories[0]); const [currentText, setCurrentText] = useState(expertiseCategories[0]);
useEffect(() => { useEffect(() => {
const interval = setInterval(() => { const interval = setInterval(() => {
setCurrentText((prevText) => { setCurrentText((prevText) => {
const currentIndex = expertiseCategories.indexOf(prevText); const currentIndex = expertiseCategories.indexOf(prevText);
const nextIndex = (currentIndex + 1) % expertiseCategories.length; const nextIndex = (currentIndex + 1) % expertiseCategories.length;
return expertiseCategories[nextIndex]; return expertiseCategories[nextIndex];
}); });
}, 2000); }, 2000);
return () => clearInterval(interval); return () => clearInterval(interval);
}, []); }, []);
return ( return (
<Box <Box
sx={{ sx={{
backgroundColor: "#ffffff", backgroundColor: "#ffffff",
color: "#000000", color: "#000000",
minHeight: "100vh", minHeight: "100vh",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
padding: "60px 20px", padding: "60px 20px",
}} }}
> >
<Typography variant="h3" fontWeight={700} gutterBottom sx={{ color: "#333" }}> <Typography variant="h3" fontWeight={700} gutterBottom sx={{ color: "#333" }}>
OUR <span style={{ fontWeight: 300 }}>EXPERTISE</span> OUR <span style={{ fontWeight: 300 }}>EXPERTISE</span>
</Typography> </Typography>
<Typography variant="body1" sx={{ color: "#666", textAlign: "center", marginBottom: 3, maxWidth: "800px" }}> <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. We combine data insights with design thinking to build strategies and experiences that transform businesses.
</Typography> </Typography>
<Typography variant="h4" fontWeight={700} sx={{ marginBottom: 5, textTransform: "uppercase", color: "#555", fontSize: "3rem" }}> <Typography variant="h4" fontWeight={700} sx={{ marginBottom: 5, textTransform: "uppercase", color: "#555", fontSize: "3rem" }}>
{currentText} {currentText}
</Typography> </Typography>
<Grid container justifyContent="center" sx={{ maxWidth: "1000px", margin: "0 auto" }}> <Grid container justifyContent="center" sx={{ maxWidth: "1000px", margin: "0 auto" }}>
{[ {[
{ {
title: "Content Marketing", title: "Content Marketing",
icon: <Computer sx={{ fontSize: 50, color: "#F7931E" }} />, // Digital icon icon: <Computer sx={{ fontSize: 50, color: "#F7931E" }} />, // Digital icon
bgColor: "#16110f", bgColor: "#16110f",
items: [ items: [
"Blog & article writing", "Blog & article writing",
"Website copy & landing pages", "Website copy & landing pages",
"Video content & infographics", "Video content & infographics",
"Email & newsletter marketing", "Email & newsletter marketing",
], ],
}, },
{ {
title: "Web Design & Development", title: "Web Design & Development",
icon: <Brush sx={{ fontSize: 50, color: "#F7931E" }} />, // Design icon icon: <Brush sx={{ fontSize: 50, color: "#F7931E" }} />, // Design icon
bgColor: "#49332a", bgColor: "#49332a",
items: [ items: [
"Custom website design", "Custom website design",
"WordPress & eCommerce development", "WordPress & eCommerce development",
"Speed optimization & mobile-first design", "Speed optimization & mobile-first design",
"UX/UI improvements", "UX/UI improvements",
], ],
}, },
{ {
title: "DEVELOPMENT", title: "DEVELOPMENT",
icon: <Code sx={{ fontSize: 50, color: "#F7931E" }} />, // Development icon icon: <Code sx={{ fontSize: 50, color: "#F7931E" }} />, // Development icon
bgColor: "#16110f", bgColor: "#16110f",
items: [ items: [
"Website & Microsite Development", "Website & Microsite Development",
"Mobile Apps & Websites", "Mobile Apps & Websites",
"Content Management Systems (CMS)", "Content Management Systems (CMS)",
"Website Maintenance & Security", "Website Maintenance & Security",
"Ecommerce Solutions", "Ecommerce Solutions",
"Digital Strategy Consulting", "Digital Strategy Consulting",
"Video Content Creation", "Video Content Creation",
], ],
}, },
].map((category, index) => ( ].map((category, index) => (
<Grid item xs={12} sm={6} md={4} key={index} sx={{ display: "flex" }}> <Grid item xs={12} sm={6} md={4} key={index} sx={{ display: "flex" }}>
<Box <Box
sx={{ sx={{
backgroundColor: category.bgColor, backgroundColor: category.bgColor,
flex: 1, flex: 1,
padding: "40px 20px", padding: "40px 20px",
textAlign: "center", textAlign: "center",
boxShadow: "0 4px 10px rgba(0, 0, 0, 0.1)", boxShadow: "0 4px 10px rgba(0, 0, 0, 0.1)",
color: "#fff", color: "#fff",
minHeight: "500px", minHeight: "500px",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
}} }}
> >
{category.icon} {/* Render the icon above the title */} {category.icon} {/* Render the icon above the title */}
<Typography variant="h6" fontWeight={700} color="#F7931E" gutterBottom sx={{ marginTop: 2 }}> <Typography variant="h6" fontWeight={700} color="#F7931E" gutterBottom sx={{ marginTop: 2 }}>
{category.title} {category.title}
</Typography> </Typography>
{category.items.map((item, i) => ( {category.items.map((item, i) => (
<Typography key={i} variant="body2" sx={{ color: "#ddd", marginBottom: 1 }}> <Typography key={i} variant="body2" sx={{ color: "#ddd", marginBottom: 1 }}>
{item} {item}
</Typography> </Typography>
))} ))}
</Box> </Box>
</Grid> </Grid>
))} ))}
</Grid> </Grid>
</Box> </Box>
); );
}; };
export default OurExpertise; export default OurExpertise;

166
src/components/landingpage/landingpagecomponents/scrollanimationsection.tsx
View File

@ -1,83 +1,83 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Box, Grid, Typography } from "@mui/material"; import { Box, Grid, Typography } from "@mui/material";
import { motion, useAnimation } from "framer-motion"; import { motion, useAnimation } from "framer-motion";
import { useInView } from "react-intersection-observer"; import { useInView } from "react-intersection-observer";
import darkbackground from "../../../dark-background.jpg" import darkbackground from "../../../dark-background.jpg"
// Counter Component // Counter Component
const Counter = ({ target, label, icon }: { target: number; label: string; icon: React.ReactNode }) => { const Counter = ({ target, label, icon }: { target: number; label: string; icon: React.ReactNode }) => {
const controls = useAnimation(); const controls = useAnimation();
const [count, setCount] = useState(0); const [count, setCount] = useState(0);
const { ref, inView } = useInView({ triggerOnce: true }); const { ref, inView } = useInView({ triggerOnce: true });
useEffect(() => { useEffect(() => {
if (inView) { if (inView) {
let start = 0; let start = 0;
const step = Math.ceil(target / 50); const step = Math.ceil(target / 50);
const interval = setInterval(() => { const interval = setInterval(() => {
start += step; start += step;
setCount(start > target ? target : start); setCount(start > target ? target : start);
if (start >= target) clearInterval(interval); if (start >= target) clearInterval(interval);
}, 20); }, 20);
} }
}, [inView, target]); }, [inView, target]);
return ( return (
<motion.div ref={ref} animate={controls} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}> <motion.div ref={ref} animate={controls} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}>
<Box textAlign="center"> <Box textAlign="center">
{icon} {icon}
<Typography variant="h6" color="white" sx={{ mt: 1 }}> <Typography variant="h6" color="white" sx={{ mt: 1 }}>
{label} {label}
</Typography> </Typography>
<Typography variant="h4" fontWeight="bold" color="white"> <Typography variant="h4" fontWeight="bold" color="white">
{count} {count}
</Typography> </Typography>
</Box> </Box>
</motion.div> </motion.div>
); );
}; };
const StatsSection = () => { const StatsSection = () => {
return ( return (
<Box <Box
sx={{ sx={{
position: "relative", position: "relative",
backgroundImage: `url(${darkbackground})`, backgroundImage: `url(${darkbackground})`,
backgroundSize: "cover", backgroundSize: "cover",
backgroundAttachment: "fixed", backgroundAttachment: "fixed",
backgroundPosition: "center", backgroundPosition: "center",
minHeight: "80vh", minHeight: "80vh",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
color: "white", color: "white",
py: 10, py: 10,
}} }}
> >
<Grid container spacing={1} justifyContent="center"> <Grid container spacing={1} justifyContent="center">
{/* Coffee Cups */} {/* Coffee Cups */}
<Grid item xs={6} md={3}> <Grid item xs={6} md={3}>
<Counter target={20800} label="COFFEE CUPS" icon={<Typography fontSize={40}>☕</Typography>} /> <Counter target={20800} label="COFFEE CUPS" icon={<Typography fontSize={40}>☕</Typography>} />
</Grid> </Grid>
{/* Projects */} {/* Projects */}
<Grid item xs={6} md={3}> <Grid item xs={6} md={3}>
<Counter target={575} label="PROJECTS" icon={<Typography fontSize={40}>💼</Typography>} /> <Counter target={575} label="PROJECTS" icon={<Typography fontSize={40}>💼</Typography>} />
</Grid> </Grid>
{/* Working Days */} {/* Working Days */}
<Grid item xs={6} md={3}> <Grid item xs={6} md={3}>
<Counter target={4412} label="WORKING DAYS" icon={<Typography fontSize={40}>🖱️</Typography>} /> <Counter target={4412} label="WORKING DAYS" icon={<Typography fontSize={40}>🖱️</Typography>} />
</Grid> </Grid>
{/* Clients */} {/* Clients */}
<Grid item xs={6} md={3}> <Grid item xs={6} md={3}>
<Counter target={498} label="CLIENTS" icon={<Typography fontSize={40}>👥</Typography>} /> <Counter target={498} label="CLIENTS" icon={<Typography fontSize={40}>👥</Typography>} />
</Grid> </Grid>
</Grid> </Grid>
</Box> </Box>
); );
}; };
export default StatsSection; export default StatsSection;

148
src/components/landingpage/landingpagecomponents/whoweare.tsx
View File

@ -1,75 +1,75 @@
import React from "react"; import React from "react";
import { Box, Grid, Typography, Link } from "@mui/material"; import { Box, Grid, Typography, Link } from "@mui/material";
import coffeeCharacter from "../../../imagetwo.png"; import coffeeCharacter from "../../../imagetwo.png";
import brainLightbulb from "../../../imageone.png"; import brainLightbulb from "../../../imageone.png";
const WhoWeAre: React.FC = () => { const WhoWeAre: React.FC = () => {
return ( return (
<Box <Box
sx={{ sx={{
backgroundColor: "#15100E", backgroundColor: "#15100E",
color: "white", color: "white",
minHeight: "100vh", minHeight: "100vh",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
padding: { xs: "40px 20px", md: "80px 100px" }, padding: { xs: "40px 20px", md: "80px 100px" },
}} }}
> >
<Grid container spacing={6} alignItems="center"> <Grid container spacing={6} alignItems="center">
{/* Left Text Content */} {/* Left Text Content */}
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Typography variant="h3" fontWeight={700} gutterBottom> <Typography variant="h3" fontWeight={700} gutterBottom>
WHO <span style={{ fontWeight: 300 }}>WE ARE</span> WHO <span style={{ fontWeight: 300 }}>WE ARE</span>
</Typography> </Typography>
<Typography <Typography
variant="body1" variant="body1"
sx={{ color: "#b0b0b0", lineHeight: 1.8, marginBottom: 2, letterSpacing: "0.05em", wordSpacing: "0.1em" }} 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. 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>
<Typography <Typography
variant="body1" variant="body1"
sx={{ color: "#b0b0b0", lineHeight: 1.8, marginBottom: 3, letterSpacing: "0.05em", wordSpacing: "0.1em" }} 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: 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> </Typography>
<Link href="#" underline="hover" sx={{ color: "#b0b0b0", fontSize: "1rem", fontWeight: 600 }}> <Link href="#" underline="hover" sx={{ color: "#b0b0b0", fontSize: "1rem", fontWeight: 600 }}>
READ MORE READ MORE
</Link> </Link>
</Grid> </Grid>
{/* Right Image Section */} {/* Right Image Section */}
<Grid item xs={12} md={6} container spacing={2} justifyContent="center"> <Grid item xs={12} md={6} container spacing={2} justifyContent="center">
<Grid item xs={6}> <Grid item xs={6}>
<Box <Box
component="img" component="img"
src={brainLightbulb} src={brainLightbulb}
alt="Brain Lightbulb" alt="Brain Lightbulb"
sx={{ sx={{
width: "95%", width: "95%",
boxShadow: "10px 10px 20px rgba(0, 0, 0, 0.3)", boxShadow: "10px 10px 20px rgba(0, 0, 0, 0.3)",
transform: "rotate(-5deg)", transform: "rotate(-5deg)",
}} }}
/> />
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={6}>
<Box <Box
component="img" component="img"
src={coffeeCharacter} src={coffeeCharacter}
alt="Coffee Character" alt="Coffee Character"
sx={{ sx={{
width: "95%", width: "95%",
boxShadow: "10px 10px 20px rgba(0, 0, 0, 0.3)", boxShadow: "10px 10px 20px rgba(0, 0, 0, 0.3)",
transform: "rotate(5deg)", transform: "rotate(5deg)",
}} }}
/> />
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
</Box> </Box>
); );
}; };
export default WhoWeAre; export default WhoWeAre;

122
src/components/mottopage/MottoSection.tsx
View File

@ -1,61 +1,61 @@
import { Box, Typography, Container } from "@mui/material"; import { Box, Typography, Container } from "@mui/material";
import mottoimage from "../../whowearemotto.png" import mottoimage from "../../whowearemotto.png"
const MottoSection: React.FC = () => { const MottoSection: React.FC = () => {
return ( return (
<Box> <Box>
{/* Top Section */} {/* Top Section */}
<Box sx={{ backgroundColor: "#F7F7F7", py: 6, pl: 5, textAlign: "left" }}> <Box sx={{ backgroundColor: "#F7F7F7", py: 6, pl: 5, textAlign: "left" }}>
<Typography <Typography
variant="h3" variant="h3"
sx={{ sx={{
fontWeight: 500, fontWeight: 500,
fontSize: { xs: "2rem", md: "3.5rem" }, fontSize: { xs: "2rem", md: "3.5rem" },
letterSpacing: 2, letterSpacing: 2,
}} }}
> >
OUR <span style={{ fontWeight: "bold" }}>MOTTO</span> OUR <span style={{ fontWeight: "bold" }}>MOTTO</span>
</Typography> </Typography>
</Box> </Box>
{/* Bottom Black Section */} {/* Bottom Black Section */}
<Box sx={{ backgroundColor: "#15100E", py: 6 }}> <Box sx={{ backgroundColor: "#15100E", py: 6 }}>
<Container maxWidth="md"> <Container maxWidth="md">
<Typography <Typography
variant="body1" variant="body1"
sx={{ sx={{
color: "#A0A0A0", color: "#A0A0A0",
fontSize: { xs: "1rem", md: "1.25rem" }, fontSize: { xs: "1rem", md: "1.25rem" },
textAlign: "center", textAlign: "center",
lineHeight: 1.8, lineHeight: 1.8,
}} }}
> >
Ideas excite us, they shape the future, add value, and signal change. Ideas excite us, they shape the future, add value, and signal change.
Through fresh ideas, we blend together beautiful designs, functional Through fresh ideas, we blend together beautiful designs, functional
digital strategies, and engaging experiences. digital strategies, and engaging experiences.
<br /> <br />
Here are values that define us, principles that guide us, and words Here are values that define us, principles that guide us, and words
that we live by. that we live by.
</Typography> </Typography>
</Container> </Container>
</Box> </Box>
{/* Image Section */} {/* Image Section */}
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
}} }}
> >
<img <img
src={mottoimage} src={mottoimage}
alt="Motto Image" alt="Motto Image"
style={{ maxWidth: "90%", height: "auto", borderRadius: "8px" }} style={{ maxWidth: "90%", height: "auto", borderRadius: "8px" }}
/> />
</Box> </Box>
</Box> </Box>
); );
}; };
export default MottoSection; export default MottoSection;

24
src/components/mottopage/mottobase.tsx
View File

@ -1,12 +1,12 @@
import React from 'react'; import React from 'react';
import { Outlet } from 'react-router-dom'; import { Outlet } from 'react-router-dom';
import { Box } from '@mui/material'; import { Box } from '@mui/material';
// import CopyrightFooter from '../../assets/copyright'; // import CopyrightFooter from '../../assets/copyright';
export const MottoBase: React.FC = () => { export const MottoBase: React.FC = () => {
return ( return (
<Box> <Box>
<Outlet /> <Outlet />
</Box> </Box>
); );
}; };

336
src/components/ourwork/ourwork.tsx
View File

@ -1,116 +1,220 @@
import { import {
Box, Box,
Card, Card,
CardContent, CardContent,
CardMedia, CardMedia,
Grid, Grid,
Typography, Typography,
Button, Button,
} from "@mui/material"; Container,
import portfolioImg from "../ourwork/Rectangle 6.png"; useMediaQuery,
useTheme,
const works = [ } from "@mui/material";
{ import { motion } from "framer-motion";
title: "Project Name", import portfolioImg from "../ourwork/Rectangle 6.png";
image: portfolioImg,
}, const works = [
{ {
title: "Project Name", title: "Project Aurora",
image: portfolioImg, image: portfolioImg,
}, description: "Modern web design with seamless user experience",
{ },
title: "Project Name", {
image: portfolioImg, title: "Project Nexus",
}, image: portfolioImg,
]; description: "Mobile application development for enterprise",
},
const OurWorks = () => { {
return ( title: "Project Horizon",
<Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 8, px: 2 }}> image: portfolioImg,
<Typography variant="h4" align="center" fontWeight="bold" gutterBottom> description: "Brand identity and marketing campaign",
Our Works },
</Typography> ];
<Typography variant="subtitle1" align="center" mb={6}>
We’ve helped brands grow through bold strategy and creative execution. const OurWorks = () => {
Explore our recent success stories. const theme = useTheme();
</Typography> const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
<Grid container spacing={4} justifyContent="center"> return (
{works.map((work, index) => ( <Box
<Grid item xs={12} sm={6} md={4} key={index}> sx={{
<Card backgroundColor: "#1d2733",
sx={{ color: "#fff",
borderRadius: 3, py: 8,
overflow: "hidden", px: { xs: 2, sm: 4 },
bgcolor: "#fff", }}
maxWidth: 320, >
margin: "0 auto", <Container maxWidth="md">
}} <motion.div
elevation={3} initial={{ opacity: 0, y: -20 }}
> whileInView={{ opacity: 1, y: 0 }}
<CardContent> transition={{ duration: 0.6 }}
<Typography viewport={{ once: true }}
variant="subtitle1" >
fontWeight="bold" <Typography
color="Black" variant="h4"
gutterBottom align="center"
> fontWeight={700}
{work.title} gutterBottom
</Typography> sx={{
</CardContent> mb: 2,
<CardMedia fontFamily: "'Montserrat', sans-serif",
component="img" letterSpacing: 0.5,
image={work.image} }}
alt={work.title} >
sx={{ Our Portfolio
objectFit: "contain", </Typography>
height: 250, <Typography
px: 2, variant="subtitle1"
}} align="center"
/> mb={6}
<CardContent> sx={{
<Button maxWidth: 600,
variant="contained" mx: "auto",
fullWidth color: "rgba(255,255,255,0.8)",
sx={{ fontFamily: "'Open Sans', sans-serif",
backgroundColor: "#000", }}
color: "#00FFD1", >
fontWeight: "bold", We craft digital experiences that drive results
"&:hover": { </Typography>
backgroundColor: "#333", </motion.div>
},
borderRadius: "30px", <Grid container spacing={isMobile ? 3 : 4} justifyContent="center">
}} {works.map((work, index) => (
> <Grid item xs={12} sm={6} md={4} key={index}>
VIEW DEMO <motion.div
</Button> initial={{ opacity: 0, y: 30 }}
</CardContent> whileInView={{ opacity: 1, y: 0 }}
</Card> transition={{ duration: 0.5, delay: index * 0.1 }}
</Grid> viewport={{ once: true }}
))} whileHover={{ y: -5 }}
</Grid> >
<Card
<Box mt={6} display="flex" justifyContent="center"> sx={{
<Button borderRadius: 2,
variant="outlined" overflow: "hidden",
sx={{ bgcolor: "#fff",
borderRadius: "30px", maxWidth: 320,
borderColor: "#00FFD1", height: "100%",
color: "#00FFD1", display: "flex",
px: 4, flexDirection: "column",
py: 1.5, boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
fontWeight: "bold", transition: "all 0.3s ease",
"&:hover": { "&:hover": {
backgroundColor: "#00FFD1", boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
color: "#000", },
}, }}
}} >
> <Box
VIEW FULL PORTFOLIO → sx={{
</Button> height: 180,
</Box> display: "flex",
</Box> alignItems: "center",
); justifyContent: "center",
}; bgcolor: "#f8f9fa",
overflow: "hidden",
export default OurWorks; }}
>
<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;

554
src/components/services/services.tsx
View File

@ -1,238 +1,316 @@
import { import {
Box, Box,
Card, Card,
CardContent, CardContent,
CardMedia, CardMedia,
Typography, Typography,
Container, Container,
useMediaQuery, useMediaQuery,
useTheme, useTheme,
} from "@mui/material"; Grid,
import { motion, AnimatePresence, PanInfo } from "framer-motion"; } from "@mui/material";
import { useState } from "react"; import { motion, AnimatePresence, PanInfo } from "framer-motion";
import serviceImage from "../services/Image Wrapper.png"; import { useState } from "react";
import serviceImage from "../services/Image Wrapper.png";
const services = [
{ const services = [
title: "Design", {
description: title: "Design",
"Lorem ipsum dolor sit amet consectetur. Non aliquam justo hendrerit vitae lacus. Cursus purus dictumst scelerisque vitae ultricies turpis aliquam turpis.", description:
image: `${serviceImage}`, "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: title: "Development",
"Lorem ipsum dolor sit amet consectetur. Non aliquam justo hendrerit vitae lacus. Cursus purus dictumst scelerisque vitae ultricies turpis aliquam turpis.", description:
image: `${serviceImage}`, "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: title: "Marketing",
"Lorem ipsum dolor sit amet consectetur. Non aliquam justo hendrerit vitae lacus. Cursus purus dictumst scelerisque vitae ultricies turpis aliquam turpis.", description:
image: `${serviceImage}`, "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 Services = () => {
const isMobile = useMediaQuery(theme.breakpoints.down("sm")); const theme = useTheme();
const [currentIndex, setCurrentIndex] = useState(0); const isMobile = useMediaQuery(theme.breakpoints.down("md"));
const [currentIndex, setCurrentIndex] = useState(0);
const handleDragEnd = ( const [hoveredCard, setHoveredCard] = useState<number | null>(null);
event: MouseEvent | TouchEvent | PointerEvent,
info: PanInfo const handleDragEnd = (
) => { event: MouseEvent | TouchEvent | PointerEvent,
if (info.offset.x > 50) { info: PanInfo
// Swiped right ) => {
setCurrentIndex((prev) => (prev === 0 ? services.length - 1 : prev - 1)); if (info.offset.x > 50) {
} else if (info.offset.x < -50) { setCurrentIndex((prev) => (prev === 0 ? services.length - 1 : prev - 1));
// Swiped left } else if (info.offset.x < -50) {
setCurrentIndex((prev) => (prev === services.length - 1 ? 0 : prev + 1)); setCurrentIndex((prev) => (prev === services.length - 1 ? 0 : prev + 1));
} }
}; };
return ( return (
<Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 8 }}> <Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 8 }}>
<Container maxWidth="lg"> <Container maxWidth="lg">
<motion.div <motion.div
initial={{ opacity: 0, y: -20 }} initial={{ opacity: 0, y: -20 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
viewport={{ once: true }} viewport={{ once: true, margin: "-100px" }}
> >
<Typography <Typography
variant="h4" variant="h4"
align="center" align="center"
fontWeight="bold" fontWeight="bold"
gutterBottom gutterBottom
> sx={{ mb: 2 }}
Services >
</Typography> Our Services
<Typography variant="subtitle1" align="center" mb={6}> </Typography>
We offer design, development & marketing services <Typography
</Typography> variant="subtitle1"
</motion.div> align="center"
mb={6}
{isMobile ? ( sx={{ maxWidth: 600, mx: "auto" }}
<Box sx={{ position: "relative", height: 400, overflow: "hidden" }}> >
<AnimatePresence initial={false}> Professional solutions tailored to your needs
<motion.div </Typography>
key={currentIndex} </motion.div>
drag="x"
onDragEnd={handleDragEnd} {isMobile ? (
dragConstraints={{ left: 0, right: 0 }} <Box sx={{ position: "relative", height: 380 }}>
initial={{ x: 300, opacity: 0 }} <AnimatePresence initial={false}>
animate={{ x: 0, opacity: 1 }} <motion.div
exit={{ x: -300, opacity: 0 }} key={currentIndex}
transition={{ type: "spring", stiffness: 300, damping: 30 }} drag="x"
style={{ onDragEnd={handleDragEnd}
position: "absolute", dragConstraints={{ left: 0, right: 0 }}
width: "100%", initial={{ x: 300, opacity: 0 }}
padding: "0 16px", animate={{ x: 0, opacity: 1 }}
}} exit={{ x: -300, opacity: 0 }}
> transition={{ type: "spring", stiffness: 300, damping: 30 }}
<Card style={{
sx={{ position: "absolute",
borderRadius: 5, width: "100%",
overflow: "hidden", padding: "0 16px",
height: "100%", }}
bgcolor: "#fff", >
display: "flex", <motion.div
flexDirection: "column", whileHover={{ scale: 1.02 }}
maxWidth: 345, whileTap={{ scale: 0.98 }}
mx: "auto", >
}} <Card
elevation={3} sx={{
> borderRadius: 2,
<Box overflow: "hidden",
sx={{ height: "100%",
height: 200, bgcolor: "#fff",
display: "flex", display: "flex",
alignItems: "center", flexDirection: "column",
justifyContent: "center", maxWidth: 300,
overflow: "hidden", mx: "auto",
}} boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
> }}
<CardMedia >
component="img" <Box
image={services[currentIndex].image} sx={{
alt={services[currentIndex].title} width: "100%",
sx={{ height: 150,
objectFit: "contain", display: "flex",
width: "100%", alignItems: "center",
height: "100%", justifyContent: "center",
}} bgcolor: "#f8f9fa",
/> overflow: "hidden",
</Box> }}
<CardContent sx={{ flexGrow: 1 }}> >
<Typography <motion.div
variant="h6" animate={{
fontWeight="bold" scale: hoveredCard === currentIndex ? 1.05 : 1,
gutterBottom y: hoveredCard === currentIndex ? -5 : 0,
color="black" }}
> transition={{ duration: 0.3 }}
{services[currentIndex].title} style={{ width: "100%" }}
</Typography> >
<Typography variant="body2" color="black"> <CardMedia
{services[currentIndex].description} component="img"
</Typography> image={services[currentIndex].image}
</CardContent> alt={services[currentIndex].title}
</Card> sx={{
</motion.div> width: "100%",
</AnimatePresence> height: "auto",
objectFit: "cover",
{/* Dots indicator */} }}
<Box />
sx={{ </motion.div>
display: "flex", </Box>
justifyContent: "center", <CardContent sx={{ flexGrow: 1 }}>
mt: 2, <Typography
gap: 1, variant="h6"
}} fontWeight="bold"
> gutterBottom
{services.map((_, index) => ( color="#000"
<Box >
key={index} {services[currentIndex].title}
onClick={() => setCurrentIndex(index)} </Typography>
sx={{ <Typography variant="body2" color="#000" sx={{ mb: 2 }}>
width: 10, {services[currentIndex].description}
height: 10, </Typography>
borderRadius: "50%", <motion.div
bgcolor: index === currentIndex ? "#00E0FF" : "#ffffff80", whileHover={{ x: 5 }}
cursor: "pointer", transition={{ type: "spring", stiffness: 300 }}
}} >
/> <Typography
))} variant="caption"
</Box> color="primary"
</Box> fontWeight="bold"
) : ( sx={{ cursor: "pointer" }}
<Box >
sx={{ Learn more →
display: "grid", </Typography>
gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", </motion.div>
gap: 4, </CardContent>
}} </Card>
> </motion.div>
{services.map((service, index) => ( </motion.div>
<motion.div </AnimatePresence>
key={index}
whileHover={{ y: -5 }} <Box
transition={{ duration: 0.3 }} sx={{
> display: "flex",
<Card justifyContent: "center",
sx={{ mt: 3,
borderRadius: 5, gap: 1.5,
overflow: "hidden", }}
height: "100%", >
bgcolor: "#fff", {services.map((_, index) => (
display: "flex", <motion.div
flexDirection: "column", key={index}
}} onClick={() => setCurrentIndex(index)}
elevation={3} whileHover={{ scale: 1.2 }}
> whileTap={{ scale: 0.9 }}
<Box >
sx={{ <Box
height: 200, sx={{
display: "flex", width: 10,
alignItems: "center", height: 10,
justifyContent: "center", borderRadius: "50%",
overflow: "hidden", bgcolor: index === currentIndex ? "#00E0FF" : "#ffffff80",
}} cursor: "pointer",
> }}
<motion.div whileHover={{ scale: 1.05 }}> />
<CardMedia </motion.div>
component="img" ))}
image={service.image} </Box>
alt={service.title} </Box>
sx={{ ) : (
objectFit: "contain", <Grid container spacing={3} justifyContent="center">
width: "100%", {services.map((service, index) => (
height: "100%", <Grid
}} item
/> xs={12}
</motion.div> sm={6}
</Box> md={4}
<CardContent sx={{ flexGrow: 1 }}> key={index}
<Typography sx={{ display: "flex", justifyContent: "center" }}
variant="h6" >
fontWeight="bold" <motion.div
gutterBottom initial={{ opacity: 0, y: 50 }}
color="black" whileInView={{ opacity: 1, y: 0 }}
> transition={{ duration: 0.5, delay: index * 0.1 }}
{service.title} viewport={{ once: true, margin: "-100px" }}
</Typography> onHoverStart={() => setHoveredCard(index)}
<Typography variant="body2" color="black"> onHoverEnd={() => setHoveredCard(null)}
{service.description} style={{ width: "100%", maxWidth: 280 }}
</Typography> >
</CardContent> <motion.div
</Card> whileHover={{
</motion.div> y: -8,
))} boxShadow: "0 15px 30px -5px rgba(0, 0, 0, 0.2)",
</Box> }}
)} transition={{ type: "spring", stiffness: 400, damping: 10 }}
</Container> style={{ height: "100%" }}
</Box> >
); <Card
}; sx={{
borderRadius: 2,
export default Services; 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;

450
src/components/testomonials/testomonias.tsx
View File

@ -1,100 +1,350 @@
import { import {
Avatar, Avatar,
Box, Box,
Card, Card,
CardContent, CardContent,
Grid, Typography,
Typography, IconButton,
} from "@mui/material"; } from "@mui/material";
import testimonialImg from "../testomonials/b7bef0298c881712fbc6437106d2aaef27c4fad8.jpg"; import { motion, AnimatePresence, useAnimation, Variants } from "framer-motion";
import { useEffect, useState } from "react";
const testimonials = [ import { KeyboardArrowLeft, KeyboardArrowRight } from "@mui/icons-material";
{ import testimonialImg from "../testomonials/b7bef0298c881712fbc6437106d2aaef27c4fad8.jpg";
name: "Name",
role: "Role", const testimonials = [
company: "Company Name & Logo", {
feedback: name: "Sarah Johnson",
"Lorem ipsum dolor sit amet consectetur. Vitae dictum quam senectus posuere sit justo est turpis interdum. Ut vitae platea et adipiscing nisl.", role: "Marketing Director",
rating: 5, company: "Tech Innovations Inc.",
}, feedback: "Working with this team transformed our digital presence.",
{ rating: 5,
name: "John Dae", },
role: "Sr Manager", {
company: "Wells Fargo", name: "Michael Chen",
feedback: role: "Sr. Manager",
"Lorem ipsum dolor sit amet consectetur. Vitae dictum quam senectus posuere sit justo est turpis interdum. Ut vitae platea et adipiscing nisl.", company: "Wells Fargo",
rating: 5, feedback: "Exceptional service from start to finish.",
}, rating: 5,
{ },
name: "Name", {
role: "Role", name: "Emily Rodriguez",
company: "Company Name & Logo", role: "Product Owner",
feedback: company: "Nexus Enterprises",
"Lorem ipsum dolor sit amet consectetur. Vitae dictum quam senectus posuere sit justo est turpis interdum. Ut vitae platea et adipiscing nisl.", feedback: "The team's technical expertise was outstanding.",
rating: 4, rating: 4,
}, },
]; ];
const Testimonials = () => { // Properly typed animation variants
return ( const containerVariants: Variants = {
<Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 10, px: 3 }}> hidden: { opacity: 0 },
<Box textAlign="center" mb={6}> visible: {
<Typography variant="h4" fontWeight="bold" gutterBottom> opacity: 1,
Testimonials transition: {
</Typography> staggerChildren: 0.2,
<Typography variant="subtitle1"> duration: 0.8,
Don’t just take our word for it -- hear directly from our clients },
</Typography> },
</Box> };
<Grid container spacing={4} justifyContent="center"> const itemVariants: Variants = {
{testimonials.map((t, idx) => ( hidden: { y: 50, opacity: 0 },
<Grid item xs={12} sm={6} md={4} key={idx}> visible: {
<Card y: 0,
sx={{ opacity: 1,
borderRadius: 3, transition: {
maxWidth: 320, duration: 0.6,
margin: "0 auto", ease: "easeOut", // Using string literal instead of array
textAlign: "center", },
py: 3, },
}} hover: {
> y: -10,
<Avatar transition: { duration: 0.3 },
src={testimonialImg} },
alt={t.name} };
sx={{ width: 100, height: 100, margin: "0 auto", mb: 2 }}
/> const Testimonials = () => {
<CardContent> const [currentIndex, setCurrentIndex] = useState(0);
<Typography variant="subtitle1" fontWeight="bold"> const [isMobile, setIsMobile] = useState(false);
{t.name} ,{" "} const controls = useAnimation();
<span style={{ fontWeight: "normal" }}>{t.role}</span>
</Typography> useEffect(() => {
<Typography variant="body2" color="text.secondary" mb={1}> const handleResize = () => {
{t.company} setIsMobile(window.innerWidth < 600);
</Typography> };
<Typography variant="body2" color="text.secondary" mb={2}> handleResize();
{t.feedback} window.addEventListener("resize", handleResize);
</Typography> return () => window.removeEventListener("resize", handleResize);
<Box> }, []);
{Array.from({ length: 5 }).map((_, i) => (
<span useEffect(() => {
key={i} if (!isMobile) return;
style={{
color: i < t.rating ? "#00FFD1" : "#ccc", const timer = setInterval(() => {
fontSize: "1.2rem", handleNext();
}} }, 5000);
>
★ return () => clearInterval(timer);
</span> }, [currentIndex, isMobile]);
))}
</Box> const handleNext = () => {
</CardContent> controls
</Card> .start({
</Grid> x: "-100%",
))} opacity: 0,
</Grid> transition: { duration: 0.3 },
</Box> })
); .then(() => {
}; setCurrentIndex((prev) => (prev + 1) % testimonials.length);
controls
export default Testimonials; .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;

26
src/index.css
View File

@ -1,13 +1,13 @@
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace; monospace;
} }

30
src/index.tsx
View File

@ -1,15 +1,15 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import App from './App'; import App from './App';
import { CssBaseline, ThemeProvider } from '@mui/material'; import { CssBaseline, ThemeProvider } from '@mui/material';
import theme from './theme'; import theme from './theme';
const root = ReactDOM.createRoot(document.getElementById('root')!); const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<CssBaseline /> <CssBaseline />
<App /> <App />
</ThemeProvider> </ThemeProvider>
</React.StrictMode> </React.StrictMode>
); );

2
src/react-app-env.d.ts vendored
View File

@ -1 +1 @@
/// <reference types="react-scripts" /> /// <reference types="react-scripts" />

30
src/reportWebVitals.ts
View File

@ -1,15 +1,15 @@
import { ReportHandler } from 'web-vitals'; import { ReportHandler } from 'web-vitals';
const reportWebVitals = (onPerfEntry?: ReportHandler) => { const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (onPerfEntry && onPerfEntry instanceof Function) { if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry); getCLS(onPerfEntry);
getFID(onPerfEntry); getFID(onPerfEntry);
getFCP(onPerfEntry); getFCP(onPerfEntry);
getLCP(onPerfEntry); getLCP(onPerfEntry);
getTTFB(onPerfEntry); getTTFB(onPerfEntry);
}); });
} }
}; };
export default reportWebVitals; export default reportWebVitals;

110
src/routes.tsx
View File

@ -1,56 +1,56 @@
import { createBrowserRouter, Navigate } from "react-router-dom"; import { createBrowserRouter, Navigate } from "react-router-dom";
import Layout from "./components/Layout"; import Layout from "./components/Layout";
import LandingPage from "./components/landingpage/landingpage"; import LandingPage from "./components/landingpage/landingpage";
import { LandingBase } from "./components/landingpage/landingpagebase"; import { LandingBase } from "./components/landingpage/landingpagebase";
import { MottoBase } from "./components/mottopage/mottobase"; import { MottoBase } from "./components/mottopage/mottobase";
import MottoSection from "./components/mottopage/MottoSection"; import MottoSection from "./components/mottopage/MottoSection";
import AboutUsPage from "./components/aboutus"; import AboutUsPage from "./components/aboutus";
const router = createBrowserRouter([ const router = createBrowserRouter([
{ {
path: '', path: '',
element: <Layout />, element: <Layout />,
children: [ children: [
{ {
index: true, index: true,
element: <Navigate to='home' />, element: <Navigate to='home' />,
}, },
{ {
path: 'home', path: 'home',
element: <LandingBase />, element: <LandingBase />,
children: [ children: [
{ {
index: true, index: true,
element: <LandingPage />, element: <LandingPage />,
}, },
], ],
}, },
{ {
path: 'aboutUs', path: 'aboutUs',
element: <LandingBase />, element: <LandingBase />,
children: [ children: [
{ {
index: true, index: true,
element: <AboutUsPage />, element: <AboutUsPage />,
}, },
], ],
}, },
{ {
path: 'motto', path: 'motto',
element: <MottoBase />, element: <MottoBase />,
children: [ children: [
{ {
index: true, index: true,
element: <MottoSection />, element: <MottoSection />,
}, },
], ],
} }
] ]
}, },
]); ]);
export default router; export default router;

10
src/setupTests.ts
View File

@ -1,5 +1,5 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes. // jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like: // allows you to do things like:
// expect(element).toHaveTextContent(/react/i) // expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom // learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom'; import '@testing-library/jest-dom';

38
src/theme.ts
View File

@ -1,19 +1,19 @@
import { createTheme } from '@mui/material/styles'; import { createTheme } from '@mui/material/styles';
const theme = createTheme({ const theme = createTheme({
palette: { palette: {
mode: 'dark', mode: 'dark',
primary: { primary: {
main: '#00E0FF', main: '#00E0FF',
}, },
background: { background: {
default: '#0F111A', default: '#0F111A',
paper: '#1B1E2E', paper: '#1B1E2E',
}, },
}, },
typography: { typography: {
fontFamily: 'Inter, sans-serif', fontFamily: 'Inter, sans-serif',
}, },
}); });
export default theme; export default theme;

52
tsconfig.json
View File

@ -1,26 +1,26 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "es5",
"lib": [ "lib": [
"dom", "dom",
"dom.iterable", "dom.iterable",
"esnext" "esnext"
], ],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
"esModuleInterop": true, "esModuleInterop": true,
"allowSyntheticDefaultImports": true, "allowSyntheticDefaultImports": true,
"strict": true, "strict": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true, "noFallthroughCasesInSwitch": true,
"module": "esnext", "module": "esnext",
"moduleResolution": "node", "moduleResolution": "node",
"resolveJsonModule": true, "resolveJsonModule": true,
"isolatedModules": true, "isolatedModules": true,
"noEmit": true, "noEmit": true,
"jsx": "react-jsx" "jsx": "react-jsx"
}, },
"include": [ "include": [
"src" "src"
] ]
} }

26118
yarn.lock
View File

File diff suppressed because it is too large Load Diff