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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,242 +0,0 @@
|
||||
// File: src/components/home/ContactSection.tsx
|
||||
|
||||
import {
|
||||
EnvironmentOutlined,
|
||||
MailOutlined,
|
||||
PhoneOutlined,
|
||||
SendOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { Button, Col, Form, Input, message, Row, Typography } from "antd";
|
||||
import { motion } from "framer-motion";
|
||||
import Image from "next/image";
|
||||
import React, { useState } from "react";
|
||||
import styles from "./ContactSection.module.css";
|
||||
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
const { TextArea } = Input;
|
||||
|
||||
const ContactSection: React.FC = () => {
|
||||
const [form] = Form.useForm();
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setSubmitting(true);
|
||||
|
||||
// Simulate API call
|
||||
setTimeout(() => {
|
||||
message.success("Your message has been sent successfully!");
|
||||
form.resetFields();
|
||||
setSubmitting(false);
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.2,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { y: 20, opacity: 0 },
|
||||
visible: {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
transition: { duration: 0.5 },
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<section className={styles.contactSection}>
|
||||
<div className={styles.backgroundElements}>
|
||||
<div className={styles.glowOrbTop}></div>
|
||||
<div className={styles.glowOrbBottom}></div>
|
||||
</div>
|
||||
|
||||
<div className={styles.container}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className={styles.sectionHeader}
|
||||
>
|
||||
<Title level={2} className={styles.sectionTitle}>
|
||||
Get In Touch
|
||||
</Title>
|
||||
<Paragraph className={styles.sectionSubtitle}>
|
||||
Ready to transform your ideas into reality? Contact us today.
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
|
||||
<Row gutter={[48, 48]} className={styles.contactContent}>
|
||||
<Col xs={24} lg={10}>
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
className={styles.contactInfo}
|
||||
>
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
className={styles.contactInfoItem}
|
||||
>
|
||||
<div className={styles.iconWrapper}>
|
||||
<MailOutlined className={styles.contactIcon} />
|
||||
</div>
|
||||
<div>
|
||||
<Text strong className={styles.contactLabel}>
|
||||
Email
|
||||
</Text>
|
||||
<Text className={styles.contactValue}>
|
||||
info@techmaster.com
|
||||
</Text>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
className={styles.contactInfoItem}
|
||||
>
|
||||
<div className={styles.iconWrapper}>
|
||||
<PhoneOutlined className={styles.contactIcon} />
|
||||
</div>
|
||||
<div>
|
||||
<Text strong className={styles.contactLabel}>
|
||||
Phone
|
||||
</Text>
|
||||
<Text className={styles.contactValue}>+1 (555) 123-4567</Text>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
className={styles.contactInfoItem}
|
||||
>
|
||||
<div className={styles.iconWrapper}>
|
||||
<EnvironmentOutlined className={styles.contactIcon} />
|
||||
</div>
|
||||
<div>
|
||||
<Text strong className={styles.contactLabel}>
|
||||
Address
|
||||
</Text>
|
||||
<Text className={styles.contactValue}>
|
||||
1234 Tech Boulevard, Innovation District
|
||||
<br />
|
||||
San Francisco, CA 94105
|
||||
</Text>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
className={styles.mapContainer}
|
||||
>
|
||||
<Image
|
||||
src="/api/placeholder/400/200"
|
||||
alt="Office Location Map"
|
||||
className={styles.mapImage}
|
||||
width={400}
|
||||
height={400}
|
||||
/>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} lg={14}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className={styles.contactForm}
|
||||
>
|
||||
<Title level={4} className={styles.formTitle}>
|
||||
Send Us a Message
|
||||
</Title>
|
||||
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleSubmit}
|
||||
className={styles.form}
|
||||
>
|
||||
<Row gutter={16}>
|
||||
<Col xs={24} sm={12}>
|
||||
<Form.Item
|
||||
name="name"
|
||||
label="Name"
|
||||
rules={[
|
||||
{ required: true, message: "Please enter your name" },
|
||||
]}
|
||||
>
|
||||
<Input size="large" placeholder="Your name" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col xs={24} sm={12}>
|
||||
<Form.Item
|
||||
name="email"
|
||||
label="Email"
|
||||
rules={[
|
||||
{ required: true, message: "Please enter your email" },
|
||||
{
|
||||
type: "email",
|
||||
message: "Please enter a valid email",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input size="large" placeholder="Your email" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Form.Item
|
||||
name="subject"
|
||||
label="Subject"
|
||||
rules={[
|
||||
{ required: true, message: "Please enter a subject" },
|
||||
]}
|
||||
>
|
||||
<Input size="large" placeholder="How can we help you?" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="message"
|
||||
label="Message"
|
||||
rules={[
|
||||
{ required: true, message: "Please enter your message" },
|
||||
]}
|
||||
>
|
||||
<TextArea
|
||||
rows={5}
|
||||
placeholder="Tell us about your project..."
|
||||
className={styles.messageInput}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
size="large"
|
||||
icon={<SendOutlined />}
|
||||
loading={submitting}
|
||||
className={styles.submitButton}
|
||||
>
|
||||
Send Message
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</motion.div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactSection;
|
||||
@@ -1,190 +0,0 @@
|
||||
/* File: src/components/home/ContactSection.module.css */
|
||||
|
||||
.contactSection {
|
||||
padding: 100px 0;
|
||||
background-color: #f8f9fa;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.backgroundElements {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.glowOrbTop {
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary-glow);
|
||||
top: -200px;
|
||||
left: -150px;
|
||||
filter: blur(50px);
|
||||
}
|
||||
|
||||
.glowOrbBottom {
|
||||
position: absolute;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(64, 169, 255, 0.15) 0%,
|
||||
rgba(64, 169, 255, 0.05) 50%,
|
||||
rgba(0, 0, 0, 0) 70%
|
||||
);
|
||||
bottom: -250px;
|
||||
right: -200px;
|
||||
filter: blur(60px);
|
||||
}
|
||||
|
||||
.sectionHeader {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-size: 2.5rem !important;
|
||||
font-weight: 700 !important;
|
||||
margin-bottom: 16px !important;
|
||||
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.sectionSubtitle {
|
||||
font-size: 1.1rem;
|
||||
color: #666;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.contactContent {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
|
||||
backdrop-filter: blur(8px);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.contactInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.contactInfoItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.iconWrapper {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 4px 8px rgba(152, 71, 232, 0.2);
|
||||
}
|
||||
|
||||
.contactIcon {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.contactLabel {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.contactValue {
|
||||
color: #666;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.mapContainer {
|
||||
margin-top: 16px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.mapImage {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.contactForm {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.formTitle {
|
||||
margin-bottom: 24px !important;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.messageInput {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.submitButton {
|
||||
height: 48px;
|
||||
padding: 0 32px;
|
||||
border-radius: 24px;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.submitButton:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.contactContent {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.contactForm {
|
||||
padding: 24px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.contactSection {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
|
||||
.mapContainer {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
250
src/app/components/Footer/Footer.module.css
Normal file
250
src/app/components/Footer/Footer.module.css
Normal file
@@ -0,0 +1,250 @@
|
||||
/* Footer Component Styles */
|
||||
.footer {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #0F0525 0%, #1a0b3a 50%, #2A0B45 100%);
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
padding: 80px 0 40px;
|
||||
}
|
||||
|
||||
.footerBackground {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.footerOrb1 {
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: -100px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||
border-radius: 50%;
|
||||
filter: blur(40px);
|
||||
animation: float 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.footerOrb2 {
|
||||
position: absolute;
|
||||
bottom: -150px;
|
||||
right: -100px;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
||||
border-radius: 50%;
|
||||
filter: blur(35px);
|
||||
animation: float 10s ease-in-out infinite reverse;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
.footerContainer {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.footerContent {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 40px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.footerColumn {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.footerColumnTitle {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.footerColumnIcon {
|
||||
color: #a855f7;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.footerLinks {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footerLink {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.footerLink a {
|
||||
color: #cbd5e1;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.footerLink a:hover {
|
||||
color: #a855f7;
|
||||
transform: translateX(6px);
|
||||
}
|
||||
|
||||
.footerLinkIcon {
|
||||
font-size: 0.8rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.footerBottom {
|
||||
text-align: center;
|
||||
padding-top: 40px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.footerBottomText {
|
||||
color: #94a3b8;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 30px;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.socialLinks {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.socialLink {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.socialLink:hover {
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||
transform: translateY(-3px);
|
||||
color: white;
|
||||
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color: #64748b;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.copyright a {
|
||||
color: #94a3b8;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.copyright a:hover {
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.footerContent {
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.footer {
|
||||
padding: 60px 0 30px;
|
||||
}
|
||||
|
||||
.footerContent {
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.footerColumn {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footerColumnTitle {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footerLink a {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.socialLinks {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.socialLink {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.footerBottomText {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.footer {
|
||||
padding: 50px 0 25px;
|
||||
}
|
||||
|
||||
.footerContent {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.footerColumnTitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.footerLink a {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.socialLinks {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.socialLink {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
226
src/app/components/Footer/Footer.tsx
Normal file
226
src/app/components/Footer/Footer.tsx
Normal file
@@ -0,0 +1,226 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
ArrowRightOutlined,
|
||||
BulbOutlined,
|
||||
EnvironmentOutlined,
|
||||
FacebookOutlined,
|
||||
InstagramOutlined,
|
||||
LinkedinOutlined,
|
||||
MailOutlined,
|
||||
PhoneOutlined,
|
||||
TeamOutlined,
|
||||
TrophyOutlined,
|
||||
TwitterOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { Typography } from 'antd';
|
||||
import { motion } from 'framer-motion';
|
||||
import React from 'react';
|
||||
import styles from './Footer.module.css';
|
||||
|
||||
const { Paragraph } = Typography;
|
||||
|
||||
const Footer: React.FC = () => {
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { y: 20, opacity: 0 },
|
||||
visible: {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
transition: { duration: 0.5 }
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<footer className={styles.footer}>
|
||||
<div className={styles.footerBackground}>
|
||||
<div className={styles.footerOrb1}></div>
|
||||
<div className={styles.footerOrb2}></div>
|
||||
</div>
|
||||
|
||||
<div className={styles.footerContainer}>
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
className={styles.footerContent}
|
||||
>
|
||||
<motion.div variants={itemVariants} className={styles.footerColumn}>
|
||||
<div className={styles.footerColumnTitle}>
|
||||
<TeamOutlined className={styles.footerColumnIcon} />
|
||||
Company
|
||||
</div>
|
||||
<ul className={styles.footerLinks}>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/about">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/services">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
Our Services
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/projects">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
Portfolio
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/contact">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
Contact Us
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</motion.div>
|
||||
|
||||
<motion.div variants={itemVariants} className={styles.footerColumn}>
|
||||
<div className={styles.footerColumnTitle}>
|
||||
<BulbOutlined className={styles.footerColumnIcon} />
|
||||
Services
|
||||
</div>
|
||||
<ul className={styles.footerLinks}>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/services#webdev">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
Web Development
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/services#mobile">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
Mobile Apps
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/services#ai">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
AI Solutions
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/services#cloud">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
Cloud Services
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</motion.div>
|
||||
|
||||
<motion.div variants={itemVariants} className={styles.footerColumn}>
|
||||
<div className={styles.footerColumnTitle}>
|
||||
<TrophyOutlined className={styles.footerColumnIcon} />
|
||||
Resources
|
||||
</div>
|
||||
<ul className={styles.footerLinks}>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/blog">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
Blog & Insights
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/case-studies">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
Case Studies
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/whitepapers">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
Whitepapers
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/webinars">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
Webinars
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</motion.div>
|
||||
|
||||
<motion.div variants={itemVariants} className={styles.footerColumn}>
|
||||
<div className={styles.footerColumnTitle}>
|
||||
<MailOutlined className={styles.footerColumnIcon} />
|
||||
Contact Info
|
||||
</div>
|
||||
<ul className={styles.footerLinks}>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="mailto:info@techmaster.com">
|
||||
<MailOutlined className={styles.footerLinkIcon} />
|
||||
info@techmaster.com
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="tel:+15551234567">
|
||||
<PhoneOutlined className={styles.footerLinkIcon} />
|
||||
+1 (555) 123-4567
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="#">
|
||||
<EnvironmentOutlined className={styles.footerLinkIcon} />
|
||||
San Francisco, CA
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/support">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
24/7 Support
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
viewport={{ once: true }}
|
||||
className={styles.footerBottom}
|
||||
>
|
||||
<Paragraph className={styles.footerBottomText}>
|
||||
Ready to transform your business? Let's discuss your next project.
|
||||
</Paragraph>
|
||||
|
||||
<div className={styles.socialLinks}>
|
||||
<a href="#" className={styles.socialLink}>
|
||||
<FacebookOutlined />
|
||||
</a>
|
||||
<a href="#" className={styles.socialLink}>
|
||||
<TwitterOutlined />
|
||||
</a>
|
||||
<a href="#" className={styles.socialLink}>
|
||||
<LinkedinOutlined />
|
||||
</a>
|
||||
<a href="#" className={styles.socialLink}>
|
||||
<InstagramOutlined />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className={styles.copyright}>
|
||||
© 2024 Tech Master. All rights reserved. | Privacy Policy | Terms of Service
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@@ -50,7 +50,7 @@ const Header = () => {
|
||||
<div className={styles.logoDot}></div>
|
||||
</div>
|
||||
<Title level={3} className={styles.logoText}>
|
||||
TechMaster
|
||||
Tech Masters
|
||||
</Title>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
@@ -1,11 +1,8 @@
|
||||
import {
|
||||
Typography
|
||||
} from "antd";
|
||||
import Paragraph from "antd/es/typography/Paragraph";
|
||||
import Title from "antd/es/typography/Title";
|
||||
import ProjectsShowcaseClient from "./ProjectsShowcaseClient";
|
||||
import styles from "./ProjectsShowcaseSelector.module.css";
|
||||
|
||||
const { Title, Paragraph } = Typography;
|
||||
|
||||
interface Project {
|
||||
id: string;
|
||||
title: string;
|
||||
|
||||
@@ -47,11 +47,11 @@
|
||||
}
|
||||
|
||||
.projectCard {
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
height: fit-content;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -64,7 +64,7 @@
|
||||
.projectImageContainer {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 220px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.projectImage {
|
||||
@@ -84,7 +84,6 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(116, 0, 184, 0.4);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -115,13 +114,18 @@
|
||||
.technologiesList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 16px;
|
||||
gap: 4px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.techTag {
|
||||
margin: 0;
|
||||
color: #7400b8;
|
||||
background: #f8fafc;
|
||||
color: #475569;
|
||||
border: 1px solid #e2e8f0;
|
||||
font-size: 0.75rem;
|
||||
padding: 2px 6px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.featuredBadge {
|
||||
@@ -214,7 +218,7 @@
|
||||
}
|
||||
|
||||
.modalHeader::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -335,7 +339,7 @@
|
||||
}
|
||||
|
||||
.sectionTitle::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
@@ -379,7 +383,7 @@
|
||||
}
|
||||
|
||||
.featureItem::before {
|
||||
content: '✓';
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 12px;
|
||||
@@ -431,13 +435,13 @@
|
||||
.projectsSection {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
|
||||
.sectionTitle {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
|
||||
|
||||
.projectImageContainer {
|
||||
height: 180px;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.projectModal {
|
||||
@@ -494,4 +498,4 @@
|
||||
.carouselItem {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
518
src/app/contact/page.module.css
Normal file
518
src/app/contact/page.module.css
Normal file
@@ -0,0 +1,518 @@
|
||||
/* Contact Page Enhanced Styles */
|
||||
.main {
|
||||
padding-top: 80px;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.heroSection {
|
||||
position: relative;
|
||||
padding: 80px 0 60px;
|
||||
background: linear-gradient(135deg, #0F0525 0%, #1a0b3a 50%, #2A0B45 100%);
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.heroBackground {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.heroOrb1 {
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: -100px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||
border-radius: 50%;
|
||||
filter: blur(40px);
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.heroOrb2 {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: -150px;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
||||
border-radius: 50%;
|
||||
filter: blur(35px);
|
||||
animation: float 8s ease-in-out infinite reverse;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
position: relative;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
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: 1.25rem;
|
||||
color: #cbd5e1;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 30px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.contactStats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.statItem {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.statNumber {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #a855f7;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.statLabel {
|
||||
font-size: 0.9rem;
|
||||
color: #94a3b8;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Contact Section */
|
||||
.contactSection {
|
||||
padding: 80px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.contactBackground {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(236, 72, 153, 0.05) 100%);
|
||||
}
|
||||
|
||||
.contactContainer {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.contactGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
gap: 60px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
/* Contact Info */
|
||||
.contactInfo {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.contactInfo::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||
}
|
||||
|
||||
.contactInfoHeader {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.contactInfoTitle {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.contactInfoSubtitle {
|
||||
color: #64748b;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.contactInfoList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.contactInfoItem {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.contactInfoItem:hover {
|
||||
background: #f1f5f9;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.iconWrapper {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.iconWrapperEmail {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||
}
|
||||
|
||||
.iconWrapperPhone {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
}
|
||||
|
||||
.iconWrapperLocation {
|
||||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||||
}
|
||||
|
||||
.contactIcon {
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.contactDetails {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.contactLabel {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 4px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.contactValue {
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Map Section */
|
||||
.mapSection {
|
||||
margin-top: 30px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.mapContainer {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mapPlaceholder {
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.mapIcon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 10px;
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
/* Contact Form */
|
||||
.contactForm {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.contactForm::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||
}
|
||||
|
||||
.formHeader {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.formTitle {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.formSubtitle {
|
||||
color: #64748b;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.formRow {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.formField {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.formField :global(.ant-form-item-label) {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.formField :global(.ant-form-item-label > label) {
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.formField :global(.ant-input),
|
||||
.formField :global(.ant-input-affix-wrapper) {
|
||||
border-radius: 12px;
|
||||
border: 2px solid #e5e7eb;
|
||||
padding: 12px 16px;
|
||||
font-size: 0.95rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.formField :global(.ant-input:focus),
|
||||
.formField :global(.ant-input-affix-wrapper:focus),
|
||||
.formField :global(.ant-input-affix-wrapper-focused) {
|
||||
border-color: #8b5cf6;
|
||||
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
|
||||
}
|
||||
|
||||
.formField :global(.ant-input:hover),
|
||||
.formField :global(.ant-input-affix-wrapper:hover) {
|
||||
border-color: #a855f7;
|
||||
}
|
||||
|
||||
.messageField {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.messageField :global(.ant-input) {
|
||||
resize: none;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.submitButton {
|
||||
height: 50px;
|
||||
border-radius: 25px;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||
border: none;
|
||||
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.submitButton:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 35px rgba(139, 92, 246, 0.4);
|
||||
background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
|
||||
}
|
||||
|
||||
.submitButton:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Additional Features */
|
||||
.featuresSection {
|
||||
padding: 60px 0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.featuresContainer {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.featuresGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.featureCard {
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
background: #f8fafc;
|
||||
border-radius: 16px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.featureCard:hover {
|
||||
background: white;
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.featureIcon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 auto 20px;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.featureIconSupport {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||
}
|
||||
|
||||
.featureIconResponse {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
}
|
||||
|
||||
.featureIconSecurity {
|
||||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||||
}
|
||||
|
||||
.featureTitle {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.featureDescription {
|
||||
color: #64748b;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.contactGrid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.heroSection {
|
||||
padding: 60px 0 40px;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.contactStats {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.contactSection {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.contactInfo,
|
||||
.contactForm {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.formRow {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.featuresGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.heroTitle {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.contactInfo,
|
||||
.contactForm {
|
||||
padding: 25px 15px;
|
||||
}
|
||||
|
||||
.contactInfoItem {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,410 @@
|
||||
"use client";
|
||||
|
||||
import ContactSection from "../components/Contact/Contact";
|
||||
import {
|
||||
BulbOutlined,
|
||||
ClockCircleOutlined,
|
||||
EnvironmentOutlined,
|
||||
IeOutlined,
|
||||
MailOutlined,
|
||||
PhoneOutlined,
|
||||
SendOutlined,
|
||||
UserOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { Button, Form, Input, message, Typography } from "antd";
|
||||
import { motion } from "framer-motion";
|
||||
import { useState } from "react";
|
||||
import styles from "./page.module.css";
|
||||
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
const { TextArea } = Input;
|
||||
|
||||
export default function ContactPage() {
|
||||
const [form] = Form.useForm();
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setSubmitting(true);
|
||||
|
||||
// Simulate API call
|
||||
setTimeout(() => {
|
||||
message.success("Your message has been sent successfully!");
|
||||
form.resetFields();
|
||||
setSubmitting(false);
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.2,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { y: 20, opacity: 0 },
|
||||
visible: {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
transition: { duration: 0.5 },
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="pt-20">
|
||||
<ContactSection />
|
||||
<main className={styles.main}>
|
||||
{/* Hero Section */}
|
||||
<section className={styles.heroSection}>
|
||||
<div className={styles.heroBackground}>
|
||||
<div className={styles.heroOrb1}></div>
|
||||
<div className={styles.heroOrb2}></div>
|
||||
</div>
|
||||
|
||||
<div className={styles.heroContent}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Title level={1} className={styles.heroTitle}>
|
||||
Get In <span className={styles.gradientText}>Touch</span>
|
||||
</Title>
|
||||
<Paragraph className={styles.heroSubtitle}>
|
||||
Ready to transform your ideas into reality? Let's start a
|
||||
conversation about your next project and how we can help bring
|
||||
your vision to life.
|
||||
</Paragraph>
|
||||
|
||||
<div className={styles.contactStats}>
|
||||
<div className={styles.statItem}>
|
||||
<span className={styles.statNumber}>24/7</span>
|
||||
<span className={styles.statLabel}>Support</span>
|
||||
</div>
|
||||
<div className={styles.statItem}>
|
||||
<span className={styles.statNumber}>2hr</span>
|
||||
<span className={styles.statLabel}>Response Time</span>
|
||||
</div>
|
||||
<div className={styles.statItem}>
|
||||
<span className={styles.statNumber}>100%</span>
|
||||
<span className={styles.statLabel}>Secure</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Section */}
|
||||
<section className={styles.contactSection}>
|
||||
<div className={styles.contactBackground}></div>
|
||||
<div className={styles.contactContainer}>
|
||||
<div className={styles.contactGrid}>
|
||||
{/* Contact Info */}
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
className={styles.contactInfo}
|
||||
>
|
||||
<div className={styles.contactInfoHeader}>
|
||||
<Title level={3} className={styles.contactInfoTitle}>
|
||||
Contact Information
|
||||
</Title>
|
||||
<Paragraph className={styles.contactInfoSubtitle}>
|
||||
Reach out to us through any of these channels. We're here
|
||||
to help you succeed with your next project.
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
<div className={styles.contactInfoList}>
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
className={styles.contactInfoItem}
|
||||
>
|
||||
<div
|
||||
className={`${styles.iconWrapper} ${styles.iconWrapperEmail}`}
|
||||
>
|
||||
<MailOutlined className={styles.contactIcon} />
|
||||
</div>
|
||||
<div className={styles.contactDetails}>
|
||||
<Text strong className={styles.contactLabel}>
|
||||
Email
|
||||
</Text>
|
||||
<Text className={styles.contactValue}>
|
||||
info@techmaster.com
|
||||
</Text>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
className={styles.contactInfoItem}
|
||||
>
|
||||
<div
|
||||
className={`${styles.iconWrapper} ${styles.iconWrapperPhone}`}
|
||||
>
|
||||
<PhoneOutlined className={styles.contactIcon} />
|
||||
</div>
|
||||
<div className={styles.contactDetails}>
|
||||
<Text strong className={styles.contactLabel}>
|
||||
Phone
|
||||
</Text>
|
||||
<Text className={styles.contactValue}>
|
||||
+1 (555) 123-4567
|
||||
</Text>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
className={styles.contactInfoItem}
|
||||
>
|
||||
<div
|
||||
className={`${styles.iconWrapper} ${styles.iconWrapperLocation}`}
|
||||
>
|
||||
<EnvironmentOutlined className={styles.contactIcon} />
|
||||
</div>
|
||||
<div className={styles.contactDetails}>
|
||||
<Text strong className={styles.contactLabel}>
|
||||
Address
|
||||
</Text>
|
||||
<Text className={styles.contactValue}>
|
||||
1234 Tech Boulevard, Innovation District
|
||||
<br />
|
||||
San Francisco, CA 94105
|
||||
</Text>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div variants={itemVariants} className={styles.mapSection}>
|
||||
<div className={styles.mapContainer}>
|
||||
<div className={styles.mapPlaceholder}>
|
||||
<EnvironmentOutlined className={styles.mapIcon} />
|
||||
<div>Interactive Map Coming Soon</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Contact Form */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className={styles.contactForm}
|
||||
>
|
||||
<div className={styles.formHeader}>
|
||||
<Title level={3} className={styles.formTitle}>
|
||||
Send Us a Message
|
||||
</Title>
|
||||
<Paragraph className={styles.formSubtitle}>
|
||||
Tell us about your project and we'll get back to you
|
||||
within 2 hours.
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleSubmit}
|
||||
className={styles.form}
|
||||
>
|
||||
<div className={styles.formRow}>
|
||||
<Form.Item
|
||||
name="name"
|
||||
label="Full Name"
|
||||
rules={[
|
||||
{ required: true, message: "Please enter your name" },
|
||||
]}
|
||||
className={styles.formField}
|
||||
>
|
||||
<Input
|
||||
size="large"
|
||||
placeholder="Your full name"
|
||||
prefix={<UserOutlined />}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="email"
|
||||
label="Email Address"
|
||||
rules={[
|
||||
{ required: true, message: "Please enter your email" },
|
||||
{
|
||||
type: "email",
|
||||
message: "Please enter a valid email",
|
||||
},
|
||||
]}
|
||||
className={styles.formField}
|
||||
>
|
||||
<Input
|
||||
size="large"
|
||||
placeholder="your.email@example.com"
|
||||
prefix={<MailOutlined />}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
|
||||
<Form.Item
|
||||
name="subject"
|
||||
label="Subject"
|
||||
rules={[
|
||||
{ required: true, message: "Please enter a subject" },
|
||||
]}
|
||||
className={styles.formField}
|
||||
>
|
||||
<Input
|
||||
size="large"
|
||||
placeholder="How can we help you?"
|
||||
prefix={<BulbOutlined />}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="message"
|
||||
label="Message"
|
||||
rules={[
|
||||
{ required: true, message: "Please enter your message" },
|
||||
]}
|
||||
className={`${styles.formField} ${styles.messageField}`}
|
||||
>
|
||||
<TextArea
|
||||
rows={5}
|
||||
placeholder="Tell us about your project, goals, and any specific requirements..."
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
size="large"
|
||||
icon={<SendOutlined />}
|
||||
loading={submitting}
|
||||
className={styles.submitButton}
|
||||
>
|
||||
Send Message
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className={styles.featuresSection}>
|
||||
<div className={styles.featuresContainer}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
style={{ textAlign: "center", marginBottom: "40px" }}
|
||||
>
|
||||
<Title
|
||||
level={2}
|
||||
style={{
|
||||
fontSize: "2.5rem",
|
||||
fontWeight: 700,
|
||||
color: "#1e293b",
|
||||
marginBottom: "16px",
|
||||
}}
|
||||
>
|
||||
Why Choose{" "}
|
||||
<span
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)",
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
backgroundClip: "text",
|
||||
}}
|
||||
>
|
||||
Us
|
||||
</span>
|
||||
</Title>
|
||||
<Paragraph
|
||||
style={{
|
||||
fontSize: "1.1rem",
|
||||
color: "#64748b",
|
||||
maxWidth: "600px",
|
||||
margin: "0 auto",
|
||||
}}
|
||||
>
|
||||
We're committed to providing exceptional service and support
|
||||
throughout your journey with us.
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
|
||||
<div className={styles.featuresGrid}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
className={styles.featureCard}
|
||||
>
|
||||
<div
|
||||
className={`${styles.featureIcon} ${styles.featureIconSupport}`}
|
||||
>
|
||||
<UserOutlined />
|
||||
</div>
|
||||
<Title level={4} className={styles.featureTitle}>
|
||||
24/7 Support
|
||||
</Title>
|
||||
<Paragraph className={styles.featureDescription}>
|
||||
Our dedicated team is available around the clock to assist you
|
||||
with any questions or concerns.
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className={styles.featureCard}
|
||||
>
|
||||
<div
|
||||
className={`${styles.featureIcon} ${styles.featureIconResponse}`}
|
||||
>
|
||||
<ClockCircleOutlined />
|
||||
</div>
|
||||
<Title level={4} className={styles.featureTitle}>
|
||||
Fast Response
|
||||
</Title>
|
||||
<Paragraph className={styles.featureDescription}>
|
||||
We guarantee a response within 2 hours during business hours,
|
||||
ensuring your project moves forward quickly.
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
viewport={{ once: true }}
|
||||
className={styles.featureCard}
|
||||
>
|
||||
<div
|
||||
className={`${styles.featureIcon} ${styles.featureIconSecurity}`}
|
||||
>
|
||||
<IeOutlined />
|
||||
</div>
|
||||
<Title level={4} className={styles.featureTitle}>
|
||||
Secure & Confidential
|
||||
</Title>
|
||||
<Paragraph className={styles.featureDescription}>
|
||||
Your information is protected with enterprise-grade security and
|
||||
strict confidentiality protocols.
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,7 +18,8 @@ const inter = Inter({
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Tech Master | Dubai To Stars - Award-Winning IT Solutions",
|
||||
description: "Tech Master is an award-winning Dubai-based technology agency specializing in digital transformation, web development, mobile apps, AI solutions, and enterprise software. From zero to hero, we create cutting-edge digital experiences for ambitious businesses.",
|
||||
description:
|
||||
"Tech Master is an award-winning Dubai-based technology agency specializing in digital transformation, web development, mobile apps, AI solutions, and enterprise software. From zero to hero, we create cutting-edge digital experiences for ambitious businesses.",
|
||||
keywords: [
|
||||
"Dubai IT solutions",
|
||||
"digital transformation",
|
||||
@@ -36,7 +37,7 @@ export const metadata: Metadata = {
|
||||
"blockchain development",
|
||||
"IoT solutions",
|
||||
"tech agency Dubai",
|
||||
"software development UAE"
|
||||
"software development UAE",
|
||||
],
|
||||
authors: [{ name: "Tech Master" }],
|
||||
creator: "Tech Master",
|
||||
@@ -52,7 +53,8 @@ export const metadata: Metadata = {
|
||||
},
|
||||
openGraph: {
|
||||
title: "Tech Master | Dubai To Stars - Award-Winning IT Solutions",
|
||||
description: "Award-winning Dubai-based technology agency specializing in digital transformation, web development, mobile apps, AI solutions, and enterprise software.",
|
||||
description:
|
||||
"Award-winning Dubai-based technology agency specializing in digital transformation, web development, mobile apps, AI solutions, and enterprise software.",
|
||||
url: "https://tech-masters.guru",
|
||||
siteName: "Tech Master",
|
||||
images: [
|
||||
@@ -69,7 +71,8 @@ export const metadata: Metadata = {
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "Tech Master | Dubai To Stars - Award-Winning IT Solutions",
|
||||
description: "Award-winning Dubai-based technology agency specializing in digital transformation and innovative IT solutions.",
|
||||
description:
|
||||
"Award-winning Dubai-based technology agency specializing in digital transformation and innovative IT solutions.",
|
||||
images: ["https://tech-masters.guru/twitter-image.jpg"],
|
||||
creator: "@techmasterdubai",
|
||||
},
|
||||
@@ -108,7 +111,7 @@ export default function RootLayout({
|
||||
src="https://threejs.org/examples/js/libs/stats.min.js"
|
||||
async
|
||||
></script>
|
||||
|
||||
|
||||
{/* Structured Data */}
|
||||
<script
|
||||
type="application/ld+json"
|
||||
@@ -116,26 +119,27 @@ export default function RootLayout({
|
||||
__html: JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
"name": "Tech Master",
|
||||
"url": "https://tech-masters.guru",
|
||||
"logo": "https://tech-masters.guru/logo.png",
|
||||
"description": "Award-winning Dubai-based technology agency specializing in digital transformation and innovative IT solutions.",
|
||||
"address": {
|
||||
name: "Tech Master",
|
||||
url: "https://tech-masters.guru",
|
||||
logo: "https://tech-masters.guru/logo.png",
|
||||
description:
|
||||
"Award-winning Dubai-based technology agency specializing in digital transformation and innovative IT solutions.",
|
||||
address: {
|
||||
"@type": "PostalAddress",
|
||||
"addressLocality": "Dubai",
|
||||
"addressCountry": "UAE"
|
||||
addressLocality: "Dubai",
|
||||
addressCountry: "UAE",
|
||||
},
|
||||
"contactPoint": {
|
||||
contactPoint: {
|
||||
"@type": "ContactPoint",
|
||||
"telephone": "+971-XX-XXX-XXXX",
|
||||
"contactType": "customer service"
|
||||
telephone: "+971-XX-XXX-XXXX",
|
||||
contactType: "customer service",
|
||||
},
|
||||
"sameAs": [
|
||||
sameAs: [
|
||||
"https://linkedin.com/company/tech-master",
|
||||
"https://twitter.com/techmasterdubai",
|
||||
"https://facebook.com/techmasterdubai"
|
||||
]
|
||||
})
|
||||
"https://facebook.com/techmasterdubai",
|
||||
],
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
</head>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
import { Spin, Typography } from "antd";
|
||||
import { useEffect, useState } from "react";
|
||||
import ContactSection from "./components/Contact/Contact";
|
||||
import Footer from "./components/Footer/Footer";
|
||||
import HeroSection from "./components/Hero/HeroSection";
|
||||
import PreferencesSelector from "./components/Preferences/Preferences";
|
||||
import ProjectsShowcase from "./components/ProjectsShowcase/ProjectsShowcase";
|
||||
@@ -64,23 +64,21 @@ export default function Home() {
|
||||
<section id="home">
|
||||
<HeroSection />
|
||||
</section>
|
||||
|
||||
|
||||
<section id="services">
|
||||
<ServicesSection userPreferences={userPreferences} />
|
||||
</section>
|
||||
|
||||
|
||||
<section id="projects">
|
||||
<ProjectsShowcase />
|
||||
</section>
|
||||
|
||||
|
||||
<section id="testimonials">
|
||||
<TestimonialsSection />
|
||||
</section>
|
||||
|
||||
<section id="contact">
|
||||
<ContactSection />
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
408
src/app/projects/page.module.css
Normal file
408
src/app/projects/page.module.css
Normal file
@@ -0,0 +1,408 @@
|
||||
/* Projects Page Styles */
|
||||
.main {
|
||||
padding-top: 80px;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.heroSection {
|
||||
position: relative;
|
||||
padding: 80px 0 60px;
|
||||
background: linear-gradient(135deg, #0F0525 0%, #1a0b3a 50%, #2A0B45 100%);
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.heroBackground {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.heroOrb1 {
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: -100px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||
border-radius: 50%;
|
||||
filter: blur(40px);
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.heroOrb2 {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: -150px;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
||||
border-radius: 50%;
|
||||
filter: blur(35px);
|
||||
animation: float 8s ease-in-out infinite reverse;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
position: relative;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
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: 1.25rem;
|
||||
color: #cbd5e1;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 30px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.projectStats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.statItem {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.statNumber {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #a855f7;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.statLabel {
|
||||
font-size: 0.9rem;
|
||||
color: #94a3b8;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Projects Section */
|
||||
.projectsSection {
|
||||
padding: 80px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.projectsBackground {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(236, 72, 153, 0.05) 100%);
|
||||
}
|
||||
|
||||
.projectsContainer {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.projectsHeader {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.projectsTitle {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.projectsSubtitle {
|
||||
font-size: 1.1rem;
|
||||
color: #64748b;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Filter Section */
|
||||
.filterSection {
|
||||
margin-bottom: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.filterButtons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filterButton {
|
||||
padding: 8px 20px;
|
||||
border-radius: 25px;
|
||||
border: 2px solid #e5e7eb;
|
||||
background: white;
|
||||
color: #64748b;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filterButton:hover {
|
||||
border-color: #8b5cf6;
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
.filterButton.active {
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Projects Grid */
|
||||
.projectsGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 24px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.projectCard {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.projectCard:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.projectImageContainer {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.projectImage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.projectCard:hover .projectImage {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.projectOverlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.projectCard:hover .projectOverlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.viewButton {
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||
border: none;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.featuredBadge {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.projectContent {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.categoryTag {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.projectTitle {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.projectDescription {
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 12px;
|
||||
font-size: 0.85rem;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.technologiesList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.techTag {
|
||||
background: #f8fafc;
|
||||
color: #475569;
|
||||
border: 1px solid #e2e8f0;
|
||||
font-size: 0.75rem;
|
||||
padding: 2px 6px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.projectMeta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.projectDuration {
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.projectTeam {
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
/* Load More Section */
|
||||
.loadMoreSection {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.loadMoreButton {
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 12px 32px;
|
||||
border-radius: 25px;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.loadMoreButton:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
|
||||
background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.projectsGrid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.heroSection {
|
||||
padding: 60px 0 40px;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.projectStats {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.projectsSection {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.projectsGrid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.filterButtons {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.filterButton {
|
||||
padding: 6px 16px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.heroTitle {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.projectCard {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.projectContent {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,638 @@
|
||||
import ProjectsShowcase from "../components/ProjectsShowcase/ProjectsShowcase";
|
||||
"use client";
|
||||
|
||||
import {
|
||||
CloseOutlined,
|
||||
EyeOutlined,
|
||||
GithubOutlined,
|
||||
LinkOutlined,
|
||||
RocketOutlined,
|
||||
UserOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Card,
|
||||
Carousel,
|
||||
Col,
|
||||
Modal,
|
||||
Row,
|
||||
Tag,
|
||||
Typography,
|
||||
} from "antd";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
import Footer from "../components/Footer/Footer";
|
||||
import styles from "./page.module.css";
|
||||
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
|
||||
interface Project {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
imageUrl: string;
|
||||
category: string;
|
||||
technologies: string[];
|
||||
featured: boolean;
|
||||
detailedDescription: string;
|
||||
images: string[];
|
||||
liveUrl?: string;
|
||||
githubUrl?: string;
|
||||
features: string[];
|
||||
duration: string;
|
||||
teamSize: string;
|
||||
}
|
||||
|
||||
// Sample project data (same as in ProjectsShowcase)
|
||||
const projectsData: Project[] = [
|
||||
{
|
||||
id: "p1",
|
||||
title: "BPro ERP System",
|
||||
description:
|
||||
"Comprehensive enterprise resource planning system with advanced business process management and real-time analytics.",
|
||||
imageUrl: "https://tech-masters.guru/photos/projects/bpro-erp.jpg",
|
||||
category: "Enterprise Software",
|
||||
technologies: ["React", "Node.js", "PostgreSQL", "Redis"],
|
||||
featured: true,
|
||||
detailedDescription:
|
||||
"A comprehensive ERP system designed for modern businesses, featuring advanced business process management, real-time analytics, and seamless integration with existing enterprise systems. The platform streamlines operations across all departments.",
|
||||
images: [
|
||||
"https://tech-masters.guru/photos/projects/bpro-erp.jpg",
|
||||
"https://tech-masters.guru/photos/projects/bpro-erp.jpg",
|
||||
"https://tech-masters.guru/photos/projects/bpro-erp.jpg",
|
||||
],
|
||||
liveUrl: "https://bpro-erp.com",
|
||||
githubUrl: "https://github.com/company/bpro-erp",
|
||||
features: [
|
||||
"Advanced business process management",
|
||||
"Real-time analytics and reporting",
|
||||
"Multi-department integration",
|
||||
"Custom workflow automation",
|
||||
"Comprehensive audit trails",
|
||||
],
|
||||
duration: "8 months",
|
||||
teamSize: "12 developers",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
title: "Law Office Management",
|
||||
description:
|
||||
"Complete legal practice management solution with case tracking, document management, and client portal.",
|
||||
imageUrl: "https://tech-masters.guru/photos/projects/law-office-home.png",
|
||||
category: "Legal Software",
|
||||
technologies: ["Angular", ".NET Core", "SQL Server", "Azure"],
|
||||
featured: true,
|
||||
detailedDescription:
|
||||
"A comprehensive legal practice management system designed to streamline law office operations, manage cases, track billable hours, and provide secure client communication portals.",
|
||||
images: [
|
||||
"https://tech-masters.guru/photos/projects/law-office-home.png",
|
||||
"https://tech-masters.guru/photos/projects/law-office-login.png",
|
||||
"https://tech-masters.guru/photos/projects/law-office-home.png",
|
||||
],
|
||||
liveUrl: "https://law-office-demo.com",
|
||||
githubUrl: "https://github.com/company/law-office-system",
|
||||
features: [
|
||||
"Case management and tracking",
|
||||
"Document management system",
|
||||
"Client portal and communication",
|
||||
"Time tracking and billing",
|
||||
"Calendar and appointment management",
|
||||
],
|
||||
duration: "6 months",
|
||||
teamSize: "8 developers",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
title: "MoneyOut Payment Platform",
|
||||
description:
|
||||
"Secure digital payment processing platform with multi-currency support and advanced fraud detection.",
|
||||
imageUrl: "https://tech-masters.guru/photos/projects/moneyout.png",
|
||||
category: "FinTech",
|
||||
technologies: ["Next.js", "Stripe", "MongoDB", "GraphQL"],
|
||||
featured: true,
|
||||
detailedDescription:
|
||||
"A modern payment processing platform that enables secure digital transactions with multi-currency support, advanced fraud detection, and comprehensive merchant tools.",
|
||||
images: [
|
||||
"https://tech-masters.guru/photos/projects/moneyout.png",
|
||||
"https://tech-masters.guru/photos/projects/moneyout.png",
|
||||
"https://tech-masters.guru/photos/projects/moneyout.png",
|
||||
],
|
||||
liveUrl: "https://moneyout-demo.com",
|
||||
githubUrl: "https://github.com/company/moneyout-platform",
|
||||
features: [
|
||||
"Multi-currency payment processing",
|
||||
"Advanced fraud detection",
|
||||
"Merchant dashboard and analytics",
|
||||
"Secure API integration",
|
||||
"Real-time transaction monitoring",
|
||||
],
|
||||
duration: "7 months",
|
||||
teamSize: "10 developers",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
title: "Cloths E-commerce Platform",
|
||||
description:
|
||||
"Modern fashion e-commerce platform with advanced product catalog, virtual try-on, and personalized recommendations.",
|
||||
imageUrl: "https://tech-masters.guru/photos/projects/cloths-e-commerce.png",
|
||||
category: "E-commerce",
|
||||
technologies: ["React", "Node.js", "MongoDB", "AWS"],
|
||||
featured: false,
|
||||
detailedDescription:
|
||||
"A cutting-edge fashion e-commerce platform featuring virtual try-on technology, personalized recommendations, and seamless mobile shopping experience.",
|
||||
images: [
|
||||
"https://tech-masters.guru/photos/projects/cloths-e-commerce.png",
|
||||
"https://tech-masters.guru/photos/projects/cloths-e-commerce.png",
|
||||
"https://tech-masters.guru/photos/projects/cloths-e-commerce.png",
|
||||
],
|
||||
liveUrl: "https://cloths-ecommerce.com",
|
||||
githubUrl: "https://github.com/company/cloths-ecommerce",
|
||||
features: [
|
||||
"Virtual try-on technology",
|
||||
"Personalized recommendations",
|
||||
"Advanced product catalog",
|
||||
"Mobile-first design",
|
||||
"Social commerce integration",
|
||||
],
|
||||
duration: "5 months",
|
||||
teamSize: "6 developers",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
title: "Nanas Dashboard",
|
||||
description:
|
||||
"Comprehensive business intelligence dashboard with real-time data visualization and predictive analytics.",
|
||||
imageUrl:
|
||||
"https://tech-masters.guru/photos/projects/nanas-main-dashboard.png",
|
||||
category: "Business Intelligence",
|
||||
technologies: ["Vue.js", "Python", "PostgreSQL", "Docker"],
|
||||
featured: false,
|
||||
detailedDescription:
|
||||
"A powerful business intelligence dashboard that provides real-time data visualization, predictive analytics, and comprehensive reporting for data-driven decision making.",
|
||||
images: [
|
||||
"https://tech-masters.guru/photos/projects/nanas-main-dashboard.png",
|
||||
"https://tech-masters.guru/photos/projects/nanas-main-dashboard.png",
|
||||
"https://tech-masters.guru/photos/projects/nanas-main-dashboard.png",
|
||||
],
|
||||
liveUrl: "https://nanas-dashboard.com",
|
||||
githubUrl: "https://github.com/company/nanas-dashboard",
|
||||
features: [
|
||||
"Real-time data visualization",
|
||||
"Predictive analytics",
|
||||
"Custom reporting tools",
|
||||
"Interactive dashboards",
|
||||
"Data export capabilities",
|
||||
],
|
||||
duration: "4 months",
|
||||
teamSize: "5 developers",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
title: "Easy Pay Login System",
|
||||
description:
|
||||
"Secure authentication system with multi-factor authentication and advanced security features for financial applications.",
|
||||
imageUrl: "https://tech-masters.guru/photos/projects/easy-pay-login.png",
|
||||
category: "Security",
|
||||
technologies: ["React", "Node.js", "JWT", "Redis"],
|
||||
featured: false,
|
||||
detailedDescription:
|
||||
"A robust authentication system designed for financial applications, featuring multi-factor authentication, advanced security protocols, and seamless user experience.",
|
||||
images: [
|
||||
"https://tech-masters.guru/photos/projects/easy-pay-login.png",
|
||||
"https://tech-masters.guru/photos/projects/easy-pay-login.png",
|
||||
"https://tech-masters.guru/photos/projects/easy-pay-login.png",
|
||||
],
|
||||
liveUrl: "https://easy-pay-login.com",
|
||||
githubUrl: "https://github.com/company/easy-pay-login",
|
||||
features: [
|
||||
"Multi-factor authentication",
|
||||
"Advanced security protocols",
|
||||
"Session management",
|
||||
"Audit logging",
|
||||
"Password recovery system",
|
||||
],
|
||||
duration: "3 months",
|
||||
teamSize: "4 developers",
|
||||
},
|
||||
{
|
||||
id: "p7",
|
||||
title: "Majsin Dashboard",
|
||||
description:
|
||||
"Advanced analytics dashboard with machine learning insights and customizable reporting for enterprise clients.",
|
||||
imageUrl: "https://tech-masters.guru/photos/projects/majsin-dashborad.png",
|
||||
category: "Analytics",
|
||||
technologies: ["Angular", "Python", "TensorFlow", "AWS"],
|
||||
featured: false,
|
||||
detailedDescription:
|
||||
"An advanced analytics dashboard powered by machine learning, providing deep insights and customizable reporting for enterprise-level decision making.",
|
||||
images: [
|
||||
"https://tech-masters.guru/photos/projects/majsin-dashborad.png",
|
||||
"https://tech-masters.guru/photos/projects/majsin-dashborad.png",
|
||||
"https://tech-masters.guru/photos/projects/majsin-dashborad.png",
|
||||
],
|
||||
liveUrl: "https://majsin-dashboard.com",
|
||||
githubUrl: "https://github.com/company/majsin-dashboard",
|
||||
features: [
|
||||
"Machine learning insights",
|
||||
"Customizable reporting",
|
||||
"Real-time data processing",
|
||||
"Advanced visualizations",
|
||||
"API integration capabilities",
|
||||
],
|
||||
duration: "6 months",
|
||||
teamSize: "7 developers",
|
||||
},
|
||||
{
|
||||
id: "p8",
|
||||
title: "SVU Hardware Management",
|
||||
description:
|
||||
"Comprehensive hardware inventory and management system for educational institutions with asset tracking.",
|
||||
imageUrl: "https://tech-masters.guru/photos/projects/svu-hw.png",
|
||||
category: "Education",
|
||||
technologies: ["React", "Node.js", "MySQL", "Docker"],
|
||||
featured: false,
|
||||
detailedDescription:
|
||||
"A comprehensive hardware management system designed for educational institutions, featuring asset tracking, maintenance scheduling, and detailed reporting capabilities.",
|
||||
images: [
|
||||
"https://tech-masters.guru/photos/projects/svu-hw.png",
|
||||
"https://tech-masters.guru/photos/projects/svu-hw.png",
|
||||
"https://tech-masters.guru/photos/projects/svu-hw.png",
|
||||
],
|
||||
liveUrl: "https://svu-hardware.com",
|
||||
githubUrl: "https://github.com/company/svu-hardware",
|
||||
features: [
|
||||
"Asset tracking and management",
|
||||
"Maintenance scheduling",
|
||||
"Inventory control",
|
||||
"Detailed reporting",
|
||||
"User access management",
|
||||
],
|
||||
duration: "5 months",
|
||||
teamSize: "6 developers",
|
||||
},
|
||||
];
|
||||
|
||||
const categories = [
|
||||
"All",
|
||||
"Enterprise Software",
|
||||
"Legal Software",
|
||||
"FinTech",
|
||||
"E-commerce",
|
||||
"Business Intelligence",
|
||||
"Security",
|
||||
"Analytics",
|
||||
"Education",
|
||||
];
|
||||
|
||||
export default function ProjectsPage() {
|
||||
const [selectedCategory, setSelectedCategory] = useState("All");
|
||||
const [selectedProject, setSelectedProject] = useState<Project | null>(null);
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
const [visibleProjects, setVisibleProjects] = useState(6);
|
||||
|
||||
const filteredProjects =
|
||||
selectedCategory === "All"
|
||||
? projectsData
|
||||
: projectsData.filter((project) => project.category === selectedCategory);
|
||||
|
||||
const displayedProjects = filteredProjects.slice(0, visibleProjects);
|
||||
|
||||
const handleProjectClick = (project: Project) => {
|
||||
setSelectedProject(project);
|
||||
setIsModalVisible(true);
|
||||
};
|
||||
|
||||
const handleModalClose = () => {
|
||||
setIsModalVisible(false);
|
||||
setTimeout(() => {
|
||||
setSelectedProject(null);
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const handleLoadMore = () => {
|
||||
setVisibleProjects((prev) => Math.min(prev + 6, filteredProjects.length));
|
||||
};
|
||||
|
||||
const handleCategoryClick = (category: string) => {
|
||||
if (selectedCategory === category) {
|
||||
// If clicking on the same category, remove the filter
|
||||
setSelectedCategory("All");
|
||||
} else {
|
||||
// Otherwise, set the new category
|
||||
setSelectedCategory(category);
|
||||
}
|
||||
setVisibleProjects(6);
|
||||
};
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { y: 20, opacity: 0 },
|
||||
visible: {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
transition: { duration: 0.5 },
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="pt-20">
|
||||
<ProjectsShowcase />
|
||||
<main className={styles.main}>
|
||||
{/* Hero Section */}
|
||||
<section className={styles.heroSection}>
|
||||
<div className={styles.heroBackground}>
|
||||
<div className={styles.heroOrb1}></div>
|
||||
<div className={styles.heroOrb2}></div>
|
||||
</div>
|
||||
|
||||
<div className={styles.heroContent}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Title level={1} className={styles.heroTitle}>
|
||||
Our <span className={styles.gradientText}>Projects</span>
|
||||
</Title>
|
||||
<Paragraph className={styles.heroSubtitle}>
|
||||
Explore our portfolio of innovative solutions that have
|
||||
transformed businesses and delivered exceptional results across
|
||||
various industries.
|
||||
</Paragraph>
|
||||
|
||||
<div className={styles.projectStats}>
|
||||
<div className={styles.statItem}>
|
||||
<span className={styles.statNumber}>50+</span>
|
||||
<span className={styles.statLabel}>Projects Completed</span>
|
||||
</div>
|
||||
<div className={styles.statItem}>
|
||||
<span className={styles.statNumber}>8</span>
|
||||
<span className={styles.statLabel}>Industries Served</span>
|
||||
</div>
|
||||
<div className={styles.statItem}>
|
||||
<span className={styles.statNumber}>100%</span>
|
||||
<span className={styles.statLabel}>Client Satisfaction</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Projects Section */}
|
||||
<section className={styles.projectsSection}>
|
||||
<div className={styles.projectsBackground}></div>
|
||||
<div className={styles.projectsContainer}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className={styles.projectsHeader}
|
||||
>
|
||||
<Title level={2} className={styles.projectsTitle}>
|
||||
Featured <span className={styles.gradientText}>Work</span>
|
||||
</Title>
|
||||
<Paragraph className={styles.projectsSubtitle}>
|
||||
Discover our latest projects and see how we've helped businesses
|
||||
achieve their digital transformation goals.
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
|
||||
{/* Filter Section */}
|
||||
<div className={styles.filterSection}>
|
||||
<div className={styles.filterButtons}>
|
||||
{categories.map((category) => (
|
||||
<button
|
||||
key={category}
|
||||
className={`${styles.filterButton} ${
|
||||
selectedCategory === category ? styles.active : ""
|
||||
}`}
|
||||
onClick={() => handleCategoryClick(category)}
|
||||
>
|
||||
{category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Projects Grid */}
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
className={styles.projectsGrid}
|
||||
>
|
||||
{displayedProjects.map((project) => (
|
||||
<motion.div key={project.id} variants={itemVariants}>
|
||||
<Card
|
||||
hoverable
|
||||
onClick={() => handleProjectClick(project)}
|
||||
className={styles.projectCard}
|
||||
cover={
|
||||
<div className={styles.projectImageContainer}>
|
||||
<Image
|
||||
alt={project.title}
|
||||
src={project.imageUrl}
|
||||
className={styles.projectImage}
|
||||
width={400}
|
||||
height={250}
|
||||
/>
|
||||
<div className={styles.projectOverlay}>
|
||||
<Button
|
||||
type="primary"
|
||||
shape="circle"
|
||||
icon={<EyeOutlined />}
|
||||
className={styles.viewButton}
|
||||
/>
|
||||
</div>
|
||||
{project.featured && (
|
||||
<Badge.Ribbon
|
||||
text="Featured"
|
||||
className={styles.featuredBadge}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className={styles.projectContent}>
|
||||
<div className={styles.categoryTag}>
|
||||
<Tag color="blue">{project.category}</Tag>
|
||||
</div>
|
||||
<Title level={4} className={styles.projectTitle}>
|
||||
{project.title}
|
||||
</Title>
|
||||
<Paragraph className={styles.projectDescription}>
|
||||
{project.description}
|
||||
</Paragraph>
|
||||
<div className={styles.technologiesList}>
|
||||
{project.technologies.slice(0, 4).map((tech) => (
|
||||
<Tag key={tech} className={styles.techTag}>
|
||||
{tech}
|
||||
</Tag>
|
||||
))}
|
||||
{project.technologies.length > 4 && (
|
||||
<Tag className={styles.techTag}>
|
||||
+{project.technologies.length - 4} more
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.projectMeta}>
|
||||
<div className={styles.projectDuration}>
|
||||
<RocketOutlined /> {project.duration}
|
||||
</div>
|
||||
<div className={styles.projectTeam}>
|
||||
<UserOutlined /> {project.teamSize}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* Load More Section */}
|
||||
{visibleProjects < filteredProjects.length && (
|
||||
<div className={styles.loadMoreSection}>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={handleLoadMore}
|
||||
className={styles.loadMoreButton}
|
||||
>
|
||||
Load More Projects
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Project Details Modal */}
|
||||
<AnimatePresence>
|
||||
{isModalVisible && selectedProject && (
|
||||
<Modal
|
||||
open={isModalVisible}
|
||||
onCancel={handleModalClose}
|
||||
footer={null}
|
||||
width={1000}
|
||||
className={styles.projectModal}
|
||||
closeIcon={<CloseOutlined />}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.8 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div style={{ padding: "20px 0" }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
marginBottom: "24px",
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Title level={2} style={{ marginBottom: "8px" }}>
|
||||
{selectedProject.title}
|
||||
</Title>
|
||||
<Tag color="blue">{selectedProject.category}</Tag>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "12px" }}>
|
||||
{selectedProject.liveUrl && (
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<LinkOutlined />}
|
||||
href={selectedProject.liveUrl}
|
||||
target="_blank"
|
||||
>
|
||||
Live Demo
|
||||
</Button>
|
||||
)}
|
||||
{selectedProject.githubUrl && (
|
||||
<Button
|
||||
icon={<GithubOutlined />}
|
||||
href={selectedProject.githubUrl}
|
||||
target="_blank"
|
||||
>
|
||||
View Code
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: "24px" }}>
|
||||
<Carousel autoplay dots={{ className: "custom-dots" }}>
|
||||
{selectedProject.images.map((image, index) => (
|
||||
<div key={index}>
|
||||
<Image
|
||||
src={image}
|
||||
alt={`${selectedProject.title} - Image ${index + 1}`}
|
||||
width={800}
|
||||
height={400}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "auto",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</Carousel>
|
||||
</div>
|
||||
|
||||
<Row gutter={[24, 24]}>
|
||||
<Col xs={24} md={12}>
|
||||
<Title level={4}>Project Overview</Title>
|
||||
<Paragraph>{selectedProject.detailedDescription}</Paragraph>
|
||||
|
||||
<Title level={4} style={{ marginTop: "24px" }}>
|
||||
Key Features
|
||||
</Title>
|
||||
<ul>
|
||||
{selectedProject.features.map((feature, index) => (
|
||||
<li key={index} style={{ marginBottom: "8px" }}>
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Col>
|
||||
<Col xs={24} md={12}>
|
||||
<Title level={4}>Project Details</Title>
|
||||
<div style={{ marginBottom: "16px" }}>
|
||||
<Text strong>Duration:</Text> {selectedProject.duration}
|
||||
</div>
|
||||
<div style={{ marginBottom: "16px" }}>
|
||||
<Text strong>Team Size:</Text> {selectedProject.teamSize}
|
||||
</div>
|
||||
<div style={{ marginBottom: "16px" }}>
|
||||
<Text strong>Technologies:</Text>
|
||||
<div style={{ marginTop: "8px" }}>
|
||||
{selectedProject.technologies.map((tech) => (
|
||||
<Tag key={tech} style={{ marginBottom: "4px" }}>
|
||||
{tech}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Modal>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,8 @@ import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Our Services | Tech Master - Digital Transformation & IT Solutions",
|
||||
description: "Explore our comprehensive IT services including web development, mobile apps, AI solutions, ERP systems, e-commerce platforms, and digital transformation services in Dubai.",
|
||||
description:
|
||||
"Explore our comprehensive IT services including web development, mobile apps, AI solutions, ERP systems, e-commerce platforms, and digital transformation services in Dubai.",
|
||||
keywords: [
|
||||
"web development Dubai",
|
||||
"mobile app development",
|
||||
@@ -12,11 +13,12 @@ export const metadata: Metadata = {
|
||||
"digital transformation",
|
||||
"cloud migration",
|
||||
"cybersecurity services",
|
||||
"IT consulting Dubai"
|
||||
"IT consulting Dubai",
|
||||
],
|
||||
openGraph: {
|
||||
title: "Our Services | Tech Master - Digital Transformation & IT Solutions",
|
||||
description: "Comprehensive IT services including web development, mobile apps, AI solutions, ERP systems, and digital transformation in Dubai.",
|
||||
description:
|
||||
"Comprehensive IT services including web development, mobile apps, AI solutions, ERP systems, and digital transformation in Dubai.",
|
||||
url: "https://tech-masters.guru/services",
|
||||
},
|
||||
alternates: {
|
||||
@@ -30,4 +32,4 @@ export default function ServicesLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return children;
|
||||
}
|
||||
}
|
||||
|
||||
626
src/app/services/page.module.css
Normal file
626
src/app/services/page.module.css
Normal file
@@ -0,0 +1,626 @@
|
||||
/* Services Page Enhanced Styles */
|
||||
.main {
|
||||
padding-top: 80px;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.heroSection {
|
||||
position: relative;
|
||||
padding: 80px 0 60px;
|
||||
background: linear-gradient(135deg, #0F0525 0%, #1a0b3a 50%, #2A0B45 100%);
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.heroBackground {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.heroOrb1 {
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: -100px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||
border-radius: 50%;
|
||||
filter: blur(40px);
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.heroOrb2 {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: -150px;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
||||
border-radius: 50%;
|
||||
filter: blur(35px);
|
||||
animation: float 8s ease-in-out infinite reverse;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
position: relative;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
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: 1.25rem;
|
||||
color: #cbd5e1;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 30px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.serviceStats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.statItem {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.statNumber {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #a855f7;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.statLabel {
|
||||
font-size: 0.9rem;
|
||||
color: #94a3b8;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Hero Footer */
|
||||
.heroFooter {
|
||||
margin-top: 60px;
|
||||
padding-top: 40px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.heroFooterContent {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 40px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.footerColumn {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.footerColumnTitle {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.footerColumnIcon {
|
||||
color: #a855f7;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.footerLinks {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footerLink {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.footerLink a {
|
||||
color: #cbd5e1;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.footerLink a:hover {
|
||||
color: #a855f7;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.footerLinkIcon {
|
||||
font-size: 0.8rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.footerBottom {
|
||||
text-align: center;
|
||||
padding-top: 30px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.footerBottomText {
|
||||
color: #94a3b8;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.socialLinks {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.socialLink {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.socialLink:hover {
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||
transform: translateY(-2px);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color: #64748b;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* Services Section */
|
||||
.servicesSection {
|
||||
padding: 80px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.servicesBackground {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(236, 72, 153, 0.05) 100%);
|
||||
}
|
||||
|
||||
.servicesContainer {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.servicesHeader {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.servicesTitle {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.servicesSubtitle {
|
||||
font-size: 1.1rem;
|
||||
color: #64748b;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.servicesGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 30px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
/* Service Cards */
|
||||
.serviceCard {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.serviceCard::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||
}
|
||||
|
||||
.serviceCard:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.serviceIconWrapper {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 24px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.serviceCard:hover .serviceIconWrapper {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.serviceIcon {
|
||||
font-size: 32px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Service Icon Colors */
|
||||
.iconWebDev {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||
}
|
||||
|
||||
.iconBranding {
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
|
||||
}
|
||||
|
||||
.iconEcommerce {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
}
|
||||
|
||||
.iconSEO {
|
||||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||||
}
|
||||
|
||||
.iconMobile {
|
||||
background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
|
||||
}
|
||||
|
||||
.iconCloud {
|
||||
background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
|
||||
}
|
||||
|
||||
.iconAI {
|
||||
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
|
||||
}
|
||||
|
||||
.iconConsulting {
|
||||
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
|
||||
}
|
||||
|
||||
.serviceTitle {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.serviceDescription {
|
||||
color: #64748b;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.serviceFeatures {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
|
||||
.serviceFeature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #64748b;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.serviceFeature::before {
|
||||
content: '✓';
|
||||
color: #10b981;
|
||||
font-weight: bold;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.learnMoreBtn {
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 25px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.learnMoreBtn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
|
||||
background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Process Section */
|
||||
.processSection {
|
||||
padding: 80px 0;
|
||||
background: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.processBackground {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||
}
|
||||
|
||||
.processContainer {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.processHeader {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.processTitle {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.processSubtitle {
|
||||
font-size: 1.1rem;
|
||||
color: #64748b;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.processSteps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 30px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.processStep {
|
||||
text-align: center;
|
||||
padding: 30px 20px;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.processStep:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.stepNumber {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 20px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stepTitle {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.stepDescription {
|
||||
color: #64748b;
|
||||
line-height: 1.6;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* CTA Section */
|
||||
.ctaSection {
|
||||
padding: 80px 0;
|
||||
background: linear-gradient(135deg, #0F0525 0%, #1a0b3a 50%, #2A0B45 100%);
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ctaContainer {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.ctaTitle {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ctaSubtitle {
|
||||
font-size: 1.1rem;
|
||||
color: #cbd5e1;
|
||||
margin-bottom: 40px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.ctaButton {
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 16px 32px;
|
||||
border-radius: 30px;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ctaButton:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 35px rgba(139, 92, 246, 0.4);
|
||||
background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.servicesGrid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.processSteps {
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.heroSection {
|
||||
padding: 60px 0 40px;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.serviceStats {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.heroFooterContent {
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.footerColumn {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.socialLinks {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.servicesSection {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.servicesGrid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.serviceCard {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.processSteps {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.ctaTitle {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.heroTitle {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.serviceCard {
|
||||
padding: 25px 15px;
|
||||
}
|
||||
|
||||
.servicesTitle,
|
||||
.processTitle {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,560 @@
|
||||
"use client";
|
||||
|
||||
import ServicesSection from "../components/Services/Services";
|
||||
import {
|
||||
ArrowRightOutlined,
|
||||
BulbOutlined,
|
||||
CloudOutlined,
|
||||
CodeOutlined,
|
||||
EnvironmentOutlined,
|
||||
FacebookOutlined,
|
||||
GlobalOutlined,
|
||||
InstagramOutlined,
|
||||
LineChartOutlined,
|
||||
LinkedinOutlined,
|
||||
MailOutlined,
|
||||
MobileOutlined,
|
||||
PhoneOutlined,
|
||||
RobotOutlined,
|
||||
RocketOutlined,
|
||||
ShoppingOutlined,
|
||||
TeamOutlined,
|
||||
TrophyOutlined,
|
||||
TwitterOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { Button, Card, Typography } from "antd";
|
||||
import { motion } from "framer-motion";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import styles from "./page.module.css";
|
||||
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
|
||||
interface Service {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
icon: React.ReactNode;
|
||||
iconClass: string;
|
||||
features: string[];
|
||||
preferenceMatches: string[];
|
||||
}
|
||||
|
||||
const allServices: Service[] = [
|
||||
{
|
||||
id: "webdev",
|
||||
title: "Web Development",
|
||||
description:
|
||||
"Custom web applications with cutting-edge technologies and responsive design.",
|
||||
icon: <CodeOutlined />,
|
||||
iconClass: styles.iconWebDev,
|
||||
features: [
|
||||
"React & Next.js",
|
||||
"Node.js Backend",
|
||||
"Responsive Design",
|
||||
"Performance Optimization",
|
||||
],
|
||||
preferenceMatches: ["ecommerce", "cloud", "seo"],
|
||||
},
|
||||
{
|
||||
id: "branding",
|
||||
title: "Branding & Identity",
|
||||
description:
|
||||
"Complete brand identity packages including logos, guidelines, and visual systems.",
|
||||
icon: <RocketOutlined />,
|
||||
iconClass: styles.iconBranding,
|
||||
features: [
|
||||
"Logo Design",
|
||||
"Brand Guidelines",
|
||||
"Visual Identity",
|
||||
"Marketing Materials",
|
||||
],
|
||||
preferenceMatches: ["branding", "seo"],
|
||||
},
|
||||
{
|
||||
id: "ecom",
|
||||
title: "E-commerce Solutions",
|
||||
description:
|
||||
"Full-stack e-commerce platforms with secure payment integration and inventory management.",
|
||||
icon: <ShoppingOutlined />,
|
||||
iconClass: styles.iconEcommerce,
|
||||
features: [
|
||||
"Payment Integration",
|
||||
"Inventory Management",
|
||||
"Order Processing",
|
||||
"Analytics Dashboard",
|
||||
],
|
||||
preferenceMatches: ["ecommerce", "branding"],
|
||||
},
|
||||
{
|
||||
id: "seo",
|
||||
title: "SEO & Marketing",
|
||||
description:
|
||||
"Data-driven digital marketing strategies to improve visibility and drive conversions.",
|
||||
icon: <LineChartOutlined />,
|
||||
iconClass: styles.iconSEO,
|
||||
features: [
|
||||
"Keyword Research",
|
||||
"Content Strategy",
|
||||
"Technical SEO",
|
||||
"Performance Tracking",
|
||||
],
|
||||
preferenceMatches: ["seo", "branding"],
|
||||
},
|
||||
{
|
||||
id: "mobile",
|
||||
title: "Mobile Development",
|
||||
description:
|
||||
"Native and cross-platform mobile applications for iOS and Android.",
|
||||
icon: <MobileOutlined />,
|
||||
iconClass: styles.iconMobile,
|
||||
features: [
|
||||
"iOS Development",
|
||||
"Android Development",
|
||||
"Cross-platform",
|
||||
"App Store Optimization",
|
||||
],
|
||||
preferenceMatches: ["mobile", "ai"],
|
||||
},
|
||||
{
|
||||
id: "cloud",
|
||||
title: "Cloud Solutions",
|
||||
description:
|
||||
"Scalable cloud infrastructures, migrations, and DevOps automation.",
|
||||
icon: <CloudOutlined />,
|
||||
iconClass: styles.iconCloud,
|
||||
features: [
|
||||
"AWS/Azure/GCP",
|
||||
"Infrastructure Setup",
|
||||
"DevOps Automation",
|
||||
"Scalability",
|
||||
],
|
||||
preferenceMatches: ["cloud", "ai"],
|
||||
},
|
||||
{
|
||||
id: "ai",
|
||||
title: "AI & Machine Learning",
|
||||
description:
|
||||
"Custom AI solutions for automation, prediction, and data analysis.",
|
||||
icon: <RobotOutlined />,
|
||||
iconClass: styles.iconAI,
|
||||
features: [
|
||||
"Custom AI Models",
|
||||
"Data Analysis",
|
||||
"Process Automation",
|
||||
"Predictive Analytics",
|
||||
],
|
||||
preferenceMatches: ["ai", "cloud"],
|
||||
},
|
||||
{
|
||||
id: "consulting",
|
||||
title: "Global IT Consulting",
|
||||
description:
|
||||
"Strategic technology consulting to drive digital transformation and innovation.",
|
||||
icon: <GlobalOutlined />,
|
||||
iconClass: styles.iconConsulting,
|
||||
features: [
|
||||
"Technology Strategy",
|
||||
"Digital Transformation",
|
||||
"Project Management",
|
||||
"Team Training",
|
||||
],
|
||||
preferenceMatches: ["cloud", "branding", "seo"],
|
||||
},
|
||||
];
|
||||
|
||||
const processSteps = [
|
||||
{
|
||||
number: "01",
|
||||
title: "Discovery & Planning",
|
||||
description:
|
||||
"We analyze your requirements and create a comprehensive project plan tailored to your goals.",
|
||||
},
|
||||
{
|
||||
number: "02",
|
||||
title: "Design & Development",
|
||||
description:
|
||||
"Our expert team builds your solution using the latest technologies and best practices.",
|
||||
},
|
||||
{
|
||||
number: "03",
|
||||
title: "Testing & Quality",
|
||||
description:
|
||||
"Rigorous testing ensures your solution is robust, secure, and performs flawlessly.",
|
||||
},
|
||||
{
|
||||
number: "04",
|
||||
title: "Launch & Support",
|
||||
description:
|
||||
"We deploy your solution and provide ongoing support to ensure continued success.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function ServicesPage() {
|
||||
const [services, setServices] = useState<Service[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
// Sort services based on user preferences (empty for now)
|
||||
setServices(allServices);
|
||||
}, []);
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { y: 50, opacity: 0 },
|
||||
visible: {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
transition: { duration: 0.5 },
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="pt-20">
|
||||
<ServicesSection userPreferences={[]} />
|
||||
<main className={styles.main}>
|
||||
{/* Hero Section */}
|
||||
<section className={styles.heroSection}>
|
||||
<div className={styles.heroBackground}>
|
||||
<div className={styles.heroOrb1}></div>
|
||||
<div className={styles.heroOrb2}></div>
|
||||
</div>
|
||||
|
||||
<div className={styles.heroContent}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Title level={1} className={styles.heroTitle}>
|
||||
Our <span className={styles.gradientText}>Services</span>
|
||||
</Title>
|
||||
<Paragraph className={styles.heroSubtitle}>
|
||||
Innovative technology solutions customized for your business
|
||||
needs. From web development to AI solutions, we deliver excellence
|
||||
in every project.
|
||||
</Paragraph>
|
||||
|
||||
<div className={styles.serviceStats}>
|
||||
<div className={styles.statItem}>
|
||||
<span className={styles.statNumber}>50+</span>
|
||||
<span className={styles.statLabel}>Projects Completed</span>
|
||||
</div>
|
||||
<div className={styles.statItem}>
|
||||
<span className={styles.statNumber}>8</span>
|
||||
<span className={styles.statLabel}>Service Categories</span>
|
||||
</div>
|
||||
<div className={styles.statItem}>
|
||||
<span className={styles.statNumber}>100%</span>
|
||||
<span className={styles.statLabel}>Client Satisfaction</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Hero Footer */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
className={styles.heroFooter}
|
||||
>
|
||||
<div className={styles.heroFooterContent}>
|
||||
<div className={styles.footerColumn}>
|
||||
<div className={styles.footerColumnTitle}>
|
||||
<TeamOutlined className={styles.footerColumnIcon} />
|
||||
Company
|
||||
</div>
|
||||
<ul className={styles.footerLinks}>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/about">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/services">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
Our Services
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/projects">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
Portfolio
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/contact">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
Contact Us
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className={styles.footerColumn}>
|
||||
<div className={styles.footerColumnTitle}>
|
||||
<BulbOutlined className={styles.footerColumnIcon} />
|
||||
Services
|
||||
</div>
|
||||
<ul className={styles.footerLinks}>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/services#webdev">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
Web Development
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/services#mobile">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
Mobile Apps
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/services#ai">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
AI Solutions
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/services#cloud">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
Cloud Services
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className={styles.footerColumn}>
|
||||
<div className={styles.footerColumnTitle}>
|
||||
<TrophyOutlined className={styles.footerColumnIcon} />
|
||||
Resources
|
||||
</div>
|
||||
<ul className={styles.footerLinks}>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/blog">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
Blog & Insights
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/case-studies">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
Case Studies
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/whitepapers">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
Whitepapers
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/webinars">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
Webinars
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className={styles.footerColumn}>
|
||||
<div className={styles.footerColumnTitle}>
|
||||
<MailOutlined className={styles.footerColumnIcon} />
|
||||
Contact Info
|
||||
</div>
|
||||
<ul className={styles.footerLinks}>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="mailto:info@techmaster.com">
|
||||
<MailOutlined className={styles.footerLinkIcon} />
|
||||
info@techmaster.com
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="tel:+15551234567">
|
||||
<PhoneOutlined className={styles.footerLinkIcon} />
|
||||
+1 (555) 123-4567
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="#">
|
||||
<EnvironmentOutlined className={styles.footerLinkIcon} />
|
||||
San Francisco, CA
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles.footerLink}>
|
||||
<a href="/support">
|
||||
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||
24/7 Support
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.footerBottom}>
|
||||
<Paragraph className={styles.footerBottomText}>
|
||||
Ready to transform your business? Let's discuss your next project.
|
||||
</Paragraph>
|
||||
|
||||
<div className={styles.socialLinks}>
|
||||
<a href="#" className={styles.socialLink}>
|
||||
<FacebookOutlined />
|
||||
</a>
|
||||
<a href="#" className={styles.socialLink}>
|
||||
<TwitterOutlined />
|
||||
</a>
|
||||
<a href="#" className={styles.socialLink}>
|
||||
<LinkedinOutlined />
|
||||
</a>
|
||||
<a href="#" className={styles.socialLink}>
|
||||
<InstagramOutlined />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className={styles.copyright}>
|
||||
© 2024 Tech Master. All rights reserved. | Privacy Policy | Terms
|
||||
of Service
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* Services Section */}
|
||||
<section className={styles.servicesSection}>
|
||||
<div className={styles.servicesBackground}></div>
|
||||
<div className={styles.servicesContainer}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className={styles.servicesHeader}
|
||||
>
|
||||
<Title level={2} className={styles.servicesTitle}>
|
||||
What We <span className={styles.gradientText}>Offer</span>
|
||||
</Title>
|
||||
<Paragraph className={styles.servicesSubtitle}>
|
||||
Comprehensive technology solutions designed to drive your business
|
||||
forward. Each service is crafted with precision and delivered with
|
||||
excellence.
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
className={styles.servicesGrid}
|
||||
>
|
||||
{services.map((service) => (
|
||||
<motion.div key={service.id} variants={itemVariants}>
|
||||
<Card className={styles.serviceCard}>
|
||||
<div
|
||||
className={`${styles.serviceIconWrapper} ${service.iconClass}`}
|
||||
>
|
||||
{service.icon}
|
||||
</div>
|
||||
|
||||
<Title level={3} className={styles.serviceTitle}>
|
||||
{service.title}
|
||||
</Title>
|
||||
|
||||
<Paragraph className={styles.serviceDescription}>
|
||||
{service.description}
|
||||
</Paragraph>
|
||||
|
||||
<ul className={styles.serviceFeatures}>
|
||||
{service.features.map((feature, index) => (
|
||||
<li key={index} className={styles.serviceFeature}>
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<Button type="link" className={styles.learnMoreBtn}>
|
||||
Learn More <ArrowRightOutlined />
|
||||
</Button>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Process Section */}
|
||||
<section className={styles.processSection}>
|
||||
<div className={styles.processBackground}></div>
|
||||
<div className={styles.processContainer}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className={styles.processHeader}
|
||||
>
|
||||
<Title level={2} className={styles.processTitle}>
|
||||
Our <span className={styles.gradientText}>Process</span>
|
||||
</Title>
|
||||
<Paragraph className={styles.processSubtitle}>
|
||||
A proven methodology that ensures successful project delivery and
|
||||
exceeds expectations.
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
className={styles.processSteps}
|
||||
>
|
||||
{processSteps.map((step, index) => (
|
||||
<motion.div key={index} variants={itemVariants}>
|
||||
<div className={styles.processStep}>
|
||||
<div className={styles.stepNumber}>{step.number}</div>
|
||||
<Title level={4} className={styles.stepTitle}>
|
||||
{step.title}
|
||||
</Title>
|
||||
<Paragraph className={styles.stepDescription}>
|
||||
{step.description}
|
||||
</Paragraph>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className={styles.ctaSection}>
|
||||
<div className={styles.ctaContainer}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Title level={2} className={styles.ctaTitle}>
|
||||
Ready to Start Your{" "}
|
||||
<span className={styles.gradientText}>Project</span>?
|
||||
</Title>
|
||||
<Paragraph className={styles.ctaSubtitle}>
|
||||
Let's discuss how we can help bring your vision to life. Our team
|
||||
is ready to create something amazing together.
|
||||
</Paragraph>
|
||||
<Button size="large" className={styles.ctaButton}>
|
||||
Get Started Today <ArrowRightOutlined />
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user