new segments
This commit is contained in:
hardik
parent
b5642f7bad
commit
ae9382c07f
Binary file not shown.
|
|
@ -58,5 +58,6 @@
|
|||
"devDependencies": {
|
||||
"@types/react-icons": "^2.2.7",
|
||||
"@types/react-slick": "^0.23.13"
|
||||
}
|
||||
},
|
||||
"packageManager": "yarn@4.9.1+sha512.f95ce356460e05be48d66401c1ae64ef84d163dd689964962c6888a9810865e39097a5e9de748876c2e0bf89b232d583c33982773e9903ae7a76257270986538"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
// import AboutUsPage from "./components/aboutus";
|
||||
import AboutUs from "./components/aboutus/aboutus";
|
||||
import Footer from "./components/footer/footer";
|
||||
import Header from "./components/header/header";
|
||||
import Hero from "./components/hero/hero";
|
||||
import OurWorks from "./components/ourwork/ourwork";
|
||||
import Services from "./components/services/services";
|
||||
|
||||
import Testimonials from "./components/testomonials/testomonias";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
|
|
@ -10,6 +13,9 @@ function App() {
|
|||
<Header />
|
||||
<Hero />
|
||||
<Services />
|
||||
<OurWorks />
|
||||
<AboutUs />
|
||||
<Testimonials />
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,14 @@
|
|||
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';
|
||||
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 {
|
||||
|
|
@ -21,24 +28,26 @@ interface StatItem {
|
|||
|
||||
// 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',
|
||||
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'
|
||||
]
|
||||
"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 AboutUsPagesssssssss: React.FC = () => {
|
||||
const theme = useTheme();
|
||||
const controls = useAnimation();
|
||||
const [ref, inView] = useInView({ threshold: 0.1 });
|
||||
|
||||
useEffect(() => {
|
||||
if (inView) {
|
||||
controls.start('visible');
|
||||
controls.start("visible");
|
||||
}
|
||||
}, [controls, inView]);
|
||||
|
||||
|
|
@ -46,40 +55,40 @@ const AboutUsPage: React.FC = () => {
|
|||
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]
|
||||
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]
|
||||
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]
|
||||
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]
|
||||
}
|
||||
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' }
|
||||
{ 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
|
||||
|
|
@ -88,9 +97,9 @@ const AboutUsPage: React.FC = () => {
|
|||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.2
|
||||
}
|
||||
}
|
||||
staggerChildren: 0.2,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
|
|
@ -99,9 +108,9 @@ const AboutUsPage: React.FC = () => {
|
|||
y: 0,
|
||||
opacity: 1,
|
||||
transition: {
|
||||
duration: 0.6
|
||||
}
|
||||
}
|
||||
duration: 0.6,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const fadeInVariants = {
|
||||
|
|
@ -109,9 +118,9 @@ const AboutUsPage: React.FC = () => {
|
|||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
duration: 1
|
||||
}
|
||||
}
|
||||
duration: 1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const scaleVariants = {
|
||||
|
|
@ -120,33 +129,35 @@ const AboutUsPage: React.FC = () => {
|
|||
scale: 1,
|
||||
opacity: 1,
|
||||
transition: {
|
||||
duration: 0.5
|
||||
}
|
||||
}
|
||||
duration: 0.5,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
backgroundColor: '#ffffff',
|
||||
color: '#1a1a1a',
|
||||
'& .accent-brown': {
|
||||
color: '#8B4513' // Classic brown
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: "#ffffff",
|
||||
color: "#1a1a1a",
|
||||
"& .accent-brown": {
|
||||
color: "#8B4513", // Classic brown
|
||||
},
|
||||
'& .accent-yellow': {
|
||||
color: '#FFD700' // Gold yellow
|
||||
}
|
||||
}}>
|
||||
"& .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'
|
||||
height: "80vh",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
position: "relative",
|
||||
overflow: "hidden",
|
||||
bgcolor: "black",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
|
|
@ -154,11 +165,11 @@ const AboutUsPage: React.FC = () => {
|
|||
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
|
||||
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
|
||||
|
|
@ -166,15 +177,15 @@ const AboutUsPage: React.FC = () => {
|
|||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 3 }}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: "absolute",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundImage: `url(${FALLBACK_IMAGES.heroBg})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center'
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
/>
|
||||
<Container maxWidth="lg" sx={{ position: 'relative', zIndex: 2 }}>
|
||||
<Container maxWidth="lg" sx={{ position: "relative", zIndex: 2 }}>
|
||||
<motion.div
|
||||
initial={{ y: -50, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
|
|
@ -184,14 +195,14 @@ const AboutUsPage: React.FC = () => {
|
|||
variant="h1"
|
||||
component="h1"
|
||||
sx={{
|
||||
fontSize: { xs: '3rem', md: '4.5rem' },
|
||||
fontSize: { xs: "3rem", md: "4.5rem" },
|
||||
fontWeight: 700,
|
||||
textAlign: 'center',
|
||||
textAlign: "center",
|
||||
mb: 2,
|
||||
textTransform: 'uppercase',
|
||||
'& span': {
|
||||
color: '#FFD700' // Yellow accent
|
||||
}
|
||||
textTransform: "uppercase",
|
||||
"& span": {
|
||||
color: "#FFD700", // Yellow accent
|
||||
},
|
||||
}}
|
||||
>
|
||||
Our <span>Story</span>
|
||||
|
|
@ -200,15 +211,15 @@ const AboutUsPage: React.FC = () => {
|
|||
variant="h5"
|
||||
component="p"
|
||||
sx={{
|
||||
maxWidth: '800px',
|
||||
mx: 'auto',
|
||||
textAlign: 'center',
|
||||
maxWidth: "800px",
|
||||
mx: "auto",
|
||||
textAlign: "center",
|
||||
fontWeight: 300,
|
||||
letterSpacing: '1px'
|
||||
letterSpacing: "1px",
|
||||
}}
|
||||
>
|
||||
Pioneering excellence since 2010. We blend innovation with passion to create
|
||||
extraordinary digital experiences.
|
||||
Pioneering excellence since 2010. We blend innovation with passion
|
||||
to create extraordinary digital experiences.
|
||||
</Typography>
|
||||
</motion.div>
|
||||
</Container>
|
||||
|
|
@ -230,33 +241,44 @@ const AboutUsPage: React.FC = () => {
|
|||
sx={{
|
||||
fontWeight: 700,
|
||||
mb: 3,
|
||||
position: 'relative',
|
||||
'&:after': {
|
||||
position: "relative",
|
||||
"&:after": {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
position: "absolute",
|
||||
bottom: -10,
|
||||
left: 0,
|
||||
width: '80px',
|
||||
height: '4px',
|
||||
backgroundColor: '#8B4513' // Brown accent
|
||||
}
|
||||
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
|
||||
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
|
||||
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>
|
||||
|
|
@ -267,21 +289,21 @@ const AboutUsPage: React.FC = () => {
|
|||
whileInView={{ x: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
style={{ overflow: 'hidden', borderRadius: '8px' }}
|
||||
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%)'
|
||||
}
|
||||
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;
|
||||
|
|
@ -294,27 +316,29 @@ const AboutUsPage: React.FC = () => {
|
|||
</Container>
|
||||
|
||||
{/* Stats Section */}
|
||||
<Box sx={{
|
||||
<Box
|
||||
sx={{
|
||||
py: 10,
|
||||
backgroundColor: '#f5f5f5',
|
||||
'& .stat-item': {
|
||||
borderRight: '1px solid #8B4513',
|
||||
'&:last-child': {
|
||||
borderRight: 'none'
|
||||
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',
|
||||
[theme.breakpoints.down("sm")]: {
|
||||
borderRight: "none",
|
||||
borderBottom: "1px solid #8B4513",
|
||||
paddingBottom: "20px",
|
||||
marginBottom: "20px",
|
||||
"&:last-child": {
|
||||
borderBottom: "none",
|
||||
marginBottom: 0,
|
||||
paddingBottom: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}}>
|
||||
paddingBottom: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg">
|
||||
<motion.div
|
||||
ref={ref}
|
||||
|
|
@ -326,15 +350,15 @@ const AboutUsPage: React.FC = () => {
|
|||
{stats.map((stat) => (
|
||||
<Grid item xs={6} sm={3} key={stat.id} className="stat-item">
|
||||
<motion.div variants={itemVariants}>
|
||||
<Box sx={{ textAlign: 'center' }}>
|
||||
<Box sx={{ textAlign: "center" }}>
|
||||
<Typography
|
||||
variant="h2"
|
||||
component="div"
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
mb: 1,
|
||||
color: '#8B4513', // Brown
|
||||
fontSize: { xs: '2.5rem', sm: '3rem' }
|
||||
color: "#8B4513", // Brown
|
||||
fontSize: { xs: "2.5rem", sm: "3rem" },
|
||||
}}
|
||||
>
|
||||
{stat.value}
|
||||
|
|
@ -365,18 +389,18 @@ const AboutUsPage: React.FC = () => {
|
|||
sx={{
|
||||
fontWeight: 700,
|
||||
mb: 6,
|
||||
textAlign: 'center',
|
||||
position: 'relative',
|
||||
'&:after': {
|
||||
textAlign: "center",
|
||||
position: "relative",
|
||||
"&:after": {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
position: "absolute",
|
||||
bottom: -10,
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
width: '80px',
|
||||
height: '4px',
|
||||
backgroundColor: '#8B4513' // Brown
|
||||
}
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
width: "80px",
|
||||
height: "4px",
|
||||
backgroundColor: "#8B4513", // Brown
|
||||
},
|
||||
}}
|
||||
>
|
||||
Meet The <span className="accent-yellow">Team</span>
|
||||
|
|
@ -392,25 +416,25 @@ const AboutUsPage: React.FC = () => {
|
|||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
whileHover={{ y: -10 }}
|
||||
style={{ height: '100%' }}
|
||||
style={{ height: "100%" }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
textAlign: 'center',
|
||||
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)'
|
||||
}
|
||||
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
|
||||
|
|
@ -422,17 +446,17 @@ const AboutUsPage: React.FC = () => {
|
|||
target.src = FALLBACK_IMAGES.team[index];
|
||||
}}
|
||||
sx={{
|
||||
width: '150px',
|
||||
height: '150px',
|
||||
borderRadius: '50%',
|
||||
objectFit: 'cover',
|
||||
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%)'
|
||||
}
|
||||
filter: "grayscale(100%)",
|
||||
transition: "filter 0.5s ease",
|
||||
border: "3px solid #8B4513",
|
||||
"&:hover": {
|
||||
filter: "grayscale(0%)",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Typography variant="h5" sx={{ fontWeight: 600, mb: 1 }}>
|
||||
|
|
@ -441,14 +465,14 @@ const AboutUsPage: React.FC = () => {
|
|||
<Typography
|
||||
variant="subtitle1"
|
||||
sx={{
|
||||
color: '#FFD700', // Yellow
|
||||
color: "#FFD700", // Yellow
|
||||
mb: 2,
|
||||
fontWeight: 500
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{member.role}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ mb: 2, color: '#555555' }}>
|
||||
<Typography variant="body2" sx={{ mb: 2, color: "#555555" }}>
|
||||
{member.bio}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
|
@ -459,11 +483,13 @@ const AboutUsPage: React.FC = () => {
|
|||
</Container>
|
||||
|
||||
{/* Mission Section */}
|
||||
<Box sx={{
|
||||
<Box
|
||||
sx={{
|
||||
py: 10,
|
||||
backgroundColor: '#1a1a1a',
|
||||
color: '#ffffff'
|
||||
}}>
|
||||
backgroundColor: "#1a1a1a",
|
||||
color: "#ffffff",
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
|
|
@ -478,18 +504,18 @@ const AboutUsPage: React.FC = () => {
|
|||
sx={{
|
||||
fontWeight: 700,
|
||||
mb: 6,
|
||||
textAlign: 'center',
|
||||
position: 'relative',
|
||||
'&:after': {
|
||||
textAlign: "center",
|
||||
position: "relative",
|
||||
"&:after": {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
position: "absolute",
|
||||
bottom: -10,
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
width: '80px',
|
||||
height: '4px',
|
||||
backgroundColor: '#FFD700' // Yellow
|
||||
}
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
width: "80px",
|
||||
height: "4px",
|
||||
backgroundColor: "#FFD700", // Yellow
|
||||
},
|
||||
}}
|
||||
>
|
||||
Our <span className="accent-yellow">Mission</span>
|
||||
|
|
@ -502,18 +528,22 @@ const AboutUsPage: React.FC = () => {
|
|||
sx={{
|
||||
p: 4,
|
||||
borderLeft: `4px solid #FFD700`,
|
||||
backgroundColor: '#2a2a2a',
|
||||
boxShadow: '0 4px 20px rgba(0,0,0,0.3)',
|
||||
height: '100%'
|
||||
backgroundColor: "#2a2a2a",
|
||||
boxShadow: "0 4px 20px rgba(0,0,0,0.3)",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h5" sx={{ fontWeight: 600, mb: 2, color: '#FFD700' }}>
|
||||
<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.
|
||||
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>
|
||||
|
|
@ -524,18 +554,22 @@ const AboutUsPage: React.FC = () => {
|
|||
sx={{
|
||||
p: 4,
|
||||
borderLeft: `4px solid #8B4513`,
|
||||
backgroundColor: '#2a2a2a',
|
||||
boxShadow: '0 4px 20px rgba(0,0,0,0.3)',
|
||||
height: '100%'
|
||||
backgroundColor: "#2a2a2a",
|
||||
boxShadow: "0 4px 20px rgba(0,0,0,0.3)",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h5" sx={{ fontWeight: 600, mb: 2, color: '#8B4513' }}>
|
||||
<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.
|
||||
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>
|
||||
|
|
@ -556,42 +590,43 @@ const AboutUsPage: React.FC = () => {
|
|||
<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)'
|
||||
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 }}
|
||||
<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',
|
||||
fontSize: "1rem",
|
||||
fontWeight: 600,
|
||||
backgroundColor: '#FFD700',
|
||||
color: '#1a1a1a',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.3s ease',
|
||||
'&:hover': {
|
||||
backgroundColor: '#ffffff',
|
||||
color: '#1a1a1a'
|
||||
}
|
||||
backgroundColor: "#FFD700",
|
||||
color: "#1a1a1a",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
cursor: "pointer",
|
||||
transition: "all 0.3s ease",
|
||||
"&:hover": {
|
||||
backgroundColor: "#ffffff",
|
||||
color: "#1a1a1a",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Get in Touch
|
||||
|
|
@ -604,4 +639,4 @@ const AboutUsPage: React.FC = () => {
|
|||
);
|
||||
};
|
||||
|
||||
export default AboutUsPage;
|
||||
export default AboutUsPagesssssssss;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
import { Box, Typography, Button } from "@mui/material";
|
||||
import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
|
||||
|
||||
const AboutUs = () => {
|
||||
return (
|
||||
<Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 10, px: 3 }}>
|
||||
<Box textAlign="center" maxWidth={800} mx="auto">
|
||||
<Typography variant="h4" fontWeight="bold" gutterBottom>
|
||||
About Us
|
||||
</Typography>
|
||||
<Typography variant="body1" paragraph>
|
||||
Lorem ipsum dolor sit amet consectetur. Nisl sed sed tortor eros. Enim
|
||||
hendrerit elit interdum malesuada sit dis est pharetra suspendisse. In
|
||||
dolor venenatis ultricies aliquet lacinia. Faucibus commodo eu gravida
|
||||
auctor eu et sit ut. Sed praesent sed odio aliquam in fermentum. Sit
|
||||
vitae morbi sodales sem velit eu tempus velit nunc. Turpis in in
|
||||
luctus et nulla purus nibh ut. Enim sed fermentum purus molestie
|
||||
parturient morbi nunc aliquet. Aliquam sed etiam turpis non lectus
|
||||
commodo cras leo gravida.
|
||||
</Typography>
|
||||
<Button
|
||||
variant="outlined"
|
||||
endIcon={<ArrowOutwardIcon />}
|
||||
sx={{
|
||||
mt: 2,
|
||||
borderColor: "#00FFD1",
|
||||
color: "#00FFD1",
|
||||
borderRadius: "30px",
|
||||
fontWeight: "bold",
|
||||
px: 4,
|
||||
"&:hover": {
|
||||
backgroundColor: "#00FFD1",
|
||||
color: "#000",
|
||||
},
|
||||
}}
|
||||
>
|
||||
GET IN TOUCH
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutUs;
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState } from 'react';
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
AppBar,
|
||||
Toolbar,
|
||||
|
|
@ -14,34 +14,44 @@ import {
|
|||
Box,
|
||||
Container,
|
||||
ListItemButton,
|
||||
} from '@mui/material';
|
||||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
import { motion } from 'framer-motion';
|
||||
} from "@mui/material";
|
||||
import MenuIcon from "@mui/icons-material/Menu";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
const navItems = ['Home', 'Services', 'Portfolio', 'About Us', 'Blog'];
|
||||
const navItems = ["Home", "Services", "Portfolio", "About Us", "Blog"];
|
||||
|
||||
const Header = () => {
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
|
||||
|
||||
const toggleDrawer = () => {
|
||||
setMobileOpen(!mobileOpen);
|
||||
};
|
||||
|
||||
const drawer = (
|
||||
<Box sx={{ width: 250 }} onClick={toggleDrawer}>
|
||||
<Box sx={{ width: 250, backgroundColor: "#000" }} onClick={toggleDrawer}>
|
||||
<List>
|
||||
{navItems.map((item) => (
|
||||
<ListItemButton component="a" href="#" key={item}>
|
||||
<ListItemText primary={item} />
|
||||
<ListItemText primary={item} sx={{ color: "#fff" }} />
|
||||
</ListItemButton>
|
||||
))}
|
||||
<ListItem disablePadding>
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{ borderColor: '#00E0FF', color: '#00E0FF', m: 2 }}
|
||||
sx={{
|
||||
borderColor: "#00E0FF",
|
||||
color: "#00E0FF",
|
||||
backgroundColor: "transparent",
|
||||
borderRadius: "8px",
|
||||
m: 2,
|
||||
"&:hover": {
|
||||
backgroundColor: "#00E0FF",
|
||||
color: "#000",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Contact Us
|
||||
</Button>
|
||||
|
|
@ -50,13 +60,19 @@ const Header = () => {
|
|||
</Box>
|
||||
);
|
||||
|
||||
|
||||
return (
|
||||
<AppBar position="sticky" sx={{ backgroundColor: '#0F111A', boxShadow: 'none' }}>
|
||||
<AppBar
|
||||
position="sticky"
|
||||
sx={{ backgroundColor: "#000", boxShadow: "none" }}
|
||||
>
|
||||
<Container maxWidth="lg">
|
||||
<Toolbar sx={{ justifyContent: 'space-between' }}>
|
||||
<motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||||
<Toolbar sx={{ justifyContent: "space-between", padding: "16px 0" }}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, color: "#fff" }}>
|
||||
QUADRA EDGE
|
||||
</Typography>
|
||||
</motion.div>
|
||||
|
|
@ -64,14 +80,19 @@ const Header = () => {
|
|||
{isMobile ? (
|
||||
<>
|
||||
<IconButton color="inherit" edge="end" onClick={toggleDrawer}>
|
||||
<MenuIcon />
|
||||
<MenuIcon sx={{ color: "#fff" }} />
|
||||
</IconButton>
|
||||
<Drawer anchor="right" open={mobileOpen} onClose={toggleDrawer}>
|
||||
<Drawer
|
||||
anchor="right"
|
||||
open={mobileOpen}
|
||||
onClose={toggleDrawer}
|
||||
sx={{ "& .MuiDrawer-paper": { backgroundColor: "#000" } }}
|
||||
>
|
||||
{drawer}
|
||||
</Drawer>
|
||||
</>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', gap: 3, alignItems: 'center' }}>
|
||||
<Box sx={{ display: "flex", gap: 4, alignItems: "center" }}>
|
||||
{navItems.map((item, index) => (
|
||||
<motion.div
|
||||
key={item}
|
||||
|
|
@ -79,7 +100,18 @@ const Header = () => {
|
|||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 * index }}
|
||||
>
|
||||
<Typography variant="body1" component="a" href="#" sx={{ color: '#fff', textDecoration: 'none' }}>
|
||||
<Typography
|
||||
variant="body1"
|
||||
component="a"
|
||||
href="#"
|
||||
sx={{
|
||||
color: "#fff",
|
||||
textDecoration: "none",
|
||||
"&:hover": {
|
||||
color: "#00E0FF",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
</Typography>
|
||||
</motion.div>
|
||||
|
|
@ -92,12 +124,16 @@ const Header = () => {
|
|||
<Button
|
||||
variant="outlined"
|
||||
sx={{
|
||||
borderColor: '#00E0FF',
|
||||
color: '#00E0FF',
|
||||
textTransform: 'none',
|
||||
'&:hover': {
|
||||
backgroundColor: '#00E0FF',
|
||||
color: '#000',
|
||||
borderColor: "#00E0FF",
|
||||
color: "#00E0FF",
|
||||
backgroundColor: "transparent",
|
||||
borderRadius: "8px",
|
||||
textTransform: "none",
|
||||
padding: "8px 24px",
|
||||
"&:hover": {
|
||||
backgroundColor: "#00E0FF",
|
||||
color: "#000",
|
||||
borderColor: "#00E0FF",
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 723 KiB |
|
|
@ -1,39 +1,49 @@
|
|||
import { Box, Button, Container, Typography } from '@mui/material';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
import { Box, Button, Container, Grid, Typography } from "@mui/material";
|
||||
import { motion } from "framer-motion";
|
||||
import backgroundImg from "../hero/Frame 22.png";
|
||||
export default function Hero() {
|
||||
return (
|
||||
<Box sx={{ backgroundColor: '#0F111A', color: '#fff', py: 10 }}>
|
||||
<Box sx={{ backgroundColor: "#0F111A", color: "#fff", py: 10 }}>
|
||||
<Container maxWidth="lg">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Grid container>
|
||||
<Grid item md={6}>
|
||||
<Typography variant="h3" fontWeight="bold" gutterBottom>
|
||||
We Create <br />
|
||||
Brands That Stick
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item md={6}>
|
||||
<Typography variant="body1" maxWidth="sm">
|
||||
We help founders grow through bold design, sharp strategy, and smart marketing that
|
||||
drives recognition, engagement and long-term brand loyalty.
|
||||
We help founders grow through bold design, sharp strategy, and
|
||||
smart marketing that drives recognition, engagement and
|
||||
long-term brand loyalty.
|
||||
</Typography>
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{
|
||||
mt: 4,
|
||||
borderColor: '#00E0FF',
|
||||
color: '#00E0FF',
|
||||
'&:hover': {
|
||||
backgroundColor: '#00E0FF',
|
||||
color: '#000',
|
||||
borderColor: "#00E0FF",
|
||||
color: "#00E0FF",
|
||||
"&:hover": {
|
||||
backgroundColor: "#00E0FF",
|
||||
color: "#000",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Get in Touch
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</motion.div>
|
||||
</Container>
|
||||
<Box width="100%">
|
||||
<img src={backgroundImg} alt="" width={"100%"} />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
|
|
@ -0,0 +1,116 @@
|
|||
import {
|
||||
Box,
|
||||
Card,
|
||||
CardContent,
|
||||
CardMedia,
|
||||
Grid,
|
||||
Typography,
|
||||
Button,
|
||||
} from "@mui/material";
|
||||
import portfolioImg from "../ourwork/Rectangle 6.png";
|
||||
|
||||
const works = [
|
||||
{
|
||||
title: "Project Name",
|
||||
image: portfolioImg,
|
||||
},
|
||||
{
|
||||
title: "Project Name",
|
||||
image: portfolioImg,
|
||||
},
|
||||
{
|
||||
title: "Project Name",
|
||||
image: portfolioImg,
|
||||
},
|
||||
];
|
||||
|
||||
const OurWorks = () => {
|
||||
return (
|
||||
<Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 8, px: 2 }}>
|
||||
<Typography variant="h4" align="center" fontWeight="bold" gutterBottom>
|
||||
Our Works
|
||||
</Typography>
|
||||
<Typography variant="subtitle1" align="center" mb={6}>
|
||||
We’ve helped brands grow through bold strategy and creative execution.
|
||||
Explore our recent success stories.
|
||||
</Typography>
|
||||
|
||||
<Grid container spacing={4} justifyContent="center">
|
||||
{works.map((work, index) => (
|
||||
<Grid item xs={12} sm={6} md={4} key={index}>
|
||||
<Card
|
||||
sx={{
|
||||
borderRadius: 3,
|
||||
overflow: "hidden",
|
||||
bgcolor: "#fff",
|
||||
maxWidth: 320,
|
||||
margin: "0 auto",
|
||||
}}
|
||||
elevation={3}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography
|
||||
variant="subtitle1"
|
||||
fontWeight="bold"
|
||||
color="Black"
|
||||
gutterBottom
|
||||
>
|
||||
{work.title}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
<CardMedia
|
||||
component="img"
|
||||
image={work.image}
|
||||
alt={work.title}
|
||||
sx={{
|
||||
objectFit: "contain",
|
||||
height: 250,
|
||||
px: 2,
|
||||
}}
|
||||
/>
|
||||
<CardContent>
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
sx={{
|
||||
backgroundColor: "#000",
|
||||
color: "#00FFD1",
|
||||
fontWeight: "bold",
|
||||
"&:hover": {
|
||||
backgroundColor: "#333",
|
||||
},
|
||||
borderRadius: "30px",
|
||||
}}
|
||||
>
|
||||
VIEW DEMO
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
<Box mt={6} display="flex" justifyContent="center">
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{
|
||||
borderRadius: "30px",
|
||||
borderColor: "#00FFD1",
|
||||
color: "#00FFD1",
|
||||
px: 4,
|
||||
py: 1.5,
|
||||
fontWeight: "bold",
|
||||
"&:hover": {
|
||||
backgroundColor: "#00FFD1",
|
||||
color: "#000",
|
||||
},
|
||||
}}
|
||||
>
|
||||
VIEW FULL PORTFOLIO →
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default OurWorks;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
|
|
@ -1,41 +1,238 @@
|
|||
import { Box, Container, Grid, Typography, Paper } from '@mui/material';
|
||||
import {
|
||||
Box,
|
||||
Card,
|
||||
CardContent,
|
||||
CardMedia,
|
||||
Typography,
|
||||
Container,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import { motion, AnimatePresence, PanInfo } from "framer-motion";
|
||||
import { useState } from "react";
|
||||
import serviceImage from "../services/Image Wrapper.png";
|
||||
|
||||
const services = ['Design', 'Development', 'Marketing'];
|
||||
const services = [
|
||||
{
|
||||
title: "Design",
|
||||
description:
|
||||
"Lorem ipsum dolor sit amet consectetur. Non aliquam justo hendrerit vitae lacus. Cursus purus dictumst scelerisque vitae ultricies turpis aliquam turpis.",
|
||||
image: `${serviceImage}`,
|
||||
},
|
||||
{
|
||||
title: "Development",
|
||||
description:
|
||||
"Lorem ipsum dolor sit amet consectetur. Non aliquam justo hendrerit vitae lacus. Cursus purus dictumst scelerisque vitae ultricies turpis aliquam turpis.",
|
||||
image: `${serviceImage}`,
|
||||
},
|
||||
{
|
||||
title: "Marketing",
|
||||
description:
|
||||
"Lorem ipsum dolor sit amet consectetur. Non aliquam justo hendrerit vitae lacus. Cursus purus dictumst scelerisque vitae ultricies turpis aliquam turpis.",
|
||||
image: `${serviceImage}`,
|
||||
},
|
||||
];
|
||||
|
||||
const Services = () => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
|
||||
const handleDragEnd = (
|
||||
event: MouseEvent | TouchEvent | PointerEvent,
|
||||
info: PanInfo
|
||||
) => {
|
||||
if (info.offset.x > 50) {
|
||||
// Swiped right
|
||||
setCurrentIndex((prev) => (prev === 0 ? services.length - 1 : prev - 1));
|
||||
} else if (info.offset.x < -50) {
|
||||
// Swiped left
|
||||
setCurrentIndex((prev) => (prev === services.length - 1 ? 0 : prev + 1));
|
||||
}
|
||||
};
|
||||
|
||||
export default function Services() {
|
||||
return (
|
||||
<Box sx={{ py: 10, backgroundColor: '#1B1E2E', color: '#fff' }}>
|
||||
<Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 8 }}>
|
||||
<Container maxWidth="lg">
|
||||
<Typography variant="h4" align="center" gutterBottom>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Typography
|
||||
variant="h4"
|
||||
align="center"
|
||||
fontWeight="bold"
|
||||
gutterBottom
|
||||
>
|
||||
Services
|
||||
</Typography>
|
||||
<Typography variant="body2" align="center" mb={4}>
|
||||
<Typography variant="subtitle1" align="center" mb={6}>
|
||||
We offer design, development & marketing services
|
||||
</Typography>
|
||||
<Grid container spacing={4}>
|
||||
{services.map((title) => (
|
||||
<Grid item xs={12} md={4} key={title}>
|
||||
<Paper
|
||||
elevation={3}
|
||||
sx={{
|
||||
p: 4,
|
||||
backgroundColor: '#2A2F3D',
|
||||
color: '#fff',
|
||||
borderRadius: 2,
|
||||
textAlign: 'center',
|
||||
</motion.div>
|
||||
|
||||
{isMobile ? (
|
||||
<Box sx={{ position: "relative", height: 400, overflow: "hidden" }}>
|
||||
<AnimatePresence initial={false}>
|
||||
<motion.div
|
||||
key={currentIndex}
|
||||
drag="x"
|
||||
onDragEnd={handleDragEnd}
|
||||
dragConstraints={{ left: 0, right: 0 }}
|
||||
initial={{ x: 300, opacity: 0 }}
|
||||
animate={{ x: 0, opacity: 1 }}
|
||||
exit={{ x: -300, opacity: 0 }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
||||
style={{
|
||||
position: "absolute",
|
||||
width: "100%",
|
||||
padding: "0 16px",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
{title}
|
||||
<Card
|
||||
sx={{
|
||||
borderRadius: 5,
|
||||
overflow: "hidden",
|
||||
height: "100%",
|
||||
bgcolor: "#fff",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
maxWidth: 345,
|
||||
mx: "auto",
|
||||
}}
|
||||
elevation={3}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
height: 200,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<CardMedia
|
||||
component="img"
|
||||
image={services[currentIndex].image}
|
||||
alt={services[currentIndex].title}
|
||||
sx={{
|
||||
objectFit: "contain",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<CardContent sx={{ flexGrow: 1 }}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
fontWeight="bold"
|
||||
gutterBottom
|
||||
color="black"
|
||||
>
|
||||
{services[currentIndex].title}
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
Lorem ipsum dolor sit amet consectetur. Non aliquam justo hendrerit...
|
||||
<Typography variant="body2" color="black">
|
||||
{services[currentIndex].description}
|
||||
</Typography>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Dots indicator */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
mt: 2,
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
{services.map((_, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
onClick={() => setCurrentIndex(index)}
|
||||
sx={{
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: "50%",
|
||||
bgcolor: index === currentIndex ? "#00E0FF" : "#ffffff80",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
{services.map((service, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
whileHover={{ y: -5 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<Card
|
||||
sx={{
|
||||
borderRadius: 5,
|
||||
overflow: "hidden",
|
||||
height: "100%",
|
||||
bgcolor: "#fff",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
elevation={3}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
height: 200,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<motion.div whileHover={{ scale: 1.05 }}>
|
||||
<CardMedia
|
||||
component="img"
|
||||
image={service.image}
|
||||
alt={service.title}
|
||||
sx={{
|
||||
objectFit: "contain",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
</Box>
|
||||
<CardContent sx={{ flexGrow: 1 }}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
fontWeight="bold"
|
||||
gutterBottom
|
||||
color="black"
|
||||
>
|
||||
{service.title}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="black">
|
||||
{service.description}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Services;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
|
|
@ -0,0 +1,100 @@
|
|||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
Card,
|
||||
CardContent,
|
||||
Grid,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import testimonialImg from "../testomonials/b7bef0298c881712fbc6437106d2aaef27c4fad8.jpg";
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
name: "Name",
|
||||
role: "Role",
|
||||
company: "Company Name & Logo",
|
||||
feedback:
|
||||
"Lorem ipsum dolor sit amet consectetur. Vitae dictum quam senectus posuere sit justo est turpis interdum. Ut vitae platea et adipiscing nisl.",
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
name: "John Dae",
|
||||
role: "Sr Manager",
|
||||
company: "Wells Fargo",
|
||||
feedback:
|
||||
"Lorem ipsum dolor sit amet consectetur. Vitae dictum quam senectus posuere sit justo est turpis interdum. Ut vitae platea et adipiscing nisl.",
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
name: "Name",
|
||||
role: "Role",
|
||||
company: "Company Name & Logo",
|
||||
feedback:
|
||||
"Lorem ipsum dolor sit amet consectetur. Vitae dictum quam senectus posuere sit justo est turpis interdum. Ut vitae platea et adipiscing nisl.",
|
||||
rating: 4,
|
||||
},
|
||||
];
|
||||
|
||||
const Testimonials = () => {
|
||||
return (
|
||||
<Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 10, px: 3 }}>
|
||||
<Box textAlign="center" mb={6}>
|
||||
<Typography variant="h4" fontWeight="bold" gutterBottom>
|
||||
Testimonials
|
||||
</Typography>
|
||||
<Typography variant="subtitle1">
|
||||
Don’t just take our word for it -- hear directly from our clients
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={4} justifyContent="center">
|
||||
{testimonials.map((t, idx) => (
|
||||
<Grid item xs={12} sm={6} md={4} key={idx}>
|
||||
<Card
|
||||
sx={{
|
||||
borderRadius: 3,
|
||||
maxWidth: 320,
|
||||
margin: "0 auto",
|
||||
textAlign: "center",
|
||||
py: 3,
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
src={testimonialImg}
|
||||
alt={t.name}
|
||||
sx={{ width: 100, height: 100, margin: "0 auto", mb: 2 }}
|
||||
/>
|
||||
<CardContent>
|
||||
<Typography variant="subtitle1" fontWeight="bold">
|
||||
{t.name} ,{" "}
|
||||
<span style={{ fontWeight: "normal" }}>{t.role}</span>
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" mb={1}>
|
||||
{t.company}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" mb={2}>
|
||||
{t.feedback}
|
||||
</Typography>
|
||||
<Box>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<span
|
||||
key={i}
|
||||
style={{
|
||||
color: i < t.rating ? "#00FFD1" : "#ccc",
|
||||
fontSize: "1.2rem",
|
||||
}}
|
||||
>
|
||||
★
|
||||
</span>
|
||||
))}
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Testimonials;
|
||||
Loading…
Reference in New Issue