added about us page
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
hardik
parent
dd872ea234
commit
d4f7b98a04
20
src/App.tsx
20
src/App.tsx
|
|
@ -1,23 +1,15 @@
|
||||||
// import AboutUsPage from "./components/aboutus";
|
// App.js
|
||||||
import AboutUs from "./components/aboutus/aboutus";
|
import { Outlet } from "react-router-dom";
|
||||||
import Footer from "./components/footer/footer";
|
|
||||||
import Header from "./components/header/header";
|
import Header from "./components/header/header";
|
||||||
import Hero from "./components/hero/hero";
|
import Footer from "./components/footer/footer";
|
||||||
import OurWorks from "./components/ourwork/ourwork";
|
|
||||||
import Services from "./components/services/services";
|
|
||||||
import Testimonials from "./components/testomonials/testomonias";
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<>
|
||||||
<Header />
|
<Header />
|
||||||
<Hero />
|
<Outlet /> {/* This will be replaced by the current route's element */}
|
||||||
<Services />
|
|
||||||
<OurWorks />
|
|
||||||
<AboutUs />
|
|
||||||
<Testimonials />
|
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,33 +1,30 @@
|
||||||
|
import React from "react";
|
||||||
import React from 'react';
|
|
||||||
// import AppRoutes from './routes';
|
// import AppRoutes from './routes';
|
||||||
// import Header from './components/landingpage/landingpagecomponents/header';
|
// import Header from './components/landingpage/landingpagecomponents/header';
|
||||||
import { Box } from '@mui/material';
|
import { Box } from "@mui/material";
|
||||||
import HeroSection from './landingpagecomponents/CarouselSection';
|
import AboutUs from "../aboutus/aboutus";
|
||||||
import WhoWeAre from './landingpagecomponents/whoweare';
|
import Footer from "../footer/footer";
|
||||||
import OurExpertise from './landingpagecomponents/ourexperties';
|
import Header from "../header/header";
|
||||||
import TopBrands from './landingpagecomponents/brands';
|
import Hero from "../hero/hero";
|
||||||
import CaseStudies from './landingpagecomponents/casestudy';
|
import OurWorks from "../ourwork/ourwork";
|
||||||
import StatsSection from './landingpagecomponents/scrollanimationsection';
|
import Services from "../services/services";
|
||||||
import ContactForm from './landingpagecomponents/contactus';
|
import Testimonials from "../testomonials/testomonias";
|
||||||
// import router from './routes';
|
// import router from './routes';
|
||||||
|
|
||||||
|
|
||||||
const LandingPage: React.FC = () => {
|
const LandingPage: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<Box>
|
<Box>
|
||||||
{/* <AnimatedHeader /> */}
|
{/* <AnimatedHeader /> */}
|
||||||
<HeroSection />
|
|
||||||
<WhoWeAre />
|
|
||||||
<OurExpertise />
|
|
||||||
<TopBrands />
|
|
||||||
<StatsSection/>
|
|
||||||
<CaseStudies/>
|
|
||||||
<ContactForm />
|
|
||||||
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
);
|
<Header />
|
||||||
|
<Hero />
|
||||||
|
<Services />
|
||||||
|
<OurWorks />
|
||||||
|
<AboutUs />
|
||||||
|
<Testimonials />
|
||||||
|
<Footer />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default LandingPage;
|
export default LandingPage;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,725 @@
|
||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Typography,
|
||||||
|
Button,
|
||||||
|
Grid,
|
||||||
|
Container,
|
||||||
|
Stack,
|
||||||
|
Avatar,
|
||||||
|
useMediaQuery,
|
||||||
|
useTheme,
|
||||||
|
} from "@mui/material";
|
||||||
|
import { motion, Variants } from "framer-motion";
|
||||||
|
import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
|
||||||
|
|
||||||
|
const AboutUsPageTwo = () => {
|
||||||
|
const theme = useTheme();
|
||||||
|
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
|
||||||
|
|
||||||
|
// Placeholder image URLs (replace with your actual images later)
|
||||||
|
const images = {
|
||||||
|
hero: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
|
||||||
|
team1: "https://randomuser.me/api/portraits/women/44.jpg",
|
||||||
|
team2: "https://randomuser.me/api/portraits/men/32.jpg",
|
||||||
|
team3: "https://randomuser.me/api/portraits/women/68.jpg",
|
||||||
|
office:
|
||||||
|
"https://images.unsplash.com/photo-1568992687947-868a62a9f521?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80",
|
||||||
|
values:
|
||||||
|
"https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
|
||||||
|
};
|
||||||
|
|
||||||
|
// Animation variants
|
||||||
|
const containerVariants: Variants = {
|
||||||
|
hidden: { opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
transition: {
|
||||||
|
staggerChildren: 0.2,
|
||||||
|
when: "beforeChildren",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const fadeUpVariants: Variants = {
|
||||||
|
hidden: { y: 50, opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
y: 0,
|
||||||
|
opacity: 1,
|
||||||
|
transition: {
|
||||||
|
duration: 0.8,
|
||||||
|
ease: "easeOut",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const leftSlideVariants: Variants = {
|
||||||
|
hidden: { x: -100, opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
x: 0,
|
||||||
|
opacity: 1,
|
||||||
|
transition: {
|
||||||
|
type: "spring",
|
||||||
|
stiffness: 100,
|
||||||
|
damping: 20,
|
||||||
|
duration: 0.8,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const rightSlideVariants: Variants = {
|
||||||
|
hidden: { x: 100, opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
x: 0,
|
||||||
|
opacity: 1,
|
||||||
|
transition: {
|
||||||
|
type: "spring",
|
||||||
|
stiffness: 100,
|
||||||
|
damping: 20,
|
||||||
|
duration: 0.8,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const scaleUpVariants: Variants = {
|
||||||
|
hidden: { scale: 0.8, opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
scale: 1,
|
||||||
|
opacity: 1,
|
||||||
|
transition: {
|
||||||
|
duration: 0.6,
|
||||||
|
ease: "easeOut",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const teamMembers = [
|
||||||
|
{
|
||||||
|
name: "Alex Johnson",
|
||||||
|
role: "CEO & Founder",
|
||||||
|
image: images.team1,
|
||||||
|
bio: "Visionary leader with 15+ years in digital transformation.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Maria Garcia",
|
||||||
|
role: "Creative Director",
|
||||||
|
image: images.team2,
|
||||||
|
bio: "Design expert passionate about user-centered experiences.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "James Wilson",
|
||||||
|
role: "CTO",
|
||||||
|
image: images.team3,
|
||||||
|
bio: "Tech innovator specializing in scalable architectures.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const milestones = [
|
||||||
|
{
|
||||||
|
year: "2012",
|
||||||
|
event: "Company Founded",
|
||||||
|
description: "Started with a small team of 5 people",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
year: "2015",
|
||||||
|
event: "First Major Client",
|
||||||
|
description: "Landed Fortune 500 company as client",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
year: "2018",
|
||||||
|
event: "Expanded Globally",
|
||||||
|
description: "Opened offices in 3 countries",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
year: "2022",
|
||||||
|
event: "Award Winning",
|
||||||
|
description: "Recognized as Top Innovators",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{ backgroundColor: "#0F111A", color: "#fff" }}>
|
||||||
|
{/* Hero Section */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
pt: { xs: 8, md: 12 },
|
||||||
|
pb: { xs: 6, md: 10 },
|
||||||
|
position: "relative",
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Container maxWidth="lg">
|
||||||
|
<Grid container spacing={6} alignItems="center">
|
||||||
|
<Grid item xs={12} md={6}>
|
||||||
|
<motion.div
|
||||||
|
initial="hidden"
|
||||||
|
whileInView="visible"
|
||||||
|
viewport={{ once: true, margin: "-100px" }}
|
||||||
|
variants={containerVariants}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
component={motion.div}
|
||||||
|
variants={fadeUpVariants}
|
||||||
|
variant="h1"
|
||||||
|
sx={{
|
||||||
|
fontFamily: "'Cormorant Garamond', serif",
|
||||||
|
fontWeight: 700,
|
||||||
|
fontSize: { xs: "2.5rem", md: "3.5rem" },
|
||||||
|
lineHeight: 1.2,
|
||||||
|
mb: 3,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Crafting Digital Excellence Since 2012
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
component={motion.div}
|
||||||
|
variants={leftSlideVariants}
|
||||||
|
sx={{
|
||||||
|
fontFamily: "'Montserrat', sans-serif",
|
||||||
|
fontSize: { xs: "1rem", md: "1.1rem" },
|
||||||
|
lineHeight: 1.8,
|
||||||
|
mb: 4,
|
||||||
|
color: "rgba(255,255,255,0.85)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
We're a passionate team of designers, developers, and
|
||||||
|
strategists dedicated to creating digital experiences that
|
||||||
|
matter.
|
||||||
|
</Typography>
|
||||||
|
<Button
|
||||||
|
component={motion.a}
|
||||||
|
variants={fadeUpVariants}
|
||||||
|
whileHover={{
|
||||||
|
scale: 1.05,
|
||||||
|
boxShadow: "0 0 20px rgba(0, 224, 255, 0.4)",
|
||||||
|
}}
|
||||||
|
href="#our-team"
|
||||||
|
variant="outlined"
|
||||||
|
endIcon={<ArrowOutwardIcon />}
|
||||||
|
sx={{
|
||||||
|
borderColor: "#00E0FF",
|
||||||
|
color: "#00E0FF",
|
||||||
|
borderRadius: "30px",
|
||||||
|
fontWeight: 600,
|
||||||
|
px: 4,
|
||||||
|
py: 1.5,
|
||||||
|
"&:hover": {
|
||||||
|
backgroundColor: "rgba(0, 224, 255, 0.1)",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Meet Our Team
|
||||||
|
</Button>
|
||||||
|
</motion.div>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} md={6}>
|
||||||
|
<Box
|
||||||
|
component={motion.div}
|
||||||
|
initial={{ scale: 0.9, opacity: 0 }}
|
||||||
|
whileInView={{ scale: 1, opacity: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
sx={{
|
||||||
|
borderRadius: "16px",
|
||||||
|
overflow: "hidden",
|
||||||
|
boxShadow: "0 20px 40px rgba(0, 0, 0, 0.3)",
|
||||||
|
position: "relative",
|
||||||
|
"&:before": {
|
||||||
|
content: '""',
|
||||||
|
position: "absolute",
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
background:
|
||||||
|
"linear-gradient(135deg, rgba(0, 224, 255, 0.2) 0%, rgba(15, 17, 26, 0.5) 100%)",
|
||||||
|
zIndex: 1,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
component="img"
|
||||||
|
src={images.hero}
|
||||||
|
alt="Our team collaborating"
|
||||||
|
sx={{
|
||||||
|
width: "100%",
|
||||||
|
height: { xs: "300px", md: "500px" },
|
||||||
|
objectFit: "cover",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Values Section */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
py: { xs: 8, md: 10 },
|
||||||
|
backgroundColor: "rgba(0, 224, 255, 0.03)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Container maxWidth="lg">
|
||||||
|
<Typography
|
||||||
|
component={motion.div}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
variant="h2"
|
||||||
|
sx={{
|
||||||
|
fontFamily: "'Cormorant Garamond', serif",
|
||||||
|
fontWeight: 700,
|
||||||
|
fontSize: { xs: "2rem", md: "2.5rem" },
|
||||||
|
textAlign: "center",
|
||||||
|
mb: 6,
|
||||||
|
"&:after": {
|
||||||
|
content: '""',
|
||||||
|
display: "block",
|
||||||
|
width: "80px",
|
||||||
|
height: "4px",
|
||||||
|
background: "#00E0FF",
|
||||||
|
margin: "20px auto",
|
||||||
|
borderRadius: "2px",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Our Core Values
|
||||||
|
</Typography>
|
||||||
|
<Grid container spacing={4}>
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
title: "Innovation",
|
||||||
|
description:
|
||||||
|
"We push boundaries to deliver cutting-edge solutions.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Integrity",
|
||||||
|
description: "Honest and transparent in all our dealings.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Excellence",
|
||||||
|
description: "Committed to the highest quality standards.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Collaboration",
|
||||||
|
description: "We believe great things happen together.",
|
||||||
|
},
|
||||||
|
].map((value, index) => (
|
||||||
|
<Grid item xs={12} sm={6} md={3} key={index}>
|
||||||
|
<Box
|
||||||
|
component={motion.div}
|
||||||
|
initial={{ opacity: 0, y: 50 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||||
|
sx={{
|
||||||
|
backgroundColor: "#0F111A",
|
||||||
|
borderRadius: "8px",
|
||||||
|
p: 4,
|
||||||
|
height: "100%",
|
||||||
|
border: "1px solid rgba(0, 224, 255, 0.1)",
|
||||||
|
boxShadow: "0 8px 16px rgba(0, 0, 0, 0.2)",
|
||||||
|
transition: "all 0.3s ease",
|
||||||
|
"&:hover": {
|
||||||
|
transform: "translateY(-5px)",
|
||||||
|
boxShadow: "0 12px 24px rgba(0, 224, 255, 0.1)",
|
||||||
|
borderColor: "rgba(0, 224, 255, 0.3)",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
variant="h4"
|
||||||
|
sx={{
|
||||||
|
color: "#00E0FF",
|
||||||
|
mb: 2,
|
||||||
|
fontFamily: "'Cormorant Garamond', serif",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{value.title}
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
sx={{ color: "rgba(255,255,255,0.8)" }}
|
||||||
|
>
|
||||||
|
{value.description}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Team Section */}
|
||||||
|
<Box id="our-team" sx={{ py: { xs: 8, md: 10 } }}>
|
||||||
|
<Container maxWidth="lg">
|
||||||
|
<Typography
|
||||||
|
component={motion.div}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
variant="h2"
|
||||||
|
sx={{
|
||||||
|
fontFamily: "'Cormorant Garamond', serif",
|
||||||
|
fontWeight: 700,
|
||||||
|
fontSize: { xs: "2rem", md: "2.5rem" },
|
||||||
|
textAlign: "center",
|
||||||
|
mb: 6,
|
||||||
|
"&:after": {
|
||||||
|
content: '""',
|
||||||
|
display: "block",
|
||||||
|
width: "80px",
|
||||||
|
height: "4px",
|
||||||
|
background: "#00E0FF",
|
||||||
|
margin: "20px auto",
|
||||||
|
borderRadius: "2px",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Meet The Team
|
||||||
|
</Typography>
|
||||||
|
<Grid container spacing={4} justifyContent="center">
|
||||||
|
{teamMembers.map((member, index) => (
|
||||||
|
<Grid item xs={12} sm={6} md={4} key={index}>
|
||||||
|
<Box
|
||||||
|
component={motion.div}
|
||||||
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||||
|
sx={{
|
||||||
|
textAlign: "center",
|
||||||
|
"&:hover .team-image": {
|
||||||
|
transform: "scale(1.05)",
|
||||||
|
boxShadow: "0 0 30px rgba(0, 224, 255, 0.4)",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Avatar
|
||||||
|
src={member.image}
|
||||||
|
alt={member.name}
|
||||||
|
className="team-image"
|
||||||
|
sx={{
|
||||||
|
width: 200,
|
||||||
|
height: 200,
|
||||||
|
mx: "auto",
|
||||||
|
mb: 3,
|
||||||
|
border: "3px solid #00E0FF",
|
||||||
|
transition: "all 0.3s ease",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Typography variant="h5" sx={{ color: "#00E0FF", mb: 1 }}>
|
||||||
|
{member.name}
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="subtitle1"
|
||||||
|
sx={{ color: "rgba(255,255,255,0.7)", mb: 2 }}
|
||||||
|
>
|
||||||
|
{member.role}
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
sx={{ color: "rgba(255,255,255,0.8)" }}
|
||||||
|
>
|
||||||
|
{member.bio}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Milestones Section */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
py: { xs: 8, md: 10 },
|
||||||
|
backgroundColor: "rgba(0, 224, 255, 0.03)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Container maxWidth="lg">
|
||||||
|
<Typography
|
||||||
|
component={motion.div}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
variant="h2"
|
||||||
|
sx={{
|
||||||
|
fontFamily: "'Cormorant Garamond', serif",
|
||||||
|
fontWeight: 700,
|
||||||
|
fontSize: { xs: "2rem", md: "2.5rem" },
|
||||||
|
textAlign: "center",
|
||||||
|
mb: 6,
|
||||||
|
"&:after": {
|
||||||
|
content: '""',
|
||||||
|
display: "block",
|
||||||
|
width: "80px",
|
||||||
|
height: "4px",
|
||||||
|
background: "#00E0FF",
|
||||||
|
margin: "20px auto",
|
||||||
|
borderRadius: "2px",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Our Journey
|
||||||
|
</Typography>
|
||||||
|
<Box
|
||||||
|
component={motion.div}
|
||||||
|
initial="hidden"
|
||||||
|
whileInView="visible"
|
||||||
|
viewport={{ once: true }}
|
||||||
|
variants={containerVariants}
|
||||||
|
sx={{
|
||||||
|
position: "relative",
|
||||||
|
"&:before": {
|
||||||
|
content: '""',
|
||||||
|
position: "absolute",
|
||||||
|
top: 0,
|
||||||
|
left: "50%",
|
||||||
|
transform: "translateX(-50%)",
|
||||||
|
width: "2px",
|
||||||
|
height: "100%",
|
||||||
|
background: "linear-gradient(to bottom, #00E0FF, transparent)",
|
||||||
|
[theme.breakpoints.down("sm")]: {
|
||||||
|
left: "30px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{milestones.map((milestone, index) => (
|
||||||
|
<Box
|
||||||
|
key={index}
|
||||||
|
component={motion.div}
|
||||||
|
variants={
|
||||||
|
index % 2 === 0 ? leftSlideVariants : rightSlideVariants
|
||||||
|
}
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: {
|
||||||
|
xs: "flex-start",
|
||||||
|
sm: index % 2 === 0 ? "flex-start" : "flex-end",
|
||||||
|
},
|
||||||
|
mb: 6,
|
||||||
|
position: "relative",
|
||||||
|
pl: { xs: "60px", sm: 0 },
|
||||||
|
pr: { sm: index % 2 === 0 ? 0 : "60px" },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: { xs: "100%", sm: "45%" },
|
||||||
|
backgroundColor: "#0F111A",
|
||||||
|
borderRadius: "8px",
|
||||||
|
p: 4,
|
||||||
|
border: "1px solid rgba(0, 224, 255, 0.1)",
|
||||||
|
boxShadow: "0 8px 16px rgba(0, 0, 0, 0.2)",
|
||||||
|
position: "relative",
|
||||||
|
"&:before": {
|
||||||
|
content: '""',
|
||||||
|
position: "absolute",
|
||||||
|
top: "30px",
|
||||||
|
left: {
|
||||||
|
xs: "-10px",
|
||||||
|
sm: index % 2 === 0 ? "-10px" : "auto",
|
||||||
|
},
|
||||||
|
right: { sm: index % 2 === 0 ? "auto" : "-10px" },
|
||||||
|
width: "20px",
|
||||||
|
height: "20px",
|
||||||
|
borderRadius: "50%",
|
||||||
|
backgroundColor: "#00E0FF",
|
||||||
|
[theme.breakpoints.down("sm")]: {
|
||||||
|
left: "20px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant="h4" sx={{ color: "#00E0FF", mb: 1 }}>
|
||||||
|
{milestone.year}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="h5" sx={{ mb: 1 }}>
|
||||||
|
{milestone.event}
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
sx={{ color: "rgba(255,255,255,0.8)" }}
|
||||||
|
>
|
||||||
|
{milestone.description}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Office Tour Section */}
|
||||||
|
<Box sx={{ py: { xs: 8, md: 10 } }}>
|
||||||
|
<Container maxWidth="lg">
|
||||||
|
<Typography
|
||||||
|
component={motion.div}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
variant="h2"
|
||||||
|
sx={{
|
||||||
|
fontFamily: "'Cormorant Garamond', serif",
|
||||||
|
fontWeight: 700,
|
||||||
|
fontSize: { xs: "2rem", md: "2.5rem" },
|
||||||
|
textAlign: "center",
|
||||||
|
mb: 6,
|
||||||
|
"&:after": {
|
||||||
|
content: '""',
|
||||||
|
display: "block",
|
||||||
|
width: "80px",
|
||||||
|
height: "4px",
|
||||||
|
background: "#00E0FF",
|
||||||
|
margin: "20px auto",
|
||||||
|
borderRadius: "2px",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Our Workspace
|
||||||
|
</Typography>
|
||||||
|
<Box
|
||||||
|
component={motion.div}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
whileInView={{ opacity: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
sx={{
|
||||||
|
borderRadius: "16px",
|
||||||
|
overflow: "hidden",
|
||||||
|
boxShadow: "0 20px 40px rgba(0, 0, 0, 0.3)",
|
||||||
|
position: "relative",
|
||||||
|
height: { xs: "300px", md: "500px" },
|
||||||
|
"&:before": {
|
||||||
|
content: '""',
|
||||||
|
position: "absolute",
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
background:
|
||||||
|
"linear-gradient(135deg, rgba(0, 224, 255, 0.1) 0%, rgba(15, 17, 26, 0.3) 100%)",
|
||||||
|
zIndex: 1,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
component="img"
|
||||||
|
src={images.office}
|
||||||
|
alt="Our office space"
|
||||||
|
sx={{
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
objectFit: "cover",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Box
|
||||||
|
component={motion.div}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: 0.4 }}
|
||||||
|
sx={{
|
||||||
|
position: "absolute",
|
||||||
|
bottom: 0,
|
||||||
|
left: 0,
|
||||||
|
width: "100%",
|
||||||
|
backgroundColor: "rgba(0, 224, 255, 0.8)",
|
||||||
|
color: "#0F111A",
|
||||||
|
p: 3,
|
||||||
|
zIndex: 2,
|
||||||
|
textAlign: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant="h5" sx={{ fontWeight: 700 }}>
|
||||||
|
Where Creativity Happens
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body1">
|
||||||
|
Our inspiring workspace designed for collaboration and
|
||||||
|
innovation
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<Box sx={{ py: { xs: 8, md: 10 } }}>
|
||||||
|
<Container maxWidth="md">
|
||||||
|
<Box
|
||||||
|
component={motion.div}
|
||||||
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
sx={{
|
||||||
|
backgroundColor: "rgba(0, 224, 255, 0.1)",
|
||||||
|
borderRadius: "16px",
|
||||||
|
p: { xs: 4, md: 6 },
|
||||||
|
textAlign: "center",
|
||||||
|
border: "1px solid rgba(0, 224, 255, 0.2)",
|
||||||
|
boxShadow: "0 8px 32px rgba(0, 224, 255, 0.1)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
variant="h3"
|
||||||
|
sx={{
|
||||||
|
fontFamily: "'Cormorant Garamond', serif",
|
||||||
|
fontWeight: 700,
|
||||||
|
fontSize: { xs: "2rem", md: "2.5rem" },
|
||||||
|
mb: 3,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Ready to Start Your Project?
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
sx={{
|
||||||
|
fontSize: { xs: "1rem", md: "1.1rem" },
|
||||||
|
mb: 4,
|
||||||
|
color: "rgba(255,255,255,0.85)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Let's create something amazing together. Get in touch with our
|
||||||
|
team today.
|
||||||
|
</Typography>
|
||||||
|
<Button
|
||||||
|
component={motion.a}
|
||||||
|
whileHover={{
|
||||||
|
scale: 1.05,
|
||||||
|
boxShadow: "0 0 30px rgba(0, 224, 255, 0.5)",
|
||||||
|
}}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
href="/contact"
|
||||||
|
variant="contained"
|
||||||
|
endIcon={<ArrowOutwardIcon />}
|
||||||
|
sx={{
|
||||||
|
backgroundColor: "#00E0FF",
|
||||||
|
color: "#0F111A",
|
||||||
|
borderRadius: "30px",
|
||||||
|
fontWeight: 600,
|
||||||
|
px: 4,
|
||||||
|
py: 1.5,
|
||||||
|
fontSize: "1rem",
|
||||||
|
"&:hover": {
|
||||||
|
backgroundColor: "#00c7e6",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Contact Us
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AboutUsPageTwo;
|
||||||
|
|
@ -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 Aboutusbase: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<Box>
|
||||||
|
<Outlet />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -1,15 +1,14 @@
|
||||||
import React from 'react';
|
import React from "react";
|
||||||
import ReactDOM from 'react-dom/client';
|
import ReactDOM from "react-dom/client";
|
||||||
import App from './App';
|
import App from "./App";
|
||||||
import { CssBaseline, ThemeProvider } from '@mui/material';
|
import { CssBaseline, ThemeProvider } from "@mui/material";
|
||||||
import theme from './theme';
|
import theme from "./theme";
|
||||||
|
import { BrowserRouter } from "react-router-dom";
|
||||||
|
import AppRoutes from "./routes";
|
||||||
|
|
||||||
const root = ReactDOM.createRoot(document.getElementById('root')!);
|
const root = ReactDOM.createRoot(document.getElementById("root")!);
|
||||||
root.render(
|
root.render(
|
||||||
<React.StrictMode>
|
<BrowserRouter>
|
||||||
<ThemeProvider theme={theme}>
|
<AppRoutes />
|
||||||
<CssBaseline />
|
</BrowserRouter>
|
||||||
<App />
|
|
||||||
</ThemeProvider>
|
|
||||||
</React.StrictMode>
|
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,56 +1,31 @@
|
||||||
import { createBrowserRouter, Navigate } from "react-router-dom";
|
// routes/Routes.jsx
|
||||||
import Layout from "./components/Layout";
|
import { Routes, Route } from "react-router-dom";
|
||||||
import LandingPage from "./components/landingpage/landingpage";
|
import AboutUs from "./components/aboutus/aboutus";
|
||||||
import { LandingBase } from "./components/landingpage/landingpagebase";
|
import Hero from "./components/hero/hero";
|
||||||
import { MottoBase } from "./components/mottopage/mottobase";
|
import OurWorks from "./components/ourwork/ourwork";
|
||||||
import MottoSection from "./components/mottopage/MottoSection";
|
import Services from "./components/services/services";
|
||||||
import AboutUsPage from "./components/aboutus";
|
import Testimonials from "./components/testomonials/testomonias";
|
||||||
|
import AboutUsPageTwo from "./components/pages/aboutusPage/aboutus";
|
||||||
|
|
||||||
const router = createBrowserRouter([
|
const AppRoutes = () => {
|
||||||
{
|
return (
|
||||||
path: '',
|
<Routes>
|
||||||
element: <Layout />,
|
<Route
|
||||||
children: [
|
path="/"
|
||||||
{
|
element={
|
||||||
index: true,
|
<>
|
||||||
element: <Navigate to='home' />,
|
<Hero />
|
||||||
},
|
<Services />
|
||||||
{
|
<OurWorks />
|
||||||
path: 'home',
|
<AboutUs />
|
||||||
element: <LandingBase />,
|
<Testimonials />
|
||||||
children: [
|
</>
|
||||||
{
|
|
||||||
index: true,
|
|
||||||
element: <LandingPage />,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'aboutUs',
|
|
||||||
element: <LandingBase />,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
index: true,
|
|
||||||
element: <AboutUsPage />,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'motto',
|
|
||||||
element: <MottoBase />,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
index: true,
|
|
||||||
element: <MottoSection />,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
}
|
||||||
|
/>
|
||||||
|
<Route path="/about" element={<AboutUsPageTwo />} />
|
||||||
]
|
{/* Add more routes here */}
|
||||||
},
|
</Routes>
|
||||||
|
);
|
||||||
]);
|
};
|
||||||
|
|
||||||
export default router;
|
export default AppRoutes;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue