fix/landing_page #7
100
.drone.yml
100
.drone.yml
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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*
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
nodeLinker: node-modules
|
nodeLinker: node-modules
|
||||||
|
|
|
||||||
62
Dockerfile
62
Dockerfile
|
|
@ -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
92
README.md
|
|
@ -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
125
package.json
|
|
@ -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"
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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
76
src/App.css
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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
48
src/App.tsx
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 311 B |
Binary file not shown.
|
After Width: | Height: | Size: 195 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 422 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 619 B |
Binary file not shown.
|
After Width: | Height: | Size: 626 B |
Binary file not shown.
|
After Width: | Height: | Size: 472 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1017 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 549 B |
Binary file not shown.
|
After Width: | Height: | Size: 580 B |
Binary file not shown.
|
After Width: | Height: | Size: 238 B |
Binary file not shown.
|
After Width: | Height: | Size: 671 B |
Binary file not shown.
|
After Width: | Height: | Size: 329 B |
Binary file not shown.
|
After Width: | Height: | Size: 336 B |
Binary file not shown.
|
After Width: | Height: | Size: 536 B |
Binary file not shown.
|
After Width: | Height: | Size: 265 B |
Binary file not shown.
|
After Width: | Height: | Size: 265 B |
Binary file not shown.
|
After Width: | Height: | Size: 440 B |
Binary file not shown.
|
After Width: | Height: | Size: 287 B |
Binary file not shown.
|
After Width: | Height: | Size: 287 B |
Binary file not shown.
|
After Width: | Height: | Size: 716 B |
File diff suppressed because it is too large
Load Diff
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
/// <reference types="react-scripts" />
|
/// <reference types="react-scripts" />
|
||||||
|
|
|
||||||
|
|
@ -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
110
src/routes.tsx
|
|
@ -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;
|
||||||
|
|
||||||
|
|
@ -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
38
src/theme.ts
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue