site enhancements and add missing parts
This commit is contained in:
Mohammed Al-yaseen
598
src/app/about/page.module.css
Normal file
598
src/app/about/page.module.css
Normal file
@@ -0,0 +1,598 @@
|
||||
/* About Page Styles */
|
||||
.main {
|
||||
padding-top: 80px;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.heroSection {
|
||||
position: relative;
|
||||
padding: 128px 0;
|
||||
background: linear-gradient(135deg, #0F0525 0%, #1a0b3a 50%, #2A0B45 100%);
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.backgroundPattern {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.floatingOrb1 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 288px;
|
||||
height: 288px;
|
||||
background-color: #8b5cf6;
|
||||
border-radius: 50%;
|
||||
mix-blend-mode: multiply;
|
||||
filter: blur(24px);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.floatingOrb2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 288px;
|
||||
height: 288px;
|
||||
background-color: #eab308;
|
||||
border-radius: 50%;
|
||||
mix-blend-mode: multiply;
|
||||
filter: blur(24px);
|
||||
animation: pulse 2s infinite;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.floatingOrb3 {
|
||||
position: absolute;
|
||||
bottom: -32px;
|
||||
left: 80px;
|
||||
width: 288px;
|
||||
height: 288px;
|
||||
background-color: #ec4899;
|
||||
border-radius: 50%;
|
||||
mix-blend-mode: multiply;
|
||||
filter: blur(24px);
|
||||
animation: pulse 2s infinite;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
position: relative;
|
||||
max-width: 1152px;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 60px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 32px;
|
||||
line-height: 1.2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.gradientText {
|
||||
background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
font-size: 20px;
|
||||
color: #d1d5db;
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.heroIcon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto 24px;
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.trustBadge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 9999px;
|
||||
padding: 12px 24px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.trustBadgeIcon {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.trustBadgeText {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
/* Stats Section */
|
||||
.statsSection {
|
||||
padding: 96px 0;
|
||||
background-color: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.statsBackground {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, #faf5ff 0%, #fdf2f8 100%);
|
||||
}
|
||||
|
||||
.statsContainer {
|
||||
position: relative;
|
||||
max-width: 1152px;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.statsHeader {
|
||||
text-align: center;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.statsTitle {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.statsSubtitle {
|
||||
font-size: 18px;
|
||||
color: #6b7280;
|
||||
max-width: 512px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.statCard {
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.statCard:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.statIcon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto 24px;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.statCard:hover .statIcon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.statIconYellow {
|
||||
background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
|
||||
}
|
||||
|
||||
.statIconBlue {
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #8b5cf6 100%);
|
||||
}
|
||||
|
||||
.statIconGreen {
|
||||
background: linear-gradient(135deg, #4ade80 0%, #14b8a6 100%);
|
||||
}
|
||||
|
||||
.statIconPink {
|
||||
background: linear-gradient(135deg, #f472b6 0%, #ef4444 100%);
|
||||
}
|
||||
|
||||
.statNumber {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: #1f2937;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.statCard:hover .statNumber {
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
.statLabel {
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Story Section */
|
||||
.storySection {
|
||||
padding: 96px 0;
|
||||
background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.storyBackground {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
|
||||
}
|
||||
|
||||
.storyContainer {
|
||||
position: relative;
|
||||
max-width: 1152px;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.journeyBadge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 9999px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.storyTitle {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 32px;
|
||||
line-height: 1.2;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.storyText {
|
||||
font-size: 18px;
|
||||
color: #374151;
|
||||
margin-bottom: 32px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.timelineGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.timelineCard {
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.timelineYear {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
.timelineLabel {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.storyVisual {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mainCircle {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #f97316 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.mainIcon {
|
||||
font-size: 96px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.floatingBadge1 {
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
right: -16px;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
background: linear-gradient(135deg, #eab308 0%, #f97316 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.floatingBadge2 {
|
||||
position: absolute;
|
||||
bottom: -16px;
|
||||
left: -16px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: linear-gradient(135deg, #4ade80 0%, #14b8a6 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.badgeIcon {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Values Section */
|
||||
.valuesSection {
|
||||
padding: 96px 0;
|
||||
background-color: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.valuesBackground {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.valuesContainer {
|
||||
position: relative;
|
||||
max-width: 1152px;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.valuesHeader {
|
||||
text-align: center;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.valuesTitle {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.valuesSubtitle {
|
||||
font-size: 18px;
|
||||
color: #6b7280;
|
||||
max-width: 512px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.valueCard {
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.valueCard:hover {
|
||||
background-color: white;
|
||||
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.valueCardBody {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.valueIcon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 0 auto 24px;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.valueCard:hover .valueIcon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.valueIconBlue {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
||||
}
|
||||
|
||||
.valueIconYellow {
|
||||
background: linear-gradient(135deg, #eab308 0%, #f97316 100%);
|
||||
}
|
||||
|
||||
.valueIconGreen {
|
||||
background: linear-gradient(135deg, #22c55e 0%, #14b8a6 100%);
|
||||
}
|
||||
|
||||
.valueIconIndigo {
|
||||
background: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%);
|
||||
}
|
||||
|
||||
.valueTitle {
|
||||
margin-bottom: 16px;
|
||||
color: #1f2937;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.valueCard:hover .valueTitle {
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
.valueDescription {
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Team Section */
|
||||
.teamSection {
|
||||
padding: 96px 0;
|
||||
background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.teamBackground {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
|
||||
}
|
||||
|
||||
.teamContainer {
|
||||
position: relative;
|
||||
max-width: 1152px;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.teamHeader {
|
||||
text-align: center;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.teamTitle {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.teamSubtitle {
|
||||
font-size: 18px;
|
||||
color: #6b7280;
|
||||
max-width: 512px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.teamCard {
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.teamCard:hover {
|
||||
background-color: white;
|
||||
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.avatarContainer {
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.teamAvatar {
|
||||
margin: 0 auto;
|
||||
border: 4px solid white;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.teamCard:hover .teamAvatar {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.verificationBadge {
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
right: -8px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.verificationIcon {
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.teamMemberName {
|
||||
margin-bottom: 8px;
|
||||
color: #1f2937;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.teamCard:hover .teamMemberName {
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
.teamMemberRole {
|
||||
color: #6b7280;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.teamMemberDescription {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.heroTitle {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.mainCircle {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.mainIcon {
|
||||
font-size: 72px;
|
||||
}
|
||||
|
||||
.timelineGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.floatingOrb1,
|
||||
.floatingOrb2,
|
||||
.floatingOrb3 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
@@ -1,74 +1,177 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
CheckCircleOutlined,
|
||||
GlobalOutlined,
|
||||
RocketOutlined,
|
||||
StarOutlined,
|
||||
TeamOutlined,
|
||||
TrophyOutlined
|
||||
BulbOutlined,
|
||||
CheckCircleOutlined,
|
||||
GlobalOutlined,
|
||||
HeartOutlined,
|
||||
RocketOutlined,
|
||||
StarOutlined,
|
||||
TeamOutlined,
|
||||
TrophyOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { Avatar, Card, Col, Row, Typography } from "antd";
|
||||
import { Avatar, Card, Col, Row } from "antd";
|
||||
import Paragraph from "antd/es/typography/Paragraph";
|
||||
import Title from "antd/es/typography/Title";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
const { Title, Paragraph } = Typography;
|
||||
import styles from "./page.module.css";
|
||||
|
||||
export default function AboutPage() {
|
||||
const stats = [
|
||||
{ icon: <TrophyOutlined />, number: "50+", label: "Projects Completed" },
|
||||
{ icon: <GlobalOutlined />, number: "25+", label: "Happy Clients" },
|
||||
{ icon: <TeamOutlined />, number: "15+", label: "Expert Developers" },
|
||||
{ icon: <RocketOutlined />, number: "3+", label: "Years Experience" },
|
||||
{
|
||||
icon: <TrophyOutlined />,
|
||||
number: "50+",
|
||||
label: "Projects Completed",
|
||||
color: "from-yellow-400 to-orange-500",
|
||||
},
|
||||
{
|
||||
icon: <GlobalOutlined />,
|
||||
number: "25+",
|
||||
label: "Happy Clients",
|
||||
color: "from-blue-400 to-purple-500",
|
||||
},
|
||||
{
|
||||
icon: <TeamOutlined />,
|
||||
number: "15+",
|
||||
label: "Expert Developers",
|
||||
color: "from-green-400 to-teal-500",
|
||||
},
|
||||
{
|
||||
icon: <RocketOutlined />,
|
||||
number: "3+",
|
||||
label: "Years Experience",
|
||||
color: "from-pink-400 to-red-500",
|
||||
},
|
||||
];
|
||||
|
||||
const values = [
|
||||
{
|
||||
title: "Innovation First",
|
||||
description: "We stay ahead of technology trends to deliver cutting-edge solutions that give our clients a competitive advantage.",
|
||||
icon: <RocketOutlined />
|
||||
description:
|
||||
"We stay ahead of technology trends to deliver cutting-edge solutions that give our clients a competitive advantage.",
|
||||
icon: <RocketOutlined />,
|
||||
color: "from-blue-500 to-purple-600",
|
||||
},
|
||||
{
|
||||
title: "Quality Excellence",
|
||||
description: "Every project is crafted with attention to detail, ensuring the highest standards of quality and performance.",
|
||||
icon: <StarOutlined />
|
||||
description:
|
||||
"Every project is crafted with attention to detail, ensuring the highest standards of quality and performance.",
|
||||
icon: <StarOutlined />,
|
||||
color: "from-yellow-500 to-orange-600",
|
||||
},
|
||||
{
|
||||
title: "Client Success",
|
||||
description: "Your success is our success. We work closely with clients to understand their needs and deliver solutions that exceed expectations.",
|
||||
icon: <CheckCircleOutlined />
|
||||
description:
|
||||
"Your success is our success. We work closely with clients to understand their needs and deliver solutions that exceed expectations.",
|
||||
icon: <CheckCircleOutlined />,
|
||||
color: "from-green-500 to-teal-600",
|
||||
},
|
||||
{
|
||||
title: "Transparency",
|
||||
description: "We believe in open communication and transparent processes, keeping you informed at every step of your project.",
|
||||
icon: <GlobalOutlined />
|
||||
}
|
||||
description:
|
||||
"We believe in open communication and transparent processes, keeping you informed at every step of your project.",
|
||||
icon: <GlobalOutlined />,
|
||||
color: "from-indigo-500 to-blue-600",
|
||||
},
|
||||
];
|
||||
|
||||
const teamMembers = [
|
||||
{
|
||||
name: "Ahmed Hassan",
|
||||
role: "CEO & Founder",
|
||||
description: "Visionary leader with 10+ years in digital transformation",
|
||||
avatar: "https://randomuser.me/api/portraits/men/32.jpg",
|
||||
delay: 0,
|
||||
},
|
||||
{
|
||||
name: "Sarah Johnson",
|
||||
role: "CTO",
|
||||
description: "Technical expert specializing in AI and cloud solutions",
|
||||
avatar: "https://randomuser.me/api/portraits/women/44.jpg",
|
||||
delay: 0.1,
|
||||
},
|
||||
{
|
||||
name: "Raj Patel",
|
||||
role: "Lead Developer",
|
||||
description: "Full-stack developer with expertise in modern frameworks",
|
||||
avatar: "https://randomuser.me/api/portraits/men/67.jpg",
|
||||
delay: 0.2,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<main className="pt-20">
|
||||
<main className={styles.main}>
|
||||
{/* Hero Section */}
|
||||
<section className="py-20 bg-gradient-to-br from-[#0F0525] to-[#2A0B45] text-white">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<section className={styles.heroSection}>
|
||||
{/* Background Pattern */}
|
||||
<div className={styles.backgroundPattern}>
|
||||
<div className={styles.floatingOrb1}></div>
|
||||
<div className={styles.floatingOrb2}></div>
|
||||
<div className={styles.floatingOrb3}></div>
|
||||
</div>
|
||||
|
||||
<div className={styles.heroContent}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-center"
|
||||
>
|
||||
<Title level={1} className="text-5xl font-bold mb-6 text-white">
|
||||
About Tech Master
|
||||
<motion.div
|
||||
initial={{ scale: 0.8 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="inline-block mb-6"
|
||||
>
|
||||
<div className={styles.heroIcon}>
|
||||
<BulbOutlined style={{ fontSize: "32px", color: "white" }} />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<Title level={1} className={styles.heroTitle}>
|
||||
About <span className={styles.gradientText}>Tech Master</span>
|
||||
</Title>
|
||||
<Paragraph className="text-xl text-gray-300 max-w-3xl mx-auto">
|
||||
From Dubai to the stars, we're an award-winning technology agency
|
||||
dedicated to transforming businesses through innovative digital solutions.
|
||||
<Paragraph className={styles.heroSubtitle}>
|
||||
From Dubai to the stars, we're an award-winning technology
|
||||
agency dedicated to transforming businesses through innovative
|
||||
digital solutions that drive growth and success.
|
||||
</Paragraph>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="mt-8"
|
||||
>
|
||||
<div className={styles.trustBadge}>
|
||||
<HeartOutlined className={styles.trustBadgeIcon} />
|
||||
<span className={styles.trustBadgeText}>
|
||||
Trusted by 25+ companies worldwide
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats Section */}
|
||||
<section className="py-16 bg-white">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<section className={styles.statsSection}>
|
||||
<div className={styles.statsBackground}></div>
|
||||
<div className={styles.statsContainer}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className={styles.statsHeader}
|
||||
>
|
||||
<Title level={2} className={styles.statsTitle}>
|
||||
Our <span className={styles.gradientText}>Achievements</span>
|
||||
</Title>
|
||||
<Paragraph className={styles.statsSubtitle}>
|
||||
Numbers that speak for our commitment to excellence and innovation
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
|
||||
<Row gutter={[32, 32]} justify="center">
|
||||
{stats.map((stat, index) => (
|
||||
<Col xs={24} sm={12} md={6} key={index}>
|
||||
@@ -76,15 +179,25 @@ export default function AboutPage() {
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
className="text-center"
|
||||
className={styles.statCard}
|
||||
>
|
||||
<div className="text-4xl text-[#6e48aa] mb-2">
|
||||
{stat.icon}
|
||||
<div
|
||||
className={`${styles.statIcon} ${
|
||||
stat.color.includes("yellow")
|
||||
? styles.statIconYellow
|
||||
: stat.color.includes("blue")
|
||||
? styles.statIconBlue
|
||||
: stat.color.includes("green")
|
||||
? styles.statIconGreen
|
||||
: styles.statIconPink
|
||||
}`}
|
||||
>
|
||||
<div style={{ fontSize: "24px", color: "white" }}>
|
||||
{stat.icon}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-gray-800 mb-1">
|
||||
{stat.number}
|
||||
</div>
|
||||
<div className="text-gray-600">{stat.label}</div>
|
||||
<div className={styles.statNumber}>{stat.number}</div>
|
||||
<div className={styles.statLabel}>{stat.label}</div>
|
||||
</motion.div>
|
||||
</Col>
|
||||
))}
|
||||
@@ -93,31 +206,48 @@ export default function AboutPage() {
|
||||
</section>
|
||||
|
||||
{/* Story Section */}
|
||||
<section className="py-16 bg-gray-50">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<Row gutter={[48, 48]} align="middle">
|
||||
<section className={styles.storySection}>
|
||||
<div className={styles.storyBackground}></div>
|
||||
<div className={styles.storyContainer}>
|
||||
<Row gutter={[64, 64]} align="middle">
|
||||
<Col xs={24} lg={12}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Title level={2} className="text-4xl font-bold mb-6">
|
||||
Our Story
|
||||
<div className={styles.journeyBadge}>
|
||||
<RocketOutlined />
|
||||
<span>Our Journey</span>
|
||||
</div>
|
||||
<Title level={2} className={styles.storyTitle}>
|
||||
Our <span className={styles.gradientText}>Story</span>
|
||||
</Title>
|
||||
<Paragraph className="text-lg text-gray-700 mb-6">
|
||||
Founded in 2020, Tech Master emerged from a vision to bridge the gap
|
||||
between traditional business practices and cutting-edge technology.
|
||||
Based in Dubai, we've grown from a small startup to an award-winning
|
||||
technology agency serving clients across the UAE and beyond.
|
||||
<Paragraph className={styles.storyText}>
|
||||
Founded in 2020, Tech Master emerged from a vision to bridge
|
||||
the gap between traditional business practices and
|
||||
cutting-edge technology. Based in Dubai, we've grown from
|
||||
a small startup to an award-winning technology agency serving
|
||||
clients across the UAE and beyond.
|
||||
</Paragraph>
|
||||
<Paragraph className="text-lg text-gray-700">
|
||||
Our journey has been marked by continuous innovation, unwavering
|
||||
commitment to quality, and a deep understanding of our clients' needs.
|
||||
We believe that technology should be an enabler, not a barrier,
|
||||
and we work tirelessly to make digital transformation accessible
|
||||
to businesses of all sizes.
|
||||
<Paragraph className={styles.storyText}>
|
||||
Our journey has been marked by continuous innovation,
|
||||
unwavering commitment to quality, and a deep understanding of
|
||||
our clients' needs. We believe that technology should be
|
||||
an enabler, not a barrier, and we work tirelessly to make
|
||||
digital transformation accessible to businesses of all sizes.
|
||||
</Paragraph>
|
||||
|
||||
<div className={styles.timelineGrid}>
|
||||
<div className={styles.timelineCard}>
|
||||
<div className={styles.timelineYear}>2020</div>
|
||||
<div className={styles.timelineLabel}>Founded</div>
|
||||
</div>
|
||||
<div className={styles.timelineCard}>
|
||||
<div className={styles.timelineYear}>2024</div>
|
||||
<div className={styles.timelineLabel}>Award Winner</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Col>
|
||||
<Col xs={24} lg={12}>
|
||||
@@ -125,10 +255,18 @@ export default function AboutPage() {
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-center"
|
||||
className={styles.storyVisual}
|
||||
>
|
||||
<div className="w-64 h-64 mx-auto bg-gradient-to-br from-[#6e48aa] to-[#9d50bb] rounded-full flex items-center justify-center">
|
||||
<GlobalOutlined className="text-6xl text-white" />
|
||||
<div className="relative">
|
||||
<div className={styles.mainCircle}>
|
||||
<GlobalOutlined className={styles.mainIcon} />
|
||||
</div>
|
||||
<div className={styles.floatingBadge1}>
|
||||
<TrophyOutlined className={styles.badgeIcon} />
|
||||
</div>
|
||||
<div className={styles.floatingBadge2}>
|
||||
<StarOutlined className={styles.badgeIcon} />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Col>
|
||||
@@ -137,19 +275,20 @@ export default function AboutPage() {
|
||||
</section>
|
||||
|
||||
{/* Values Section */}
|
||||
<section className="py-16 bg-white">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<section className={styles.valuesSection}>
|
||||
<div className={styles.valuesBackground}></div>
|
||||
<div className={styles.valuesContainer}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-center mb-12"
|
||||
className={styles.valuesHeader}
|
||||
>
|
||||
<Title level={2} className="text-4xl font-bold mb-4">
|
||||
Our Values
|
||||
<Title level={2} className={styles.valuesTitle}>
|
||||
Our <span className={styles.gradientText}>Values</span>
|
||||
</Title>
|
||||
<Paragraph className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||||
These core values guide everything we do and shape the way we
|
||||
<Paragraph className={styles.valuesSubtitle}>
|
||||
These core values guide everything we do and shape the way we
|
||||
approach every project and client relationship.
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
@@ -161,15 +300,31 @@ export default function AboutPage() {
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
className="h-full"
|
||||
>
|
||||
<Card className="h-full text-center hover:shadow-lg transition-shadow">
|
||||
<div className="text-4xl text-[#6e48aa] mb-4">
|
||||
{value.icon}
|
||||
<Card
|
||||
className={styles.valueCard}
|
||||
bodyStyle={{ padding: "2rem" }}
|
||||
>
|
||||
<div
|
||||
className={`${styles.valueIcon} ${
|
||||
value.color.includes("blue")
|
||||
? styles.valueIconBlue
|
||||
: value.color.includes("yellow")
|
||||
? styles.valueIconYellow
|
||||
: value.color.includes("green")
|
||||
? styles.valueIconGreen
|
||||
: styles.valueIconIndigo
|
||||
}`}
|
||||
>
|
||||
<div style={{ fontSize: "24px", color: "white" }}>
|
||||
{value.icon}
|
||||
</div>
|
||||
</div>
|
||||
<Title level={4} className="mb-3">
|
||||
<Title level={4} className={styles.valueTitle}>
|
||||
{value.title}
|
||||
</Title>
|
||||
<Paragraph className="text-gray-600">
|
||||
<Paragraph className={styles.valueDescription}>
|
||||
{value.description}
|
||||
</Paragraph>
|
||||
</Card>
|
||||
@@ -181,73 +336,61 @@ export default function AboutPage() {
|
||||
</section>
|
||||
|
||||
{/* Team Section */}
|
||||
<section className="py-16 bg-gray-50">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<section className={styles.teamSection}>
|
||||
<div className={styles.teamBackground}></div>
|
||||
<div className={styles.teamContainer}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-center mb-12"
|
||||
className={styles.teamHeader}
|
||||
>
|
||||
<Title level={2} className="text-4xl font-bold mb-4">
|
||||
Our Team
|
||||
<Title level={2} className={styles.teamTitle}>
|
||||
Meet Our <span className={styles.gradientText}>Team</span>
|
||||
</Title>
|
||||
<Paragraph className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||||
Meet the passionate professionals behind Tech Master's success.
|
||||
Our diverse team brings together expertise from various domains
|
||||
to deliver exceptional results.
|
||||
<Paragraph className={styles.teamSubtitle}>
|
||||
Meet the passionate professionals behind Tech Master's
|
||||
success. Our diverse team brings together expertise from various
|
||||
domains to deliver exceptional results.
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
|
||||
<Row gutter={[32, 32]} justify="center">
|
||||
<Col xs={24} sm={12} md={8}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center"
|
||||
>
|
||||
<Avatar size={120} src="https://randomuser.me/api/portraits/men/32.jpg" className="mb-4" />
|
||||
<Title level={4} className="mb-2">Ahmed Hassan</Title>
|
||||
<Paragraph className="text-gray-600 mb-2">CEO & Founder</Paragraph>
|
||||
<Paragraph className="text-sm text-gray-500">
|
||||
Visionary leader with 10+ years in digital transformation
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} md={8}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="text-center"
|
||||
>
|
||||
<Avatar size={120} src="https://randomuser.me/api/portraits/women/44.jpg" className="mb-4" />
|
||||
<Title level={4} className="mb-2">Sarah Johnson</Title>
|
||||
<Paragraph className="text-gray-600 mb-2">CTO</Paragraph>
|
||||
<Paragraph className="text-sm text-gray-500">
|
||||
Technical expert specializing in AI and cloud solutions
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} md={8}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="text-center"
|
||||
>
|
||||
<Avatar size={120} src="https://randomuser.me/api/portraits/men/67.jpg" className="mb-4" />
|
||||
<Title level={4} className="mb-2">Raj Patel</Title>
|
||||
<Paragraph className="text-gray-600 mb-2">Lead Developer</Paragraph>
|
||||
<Paragraph className="text-sm text-gray-500">
|
||||
Full-stack developer with expertise in modern frameworks
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
</Col>
|
||||
{teamMembers.map((member, index) => (
|
||||
<Col xs={24} sm={12} md={8} key={index}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: member.delay }}
|
||||
className="text-center group"
|
||||
>
|
||||
<Card className={styles.teamCard}>
|
||||
<div className={styles.avatarContainer}>
|
||||
<Avatar
|
||||
size={140}
|
||||
src={member.avatar}
|
||||
className={styles.teamAvatar}
|
||||
/>
|
||||
<div className={styles.verificationBadge}>
|
||||
<StarOutlined className={styles.verificationIcon} />
|
||||
</div>
|
||||
</div>
|
||||
<Title level={4} className={styles.teamMemberName}>
|
||||
{member.name}
|
||||
</Title>
|
||||
<Paragraph className={styles.teamMemberRole}>
|
||||
{member.role}
|
||||
</Paragraph>
|
||||
<Paragraph className={styles.teamMemberDescription}>
|
||||
{member.description}
|
||||
</Paragraph>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user