move projects data to its folder

projects: enhacne card styles and fix reset filters
main: enhance scroll styles and add CTA section
2026-02-07 01:43:23 +03:00 · 2026-02-07 00:31:55 +03:00 · 2026-02-07 00:31:26 +03:00
7 changed files with 810 additions and 693 deletions
--- a/src/app/components/ProjectsShowcase/ProjectsShowcase.tsx
+++ b/src/app/components/ProjectsShowcase/ProjectsShowcase.tsx
@@ -1,254 +1,9 @@
+import { projectsData } from "@/data/projects";
 import Paragraph from "antd/es/typography/Paragraph";
 import Title from "antd/es/typography/Title";
 import ProjectsShowcaseClient from "./ProjectsShowcaseClient";
 import styles from "./ProjectsShowcaseSelector.module.css";

-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
-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 ProjectsShowcase: React.FC = () => {
  return (
    <section className={styles.projectsSection}>
--- a/src/app/components/ProjectsShowcase/ProjectsShowcaseClient.tsx
+++ b/src/app/components/ProjectsShowcase/ProjectsShowcaseClient.tsx
@@ -1,5 +1,6 @@
 "use client";

+import { Project } from "@/data/projects";
 import {
  CloseOutlined,
  EyeOutlined,
@@ -25,23 +26,6 @@ import styles from "./ProjectsShowcaseSelector.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;
-}
-
 interface ProjectsShowcaseClientProps {
  projects: Project[];
 }
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -614,4 +614,78 @@
    width: 8px;
    height: 8px;
  }
+}
+
+/* CTA Section */
+.ctaSection {
+  padding: 100px 0;
+  background: linear-gradient(135deg, #0F0525 0%, #2A0B45 100%);
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  color: white;
+}
+
+.ctaSection::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots-cta" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1.5" fill="rgba(116, 0, 184, 0.3)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots-cta)"/></svg>');
+  opacity: 0.5;
+}
+
+.ctaContent {
+  position: relative;
+  z-index: 10;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.ctaTitle {
+  font-size: 3rem !important;
+  font-weight: 700 !important;
+  color: white !important;
+  margin-bottom: 24px !important;
+  line-height: 1.2 !important;
+}
+
+.ctaDescription {
+  font-size: 1.25rem !important;
+  color: rgba(255, 255, 255, 0.9) !important;
+  margin-bottom: 40px !important;
+  line-height: 1.6 !important;
+}
+
+.ctaButton {
+  height: auto !important;
+  padding: 12px 40px !important;
+  font-size: 1.1rem !important;
+  font-weight: 600 !important;
+  border-radius: 50px !important;
+  background: white !important;
+  color: #7400b8 !important;
+  border: none !important;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+}
+
+.ctaButton:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
+}
+
+@media (max-width: 768px) {
+  .ctaSection {
+    padding: 80px 16px;
+  }
+
+  .ctaTitle {
+    font-size: 2.2rem !important;
+  }
+
+  .ctaDescription {
+    font-size: 1.1rem !important;
+  }
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,6 +2,7 @@
 "use client";

 import {
+  ArrowRightOutlined,
  BulbOutlined,
  ClockCircleOutlined,
  CodeOutlined,
@@ -10,7 +11,8 @@ import {
  StarOutlined,
  TeamOutlined,
 } from "@ant-design/icons";
-import { Card, Col, Row, Statistic, Typography } from "antd";
+import { Button, Card, Col, Row, Statistic, Typography } from "antd";
+import { motion, useScroll, useSpring } from "framer-motion";
 import { useEffect, useState } from "react";
 import Footer from "./components/Footer/Footer";
 import HeroSection from "./components/Hero/HeroSection";
@@ -28,6 +30,13 @@ export default function Home() {
  const [showPreferences, setShowPreferences] = useState(true);
  const [loading, setLoading] = useState(true);

+  const { scrollYProgress } = useScroll();
+  const scaleX = useSpring(scrollYProgress, {
+    stiffness: 100,
+    damping: 30,
+    restDelta: 0.001,
+  });
+
  useEffect(() => {
    // Reading localStorage can only happen on the client; do it after mount.
    try {
@@ -58,6 +67,21 @@ export default function Home() {
    setShowPreferences(false);
  };

+  const fadeInUp = {
+    hidden: { opacity: 0, y: 60 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.6 } },
+  };
+
+  const staggerContainer = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+      },
+    },
+  };
+
  if (loading) {
    return (
      <div className={styles.loaderContainer}>
@@ -101,6 +125,21 @@ export default function Home() {

  return (
    <>
+      <motion.div
+        className="progress-bar"
+        style={{
+          scaleX,
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          height: "5px",
+          background: "linear-gradient(90deg, #7400b8, #56cfe1)",
+          transformOrigin: "0%",
+          zIndex: 1000,
+        }}
+      />
+
      {showPreferences && (
        <PreferencesSelector onComplete={handlePreferencesComplete} />
      )}
@@ -113,7 +152,13 @@ export default function Home() {
        {/* Services Section */}
        <section id="services" className={styles.servicesSection}>
          <div className={styles.container}>
-            <div className={styles.sectionHeader}>
+            <motion.div
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true }}
+              variants={fadeInUp}
+              className={styles.sectionHeader}
+            >
              <Title level={2} className={styles.sectionTitle}>
                Our Services
              </Title>
@@ -121,79 +166,99 @@ export default function Home() {
                We offer comprehensive solutions to transform your digital
                presence and drive business growth
              </Paragraph>
-            </div>
+            </motion.div>

-            <Row gutter={[32, 32]} className={styles.servicesGrid}>
-              <Col xs={24} sm={12} lg={8}>
-                <Card className={styles.serviceCard} hoverable>
-                  <div className={styles.serviceIcon}>
-                    <CodeOutlined />
-                  </div>
-                  <Title level={4} className={styles.serviceTitle}>
-                    Web Development
-                  </Title>
-                  <Paragraph className={styles.serviceDescription}>
-                    Custom web applications built with modern technologies and
-                    best practices for optimal performance and user experience.
-                  </Paragraph>
-                  <ul className={styles.serviceFeatures}>
-                    <li>Responsive Design</li>
-                    <li>SEO Optimization</li>
-                    <li>Performance Tuning</li>
-                    <li>Security Implementation</li>
-                  </ul>
-                </Card>
-              </Col>
+            <motion.div
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true }}
+              variants={staggerContainer}
+            >
+              <Row gutter={[32, 32]} className={styles.servicesGrid}>
+                <Col xs={24} sm={12} lg={8}>
+                  <motion.div variants={fadeInUp} style={{ height: "100%" }}>
+                    <Card className={styles.serviceCard} hoverable>
+                      <div className={styles.serviceIcon}>
+                        <CodeOutlined />
+                      </div>
+                      <Title level={4} className={styles.serviceTitle}>
+                        Web Development
+                      </Title>
+                      <Paragraph className={styles.serviceDescription}>
+                        Custom web applications built with modern technologies
+                        and best practices for optimal performance and user
+                        experience.
+                      </Paragraph>
+                      <ul className={styles.serviceFeatures}>
+                        <li>Responsive Design</li>
+                        <li>SEO Optimization</li>
+                        <li>Performance Tuning</li>
+                        <li>Security Implementation</li>
+                      </ul>
+                    </Card>
+                  </motion.div>
+                </Col>

-              <Col xs={24} sm={12} lg={8}>
-                <Card className={styles.serviceCard} hoverable>
-                  <div className={styles.serviceIcon}>
-                    <RocketOutlined />
-                  </div>
-                  <Title level={4} className={styles.serviceTitle}>
-                    Mobile Development
-                  </Title>
-                  <Paragraph className={styles.serviceDescription}>
-                    Native and cross-platform mobile applications that deliver
-                    exceptional user experiences across all devices.
-                  </Paragraph>
-                  <ul className={styles.serviceFeatures}>
-                    <li>iOS & Android Apps</li>
-                    <li>Cross-platform Solutions</li>
-                    <li>App Store Optimization</li>
-                    <li>Push Notifications</li>
-                  </ul>
-                </Card>
-              </Col>
+                <Col xs={24} sm={12} lg={8}>
+                  <motion.div variants={fadeInUp} style={{ height: "100%" }}>
+                    <Card className={styles.serviceCard} hoverable>
+                      <div className={styles.serviceIcon}>
+                        <RocketOutlined />
+                      </div>
+                      <Title level={4} className={styles.serviceTitle}>
+                        Mobile Development
+                      </Title>
+                      <Paragraph className={styles.serviceDescription}>
+                        Native and cross-platform mobile applications that
+                        deliver exceptional user experiences across all devices.
+                      </Paragraph>
+                      <ul className={styles.serviceFeatures}>
+                        <li>iOS & Android Apps</li>
+                        <li>Cross-platform Solutions</li>
+                        <li>App Store Optimization</li>
+                        <li>Push Notifications</li>
+                      </ul>
+                    </Card>
+                  </motion.div>
+                </Col>

-              <Col xs={24} sm={12} lg={8}>
-                <Card className={styles.serviceCard} hoverable>
-                  <div className={styles.serviceIcon}>
-                    <BulbOutlined />
-                  </div>
-                  <Title level={4} className={styles.serviceTitle}>
-                    UI/UX Design
-                  </Title>
-                  <Paragraph className={styles.serviceDescription}>
-                    User-centered design solutions that create intuitive,
-                    engaging, and conversion-focused digital experiences.
-                  </Paragraph>
-                  <ul className={styles.serviceFeatures}>
-                    <li>User Research</li>
-                    <li>Wireframing & Prototyping</li>
-                    <li>Visual Design</li>
-                    <li>Usability Testing</li>
-                  </ul>
-                </Card>
-              </Col>
-            </Row>
+                <Col xs={24} sm={12} lg={8}>
+                  <motion.div variants={fadeInUp} style={{ height: "100%" }}>
+                    <Card className={styles.serviceCard} hoverable>
+                      <div className={styles.serviceIcon}>
+                        <BulbOutlined />
+                      </div>
+                      <Title level={4} className={styles.serviceTitle}>
+                        UI/UX Design
+                      </Title>
+                      <Paragraph className={styles.serviceDescription}>
+                        User-centered design solutions that create intuitive,
+                        engaging, and conversion-focused digital experiences.
+                      </Paragraph>
+                      <ul className={styles.serviceFeatures}>
+                        <li>User Research</li>
+                        <li>Wireframing & Prototyping</li>
+                        <li>Visual Design</li>
+                        <li>Usability Testing</li>
+                      </ul>
+                    </Card>
+                  </motion.div>
+                </Col>
+              </Row>
+            </motion.div>
          </div>
        </section>

        {/* Statistics Section */}
        <section id="statistics" className={styles.statisticsSection}>
          <div className={styles.container}>
-            <div className={styles.sectionHeader}>
+            <motion.div
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true }}
+              variants={fadeInUp}
+              className={styles.sectionHeader}
+            >
              <Title level={2} className={styles.sectionTitle}>
                Our Impact
              </Title>
@@ -201,66 +266,81 @@ export default function Home() {
                Numbers that speak for themselves - our commitment to excellence
                in every project
              </Paragraph>
-            </div>
+            </motion.div>

-            <Row gutter={[48, 32]} className={styles.statsGrid}>
-              <Col xs={12} sm={6}>
-                <div className={styles.statCard}>
-                  <div className={styles.statIcon}>
-                    <ProjectOutlined />
-                  </div>
-                  <Statistic
-                    title="Projects Completed"
-                    value={150}
-                    suffix="+"
-                    className={styles.statistic}
-                  />
-                </div>
-              </Col>
+            <motion.div
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true }}
+              variants={staggerContainer}
+            >
+              <Row gutter={[48, 32]} className={styles.statsGrid}>
+                <Col xs={12} sm={6}>
+                  <motion.div variants={fadeInUp}>
+                    <div className={styles.statCard}>
+                      <div className={styles.statIcon}>
+                        <ProjectOutlined />
+                      </div>
+                      <Statistic
+                        title="Projects Completed"
+                        value={150}
+                        suffix="+"
+                        className={styles.statistic}
+                      />
+                    </div>
+                  </motion.div>
+                </Col>

-              <Col xs={12} sm={6}>
-                <div className={styles.statCard}>
-                  <div className={styles.statIcon}>
-                    <TeamOutlined />
-                  </div>
-                  <Statistic
-                    title="Happy Clients"
-                    value={80}
-                    suffix="+"
-                    className={styles.statistic}
-                  />
-                </div>
-              </Col>
+                <Col xs={12} sm={6}>
+                  <motion.div variants={fadeInUp}>
+                    <div className={styles.statCard}>
+                      <div className={styles.statIcon}>
+                        <TeamOutlined />
+                      </div>
+                      <Statistic
+                        title="Happy Clients"
+                        value={80}
+                        suffix="+"
+                        className={styles.statistic}
+                      />
+                    </div>
+                  </motion.div>
+                </Col>

-              <Col xs={12} sm={6}>
-                <div className={styles.statCard}>
-                  <div className={styles.statIcon}>
-                    <StarOutlined />
-                  </div>
-                  <Statistic
-                    title="Average Rating"
-                    value={4.9}
-                    suffix="/5"
-                    precision={1}
-                    className={styles.statistic}
-                  />
-                </div>
-              </Col>
+                <Col xs={12} sm={6}>
+                  <motion.div variants={fadeInUp}>
+                    <div className={styles.statCard}>
+                      <div className={styles.statIcon}>
+                        <StarOutlined />
+                      </div>
+                      <Statistic
+                        title="Average Rating"
+                        value={4.9}
+                        suffix="/5"
+                        precision={1}
+                        className={styles.statistic}
+                      />
+                    </div>
+                  </motion.div>
+                </Col>

-              <Col xs={12} sm={6}>
-                <div className={styles.statCard}>
-                  <div className={styles.statIcon}>
-                    <ClockCircleOutlined />
-                  </div>
-                  <Statistic
-                    title="Years Experience"
-                    value={8}
-                    suffix="+"
-                    className={styles.statistic}
-                  />
-                </div>
-              </Col>
-            </Row>
+                <Col xs={12} sm={6}>
+                  <motion.div variants={fadeInUp}>
+                    <div className={styles.statCard}>
+                      <div className={styles.statIcon}>
+                        <ClockCircleOutlined />
+                      </div>
+                      <Statistic
+                        title="Years Experience"
+                        value={8}
+                        suffix="+"
+                        className={styles.statistic}
+                      />
+                    </div>
+                  </motion.div>
+                </Col>
+              </Row>
+            </motion.div>
          </div>
        </section>

@@ -271,6 +351,36 @@ export default function Home() {
        <section id="testimonials">
          <TestimonialsSection />
        </section>
+
+        {/* CTA Section */}
+        <section className={styles.ctaSection}>
+          <div className={styles.container}>
+            <motion.div
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true }}
+              variants={fadeInUp}
+              className={styles.ctaContent}
+            >
+              <Title className={styles.ctaTitle}>
+                Ready to Transform Your Digital Presence?
+              </Title>
+              <Paragraph className={styles.ctaDescription}>
+                Let&apos;s collaborate to build something amazing. Our team is
+                ready to turn your vision into reality.
+              </Paragraph>
+              <Button
+                type="primary"
+                size="large"
+                icon={<ArrowRightOutlined />}
+                className={styles.ctaButton}
+                href="#contact"
+              >
+                Start Your Journey
+              </Button>
+            </motion.div>
+          </div>
+        </section>
      </main>

      <Footer />
--- a/src/app/projects/page.module.css
+++ b/src/app/projects/page.module.css
@@ -186,30 +186,33 @@
 /* Projects Grid */
 .projectsGrid {
  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 24px;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 32px;
  margin-bottom: 60px;
 }

 .projectCard {
  background: white;
-  border-radius: 16px;
+  border-radius: 20px !important;
  overflow: hidden;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-  transition: all 0.3s ease;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
-  border: none;
-  height: fit-content;
+  border: 1px solid rgba(0, 0, 0, 0.05) !important;
+  height: 100%;
+  display: flex !important;
+  flex-direction: column;
 }

 .projectCard:hover {
-  transform: translateY(-10px);
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+  transform: translateY(-8px);
+  box-shadow: 0 20px 40px rgba(116, 0, 184, 0.15);
+  border-color: rgba(116, 0, 184, 0.2) !important;
 }

 .projectImageContainer {
  position: relative;
-  height: 200px;
+  height: 240px;
  overflow: hidden;
 }

@@ -217,22 +220,23 @@
  width: 100%;
  height: 100%;
  object-fit: cover;
-  transition: transform 0.3s ease;
+  transition: transform 0.6s ease;
 }

 .projectCard:hover .projectImage {
-  transform: scale(1.05);
+  transform: scale(1.1);
 }

 .projectOverlay {
  position: absolute;
  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(15, 5, 37, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
-  transition: opacity 0.3s ease;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(2px);
 }

 .projectCard:hover .projectOverlay {
@@ -240,11 +244,23 @@
 }

 .viewButton {
-  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
-  border: none;
-  width: 50px;
-  height: 50px;
-  font-size: 18px;
+  background: white !important;
+  color: #7400b8 !important;
+  border: none !important;
+  width: 56px !important;
+  height: 56px !important;
+  font-size: 20px !important;
+  border-radius: 50% !important;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
+  transform: scale(0.8);
+  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
+}
+
+.projectCard:hover .viewButton {
+  transform: scale(1);
 }

 .featuredBadge {
@@ -255,65 +271,98 @@
 }

 .projectContent {
-  padding: 20px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
 }

 .categoryTag {
  margin-bottom: 12px;
 }

-.projectTitle {
-  font-size: 1.1rem;
+.categoryTag :global(.ant-tag) {
+  background: #f0fdf4 !important; /* Minty fresh background example */
+  color: #166534 !important;
+  border-color: #dcfce7 !important;
+  border-radius: 12px;
+  padding: 2px 10px;
  font-weight: 600;
-  color: #1e293b;
-  margin-bottom: 8px;
-  line-height: 1.3;
+  border: none;
+}
+
+/* Dynamic colors for tags could be handled in JS, but static CSS here for now */
+.projectContent .categoryTag :global(.ant-tag-blue) {
+   background: rgba(116, 0, 184, 0.08) !important;
+   color: #7400b8 !important;
+   border: none !important;
+}
+
+.projectTitle {
+  font-size: 1.25rem !important;
+  font-weight: 700 !important;
+  color: #1e293b !important;
+  margin-bottom: 12px !important;
+  line-height: 1.4 !important;
+  transition: color 0.3s ease;
+}
+
+.projectCard:hover .projectTitle {
+  color: #7400b8 !important;
 }

 .projectDescription {
-  color: #64748b;
-  line-height: 1.5;
-  margin-bottom: 12px;
-  font-size: 0.85rem;
+  color: #64748b !important;
+  line-height: 1.6 !important;
+  margin-bottom: 20px !important;
+  font-size: 0.95rem !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
+  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
+  flex-grow: 1;
 }

 .technologiesList {
  display: flex;
  flex-wrap: wrap;
-  gap: 4px;
-  margin-bottom: 12px;
+  gap: 8px;
+  margin-bottom: 20px;
 }

 .techTag {
-  background: #f8fafc;
-  color: #475569;
-  border: 1px solid #e2e8f0;
-  font-size: 0.75rem;
-  padding: 2px 6px;
-  border-radius: 8px;
+  background: #f8fafc !important;
+  color: #64748b !important;
+  border: 1px solid #e2e8f0 !important;
+  font-size: 0.75rem !important;
+  padding: 4px 10px !important;
+  border-radius: 20px !important;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.projectCard:hover .techTag {
+  border-color: #a855f7 !important;
+  color: #7400b8 !important;
+  background: #faf5ff !important;
 }

 .projectMeta {
  display: flex;
  justify-content: space-between;
  align-items: center;
-  padding-top: 12px;
+  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
-  font-size: 0.8rem;
+  font-size: 0.85rem;
+  color: #94a3b8;
+  margin-top: auto;
 }

-.projectDuration {
-  font-size: 0.75rem;
-  color: #64748b;
-}
-
-.projectTeam {
-  font-size: 0.75rem;
-  color: #64748b;
+.projectDuration, .projectTeam {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 500;
 }

 /* Load More Section */
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -1,5 +1,6 @@
 "use client";

+import { categories, Project, projectsData } from "@/data/projects";
 import {
  CloseOutlined,
  EyeOutlined,
@@ -26,269 +27,11 @@ import styles from "./page.module.css";

 const { Title, Paragraph, Text } = Typography;

-interface Project {
-  id: string;
-  title: string;
-  description: string;
-  imageUrl: string;
-  category: string;
-  technologies: string[];
-  featured: boolean;
-  detailedDescription: string;
-  images: string[];
-  liveUrl?: string;
-  githubUrl?: string;
-  features: string[];
-  duration: string;
-  teamSize: string;
-}
-
-// Sample project data (same as in ProjectsShowcase)
-const projectsData: Project[] = [
-  {
-    id: "p1",
-    title: "BPro ERP System",
-    description:
-      "Comprehensive enterprise resource planning system with advanced business process management and real-time analytics.",
-    imageUrl: "https://tech-masters.guru/photos/projects/bpro-erp.jpg",
-    category: "Enterprise Software",
-    technologies: ["React", "Node.js", "PostgreSQL", "Redis"],
-    featured: true,
-    detailedDescription:
-      "A comprehensive ERP system designed for modern businesses, featuring advanced business process management, real-time analytics, and seamless integration with existing enterprise systems. The platform streamlines operations across all departments.",
-    images: [
-      "https://tech-masters.guru/photos/projects/bpro-erp.jpg",
-      "https://tech-masters.guru/photos/projects/bpro-erp.jpg",
-      "https://tech-masters.guru/photos/projects/bpro-erp.jpg",
-    ],
-    liveUrl: "https://bpro-erp.com",
-    githubUrl: "https://github.com/company/bpro-erp",
-    features: [
-      "Advanced business process management",
-      "Real-time analytics and reporting",
-      "Multi-department integration",
-      "Custom workflow automation",
-      "Comprehensive audit trails",
-    ],
-    duration: "8 months",
-    teamSize: "12 developers",
-  },
-  {
-    id: "p2",
-    title: "Law Office Management",
-    description:
-      "Complete legal practice management solution with case tracking, document management, and client portal.",
-    imageUrl: "https://tech-masters.guru/photos/projects/law-office-home.png",
-    category: "Legal Software",
-    technologies: ["Angular", ".NET Core", "SQL Server", "Azure"],
-    featured: true,
-    detailedDescription:
-      "A comprehensive legal practice management system designed to streamline law office operations, manage cases, track billable hours, and provide secure client communication portals.",
-    images: [
-      "https://tech-masters.guru/photos/projects/law-office-home.png",
-      "https://tech-masters.guru/photos/projects/law-office-login.png",
-      "https://tech-masters.guru/photos/projects/law-office-home.png",
-    ],
-    liveUrl: "https://law-office-demo.com",
-    githubUrl: "https://github.com/company/law-office-system",
-    features: [
-      "Case management and tracking",
-      "Document management system",
-      "Client portal and communication",
-      "Time tracking and billing",
-      "Calendar and appointment management",
-    ],
-    duration: "6 months",
-    teamSize: "8 developers",
-  },
-  {
-    id: "p3",
-    title: "MoneyOut Payment Platform",
-    description:
-      "Secure digital payment processing platform with multi-currency support and advanced fraud detection.",
-    imageUrl: "https://tech-masters.guru/photos/projects/moneyout.png",
-    category: "FinTech",
-    technologies: ["Next.js", "Stripe", "MongoDB", "GraphQL"],
-    featured: true,
-    detailedDescription:
-      "A modern payment processing platform that enables secure digital transactions with multi-currency support, advanced fraud detection, and comprehensive merchant tools.",
-    images: [
-      "https://tech-masters.guru/photos/projects/moneyout.png",
-      "https://tech-masters.guru/photos/projects/moneyout.png",
-      "https://tech-masters.guru/photos/projects/moneyout.png",
-    ],
-    liveUrl: "https://moneyout-demo.com",
-    githubUrl: "https://github.com/company/moneyout-platform",
-    features: [
-      "Multi-currency payment processing",
-      "Advanced fraud detection",
-      "Merchant dashboard and analytics",
-      "Secure API integration",
-      "Real-time transaction monitoring",
-    ],
-    duration: "7 months",
-    teamSize: "10 developers",
-  },
-  {
-    id: "p4",
-    title: "Cloths E-commerce Platform",
-    description:
-      "Modern fashion e-commerce platform with advanced product catalog, virtual try-on, and personalized recommendations.",
-    imageUrl: "https://tech-masters.guru/photos/projects/cloths-e-commerce.png",
-    category: "E-commerce",
-    technologies: ["React", "Node.js", "MongoDB", "AWS"],
-    featured: false,
-    detailedDescription:
-      "A cutting-edge fashion e-commerce platform featuring virtual try-on technology, personalized recommendations, and seamless mobile shopping experience.",
-    images: [
-      "https://tech-masters.guru/photos/projects/cloths-e-commerce.png",
-      "https://tech-masters.guru/photos/projects/cloths-e-commerce.png",
-      "https://tech-masters.guru/photos/projects/cloths-e-commerce.png",
-    ],
-    liveUrl: "https://cloths-ecommerce.com",
-    githubUrl: "https://github.com/company/cloths-ecommerce",
-    features: [
-      "Virtual try-on technology",
-      "Personalized recommendations",
-      "Advanced product catalog",
-      "Mobile-first design",
-      "Social commerce integration",
-    ],
-    duration: "5 months",
-    teamSize: "6 developers",
-  },
-  {
-    id: "p5",
-    title: "Nanas Dashboard",
-    description:
-      "Comprehensive business intelligence dashboard with real-time data visualization and predictive analytics.",
-    imageUrl:
-      "https://tech-masters.guru/photos/projects/nanas-main-dashboard.png",
-    category: "Business Intelligence",
-    technologies: ["Vue.js", "Python", "PostgreSQL", "Docker"],
-    featured: false,
-    detailedDescription:
-      "A powerful business intelligence dashboard that provides real-time data visualization, predictive analytics, and comprehensive reporting for data-driven decision making.",
-    images: [
-      "https://tech-masters.guru/photos/projects/nanas-main-dashboard.png",
-      "https://tech-masters.guru/photos/projects/nanas-main-dashboard.png",
-      "https://tech-masters.guru/photos/projects/nanas-main-dashboard.png",
-    ],
-    liveUrl: "https://nanas-dashboard.com",
-    githubUrl: "https://github.com/company/nanas-dashboard",
-    features: [
-      "Real-time data visualization",
-      "Predictive analytics",
-      "Custom reporting tools",
-      "Interactive dashboards",
-      "Data export capabilities",
-    ],
-    duration: "4 months",
-    teamSize: "5 developers",
-  },
-  {
-    id: "p6",
-    title: "Easy Pay Login System",
-    description:
-      "Secure authentication system with multi-factor authentication and advanced security features for financial applications.",
-    imageUrl: "https://tech-masters.guru/photos/projects/easy-pay-login.png",
-    category: "Security",
-    technologies: ["React", "Node.js", "JWT", "Redis"],
-    featured: false,
-    detailedDescription:
-      "A robust authentication system designed for financial applications, featuring multi-factor authentication, advanced security protocols, and seamless user experience.",
-    images: [
-      "https://tech-masters.guru/photos/projects/easy-pay-login.png",
-      "https://tech-masters.guru/photos/projects/easy-pay-login.png",
-      "https://tech-masters.guru/photos/projects/easy-pay-login.png",
-    ],
-    liveUrl: "https://easy-pay-login.com",
-    githubUrl: "https://github.com/company/easy-pay-login",
-    features: [
-      "Multi-factor authentication",
-      "Advanced security protocols",
-      "Session management",
-      "Audit logging",
-      "Password recovery system",
-    ],
-    duration: "3 months",
-    teamSize: "4 developers",
-  },
-  {
-    id: "p7",
-    title: "Majsin Dashboard",
-    description:
-      "Advanced analytics dashboard with machine learning insights and customizable reporting for enterprise clients.",
-    imageUrl: "https://tech-masters.guru/photos/projects/majsin-dashborad.png",
-    category: "Analytics",
-    technologies: ["Angular", "Python", "TensorFlow", "AWS"],
-    featured: false,
-    detailedDescription:
-      "An advanced analytics dashboard powered by machine learning, providing deep insights and customizable reporting for enterprise-level decision making.",
-    images: [
-      "https://tech-masters.guru/photos/projects/majsin-dashborad.png",
-      "https://tech-masters.guru/photos/projects/majsin-dashborad.png",
-      "https://tech-masters.guru/photos/projects/majsin-dashborad.png",
-    ],
-    liveUrl: "https://majsin-dashboard.com",
-    githubUrl: "https://github.com/company/majsin-dashboard",
-    features: [
-      "Machine learning insights",
-      "Customizable reporting",
-      "Real-time data processing",
-      "Advanced visualizations",
-      "API integration capabilities",
-    ],
-    duration: "6 months",
-    teamSize: "7 developers",
-  },
-  {
-    id: "p8",
-    title: "SVU Hardware Management",
-    description:
-      "Comprehensive hardware inventory and management system for educational institutions with asset tracking.",
-    imageUrl: "https://tech-masters.guru/photos/projects/svu-hw.png",
-    category: "Education",
-    technologies: ["React", "Node.js", "MySQL", "Docker"],
-    featured: false,
-    detailedDescription:
-      "A comprehensive hardware management system designed for educational institutions, featuring asset tracking, maintenance scheduling, and detailed reporting capabilities.",
-    images: [
-      "https://tech-masters.guru/photos/projects/svu-hw.png",
-      "https://tech-masters.guru/photos/projects/svu-hw.png",
-      "https://tech-masters.guru/photos/projects/svu-hw.png",
-    ],
-    liveUrl: "https://svu-hardware.com",
-    githubUrl: "https://github.com/company/svu-hardware",
-    features: [
-      "Asset tracking and management",
-      "Maintenance scheduling",
-      "Inventory control",
-      "Detailed reporting",
-      "User access management",
-    ],
-    duration: "5 months",
-    teamSize: "6 developers",
-  },
-];
-
-const categories = [
-  "All",
-  "Enterprise Software",
-  "Legal Software",
-  "FinTech",
-  "E-commerce",
-  "Business Intelligence",
-  "Security",
-  "Analytics",
-  "Education",
-];
-
 export default function ProjectsPage() {
  const [selectedCategory, setSelectedCategory] = useState("All");
  const [selectedProject, setSelectedProject] = useState<Project | null>(null);
  const [isModalVisible, setIsModalVisible] = useState(false);
-  const [visibleProjects, setVisibleProjects] = useState(9);
+  const [visibleProjects, setVisibleProjects] = useState(13);

  const filteredProjects =
    selectedCategory === "All"
@@ -314,6 +57,12 @@ export default function ProjectsPage() {
  };

  const handleCategoryClick = (category: string) => {
+    if (category === "All") {
+      setSelectedCategory("All");
+      setVisibleProjects(13);
+      return;
+    }
+
    if (selectedCategory === category) {
      // If clicking on the same category, remove the filter
      setSelectedCategory("All");
@@ -427,10 +176,10 @@ export default function ProjectsPage() {

          {/* Projects Grid */}
          <motion.div
+            key={selectedCategory}
            variants={containerVariants}
            initial="hidden"
-            whileInView="visible"
-            viewport={{ once: true }}
+            animate="visible"
            className={styles.projectsGrid}
          >
            {displayedProjects.map((project) => (
--- a/src/data/projects.ts
+++ b/src/data/projects.ts
@@ -0,0 +1,396 @@
+export 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;
+}
+
+export const categories = [
+  "All",
+  "Enterprise Software",
+  "Legal Software",
+  "FinTech",
+  "E-commerce",
+  "Business Intelligence",
+  "POS System",
+  "Education",
+  "HealthTech"
+];
+
+export 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 POS System",
+    description:
+      "Secure POS system with multi-factor authentication and advanced security features for financial applications.",
+    imageUrl: "https://tech-masters.guru/photos/projects/easy-pay-login.png",
+    category: "POS System",
+    technologies: ["React", "Node.js", "JWT", "Redis"],
+    featured: false,
+    detailedDescription:
+      "A robust POS 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: "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",
+  },
+  {
+    id: "p8",
+    title: "Law Firm Management",
+    description:
+      "Comprehensive hardware inventory and management system for educational institutions with asset tracking.",
+    imageUrl: "https://tech-masters.guru/photos/projects/law-firm-management.png",
+    category: "Legal Software",
+    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",
+  },
+    {
+    id: "p9",
+    title: "Barber Shop Management",
+    description:
+      "Comprehensive barber shop management system for educational institutions with asset tracking.",
+    imageUrl: "https://tech-masters.guru/photos/projects/barber-shop-management.png",
+    category: "Enterprise Software",
+    technologies: ["React", "Node.js", "MySQL", "Docker"],
+    featured: false,
+    detailedDescription:
+      "A comprehensive barber shop management system designed for educational institutions, featuring asset tracking, maintenance scheduling, and detailed reporting capabilities.",
+    images: [
+      "https://tech-masters.guru/photos/projects/barber-shop-management.png",
+      "https://tech-masters.guru/photos/projects/barber-shop-management.png",
+      "https://tech-masters.guru/photos/projects/barber-shop-management.png",
+    ],
+    liveUrl: "https://barber-shop-management.com",
+    githubUrl: "https://github.com/company/barber-shop-management",
+    features: [
+      "Asset tracking and management",
+      "Maintenance scheduling",
+      "Inventory control",
+      "Detailed reporting",
+      "User access management",
+    ],
+    duration: "5 months",
+    teamSize: "6 developers",
+  },
+    {
+    id: "p10",
+    title: "Motiva Management",
+    description:
+      "Leading medical technology company specializing in breast aesthetics and reconstruction. Enhancing women's health through cutting-edge implant solutions.",
+    imageUrl: "https://tech-masters.guru/photos/projects/motiva-management.png",
+    category: "HealthTech",
+    technologies: ["React", "Node.js", "MySQL", "Docker"],
+    featured: false,
+    detailedDescription:
+      "A comprehensive barber shop management system designed for educational institutions, featuring asset tracking, maintenance scheduling, and detailed reporting capabilities.",
+    images: [
+      "https://tech-masters.guru/photos/projects/motiva-medical-site.png",
+      "https://tech-masters.guru/photos/projects/motiva-medical-site.png",
+      "https://tech-masters.guru/photos/projects/motiva-medical-site.png",
+    ],
+    liveUrl: "https://motiva-medical-site.netlify.app/",
+    githubUrl: "https://github.com/company/barber-shop-management",
+    features: [
+      "Asset tracking and management",
+      "Maintenance scheduling",
+      "Inventory control",
+      "Detailed reporting",
+      "User access management",
+    ],
+    duration: "5 months",
+    teamSize: "6 developers",
+  },
+   {
+    id: "p11",
+    title: "EasyBook Management",
+    description:
+      "Leading NoCode platform for appointment scheduling and management. Streamlining the booking process for businesses of all sizes.",
+    imageUrl: "https://tech-masters.guru/photos/projects/motiva-management.png",
+    category: "NoCode",
+    technologies: ["React", "Node.js", "MySQL", "Docker"],
+    featured: false,
+    detailedDescription:
+      "A comprehensive barber shop management system designed for educational institutions, featuring asset tracking, maintenance scheduling, and detailed reporting capabilities.",
+    images: [
+      "https://tech-masters.guru/photos/projects/easybook-management.png",
+      "https://tech-masters.guru/photos/projects/easybook-management.png",
+      "https://tech-masters.guru/photos/projects/easybook-management.png",
+    ],
+    liveUrl: "https://easybook-management.netlify.app/",
+    githubUrl: "https://github.com/company/barber-shop-management",
+    features: [
+      "Asset tracking and management",
+      "Maintenance scheduling",
+      "Inventory control",
+      "Detailed reporting",
+      "User access management",
+    ],
+    duration: "5 months",
+    teamSize: "6 developers",
+  },
+  {
+    id: "p12",
+    title: "Insighter Analytics",
+    description:
+      "Insightter is your data transformer Agency, together, we transform your Data into a strategic Asset, releasing unprecedented Intelligence for your Corporate Growth.",
+    imageUrl: "https://tech-masters.guru/photos/projects/motiva-management.png",
+    category: "Analytics",
+    technologies: ["Next.js", "Node.js", "MySQL", "Docker"],
+    featured: false,
+    detailedDescription:
+      "Insightter is your data transformer Agency, together, we transform your Data into a strategic Asset, releasing unprecedented Intelligence for your Corporate Growth.",
+    images: [
+      "https://tech-masters.guru/photos/projects/insighter-analytics.png",
+      "https://tech-masters.guru/photos/projects/insighter-analytics.png",
+      "https://tech-masters.guru/photos/projects/insighter-analytics.png",
+    ],
+    liveUrl: "https://insightter.netlify.app/",
+    githubUrl: "https://github.com/company/ barber-shop-management",
+    features: [
+      "Asset tracking and management",
+      "Maintenance scheduling",
+      "Inventory control",
+      "Detailed reporting",
+      "User access management",
+    ],
+    duration: "5 months",
+    teamSize: "6 developers",
+  },
+    {
+    id: "p13",
+    title: "Workiom Task Board",
+    description:
+      "Workiom is a task management platform for teams of all sizes. It helps you stay organized, productive, and on top of your work.",
+    imageUrl: "https://tech-masters.guru/photos/projects/workiom-task-board.png",
+    category: "Task Management",
+    technologies: ["Angular", "Node.js", "MySQL", "Docker"],
+    featured: false,
+    detailedDescription:
+      "Workiom is a task management platform for teams of all sizes. It helps you stay organized, productive, and on top of your work.",
+    images: [
+      "https://tech-masters.guru/photos/projects/workiom-task-board.png",
+      "https://tech-masters.guru/photos/projects/workiom-task-board.png",
+      "https://tech-masters.guru/photos/projects/workiom-task-board.png",
+    ],
+    liveUrl: "https://workiom-task-board.netlify.app/",
+    githubUrl: "https://github.com/company/ barber-shop-management",
+    features: [
+      "Asset tracking and management",
+      "Maintenance scheduling",
+      "Inventory control",
+      "Detailed reporting",
+      "User access management",
+    ],
+    duration: "5 months",
+    teamSize: "6 developers",
+  },
+];
Author	SHA1	Message	Date
Mohammed Al-yaseen	84c7ca2b4b	move projects data to its folder	2026-02-07 01:43:23 +03:00
Mohammed Al-yaseen	cfd178cea6	projects: enhacne card styles and fix reset filters	2026-02-07 00:31:55 +03:00
Mohammed Al-yaseen	05cd5b5139	main: enhance scroll styles and add CTA section	2026-02-07 00:31:26 +03:00