first commit
This commit is contained in:
hardik
commit
bca3be6139
|
|
@ -0,0 +1,23 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
# Getting Started with Create React App
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `yarn start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
|
||||
|
||||
The page will reload if you make edits.\
|
||||
You will also see any lint errors in the console.
|
||||
|
||||
### `yarn test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `yarn build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `yarn eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
|
||||
|
||||
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
|
||||
|
||||
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,62 @@
|
|||
{
|
||||
"name": "edfechfrontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.13.3",
|
||||
"@emotion/styled": "^11.13.0",
|
||||
"@mui/icons-material": "^6.4.1",
|
||||
"@mui/material": "^6.1.2",
|
||||
"@mui/styled-engine-sc": "^6.1.2",
|
||||
"@mui/types": "^7.2.17",
|
||||
"@testing-library/jest-dom": "^5.14.1",
|
||||
"@testing-library/react": "^13.0.0",
|
||||
"@testing-library/user-event": "^13.2.1",
|
||||
"@types/jest": "^27.0.1",
|
||||
"@types/node": "^16.7.13",
|
||||
"@types/react": "^18.3.11",
|
||||
"@types/react-dom": "^18.0.0",
|
||||
"framer-motion": "^12.0.6",
|
||||
"next": "^15.1.6",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-intersection-observer": "^9.15.1",
|
||||
"react-router-dom": "^6.27.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-slick": "^0.30.3",
|
||||
"slick-carousel": "^1.8.1",
|
||||
"styled-components": "^6.1.13",
|
||||
"typed.js": "^2.1.0",
|
||||
"typescript": "^4.4.2",
|
||||
"web-vitals": "^2.1.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react-icons": "^2.2.7",
|
||||
"@types/react-slick": "^0.23.13"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
|
||||
import React from 'react';
|
||||
// import AppRoutes from './routes';
|
||||
import Header from './components/Layout';
|
||||
import { Box } from '@mui/material';
|
||||
import { RouterProvider } from 'react-router-dom';
|
||||
import AnimatedHeader from './components/Layout';
|
||||
import HeroSection from './components/landingpage/landingpagecomponents/CarouselSection';
|
||||
import WhoWeAre from './components/landingpage/landingpagecomponents/whoweare';
|
||||
import OurExpertise from './components/landingpage/landingpagecomponents/ourexperties';
|
||||
import ContactForm from './components/landingpage/landingpagecomponents/contactus';
|
||||
import TopBrands from './components/landingpage/landingpagecomponents/brands';
|
||||
import ScrollAnimationSection from './components/landingpage/landingpagecomponents/scrollanimationsection';
|
||||
import CaseStudies from './components/landingpage/landingpagecomponents/casestudy';
|
||||
import Layout from './components/Layout';
|
||||
// import router from './routes';
|
||||
|
||||
|
||||
const App: React.FC = () => {
|
||||
return (
|
||||
<Layout/>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 MiB |
|
|
@ -0,0 +1,152 @@
|
|||
import { useState } from "react";
|
||||
import { AppBar, Toolbar, IconButton, Box, Typography, Container } from "@mui/material";
|
||||
import { motion } from "framer-motion";
|
||||
import { Outlet } from "react-router-dom";
|
||||
import MenuIcon from "@mui/icons-material/Menu";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import smallone from "../qsmall.png";
|
||||
import big from "../QUDRAEDGELOGOTRANSPARENTBLACKfinal.png";
|
||||
|
||||
export default function Layout() {
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<Box sx={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
|
||||
|
||||
{/* HEADER */}
|
||||
<AppBar position="static" sx={{ background: "transparent", boxShadow: "none", overflow: "hidden", paddingRight: '0px' }}>
|
||||
<Toolbar sx={{ position: "relative", height: "64px", display: "flex", justifyContent: "space-between", alignItems: "center", paddingRight: '0px' }}>
|
||||
|
||||
{/* Expanding Menu Animation (Right to Left) */}
|
||||
<motion.div
|
||||
initial={{ width: "0%", right: 0 }}
|
||||
animate={{ width: menuOpen ? "100%" : "0%" }}
|
||||
transition={{ duration: 0.5 }}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
right: 0,
|
||||
height: "100%",
|
||||
background: "black",
|
||||
zIndex: -1,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{/* Menu Items - Now Horizontal */}
|
||||
{menuOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.2, duration: 0.5 }}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: "40px",
|
||||
color: "white",
|
||||
paddingRight: "90px"
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
|
||||
variant="h6"
|
||||
component="a"
|
||||
href="#"
|
||||
sx={{
|
||||
color:'white',
|
||||
cursor: "pointer",
|
||||
"&:hover": { color: "#f5a623" },
|
||||
whiteSpace: "nowrap"
|
||||
}}
|
||||
>
|
||||
Home
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h6"
|
||||
component="a"
|
||||
href="#"
|
||||
sx={{
|
||||
color:'white',
|
||||
cursor: "pointer",
|
||||
"&:hover": { color: "#f5a623" },
|
||||
whiteSpace: "nowrap"
|
||||
}}
|
||||
>
|
||||
About
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h6"
|
||||
component="a"
|
||||
href="#"
|
||||
sx={{
|
||||
color:'white',
|
||||
cursor: "pointer",
|
||||
"&:hover": { color: "#f5a623" },
|
||||
whiteSpace: "nowrap"
|
||||
}}
|
||||
>
|
||||
Services
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h6"
|
||||
component="a"
|
||||
href="#"
|
||||
sx={{
|
||||
color:'white',
|
||||
cursor: "pointer",
|
||||
"&:hover": { color: "#f5a623" },
|
||||
whiteSpace: "nowrap"
|
||||
}}
|
||||
>
|
||||
Contact
|
||||
</Typography>
|
||||
</motion.div>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
{/* Left Side Logo Animation */}
|
||||
<Box
|
||||
sx={{ position: "relative", width: 50, height: 50, overflow: "hidden" }}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.width = "120px")}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.width = "40px")}
|
||||
>
|
||||
<img src={smallone} alt="Logo" width={50} height={50} />
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
style={{ position: "absolute", top: 0, left: 50 }}
|
||||
>
|
||||
<img src={big} alt="Full Logo" width={100} height={50} />
|
||||
</motion.div>
|
||||
</Box>
|
||||
|
||||
{/* Right Side Menu Button */}
|
||||
<IconButton onClick={() => setMenuOpen(!menuOpen)}>
|
||||
<motion.div animate={{ rotate: menuOpen ? 135 : 0 }} transition={{ duration: 0.5 }}>
|
||||
{menuOpen ? <CloseIcon sx={{ color: "white" }} /> : <MenuIcon />}
|
||||
</motion.div>
|
||||
</IconButton>
|
||||
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
||||
{/* MAIN CONTENT */}
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Outlet />
|
||||
</Box>
|
||||
|
||||
{/* FOOTER */}
|
||||
<Box sx={{ backgroundColor: "black", color: "white", textAlign: "center", padding: "10px 0", marginTop: "auto" }}>
|
||||
<Container>
|
||||
<Typography variant="body2">
|
||||
© {new Date().getFullYear()} QudraEdge. All Rights Reserved.
|
||||
</Typography>
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,607 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { Box, Typography, Container, Grid, Divider, useTheme } from '@mui/material';
|
||||
import { motion, useAnimation } from 'framer-motion';
|
||||
import { useInView } from 'react-intersection-observer';
|
||||
|
||||
// Team member interface
|
||||
interface TeamMember {
|
||||
id: number;
|
||||
name: string;
|
||||
role: string;
|
||||
bio: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
// Stats interface
|
||||
interface StatItem {
|
||||
id: number;
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
// Fallback images from reliable sources
|
||||
const FALLBACK_IMAGES = {
|
||||
heroBg: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80',
|
||||
aboutImg: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80',
|
||||
team: [
|
||||
'https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
|
||||
'https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
|
||||
'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
|
||||
'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80'
|
||||
]
|
||||
};
|
||||
|
||||
const AboutUsPage: React.FC = () => {
|
||||
const theme = useTheme();
|
||||
const controls = useAnimation();
|
||||
const [ref, inView] = useInView({ threshold: 0.1 });
|
||||
|
||||
useEffect(() => {
|
||||
if (inView) {
|
||||
controls.start('visible');
|
||||
}
|
||||
}, [controls, inView]);
|
||||
|
||||
// Team data with fallback images
|
||||
const teamMembers: TeamMember[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Alex Johnson',
|
||||
role: 'CEO & Founder',
|
||||
bio: 'Visionary leader with 15+ years of industry experience driving innovation and growth.',
|
||||
image: FALLBACK_IMAGES.team[0]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Sarah Williams',
|
||||
role: 'CTO',
|
||||
bio: 'Tech enthusiast who transforms complex problems into elegant solutions.',
|
||||
image: FALLBACK_IMAGES.team[1]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Michael Chen',
|
||||
role: 'Lead Designer',
|
||||
bio: 'Creativity meets functionality in every pixel Michael touches.',
|
||||
image: FALLBACK_IMAGES.team[2]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Emily Rodriguez',
|
||||
role: 'Marketing Director',
|
||||
bio: 'Storyteller who connects brands with their perfect audiences.',
|
||||
image: FALLBACK_IMAGES.team[3]
|
||||
}
|
||||
];
|
||||
|
||||
// Stats data
|
||||
const stats: StatItem[] = [
|
||||
{ id: 1, value: '10+', label: 'Years Experience' },
|
||||
{ id: 2, value: '200+', label: 'Clients Worldwide' },
|
||||
{ id: 3, value: '50+', label: 'Awards Won' },
|
||||
{ id: 4, value: '99%', label: 'Client Satisfaction' }
|
||||
];
|
||||
|
||||
// Animation variants
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.2
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { y: 20, opacity: 0 },
|
||||
visible: {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
transition: {
|
||||
duration: 0.6
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const fadeInVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
duration: 1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const scaleVariants = {
|
||||
hidden: { scale: 0.9, opacity: 0 },
|
||||
visible: {
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
transition: {
|
||||
duration: 0.5
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
backgroundColor: '#ffffff',
|
||||
color: '#1a1a1a',
|
||||
'& .accent-brown': {
|
||||
color: '#8B4513' // Classic brown
|
||||
},
|
||||
'& .accent-yellow': {
|
||||
color: '#FFD700' // Gold yellow
|
||||
}
|
||||
}}>
|
||||
{/* Hero Section */}
|
||||
<Box
|
||||
sx={{
|
||||
height: '80vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
bgcolor: 'black',
|
||||
color: 'white'
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 0.7 }}
|
||||
transition={{ duration: 1.5 }}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
background: 'linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7))',
|
||||
zIndex: 1
|
||||
}}
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ scale: 1.2 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 3 }}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
backgroundImage: `url(${FALLBACK_IMAGES.heroBg})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center'
|
||||
}}
|
||||
/>
|
||||
<Container maxWidth="lg" sx={{ position: 'relative', zIndex: 2 }}>
|
||||
<motion.div
|
||||
initial={{ y: -50, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Typography
|
||||
variant="h1"
|
||||
component="h1"
|
||||
sx={{
|
||||
fontSize: { xs: '3rem', md: '4.5rem' },
|
||||
fontWeight: 700,
|
||||
textAlign: 'center',
|
||||
mb: 2,
|
||||
textTransform: 'uppercase',
|
||||
'& span': {
|
||||
color: '#FFD700' // Yellow accent
|
||||
}
|
||||
}}
|
||||
>
|
||||
Our <span>Story</span>
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h5"
|
||||
component="p"
|
||||
sx={{
|
||||
maxWidth: '800px',
|
||||
mx: 'auto',
|
||||
textAlign: 'center',
|
||||
fontWeight: 300,
|
||||
letterSpacing: '1px'
|
||||
}}
|
||||
>
|
||||
Pioneering excellence since 2010. We blend innovation with passion to create
|
||||
extraordinary digital experiences.
|
||||
</Typography>
|
||||
</motion.div>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* About Section */}
|
||||
<Container maxWidth="lg" sx={{ py: 10 }}>
|
||||
<Grid container spacing={6} alignItems="center">
|
||||
<Grid item xs={12} md={6}>
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={containerVariants}
|
||||
>
|
||||
<motion.div variants={itemVariants}>
|
||||
<Typography
|
||||
variant="h3"
|
||||
component="h2"
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
mb: 3,
|
||||
position: 'relative',
|
||||
'&:after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
bottom: -10,
|
||||
left: 0,
|
||||
width: '80px',
|
||||
height: '4px',
|
||||
backgroundColor: '#8B4513' // Brown accent
|
||||
}
|
||||
}}
|
||||
>
|
||||
Who We Are
|
||||
</Typography>
|
||||
</motion.div>
|
||||
<motion.div variants={itemVariants}>
|
||||
<Typography variant="body1" sx={{ mb: 3, fontSize: '1.1rem', lineHeight: 1.8 }}>
|
||||
Founded in 2010, we are a passionate team of designers, developers, and strategists
|
||||
dedicated to pushing the boundaries of digital innovation. Our <span className="accent-brown">black and white</span>
|
||||
philosophy reflects our commitment to clarity, simplicity, and timeless design.
|
||||
</Typography>
|
||||
</motion.div>
|
||||
<motion.div variants={itemVariants}>
|
||||
<Typography variant="body1" sx={{ mb: 3, fontSize: '1.1rem', lineHeight: 1.8 }}>
|
||||
We believe in the power of contrast - where bold ideas meet meticulous execution.
|
||||
Our <span className="accent-yellow">monochromatic approach</span> isn't just aesthetic; it's a metaphor for how we
|
||||
distill complex problems into elegant solutions.
|
||||
</Typography>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<motion.div
|
||||
initial={{ x: 100, opacity: 0 }}
|
||||
whileInView={{ x: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
style={{ overflow: 'hidden', borderRadius: '8px' }}
|
||||
>
|
||||
<Box
|
||||
component="img"
|
||||
src={FALLBACK_IMAGES.aboutImg}
|
||||
alt="Our team"
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: 'auto',
|
||||
objectFit: 'cover',
|
||||
filter: 'grayscale(100%) contrast(120%)',
|
||||
transition: 'filter 0.5s ease',
|
||||
'&:hover': {
|
||||
filter: 'grayscale(50%) contrast(110%) sepia(30%)'
|
||||
}
|
||||
}}
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.src = FALLBACK_IMAGES.aboutImg;
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
|
||||
{/* Stats Section */}
|
||||
<Box sx={{
|
||||
py: 10,
|
||||
backgroundColor: '#f5f5f5',
|
||||
'& .stat-item': {
|
||||
borderRight: '1px solid #8B4513',
|
||||
'&:last-child': {
|
||||
borderRight: 'none'
|
||||
},
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
borderRight: 'none',
|
||||
borderBottom: '1px solid #8B4513',
|
||||
paddingBottom: '20px',
|
||||
marginBottom: '20px',
|
||||
'&:last-child': {
|
||||
borderBottom: 'none',
|
||||
marginBottom: 0,
|
||||
paddingBottom: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}}>
|
||||
<Container maxWidth="lg">
|
||||
<motion.div
|
||||
ref={ref}
|
||||
initial="hidden"
|
||||
animate={controls}
|
||||
variants={containerVariants}
|
||||
>
|
||||
<Grid container spacing={4}>
|
||||
{stats.map((stat) => (
|
||||
<Grid item xs={6} sm={3} key={stat.id} className="stat-item">
|
||||
<motion.div variants={itemVariants}>
|
||||
<Box sx={{ textAlign: 'center' }}>
|
||||
<Typography
|
||||
variant="h2"
|
||||
component="div"
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
mb: 1,
|
||||
color: '#8B4513', // Brown
|
||||
fontSize: { xs: '2.5rem', sm: '3rem' }
|
||||
}}
|
||||
>
|
||||
{stat.value}
|
||||
</Typography>
|
||||
<Typography variant="h6" sx={{ fontWeight: 500 }}>
|
||||
{stat.label}
|
||||
</Typography>
|
||||
</Box>
|
||||
</motion.div>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</motion.div>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* Team Section */}
|
||||
<Container maxWidth="lg" sx={{ py: 10 }}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Typography
|
||||
variant="h3"
|
||||
component="h2"
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
mb: 6,
|
||||
textAlign: 'center',
|
||||
position: 'relative',
|
||||
'&:after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
bottom: -10,
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
width: '80px',
|
||||
height: '4px',
|
||||
backgroundColor: '#8B4513' // Brown
|
||||
}
|
||||
}}
|
||||
>
|
||||
Meet The <span className="accent-yellow">Team</span>
|
||||
</Typography>
|
||||
</motion.div>
|
||||
|
||||
<Grid container spacing={6}>
|
||||
{teamMembers.map((member, index) => (
|
||||
<Grid item xs={12} sm={6} md={3} key={member.id}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
whileHover={{ y: -10 }}
|
||||
style={{ height: '100%' }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
textAlign: 'center',
|
||||
p: 3,
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 4px 20px rgba(0,0,0,0.1)',
|
||||
transition: 'all 0.3s ease',
|
||||
backgroundColor: '#ffffff',
|
||||
border: '1px solid #e0e0e0',
|
||||
'&:hover': {
|
||||
boxShadow: '0 8px 30px rgba(0,0,0,0.15)',
|
||||
transform: 'translateY(-5px)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
component="img"
|
||||
src={member.image}
|
||||
alt={member.name}
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.src = FALLBACK_IMAGES.team[index];
|
||||
}}
|
||||
sx={{
|
||||
width: '150px',
|
||||
height: '150px',
|
||||
borderRadius: '50%',
|
||||
objectFit: 'cover',
|
||||
mb: 3,
|
||||
filter: 'grayscale(100%)',
|
||||
transition: 'filter 0.5s ease',
|
||||
border: '3px solid #8B4513',
|
||||
'&:hover': {
|
||||
filter: 'grayscale(0%)'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Typography variant="h5" sx={{ fontWeight: 600, mb: 1 }}>
|
||||
{member.name}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="subtitle1"
|
||||
sx={{
|
||||
color: '#FFD700', // Yellow
|
||||
mb: 2,
|
||||
fontWeight: 500
|
||||
}}
|
||||
>
|
||||
{member.role}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ mb: 2, color: '#555555' }}>
|
||||
{member.bio}
|
||||
</Typography>
|
||||
</Box>
|
||||
</motion.div>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
|
||||
{/* Mission Section */}
|
||||
<Box sx={{
|
||||
py: 10,
|
||||
backgroundColor: '#1a1a1a',
|
||||
color: '#ffffff'
|
||||
}}>
|
||||
<Container maxWidth="lg">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
variants={containerVariants}
|
||||
>
|
||||
<motion.div variants={itemVariants}>
|
||||
<Typography
|
||||
variant="h3"
|
||||
component="h2"
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
mb: 6,
|
||||
textAlign: 'center',
|
||||
position: 'relative',
|
||||
'&:after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
bottom: -10,
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
width: '80px',
|
||||
height: '4px',
|
||||
backgroundColor: '#FFD700' // Yellow
|
||||
}
|
||||
}}
|
||||
>
|
||||
Our <span className="accent-yellow">Mission</span>
|
||||
</Typography>
|
||||
</motion.div>
|
||||
<Grid container spacing={6}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<motion.div variants={fadeInVariants}>
|
||||
<Box
|
||||
sx={{
|
||||
p: 4,
|
||||
borderLeft: `4px solid #FFD700`,
|
||||
backgroundColor: '#2a2a2a',
|
||||
boxShadow: '0 4px 20px rgba(0,0,0,0.3)',
|
||||
height: '100%'
|
||||
}}
|
||||
>
|
||||
<Typography variant="h5" sx={{ fontWeight: 600, mb: 2, color: '#FFD700' }}>
|
||||
Vision
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ lineHeight: 1.8 }}>
|
||||
To redefine digital experiences through innovative solutions that stand the
|
||||
test of time. We envision a world where technology enhances human connection
|
||||
without unnecessary complexity.
|
||||
</Typography>
|
||||
</Box>
|
||||
</motion.div>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<motion.div variants={fadeInVariants}>
|
||||
<Box
|
||||
sx={{
|
||||
p: 4,
|
||||
borderLeft: `4px solid #8B4513`,
|
||||
backgroundColor: '#2a2a2a',
|
||||
boxShadow: '0 4px 20px rgba(0,0,0,0.3)',
|
||||
height: '100%'
|
||||
}}
|
||||
>
|
||||
<Typography variant="h5" sx={{ fontWeight: 600, mb: 2, color: '#8B4513' }}>
|
||||
Values
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ lineHeight: 1.8 }}>
|
||||
Integrity, innovation, and impact guide everything we do. We believe in
|
||||
transparency, pushing boundaries, and creating work that makes a meaningful
|
||||
difference in people's lives.
|
||||
</Typography>
|
||||
</Box>
|
||||
</motion.div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</motion.div>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* CTA Section */}
|
||||
<Container maxWidth="lg" sx={{ py: 10 }}>
|
||||
<motion.div
|
||||
initial={{ scale: 0.95, opacity: 0 }}
|
||||
whileInView={{ scale: 1, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
p: 6,
|
||||
borderRadius: '8px',
|
||||
background: 'linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%)',
|
||||
color: 'white',
|
||||
textAlign: 'center',
|
||||
border: '1px solid #8B4513',
|
||||
boxShadow: '0 8px 30px rgba(139, 69, 19, 0.3)'
|
||||
}}
|
||||
>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, mb: 3 }}>
|
||||
Ready to work with us?
|
||||
</Typography>
|
||||
<Typography variant="h6" sx={{ mb: 4, maxWidth: '700px', mx: 'auto' }}>
|
||||
Let's create something extraordinary together. Our team is ready to bring your vision to
|
||||
life with our signature <span className="accent-yellow">black and white</span> approach.
|
||||
</Typography>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<Box
|
||||
component="button"
|
||||
sx={{
|
||||
px: 6,
|
||||
py: 2,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
backgroundColor: '#FFD700',
|
||||
color: '#1a1a1a',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.3s ease',
|
||||
'&:hover': {
|
||||
backgroundColor: '#ffffff',
|
||||
color: '#1a1a1a'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Get in Touch
|
||||
</Box>
|
||||
</motion.div>
|
||||
</Box>
|
||||
</motion.div>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutUsPage;
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
|
||||
import React from 'react';
|
||||
// import AppRoutes from './routes';
|
||||
// import Header from './components/landingpage/landingpagecomponents/header';
|
||||
import { Box } from '@mui/material';
|
||||
import HeroSection from './landingpagecomponents/CarouselSection';
|
||||
import WhoWeAre from './landingpagecomponents/whoweare';
|
||||
import OurExpertise from './landingpagecomponents/ourexperties';
|
||||
import TopBrands from './landingpagecomponents/brands';
|
||||
import CaseStudies from './landingpagecomponents/casestudy';
|
||||
import StatsSection from './landingpagecomponents/scrollanimationsection';
|
||||
import ContactForm from './landingpagecomponents/contactus';
|
||||
// import router from './routes';
|
||||
|
||||
|
||||
const LandingPage: React.FC = () => {
|
||||
return (
|
||||
<Box>
|
||||
{/* <AnimatedHeader /> */}
|
||||
<HeroSection />
|
||||
<WhoWeAre />
|
||||
<OurExpertise />
|
||||
<TopBrands />
|
||||
<StatsSection/>
|
||||
<CaseStudies/>
|
||||
<ContactForm />
|
||||
|
||||
</Box>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export default LandingPage;
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import React from 'react';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import { Box } from '@mui/material';
|
||||
// import CopyrightFooter from '../../assets/copyright';
|
||||
|
||||
export const LandingBase: React.FC = () => {
|
||||
return (
|
||||
<Box>
|
||||
<Outlet />
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
import React from "react";
|
||||
import { Box, Button, Grid, Typography } from "@mui/material";
|
||||
import background from "../../../image-removebg-preview (21).png";
|
||||
|
||||
const HeroSection: React.FC = () => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: { md: "90vh", xs: "80vh" },
|
||||
backgroundColor: "#f5f5f5",
|
||||
padding: { xs: 3, md: 9 },
|
||||
}}
|
||||
>
|
||||
<Grid
|
||||
container
|
||||
spacing={2}
|
||||
sx={{
|
||||
alignItems: "center",
|
||||
justifyContent: { xs: "center", md: "space-between" },
|
||||
textAlign: { xs: "center", md: "left" },
|
||||
}}
|
||||
>
|
||||
{/* Left Content */}
|
||||
<Grid item xs={12} md={8}>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{ fontSize: { xs: "2rem", md: "3rem" } }}
|
||||
>
|
||||
We Don’t Just Market. We Make You <b>Unstoppable</b>.
|
||||
</Typography>
|
||||
{/* <Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontWeight: 200,
|
||||
fontSize: { xs: "2rem", md: "3rem" },
|
||||
mt: 1,
|
||||
}}
|
||||
>
|
||||
DIGITAL AGENCY
|
||||
</Typography> */}
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
mt: 2,
|
||||
fontSize: { xs: "1rem", md: "1.2rem" },
|
||||
color: "#666",
|
||||
maxWidth: "90%",
|
||||
}}
|
||||
>
|
||||
Cut through the noise with strategies that deliver measurable success. Let’s make it happen.
|
||||
</Typography>
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{
|
||||
mt: 3,
|
||||
borderColor: "black",
|
||||
color: "black",
|
||||
fontSize: "1rem",
|
||||
padding: "10px 20px",
|
||||
borderRadius: "50px",
|
||||
fontWeight: "bold",
|
||||
"&:hover": {
|
||||
borderColor: "black",
|
||||
backgroundColor: "#e0e0e0",
|
||||
},
|
||||
}}
|
||||
>
|
||||
WATCH VIDEO
|
||||
</Button>
|
||||
</Grid>
|
||||
|
||||
{/* Right Image */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
md={4}
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
component="img"
|
||||
src={background}
|
||||
alt="Coffee Cup"
|
||||
sx={{
|
||||
width: { xs: "200px", md: "90%" },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroSection;
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
import React from "react";
|
||||
import { Box, Typography, Grid, Card, CardMedia } from "@mui/material";
|
||||
import brandimage from "../../../brandimage.jpg"
|
||||
|
||||
const brands = [
|
||||
{ name: "Hockey India", img: brandimage },
|
||||
{ name: "J. Hampstead", img: brandimage },
|
||||
{ name: "Tim Hortons", img: brandimage },
|
||||
{ name: "Brand 4", img: brandimage },
|
||||
{ name: "Brand 5", img: brandimage },
|
||||
{ name: "Brand 6", img: brandimage },
|
||||
{ name: "Hockey India", img: brandimage },
|
||||
{ name: "J. Hampstead", img: brandimage },
|
||||
{ name: "Tim Hortons", img: brandimage },
|
||||
|
||||
];
|
||||
|
||||
const TopBrands = () => {
|
||||
return (
|
||||
<Box sx={{ backgroundColor: "#16110f", py: 6, textAlign: "center" }}>
|
||||
<Typography variant="h4" sx={{ color: "white", display: "inline-block", pb: 1 }}>
|
||||
TOP <span style={{ fontWeight: "bold" }}>BRANDS</span>
|
||||
</Typography>
|
||||
<Typography sx={{ color: "#A0A0A0", maxWidth: "1200px", mx: "auto", mt: 2, lineHeight: 1.9 }}>
|
||||
Here's a look at the clients we've worked with. If you'd like to work with the
|
||||
best digital agency too, we'd love to hear from you. Drop us a line and we'll
|
||||
look forward to brewing something fresh for you!
|
||||
</Typography>
|
||||
<Grid container spacing={2} justifyContent="center" sx={{ mt: 9 }}>
|
||||
{brands.map((brand, index) => (
|
||||
<Grid item xs={12} sm={6} md={4} key={index}>
|
||||
<Card sx={{ backgroundColor: "#EAEAEA", p: 2, display: "flex", justifyContent: "center", maxWidth: "320px", mx: "auto" }}>
|
||||
<CardMedia
|
||||
component="img"
|
||||
src={brand.img}
|
||||
alt={brand.name}
|
||||
sx={{ maxWidth: "100%", objectFit: "contain" }}
|
||||
/>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default TopBrands;
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
import React, { useState } from "react";
|
||||
import { Box, Card, Grid, Typography, Button } from "@mui/material";
|
||||
import background from "../../../dark-background.jpg";
|
||||
|
||||
const CaseStudies: React.FC = () => {
|
||||
return (
|
||||
<Box sx={{ px: 5, py: 3, height: "900px", marginTop: 20 }}>
|
||||
<Grid container spacing={5} justifyContent="center">
|
||||
{/* First Card */}
|
||||
<Grid item xs={12} md={5.5}>
|
||||
<HoverCard
|
||||
title="It All Starts At Kaziranga University"
|
||||
description="Kaziranga University, A Prestigious Educational..."
|
||||
image={background}
|
||||
/>
|
||||
{/* Bottom Section */}
|
||||
<Box textAlign="left" mt={4}>
|
||||
<Typography variant="body1">
|
||||
Check out more digital marketing case studies
|
||||
</Typography>
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{ mt: 2, borderRadius: "50px", px: 4, py: 1 }}
|
||||
>
|
||||
VIEW MORE
|
||||
</Button>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* Second Card with Heading */}
|
||||
<Grid item xs={12} md={5.5}>
|
||||
<Typography variant="h4" fontWeight="bold" sx={{ mb: 3, mt: 4 }}>
|
||||
CASE <span style={{ fontWeight: "normal" }}>STUDIES</span>
|
||||
</Typography>
|
||||
<HoverCard
|
||||
title="Instagram AR Filter"
|
||||
description="We Came Up With A Unique AR Filter On..."
|
||||
image={background}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const HoverCard: React.FC<{ title: string; description: string; image: string }> = ({
|
||||
title,
|
||||
description,
|
||||
image,
|
||||
}) => {
|
||||
const [hover, setHover] = useState(false);
|
||||
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
position: "relative",
|
||||
borderRadius: 2,
|
||||
overflow: "hidden",
|
||||
boxShadow: 3,
|
||||
height: "90vh",
|
||||
width: "30vw",
|
||||
cursor: "pointer",
|
||||
transition: "0.5s",
|
||||
}}
|
||||
onMouseEnter={() => setHover(true)}
|
||||
onMouseLeave={() => setHover(false)}
|
||||
>
|
||||
<Box
|
||||
component="img"
|
||||
src={image}
|
||||
alt={title}
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "cover",
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
transition: "0.5s",
|
||||
filter: hover ? "brightness(0.5)" : "brightness(1)",
|
||||
}}
|
||||
/>
|
||||
{hover && (
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
width: "100%",
|
||||
background: "rgba(0, 0, 0, 0.6)",
|
||||
color: "white",
|
||||
p: 3,
|
||||
opacity: hover ? 1 : 0,
|
||||
transition: "opacity 0.3s ease-in-out",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" fontWeight="bold">
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography variant="body2">{description}</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default CaseStudies;
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { TextField, Button, Box, Typography, Grid, InputAdornment, IconButton } from "@mui/material";
|
||||
import { Person, Phone, Email, Chat, Facebook, Twitter, LinkedIn, Instagram } from "@mui/icons-material";
|
||||
|
||||
const changingTexts = ["Strategy", "Innovation", "Growth", "Transformation", "Impact"];
|
||||
|
||||
const ContactForm: React.FC = () => {
|
||||
const [currentText, setCurrentText] = useState<string>(changingTexts[0]);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentText((prevText) => {
|
||||
const currentIndex = changingTexts.indexOf(prevText);
|
||||
return changingTexts[(currentIndex + 1) % changingTexts.length];
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Box sx={{ minHeight: "100vh", width: "100%", display: "flex", alignItems: "center", justifyContent: "center", bgcolor: "#16110f", color: "white", p: 4 }}>
|
||||
<Grid container spacing={4} alignItems="center" justifyContent="space-between">
|
||||
|
||||
{/* Left Side */}
|
||||
<Grid item xs={12} md={5}>
|
||||
<Typography variant="h1" fontWeight="bold">Let's Talk</Typography>
|
||||
<Typography variant="h1" fontWeight="bold" color="orange" sx={{ transition: "all 0.5s ease-in-out" }}>
|
||||
{currentText}
|
||||
</Typography>
|
||||
<Typography variant="h6" mt={2}>
|
||||
Let's discuss your project at <span style={{ color: "orange" }}>ideas@digitallatte.in</span>
|
||||
</Typography>
|
||||
|
||||
{/* Social Media Icons */}
|
||||
<Box sx={{ display: "flex", gap: 2, mt: 3 }}>
|
||||
<IconButton sx={{ color: "white" }}><Facebook /></IconButton>
|
||||
<IconButton sx={{ color: "white" }}><Twitter /></IconButton>
|
||||
<IconButton sx={{ color: "white" }}><LinkedIn /></IconButton>
|
||||
<IconButton sx={{ color: "white" }}><Instagram /></IconButton>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* Right Side - Contact Form */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<Box component="form" sx={{ bgcolor: "#16110f", p: 4, borderRadius: 2 }}>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
variant="standard"
|
||||
placeholder="Name*"
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<Person sx={{ color: "orange" }} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
sx={{ mb: 4, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }}
|
||||
/>
|
||||
|
||||
<Box sx={{ display: "flex", gap: 2, alignItems: "center" }}>
|
||||
<TextField
|
||||
sx={{ flex: 1, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }}
|
||||
variant="standard"
|
||||
placeholder="Contact*"
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<Phone sx={{ color: "orange" }} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
sx={{ flex: 1, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }}
|
||||
variant="standard"
|
||||
placeholder="Email*"
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<Email sx={{ color: "orange" }} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
variant="standard"
|
||||
placeholder="Message*"
|
||||
multiline
|
||||
rows={4}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<Chat sx={{ color: "orange" }} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
sx={{ mb: 3, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }}
|
||||
/>
|
||||
|
||||
<Button variant="contained" sx={{ bgcolor: "orange", color: "black", fontWeight: "bold", borderRadius: "20px", py: 1.5 }}>
|
||||
SEND MESSAGE
|
||||
</Button>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactForm;
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { Box, Grid, Typography } from "@mui/material";
|
||||
import { Computer, Brush, Code } from "@mui/icons-material"; // Import relevant icons
|
||||
|
||||
const expertiseCategories = ["DIGITAL", "DESIGN", "DEVELOPMENT"];
|
||||
|
||||
const OurExpertise: React.FC = () => {
|
||||
const [currentText, setCurrentText] = useState(expertiseCategories[0]);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentText((prevText) => {
|
||||
const currentIndex = expertiseCategories.indexOf(prevText);
|
||||
const nextIndex = (currentIndex + 1) % expertiseCategories.length;
|
||||
return expertiseCategories[nextIndex];
|
||||
});
|
||||
}, 2000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: "#ffffff",
|
||||
color: "#000000",
|
||||
minHeight: "100vh",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: "60px 20px",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h3" fontWeight={700} gutterBottom sx={{ color: "#333" }}>
|
||||
OUR <span style={{ fontWeight: 300 }}>EXPERTISE</span>
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ color: "#666", textAlign: "center", marginBottom: 3, maxWidth: "800px" }}>
|
||||
We combine data insights with design thinking to build strategies and experiences that transform businesses.
|
||||
</Typography>
|
||||
<Typography variant="h4" fontWeight={700} sx={{ marginBottom: 5, textTransform: "uppercase", color: "#555", fontSize: "3rem" }}>
|
||||
{currentText}
|
||||
</Typography>
|
||||
<Grid container justifyContent="center" sx={{ maxWidth: "1000px", margin: "0 auto" }}>
|
||||
{[
|
||||
{
|
||||
title: "Content Marketing",
|
||||
icon: <Computer sx={{ fontSize: 50, color: "#F7931E" }} />, // Digital icon
|
||||
bgColor: "#16110f",
|
||||
items: [
|
||||
"Blog & article writing",
|
||||
"Website copy & landing pages",
|
||||
"Video content & infographics",
|
||||
"Email & newsletter marketing",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Web Design & Development",
|
||||
icon: <Brush sx={{ fontSize: 50, color: "#F7931E" }} />, // Design icon
|
||||
bgColor: "#49332a",
|
||||
items: [
|
||||
"Custom website design",
|
||||
"WordPress & eCommerce development",
|
||||
"Speed optimization & mobile-first design",
|
||||
"UX/UI improvements",
|
||||
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "DEVELOPMENT",
|
||||
icon: <Code sx={{ fontSize: 50, color: "#F7931E" }} />, // Development icon
|
||||
bgColor: "#16110f",
|
||||
items: [
|
||||
"Website & Microsite Development",
|
||||
"Mobile Apps & Websites",
|
||||
"Content Management Systems (CMS)",
|
||||
"Website Maintenance & Security",
|
||||
"Ecommerce Solutions",
|
||||
"Digital Strategy Consulting",
|
||||
"Video Content Creation",
|
||||
],
|
||||
},
|
||||
].map((category, index) => (
|
||||
<Grid item xs={12} sm={6} md={4} key={index} sx={{ display: "flex" }}>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: category.bgColor,
|
||||
flex: 1,
|
||||
padding: "40px 20px",
|
||||
textAlign: "center",
|
||||
boxShadow: "0 4px 10px rgba(0, 0, 0, 0.1)",
|
||||
color: "#fff",
|
||||
minHeight: "500px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{category.icon} {/* Render the icon above the title */}
|
||||
<Typography variant="h6" fontWeight={700} color="#F7931E" gutterBottom sx={{ marginTop: 2 }}>
|
||||
{category.title}
|
||||
</Typography>
|
||||
{category.items.map((item, i) => (
|
||||
<Typography key={i} variant="body2" sx={{ color: "#ddd", marginBottom: 1 }}>
|
||||
{item}
|
||||
</Typography>
|
||||
))}
|
||||
</Box>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default OurExpertise;
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import { Box, Grid, Typography } from "@mui/material";
|
||||
import { motion, useAnimation } from "framer-motion";
|
||||
import { useInView } from "react-intersection-observer";
|
||||
import darkbackground from "../../../dark-background.jpg"
|
||||
|
||||
// Counter Component
|
||||
const Counter = ({ target, label, icon }: { target: number; label: string; icon: React.ReactNode }) => {
|
||||
const controls = useAnimation();
|
||||
const [count, setCount] = useState(0);
|
||||
const { ref, inView } = useInView({ triggerOnce: true });
|
||||
|
||||
useEffect(() => {
|
||||
if (inView) {
|
||||
let start = 0;
|
||||
const step = Math.ceil(target / 50);
|
||||
const interval = setInterval(() => {
|
||||
start += step;
|
||||
setCount(start > target ? target : start);
|
||||
if (start >= target) clearInterval(interval);
|
||||
}, 20);
|
||||
}
|
||||
}, [inView, target]);
|
||||
|
||||
return (
|
||||
<motion.div ref={ref} animate={controls} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}>
|
||||
<Box textAlign="center">
|
||||
{icon}
|
||||
<Typography variant="h6" color="white" sx={{ mt: 1 }}>
|
||||
{label}
|
||||
</Typography>
|
||||
<Typography variant="h4" fontWeight="bold" color="white">
|
||||
{count}
|
||||
</Typography>
|
||||
</Box>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const StatsSection = () => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
backgroundImage: `url(${darkbackground})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundAttachment: "fixed",
|
||||
backgroundPosition: "center",
|
||||
minHeight: "80vh",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
color: "white",
|
||||
py: 10,
|
||||
}}
|
||||
>
|
||||
<Grid container spacing={1} justifyContent="center">
|
||||
{/* Coffee Cups */}
|
||||
<Grid item xs={6} md={3}>
|
||||
<Counter target={20800} label="COFFEE CUPS" icon={<Typography fontSize={40}>☕</Typography>} />
|
||||
</Grid>
|
||||
|
||||
{/* Projects */}
|
||||
<Grid item xs={6} md={3}>
|
||||
<Counter target={575} label="PROJECTS" icon={<Typography fontSize={40}>💼</Typography>} />
|
||||
</Grid>
|
||||
|
||||
{/* Working Days */}
|
||||
<Grid item xs={6} md={3}>
|
||||
<Counter target={4412} label="WORKING DAYS" icon={<Typography fontSize={40}>🖱️</Typography>} />
|
||||
</Grid>
|
||||
|
||||
{/* Clients */}
|
||||
<Grid item xs={6} md={3}>
|
||||
<Counter target={498} label="CLIENTS" icon={<Typography fontSize={40}>👥</Typography>} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatsSection;
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
import React from "react";
|
||||
import { Box, Grid, Typography, Link } from "@mui/material";
|
||||
import coffeeCharacter from "../../../imagetwo.png";
|
||||
import brainLightbulb from "../../../imageone.png";
|
||||
|
||||
const WhoWeAre: React.FC = () => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: "#15100E",
|
||||
color: "white",
|
||||
minHeight: "100vh",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: { xs: "40px 20px", md: "80px 100px" },
|
||||
}}
|
||||
>
|
||||
<Grid container spacing={6} alignItems="center">
|
||||
{/* Left Text Content */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<Typography variant="h3" fontWeight={700} gutterBottom>
|
||||
WHO <span style={{ fontWeight: 300 }}>WE ARE</span>
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{ color: "#b0b0b0", lineHeight: 1.8, marginBottom: 2, letterSpacing: "0.05em", wordSpacing: "0.1em" }}
|
||||
>
|
||||
At <b>Quadraedge</b>, we believe that true marketing success comes from mastering all four edges—PR, Marketing, Tech, and Media. As a team of three passionate marketers, we built Quadraedge to be a powerhouse that integrates these four pillars, ensuring brands don’t just exist online but thrive.
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{ color: "#b0b0b0", lineHeight: 1.8, marginBottom: 3, letterSpacing: "0.05em", wordSpacing: "0.1em" }}
|
||||
>
|
||||
We saw a gap in the industry—businesses struggling to balance visibility, technology, engagement, and storytelling. So, we combined our expertise to create a <b>360-degree marketing approach</b> that brings together:
|
||||
</Typography>
|
||||
<Link href="#" underline="hover" sx={{ color: "#b0b0b0", fontSize: "1rem", fontWeight: 600 }}>
|
||||
READ MORE
|
||||
</Link>
|
||||
</Grid>
|
||||
|
||||
{/* Right Image Section */}
|
||||
<Grid item xs={12} md={6} container spacing={2} justifyContent="center">
|
||||
<Grid item xs={6}>
|
||||
<Box
|
||||
component="img"
|
||||
src={brainLightbulb}
|
||||
alt="Brain Lightbulb"
|
||||
sx={{
|
||||
width: "95%",
|
||||
boxShadow: "10px 10px 20px rgba(0, 0, 0, 0.3)",
|
||||
transform: "rotate(-5deg)",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Box
|
||||
component="img"
|
||||
src={coffeeCharacter}
|
||||
alt="Coffee Character"
|
||||
sx={{
|
||||
width: "95%",
|
||||
boxShadow: "10px 10px 20px rgba(0, 0, 0, 0.3)",
|
||||
transform: "rotate(5deg)",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default WhoWeAre;
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
import { Box, Typography, Container } from "@mui/material";
|
||||
import mottoimage from "../../whowearemotto.png"
|
||||
const MottoSection: React.FC = () => {
|
||||
return (
|
||||
<Box>
|
||||
{/* Top Section */}
|
||||
<Box sx={{ backgroundColor: "#F7F7F7", py: 6, pl: 5, textAlign: "left" }}>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
fontSize: { xs: "2rem", md: "3.5rem" },
|
||||
letterSpacing: 2,
|
||||
}}
|
||||
>
|
||||
OUR <span style={{ fontWeight: "bold" }}>MOTTO</span>
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Bottom Black Section */}
|
||||
<Box sx={{ backgroundColor: "#15100E", py: 6 }}>
|
||||
<Container maxWidth="md">
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
color: "#A0A0A0",
|
||||
fontSize: { xs: "1rem", md: "1.25rem" },
|
||||
textAlign: "center",
|
||||
lineHeight: 1.8,
|
||||
}}
|
||||
>
|
||||
Ideas excite us, they shape the future, add value, and signal change.
|
||||
Through fresh ideas, we blend together beautiful designs, functional
|
||||
digital strategies, and engaging experiences.
|
||||
<br />
|
||||
Here are values that define us, principles that guide us, and words
|
||||
that we live by.
|
||||
</Typography>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* Image Section */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={mottoimage}
|
||||
alt="Motto Image"
|
||||
style={{ maxWidth: "90%", height: "auto", borderRadius: "8px" }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default MottoSection;
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import React from 'react';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import { Box } from '@mui/material';
|
||||
// import CopyrightFooter from '../../assets/copyright';
|
||||
|
||||
export const MottoBase: React.FC = () => {
|
||||
return (
|
||||
<Box>
|
||||
<Outlet />
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
|
|
@ -0,0 +1,13 @@
|
|||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { RouterProvider } from "react-router-dom";
|
||||
import { CssBaseline, ThemeProvider, createTheme } from "@mui/material";
|
||||
import router from "../src/routes"; // Import your router config
|
||||
|
||||
// Optional: Create a custom MUI theme
|
||||
const theme = createTheme({
|
||||
palette: {
|
||||
mode: "light", // or "dark"
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
||||
<React.StrictMode>
|
||||
<ThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
<RouterProvider router={router} />
|
||||
</ThemeProvider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="react-scripts" />
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { ReportHandler } from 'web-vitals';
|
||||
|
||||
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import { createBrowserRouter, Navigate } from "react-router-dom";
|
||||
import Layout from "./components/Layout";
|
||||
import LandingPage from "./components/landingpage/landingpage";
|
||||
import { LandingBase } from "./components/landingpage/landingpagebase";
|
||||
import { MottoBase } from "./components/mottopage/mottobase";
|
||||
import MottoSection from "./components/mottopage/MottoSection";
|
||||
import AboutUsPage from "./components/aboutus";
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: '',
|
||||
element: <Layout />,
|
||||
children: [
|
||||
{
|
||||
index: true,
|
||||
element: <Navigate to='home' />,
|
||||
},
|
||||
{
|
||||
path: 'home',
|
||||
element: <LandingBase />,
|
||||
children: [
|
||||
{
|
||||
index: true,
|
||||
element: <LandingPage />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'aboutUs',
|
||||
element: <LandingBase />,
|
||||
children: [
|
||||
{
|
||||
index: true,
|
||||
element: <AboutUsPage />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'motto',
|
||||
element: <MottoBase />,
|
||||
children: [
|
||||
{
|
||||
index: true,
|
||||
element: <MottoSection />,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
|
||||
]
|
||||
},
|
||||
|
||||
]);
|
||||
|
||||
export default router;
|
||||
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom';
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue