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