From e627594be9e4714816f5f088091e3f831b575e52 Mon Sep 17 00:00:00 2001 From: Mohammed Al-yaseen Date: Sat, 2 Aug 2025 02:01:29 +0300 Subject: [PATCH] site enhancements and add missing parts --- src/app/about/page.module.css | 598 ++++++++++++++++ src/app/about/page.tsx | 393 +++++++---- src/app/components/Contact/Contact.tsx | 242 ------- .../Contact/ContactSection.module.css | 190 ------ src/app/components/Footer/Footer.module.css | 250 +++++++ src/app/components/Footer/Footer.tsx | 226 +++++++ src/app/components/Header/Header.tsx | 2 +- .../ProjectsShowcase/ProjectsShowcase.tsx | 7 +- .../ProjectsShowcaseSelector.module.css | 34 +- src/app/contact/page.module.css | 518 ++++++++++++++ src/app/contact/page.tsx | 407 ++++++++++- src/app/layout.tsx | 42 +- src/app/page.tsx | 14 +- src/app/projects/page.module.css | 408 +++++++++++ src/app/projects/page.tsx | 637 +++++++++++++++++- src/app/services/layout.tsx | 10 +- src/app/services/page.module.css | 626 +++++++++++++++++ src/app/services/page.tsx | 557 ++++++++++++++- 18 files changed, 4540 insertions(+), 621 deletions(-) create mode 100644 src/app/about/page.module.css delete mode 100644 src/app/components/Contact/Contact.tsx delete mode 100644 src/app/components/Contact/ContactSection.module.css create mode 100644 src/app/components/Footer/Footer.module.css create mode 100644 src/app/components/Footer/Footer.tsx create mode 100644 src/app/contact/page.module.css create mode 100644 src/app/projects/page.module.css create mode 100644 src/app/services/page.module.css diff --git a/src/app/about/page.module.css b/src/app/about/page.module.css new file mode 100644 index 0000000..842ce1f --- /dev/null +++ b/src/app/about/page.module.css @@ -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; + } +} \ No newline at end of file diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index f6cae3e..eed5e15 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -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: , number: "50+", label: "Projects Completed" }, - { icon: , number: "25+", label: "Happy Clients" }, - { icon: , number: "15+", label: "Expert Developers" }, - { icon: , number: "3+", label: "Years Experience" }, + { + icon: , + number: "50+", + label: "Projects Completed", + color: "from-yellow-400 to-orange-500", + }, + { + icon: , + number: "25+", + label: "Happy Clients", + color: "from-blue-400 to-purple-500", + }, + { + icon: , + number: "15+", + label: "Expert Developers", + color: "from-green-400 to-teal-500", + }, + { + icon: , + 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: + description: + "We stay ahead of technology trends to deliver cutting-edge solutions that give our clients a competitive advantage.", + icon: , + 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: + description: + "Every project is crafted with attention to detail, ensuring the highest standards of quality and performance.", + icon: , + 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: + description: + "Your success is our success. We work closely with clients to understand their needs and deliver solutions that exceed expectations.", + icon: , + 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: - } + description: + "We believe in open communication and transparent processes, keeping you informed at every step of your project.", + icon: , + 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 ( -
+
{/* Hero Section */} -
-
+
+ {/* 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. + + +
+ + + Trusted by 25+ companies worldwide + +
+
{/* Stats Section */} -
-
+
+
+
+ + + Our <span className={styles.gradientText}>Achievements</span> + + + Numbers that speak for our commitment to excellence and innovation + + + {stats.map((stat, 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} > -
- {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
+
+
@@ -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} > -
- +
+
+ +
+
+ +
+
+ +
@@ -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" > - -
- {value.icon} + +
+
+ {value.icon} +
- + <Title level={4} className={styles.valueTitle}> {value.title} - + {value.description} @@ -181,73 +336,61 @@ export default function AboutPage() {
{/* Team Section */} -
-
+
+
+
- - 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 ( -
-
-
-
-
- -
- - - Get In Touch - - - Ready to transform your ideas into reality? Contact us today. - - - - - - - -
- -
-
- - Email - - - info@techmaster.com - -
- - - -
- -
-
- - Phone - - +1 (555) 123-4567 -
- - - -
- -
-
- - Address - - - 1234 Tech Boulevard, Innovation District -
- San Francisco, CA 94105 - -
- - - - Office Location Map - - - - - - - - Send Us a Message - - -
- - - - - - - - - - - - - - - - - - -