Compare commits
1 Commits
fix/landin
...
main
| Author | SHA1 | Date |
|---|---|---|
 Mihir Motiyani
|
f62bf4d480 |
20
src/App.tsx
20
src/App.tsx
|
|
@ -1,15 +1,23 @@
|
||||||
// App.js
|
// import AboutUsPage from "./components/aboutus";
|
||||||
import { Outlet } from "react-router-dom";
|
import AboutUs from "./components/aboutus/aboutus";
|
||||||
import Header from "./components/header/header";
|
|
||||||
import Footer from "./components/footer/footer";
|
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() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<>
|
<div>
|
||||||
<Header />
|
<Header />
|
||||||
<Outlet /> {/* This will be replaced by the current route's element */}
|
<Hero />
|
||||||
|
<Services />
|
||||||
|
<OurWorks />
|
||||||
|
<AboutUs />
|
||||||
|
<Testimonials />
|
||||||
<Footer />
|
<Footer />
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,32 @@
|
||||||
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 AboutUs from "../aboutus/aboutus";
|
import HeroSection from './landingpagecomponents/CarouselSection';
|
||||||
import Footer from "../footer/footer";
|
import WhoWeAre from './landingpagecomponents/whoweare';
|
||||||
import Header from "../header/header";
|
import OurExpertise from './landingpagecomponents/ourexperties';
|
||||||
import Hero from "../hero/hero";
|
import TopBrands from './landingpagecomponents/brands';
|
||||||
import OurWorks from "../ourwork/ourwork";
|
import CaseStudies from './landingpagecomponents/casestudy';
|
||||||
import Services from "../services/services";
|
import StatsSection from './landingpagecomponents/scrollanimationsection';
|
||||||
import Testimonials from "../testomonials/testomonias";
|
import ContactForm from './landingpagecomponents/contactus';
|
||||||
// import router from './routes';
|
// import router from './routes';
|
||||||
|
|
||||||
|
|
||||||
const LandingPage: React.FC = () => {
|
const LandingPage: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<Box>
|
<Box>
|
||||||
{/* <AnimatedHeader /> */}
|
{/* <AnimatedHeader /> */}
|
||||||
|
<HeroSection />
|
||||||
|
<WhoWeAre />
|
||||||
|
<OurExpertise />
|
||||||
|
<TopBrands />
|
||||||
|
<StatsSection/>
|
||||||
|
<CaseStudies/>
|
||||||
|
<ContactForm />
|
||||||
|
|
||||||
<Header />
|
|
||||||
<Hero />
|
|
||||||
<Services />
|
|
||||||
<OurWorks />
|
|
||||||
<AboutUs />
|
|
||||||
<Testimonials />
|
|
||||||
<Footer />
|
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,725 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
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,14 +1,15 @@
|
||||||
import React from "react";
|
import React from 'react';
|
||||||
import ReactDOM from "react-dom/client";
|
import ReactDOM from 'react-dom/client';
|
||||||
import App from "./App";
|
import App from './App';
|
||||||
import { CssBaseline, ThemeProvider } from "@mui/material";
|
import { CssBaseline, ThemeProvider } from '@mui/material';
|
||||||
import theme from "./theme";
|
import theme from './theme';
|
||||||
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(
|
||||||
<BrowserRouter>
|
<React.StrictMode>
|
||||||
<AppRoutes />
|
<ThemeProvider theme={theme}>
|
||||||
</BrowserRouter>
|
<CssBaseline />
|
||||||
|
<App />
|
||||||
|
</ThemeProvider>
|
||||||
|
</React.StrictMode>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,56 @@
|
||||||
// routes/Routes.jsx
|
import { createBrowserRouter, Navigate } from "react-router-dom";
|
||||||
import { Routes, Route } from "react-router-dom";
|
import Layout from "./components/Layout";
|
||||||
import AboutUs from "./components/aboutus/aboutus";
|
import LandingPage from "./components/landingpage/landingpage";
|
||||||
import Hero from "./components/hero/hero";
|
import { LandingBase } from "./components/landingpage/landingpagebase";
|
||||||
import OurWorks from "./components/ourwork/ourwork";
|
import { MottoBase } from "./components/mottopage/mottobase";
|
||||||
import Services from "./components/services/services";
|
import MottoSection from "./components/mottopage/MottoSection";
|
||||||
import Testimonials from "./components/testomonials/testomonias";
|
import AboutUsPage from "./components/aboutus";
|
||||||
import AboutUsPageTwo from "./components/pages/aboutusPage/aboutus";
|
|
||||||
|
|
||||||
const AppRoutes = () => {
|
const router = createBrowserRouter([
|
||||||
return (
|
{
|
||||||
<Routes>
|
path: '',
|
||||||
<Route
|
element: <Layout />,
|
||||||
path="/"
|
children: [
|
||||||
element={
|
{
|
||||||
<>
|
index: true,
|
||||||
<Hero />
|
element: <Navigate to='home' />,
|
||||||
<Services />
|
},
|
||||||
<OurWorks />
|
{
|
||||||
<AboutUs />
|
path: 'home',
|
||||||
<Testimonials />
|
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 />,
|
||||||
|
},
|
||||||
|
],
|
||||||
}
|
}
|
||||||
/>
|
|
||||||
<Route path="/about" element={<AboutUsPageTwo />} />
|
|
||||||
{/* Add more routes here */}
|
|
||||||
</Routes>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AppRoutes;
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
]);
|
||||||
|
|
||||||
|
export default router;
|
||||||
|
|
||||||
Loading…
Reference in New Issue