+
+ {/* Background Pattern */}
+
-
- 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>
-
- From Dubai to the stars, we're an award-winning technology agency
- dedicated to transforming businesses through innovative digital solutions.
+
+ 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.
+
+
+
{/* Stats Section */}
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Our <span className={styles.gradientText}>Achievements</span>
+
+
+ Numbers that speak for our commitment to excellence and innovation
+
+
+
{stats.map((stat, index) => (
- {stat.icon}
+
-
+
-
+ {stat.icon}
+
- {stat.number}
-
- {stat.label}
+ {stat.number}
+ {stat.label}
))}
@@ -93,31 +206,48 @@ export default function AboutPage() {
{/* Story Section */}
-
-
+
+
+
+
-
- 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>
-
- 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.
+
+ 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.
-
- 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.
+
+ 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.
+
+
+
+
+ 2020
+ Founded
+
+
+ 2024
+ Award Winner
+
-
-
+
@@ -137,19 +275,20 @@ export default function AboutPage() {
{/* Values Section */}
-
+
+
+
+
+
+
+
+
-
- Our Values
+ <Title level={2} className={styles.valuesTitle}>
+ Our <span className={styles.gradientText}>Values</span>
-
- These core values guide everything we do and shape the way we
+
+ These core values guide everything we do and shape the way we
approach every project and client relationship.
@@ -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"
>
-
-
-
+ {/* Hero Section */}
+
+
+
+ {/* Contact Section */}
+
+
+
+
+ {/* Features Section */}
+
+
);
-}
\ No newline at end of file
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 071ae3b..9c64bbc 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -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
>
-
+
{/* Structured Data */}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 57f5477..9e15e38 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -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() {
-
+
-
+
-
+
-
-
-
+
+
);
}
diff --git a/src/app/projects/page.module.css b/src/app/projects/page.module.css
new file mode 100644
index 0000000..92d6b4f
--- /dev/null
+++ b/src/app/projects/page.module.css
@@ -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;
+ }
+}
\ No newline at end of file
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index 55035df..b4cde2c 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -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(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 (
-
-
+ {/* Hero Section */}
+
+
+
+ {/* Projects Section */}
+
+
+
+
+ {/* Project Details Modal */}
+
+ {isModalVisible && selectedProject && (
+
+
+
+ )}
+
+
+
);
-}
\ No newline at end of file
+}
diff --git a/src/app/services/layout.tsx b/src/app/services/layout.tsx
index 5576dc8..16156e1 100644
--- a/src/app/services/layout.tsx
+++ b/src/app/services/layout.tsx
@@ -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;
-}
\ No newline at end of file
+}
diff --git a/src/app/services/page.module.css b/src/app/services/page.module.css
new file mode 100644
index 0000000..dbd3d7a
--- /dev/null
+++ b/src/app/services/page.module.css
@@ -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;
+ }
+}
\ No newline at end of file
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index a70157c..b8bb028 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -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: ([]);
+
+ 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 (
-
-
+ {/* Hero Section */}
+
+
+
+
+
+ {/* Services Section */}
+
+
+
+
+ {/* Process Section */}
+
+
+
+
+ {/* CTA Section */}
+
+
);
-}
\ No newline at end of file
+}
- {value.icon}
+
+
+ <Title level={4} className={styles.valueTitle}>
{value.title}
-
+
{value.description}
@@ -181,73 +336,61 @@ export default function AboutPage() {
{/* Team Section */}
-
-
- TechMaster
+ Tech Masters
diff --git a/src/app/components/ProjectsShowcase/ProjectsShowcase.tsx b/src/app/components/ProjectsShowcase/ProjectsShowcase.tsx
index 0c94425..06cc2d7 100644
--- a/src/app/components/ProjectsShowcase/ProjectsShowcase.tsx
+++ b/src/app/components/ProjectsShowcase/ProjectsShowcase.tsx
@@ -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;
diff --git a/src/app/components/ProjectsShowcase/ProjectsShowcaseSelector.module.css b/src/app/components/ProjectsShowcase/ProjectsShowcaseSelector.module.css
index 9a4651d..76ab392 100644
--- a/src/app/components/ProjectsShowcase/ProjectsShowcaseSelector.module.css
+++ b/src/app/components/ProjectsShowcase/ProjectsShowcaseSelector.module.css
@@ -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;
}
-}
\ No newline at end of file
+}
diff --git a/src/app/contact/page.module.css b/src/app/contact/page.module.css
new file mode 100644
index 0000000..e851ad9
--- /dev/null
+++ b/src/app/contact/page.module.css
@@ -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;
+ }
+}
\ No newline at end of file
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 13c4f53..41815f4 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -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 (
-
+
-
+ {value.icon}
+
+
+
+
-
- Our Team
+ <Title level={2} className={styles.teamTitle}>
+ Meet Our <span className={styles.gradientText}>Team</span>
-
- Meet the passionate professionals behind Tech Master's success.
- Our diverse team brings together expertise from various domains
- to deliver exceptional results.
+
+ Meet the passionate professionals behind Tech Master's
+ success. Our diverse team brings together expertise from various
+ domains to deliver exceptional results.
-
- Ahmed Hassan
- CEO & Founder
-
- Visionary leader with 10+ years in digital transformation
-
-
-
-
- Sarah Johnson
- CTO
-
- Technical expert specializing in AI and cloud solutions
-
-
-
-
- Raj Patel
- Lead Developer
-
- Full-stack developer with expertise in modern frameworks
-
-
-
+ {teamMembers.map((member, index) => (
+
+
+
+ {member.name}
+
+
+ {member.role}
+
+
+ {member.description}
+
+
+
+
+ ))}
);
-}
\ No newline at end of file
+}
diff --git a/src/app/components/Contact/Contact.tsx b/src/app/components/Contact/Contact.tsx
deleted file mode 100644
index 7e0b521..0000000
--- a/src/app/components/Contact/Contact.tsx
+++ /dev/null
@@ -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 (
-
-
- );
-};
-
-export default ContactSection;
diff --git a/src/app/components/Contact/ContactSection.module.css b/src/app/components/Contact/ContactSection.module.css
deleted file mode 100644
index b30a2c3..0000000
--- a/src/app/components/Contact/ContactSection.module.css
+++ /dev/null
@@ -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;
- }
-}
diff --git a/src/app/components/Footer/Footer.module.css b/src/app/components/Footer/Footer.module.css
new file mode 100644
index 0000000..9905ff1
--- /dev/null
+++ b/src/app/components/Footer/Footer.module.css
@@ -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;
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/Footer/Footer.tsx b/src/app/components/Footer/Footer.tsx
new file mode 100644
index 0000000..0cc39c3
--- /dev/null
+++ b/src/app/components/Footer/Footer.tsx
@@ -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 (
+
+ );
+};
+
+export default Footer;
\ No newline at end of file
diff --git a/src/app/components/Header/Header.tsx b/src/app/components/Header/Header.tsx
index bcc4994..7524662 100644
--- a/src/app/components/Header/Header.tsx
+++ b/src/app/components/Header/Header.tsx
@@ -50,7 +50,7 @@ const Header = () => {
+
+
+
+
-
-
-
-
-
-
-
- Get In Touch
-
-
- Ready to transform your ideas into reality? Contact us today.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Send Us a Message
-
-
-
-
-
-
-
-
-
-
-
- Email
-
-
- info@techmaster.com
-
-
-
-
-
-
- Phone
-
- +1 (555) 123-4567
-
-
-
-
-
- Address
-
-
- 1234 Tech Boulevard, Innovation District
-
- San Francisco, CA 94105 -
-
- - San Francisco, CA 94105 -
+
+
+
+
+
+
+
+ Get In <span className={styles.gradientText}>Touch</span>
+
+
+ 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.
+
+
+
+
+
+
+
+ 24/7
+ Support
+
+
+ 2hr
+ Response Time
+
+
+ 100%
+ Secure
+
+
+
+
+ {/* Contact Info */}
+
+
+
+
+
+ {/* Contact Form */}
+
+
+
+
+
+ Contact Information
+
+
+ Reach out to us through any of these channels. We're here
+ to help you succeed with your next project.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Email
+
+
+ info@techmaster.com
+
+
+
+
+
+
+ Phone
+
+
+ +1 (555) 123-4567
+
+
+
+
+
+
+ Address
+
+
+ 1234 Tech Boulevard, Innovation District
+
+ San Francisco, CA 94105 +
+
+ + San Francisco, CA 94105 +
+
+
+
+ Interactive Map Coming Soon
+
+
+ Send Us a Message
+
+
+ Tell us about your project and we'll get back to you
+ within 2 hours.
+
+
+
+
+
+
+
+ Why Choose{" "}
+ <span
+ style={{
+ background:
+ "linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)",
+ WebkitBackgroundClip: "text",
+ WebkitTextFillColor: "transparent",
+ backgroundClip: "text",
+ }}
+ >
+ Us
+ </span>
+
+
+ We're committed to providing exceptional service and support
+ throughout your journey with us.
+
+
+
+
+
+
+
+ 24/7 Support
+
+
+ Our dedicated team is available around the clock to assist you
+ with any questions or concerns.
+
+
+
+
+
+ Fast Response
+
+
+ We guarantee a response within 2 hours during business hours,
+ ensuring your project moves forward quickly.
+
+
+
+
+
+ Secure & Confidential
+
+
+ Your information is protected with enterprise-grade security and
+ strict confidentiality protocols.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Our <span className={styles.gradientText}>Projects</span>
+
+
+ Explore our portfolio of innovative solutions that have
+ transformed businesses and delivered exceptional results across
+ various industries.
+
+
+
+
+
+
+
+ 50+
+ Projects Completed
+
+
+ 8
+ Industries Served
+
+
+ 100%
+ Client Satisfaction
+
+
+
+
+ Featured <span className={styles.gradientText}>Work</span>
+
+
+ Discover our latest projects and see how we've helped businesses
+ achieve their digital transformation goals.
+
+
+
+ {/* Filter Section */}
+
+ {displayedProjects.map((project) => (
+
+ handleProjectClick(project)}
+ className={styles.projectCard}
+ cover={
+
+
+ ))}
+
+
+ {/* Load More Section */}
+ {visibleProjects < filteredProjects.length && (
+
+
+
+
+ {/* Projects Grid */}
+
+ {categories.map((category) => (
+
+ ))}
+
+
+
+ }
+ >
+
+ }
+ className={styles.viewButton}
+ />
+
+ {project.featured && (
+
+
+ {project.title}
+
+
+ {project.description}
+
+
+
+ {project.category}
+
+
+ {project.technologies.slice(0, 4).map((tech) => (
+
+ {tech}
+
+ ))}
+ {project.technologies.length > 4 && (
+
+ +{project.technologies.length - 4} more
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ Project Overview
+ {selectedProject.detailedDescription}
+
+
+ Key Features
+
+ Project Details
+
+
+
+
+
+
+
+ {selectedProject.title}
+
+ {selectedProject.category}
+
+
+ {selectedProject.liveUrl && (
+ }
+ href={selectedProject.liveUrl}
+ target="_blank"
+ >
+ Live Demo
+
+ )}
+ {selectedProject.githubUrl && (
+ }
+ href={selectedProject.githubUrl}
+ target="_blank"
+ >
+ View Code
+
+ )}
+
+
+
+ {selectedProject.images.map((image, index) => (
+
+
+
+
+
+ ))}
+ -
+ {selectedProject.features.map((feature, index) => (
+
- + {feature} + + ))} +
+ Duration: {selectedProject.duration}
+
+
+ Team Size: {selectedProject.teamSize}
+
+
+ Technologies:
+
+
+
+ {selectedProject.technologies.map((tech) => (
+
+ {tech}
+
+ ))}
+
+
+
+
+
+
+
+
+
+ Our <span className={styles.gradientText}>Services</span>
+
+
+ Innovative technology solutions customized for your business
+ needs. From web development to AI solutions, we deliver excellence
+ in every project.
+
+
+
+
+
+ {/* Hero Footer */}
+
+
+
+ 50+
+ Projects Completed
+
+
+ 8
+ Service Categories
+
+
+ 100%
+ Client Satisfaction
+
+
+
+
+
+
+
+
+
+
+ -
+
-
+
+
+ About Us + +
+ -
+
+
+ Our Services + +
+ -
+
+
+ Portfolio + +
+ -
+
+
+ Contact Us + +
+
+
+
+
+
+ -
+
-
+
+
+ Web Development + +
+ -
+
+
+ Mobile Apps + +
+ -
+
+
+ AI Solutions + +
+ -
+
+
+ Cloud Services + +
+
+
+
+
+
+ -
+
-
+
+
+ Blog & Insights + +
+ -
+
+
+ Case Studies + +
+ -
+
+
+ Whitepapers + +
+ -
+
+
+ Webinars + +
+
+
+
+
+ -
+
-
+
+
+ info@techmaster.com + +
+ -
+
+
+ +1 (555) 123-4567 + +
+ -
+
+
+ San Francisco, CA + +
+ -
+
+
+ 24/7 Support + +
+
+
+
+ What We <span className={styles.gradientText}>Offer</span>
+
+
+ Comprehensive technology solutions designed to drive your business
+ forward. Each service is crafted with precision and delivered with
+ excellence.
+
+
+
+
+ {services.map((service) => (
+
+
+
+ {service.title}
+
+
+
+ {service.description}
+
+
+
+
+ ))}
+
+
+
+ {service.icon}
+
+
+ -
+ {service.features.map((feature, index) => (
+
- + {feature} + + ))} +
+
+
+ Our <span className={styles.gradientText}>Process</span>
+
+
+ A proven methodology that ensures successful project delivery and
+ exceeds expectations.
+
+
+
+
+ {processSteps.map((step, index) => (
+
+
+ ))}
+
+
+
+
+ {step.title}
+
+
+ {step.description}
+
+
+ {step.number}
+
+
+
+ Ready to Start Your{" "}
+ <span className={styles.gradientText}>Project</span>?
+
+
+ Let's discuss how we can help bring your vision to life. Our team
+ is ready to create something amazing together.
+
+
+
+
+