Compare commits
3 Commits
8f05d06fb9
...
84c7ca2b4b
| Author | SHA1 | Date | |
|---|---|---|---|
| 84c7ca2b4b | |||
| cfd178cea6 | |||
| 05cd5b5139 |
@@ -1,254 +1,9 @@
|
|||||||
|
import { projectsData } from "@/data/projects";
|
||||||
import Paragraph from "antd/es/typography/Paragraph";
|
import Paragraph from "antd/es/typography/Paragraph";
|
||||||
import Title from "antd/es/typography/Title";
|
import Title from "antd/es/typography/Title";
|
||||||
import ProjectsShowcaseClient from "./ProjectsShowcaseClient";
|
import ProjectsShowcaseClient from "./ProjectsShowcaseClient";
|
||||||
import styles from "./ProjectsShowcaseSelector.module.css";
|
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 = () => {
|
const ProjectsShowcase: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<section className={styles.projectsSection}>
|
<section className={styles.projectsSection}>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import { Project } from "@/data/projects";
|
||||||
import {
|
import {
|
||||||
CloseOutlined,
|
CloseOutlined,
|
||||||
EyeOutlined,
|
EyeOutlined,
|
||||||
@@ -25,23 +26,6 @@ import styles from "./ProjectsShowcaseSelector.module.css";
|
|||||||
|
|
||||||
const { Title, Paragraph, Text } = Typography;
|
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 {
|
interface ProjectsShowcaseClientProps {
|
||||||
projects: Project[];
|
projects: Project[];
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -614,4 +614,78 @@
|
|||||||
width: 8px;
|
width: 8px;
|
||||||
height: 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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
354
src/app/page.tsx
354
src/app/page.tsx
@@ -2,6 +2,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
ArrowRightOutlined,
|
||||||
BulbOutlined,
|
BulbOutlined,
|
||||||
ClockCircleOutlined,
|
ClockCircleOutlined,
|
||||||
CodeOutlined,
|
CodeOutlined,
|
||||||
@@ -10,7 +11,8 @@ import {
|
|||||||
StarOutlined,
|
StarOutlined,
|
||||||
TeamOutlined,
|
TeamOutlined,
|
||||||
} from "@ant-design/icons";
|
} 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 { useEffect, useState } from "react";
|
||||||
import Footer from "./components/Footer/Footer";
|
import Footer from "./components/Footer/Footer";
|
||||||
import HeroSection from "./components/Hero/HeroSection";
|
import HeroSection from "./components/Hero/HeroSection";
|
||||||
@@ -28,6 +30,13 @@ export default function Home() {
|
|||||||
const [showPreferences, setShowPreferences] = useState(true);
|
const [showPreferences, setShowPreferences] = useState(true);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
const { scrollYProgress } = useScroll();
|
||||||
|
const scaleX = useSpring(scrollYProgress, {
|
||||||
|
stiffness: 100,
|
||||||
|
damping: 30,
|
||||||
|
restDelta: 0.001,
|
||||||
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Reading localStorage can only happen on the client; do it after mount.
|
// Reading localStorage can only happen on the client; do it after mount.
|
||||||
try {
|
try {
|
||||||
@@ -58,6 +67,21 @@ export default function Home() {
|
|||||||
setShowPreferences(false);
|
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) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className={styles.loaderContainer}>
|
<div className={styles.loaderContainer}>
|
||||||
@@ -101,6 +125,21 @@ export default function Home() {
|
|||||||
|
|
||||||
return (
|
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 && (
|
{showPreferences && (
|
||||||
<PreferencesSelector onComplete={handlePreferencesComplete} />
|
<PreferencesSelector onComplete={handlePreferencesComplete} />
|
||||||
)}
|
)}
|
||||||
@@ -113,7 +152,13 @@ export default function Home() {
|
|||||||
{/* Services Section */}
|
{/* Services Section */}
|
||||||
<section id="services" className={styles.servicesSection}>
|
<section id="services" className={styles.servicesSection}>
|
||||||
<div className={styles.container}>
|
<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}>
|
<Title level={2} className={styles.sectionTitle}>
|
||||||
Our Services
|
Our Services
|
||||||
</Title>
|
</Title>
|
||||||
@@ -121,79 +166,99 @@ export default function Home() {
|
|||||||
We offer comprehensive solutions to transform your digital
|
We offer comprehensive solutions to transform your digital
|
||||||
presence and drive business growth
|
presence and drive business growth
|
||||||
</Paragraph>
|
</Paragraph>
|
||||||
</div>
|
</motion.div>
|
||||||
|
|
||||||
<Row gutter={[32, 32]} className={styles.servicesGrid}>
|
<motion.div
|
||||||
<Col xs={24} sm={12} lg={8}>
|
initial="hidden"
|
||||||
<Card className={styles.serviceCard} hoverable>
|
whileInView="visible"
|
||||||
<div className={styles.serviceIcon}>
|
viewport={{ once: true }}
|
||||||
<CodeOutlined />
|
variants={staggerContainer}
|
||||||
</div>
|
>
|
||||||
<Title level={4} className={styles.serviceTitle}>
|
<Row gutter={[32, 32]} className={styles.servicesGrid}>
|
||||||
Web Development
|
<Col xs={24} sm={12} lg={8}>
|
||||||
</Title>
|
<motion.div variants={fadeInUp} style={{ height: "100%" }}>
|
||||||
<Paragraph className={styles.serviceDescription}>
|
<Card className={styles.serviceCard} hoverable>
|
||||||
Custom web applications built with modern technologies and
|
<div className={styles.serviceIcon}>
|
||||||
best practices for optimal performance and user experience.
|
<CodeOutlined />
|
||||||
</Paragraph>
|
</div>
|
||||||
<ul className={styles.serviceFeatures}>
|
<Title level={4} className={styles.serviceTitle}>
|
||||||
<li>Responsive Design</li>
|
Web Development
|
||||||
<li>SEO Optimization</li>
|
</Title>
|
||||||
<li>Performance Tuning</li>
|
<Paragraph className={styles.serviceDescription}>
|
||||||
<li>Security Implementation</li>
|
Custom web applications built with modern technologies
|
||||||
</ul>
|
and best practices for optimal performance and user
|
||||||
</Card>
|
experience.
|
||||||
</Col>
|
</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}>
|
<Col xs={24} sm={12} lg={8}>
|
||||||
<Card className={styles.serviceCard} hoverable>
|
<motion.div variants={fadeInUp} style={{ height: "100%" }}>
|
||||||
<div className={styles.serviceIcon}>
|
<Card className={styles.serviceCard} hoverable>
|
||||||
<RocketOutlined />
|
<div className={styles.serviceIcon}>
|
||||||
</div>
|
<RocketOutlined />
|
||||||
<Title level={4} className={styles.serviceTitle}>
|
</div>
|
||||||
Mobile Development
|
<Title level={4} className={styles.serviceTitle}>
|
||||||
</Title>
|
Mobile Development
|
||||||
<Paragraph className={styles.serviceDescription}>
|
</Title>
|
||||||
Native and cross-platform mobile applications that deliver
|
<Paragraph className={styles.serviceDescription}>
|
||||||
exceptional user experiences across all devices.
|
Native and cross-platform mobile applications that
|
||||||
</Paragraph>
|
deliver exceptional user experiences across all devices.
|
||||||
<ul className={styles.serviceFeatures}>
|
</Paragraph>
|
||||||
<li>iOS & Android Apps</li>
|
<ul className={styles.serviceFeatures}>
|
||||||
<li>Cross-platform Solutions</li>
|
<li>iOS & Android Apps</li>
|
||||||
<li>App Store Optimization</li>
|
<li>Cross-platform Solutions</li>
|
||||||
<li>Push Notifications</li>
|
<li>App Store Optimization</li>
|
||||||
</ul>
|
<li>Push Notifications</li>
|
||||||
</Card>
|
</ul>
|
||||||
</Col>
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
</Col>
|
||||||
|
|
||||||
<Col xs={24} sm={12} lg={8}>
|
<Col xs={24} sm={12} lg={8}>
|
||||||
<Card className={styles.serviceCard} hoverable>
|
<motion.div variants={fadeInUp} style={{ height: "100%" }}>
|
||||||
<div className={styles.serviceIcon}>
|
<Card className={styles.serviceCard} hoverable>
|
||||||
<BulbOutlined />
|
<div className={styles.serviceIcon}>
|
||||||
</div>
|
<BulbOutlined />
|
||||||
<Title level={4} className={styles.serviceTitle}>
|
</div>
|
||||||
UI/UX Design
|
<Title level={4} className={styles.serviceTitle}>
|
||||||
</Title>
|
UI/UX Design
|
||||||
<Paragraph className={styles.serviceDescription}>
|
</Title>
|
||||||
User-centered design solutions that create intuitive,
|
<Paragraph className={styles.serviceDescription}>
|
||||||
engaging, and conversion-focused digital experiences.
|
User-centered design solutions that create intuitive,
|
||||||
</Paragraph>
|
engaging, and conversion-focused digital experiences.
|
||||||
<ul className={styles.serviceFeatures}>
|
</Paragraph>
|
||||||
<li>User Research</li>
|
<ul className={styles.serviceFeatures}>
|
||||||
<li>Wireframing & Prototyping</li>
|
<li>User Research</li>
|
||||||
<li>Visual Design</li>
|
<li>Wireframing & Prototyping</li>
|
||||||
<li>Usability Testing</li>
|
<li>Visual Design</li>
|
||||||
</ul>
|
<li>Usability Testing</li>
|
||||||
</Card>
|
</ul>
|
||||||
</Col>
|
</Card>
|
||||||
</Row>
|
</motion.div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Statistics Section */}
|
{/* Statistics Section */}
|
||||||
<section id="statistics" className={styles.statisticsSection}>
|
<section id="statistics" className={styles.statisticsSection}>
|
||||||
<div className={styles.container}>
|
<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}>
|
<Title level={2} className={styles.sectionTitle}>
|
||||||
Our Impact
|
Our Impact
|
||||||
</Title>
|
</Title>
|
||||||
@@ -201,66 +266,81 @@ export default function Home() {
|
|||||||
Numbers that speak for themselves - our commitment to excellence
|
Numbers that speak for themselves - our commitment to excellence
|
||||||
in every project
|
in every project
|
||||||
</Paragraph>
|
</Paragraph>
|
||||||
</div>
|
</motion.div>
|
||||||
|
|
||||||
<Row gutter={[48, 32]} className={styles.statsGrid}>
|
<motion.div
|
||||||
<Col xs={12} sm={6}>
|
initial="hidden"
|
||||||
<div className={styles.statCard}>
|
whileInView="visible"
|
||||||
<div className={styles.statIcon}>
|
viewport={{ once: true }}
|
||||||
<ProjectOutlined />
|
variants={staggerContainer}
|
||||||
</div>
|
>
|
||||||
<Statistic
|
<Row gutter={[48, 32]} className={styles.statsGrid}>
|
||||||
title="Projects Completed"
|
<Col xs={12} sm={6}>
|
||||||
value={150}
|
<motion.div variants={fadeInUp}>
|
||||||
suffix="+"
|
<div className={styles.statCard}>
|
||||||
className={styles.statistic}
|
<div className={styles.statIcon}>
|
||||||
/>
|
<ProjectOutlined />
|
||||||
</div>
|
</div>
|
||||||
</Col>
|
<Statistic
|
||||||
|
title="Projects Completed"
|
||||||
|
value={150}
|
||||||
|
suffix="+"
|
||||||
|
className={styles.statistic}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</Col>
|
||||||
|
|
||||||
<Col xs={12} sm={6}>
|
<Col xs={12} sm={6}>
|
||||||
<div className={styles.statCard}>
|
<motion.div variants={fadeInUp}>
|
||||||
<div className={styles.statIcon}>
|
<div className={styles.statCard}>
|
||||||
<TeamOutlined />
|
<div className={styles.statIcon}>
|
||||||
</div>
|
<TeamOutlined />
|
||||||
<Statistic
|
</div>
|
||||||
title="Happy Clients"
|
<Statistic
|
||||||
value={80}
|
title="Happy Clients"
|
||||||
suffix="+"
|
value={80}
|
||||||
className={styles.statistic}
|
suffix="+"
|
||||||
/>
|
className={styles.statistic}
|
||||||
</div>
|
/>
|
||||||
</Col>
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</Col>
|
||||||
|
|
||||||
<Col xs={12} sm={6}>
|
<Col xs={12} sm={6}>
|
||||||
<div className={styles.statCard}>
|
<motion.div variants={fadeInUp}>
|
||||||
<div className={styles.statIcon}>
|
<div className={styles.statCard}>
|
||||||
<StarOutlined />
|
<div className={styles.statIcon}>
|
||||||
</div>
|
<StarOutlined />
|
||||||
<Statistic
|
</div>
|
||||||
title="Average Rating"
|
<Statistic
|
||||||
value={4.9}
|
title="Average Rating"
|
||||||
suffix="/5"
|
value={4.9}
|
||||||
precision={1}
|
suffix="/5"
|
||||||
className={styles.statistic}
|
precision={1}
|
||||||
/>
|
className={styles.statistic}
|
||||||
</div>
|
/>
|
||||||
</Col>
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</Col>
|
||||||
|
|
||||||
<Col xs={12} sm={6}>
|
<Col xs={12} sm={6}>
|
||||||
<div className={styles.statCard}>
|
<motion.div variants={fadeInUp}>
|
||||||
<div className={styles.statIcon}>
|
<div className={styles.statCard}>
|
||||||
<ClockCircleOutlined />
|
<div className={styles.statIcon}>
|
||||||
</div>
|
<ClockCircleOutlined />
|
||||||
<Statistic
|
</div>
|
||||||
title="Years Experience"
|
<Statistic
|
||||||
value={8}
|
title="Years Experience"
|
||||||
suffix="+"
|
value={8}
|
||||||
className={styles.statistic}
|
suffix="+"
|
||||||
/>
|
className={styles.statistic}
|
||||||
</div>
|
/>
|
||||||
</Col>
|
</div>
|
||||||
</Row>
|
</motion.div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -271,6 +351,36 @@ export default function Home() {
|
|||||||
<section id="testimonials">
|
<section id="testimonials">
|
||||||
<TestimonialsSection />
|
<TestimonialsSection />
|
||||||
</section>
|
</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'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>
|
</main>
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|||||||
@@ -186,30 +186,33 @@
|
|||||||
/* Projects Grid */
|
/* Projects Grid */
|
||||||
.projectsGrid {
|
.projectsGrid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||||
gap: 24px;
|
gap: 32px;
|
||||||
margin-bottom: 60px;
|
margin-bottom: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.projectCard {
|
.projectCard {
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 16px;
|
border-radius: 20px !important;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: none;
|
border: 1px solid rgba(0, 0, 0, 0.05) !important;
|
||||||
height: fit-content;
|
height: 100%;
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.projectCard:hover {
|
.projectCard:hover {
|
||||||
transform: translateY(-10px);
|
transform: translateY(-8px);
|
||||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 20px 40px rgba(116, 0, 184, 0.15);
|
||||||
|
border-color: rgba(116, 0, 184, 0.2) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.projectImageContainer {
|
.projectImageContainer {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 200px;
|
height: 240px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -217,22 +220,23 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
transition: transform 0.3s ease;
|
transition: transform 0.6s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.projectCard:hover .projectImage {
|
.projectCard:hover .projectImage {
|
||||||
transform: scale(1.05);
|
transform: scale(1.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.projectOverlay {
|
.projectOverlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background: rgba(0, 0, 0, 0.5);
|
background: rgba(15, 5, 37, 0.6);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
backdrop-filter: blur(2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.projectCard:hover .projectOverlay {
|
.projectCard:hover .projectOverlay {
|
||||||
@@ -240,11 +244,23 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.viewButton {
|
.viewButton {
|
||||||
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
background: white !important;
|
||||||
border: none;
|
color: #7400b8 !important;
|
||||||
width: 50px;
|
border: none !important;
|
||||||
height: 50px;
|
width: 56px !important;
|
||||||
font-size: 18px;
|
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 {
|
.featuredBadge {
|
||||||
@@ -255,65 +271,98 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.projectContent {
|
.projectContent {
|
||||||
padding: 20px;
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.categoryTag {
|
.categoryTag {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.projectTitle {
|
.categoryTag :global(.ant-tag) {
|
||||||
font-size: 1.1rem;
|
background: #f0fdf4 !important; /* Minty fresh background example */
|
||||||
|
color: #166534 !important;
|
||||||
|
border-color: #dcfce7 !important;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 2px 10px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1e293b;
|
border: none;
|
||||||
margin-bottom: 8px;
|
}
|
||||||
line-height: 1.3;
|
|
||||||
|
/* 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 {
|
.projectDescription {
|
||||||
color: #64748b;
|
color: #64748b !important;
|
||||||
line-height: 1.5;
|
line-height: 1.6 !important;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 20px !important;
|
||||||
font-size: 0.85rem;
|
font-size: 0.95rem !important;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 3;
|
-webkit-line-clamp: 3;
|
||||||
|
line-clamp: 3;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.technologiesList {
|
.technologiesList {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 4px;
|
gap: 8px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.techTag {
|
.techTag {
|
||||||
background: #f8fafc;
|
background: #f8fafc !important;
|
||||||
color: #475569;
|
color: #64748b !important;
|
||||||
border: 1px solid #e2e8f0;
|
border: 1px solid #e2e8f0 !important;
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem !important;
|
||||||
padding: 2px 6px;
|
padding: 4px 10px !important;
|
||||||
border-radius: 8px;
|
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 {
|
.projectMeta {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-top: 12px;
|
padding-top: 16px;
|
||||||
border-top: 1px solid #f1f5f9;
|
border-top: 1px solid #f1f5f9;
|
||||||
font-size: 0.8rem;
|
font-size: 0.85rem;
|
||||||
|
color: #94a3b8;
|
||||||
|
margin-top: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.projectDuration {
|
.projectDuration, .projectTeam {
|
||||||
font-size: 0.75rem;
|
display: flex;
|
||||||
color: #64748b;
|
align-items: center;
|
||||||
}
|
gap: 6px;
|
||||||
|
font-weight: 500;
|
||||||
.projectTeam {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: #64748b;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Load More Section */
|
/* Load More Section */
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import { categories, Project, projectsData } from "@/data/projects";
|
||||||
import {
|
import {
|
||||||
CloseOutlined,
|
CloseOutlined,
|
||||||
EyeOutlined,
|
EyeOutlined,
|
||||||
@@ -26,269 +27,11 @@ import styles from "./page.module.css";
|
|||||||
|
|
||||||
const { Title, Paragraph, Text } = Typography;
|
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() {
|
export default function ProjectsPage() {
|
||||||
const [selectedCategory, setSelectedCategory] = useState("All");
|
const [selectedCategory, setSelectedCategory] = useState("All");
|
||||||
const [selectedProject, setSelectedProject] = useState<Project | null>(null);
|
const [selectedProject, setSelectedProject] = useState<Project | null>(null);
|
||||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||||
const [visibleProjects, setVisibleProjects] = useState(9);
|
const [visibleProjects, setVisibleProjects] = useState(13);
|
||||||
|
|
||||||
const filteredProjects =
|
const filteredProjects =
|
||||||
selectedCategory === "All"
|
selectedCategory === "All"
|
||||||
@@ -314,6 +57,12 @@ export default function ProjectsPage() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleCategoryClick = (category: string) => {
|
const handleCategoryClick = (category: string) => {
|
||||||
|
if (category === "All") {
|
||||||
|
setSelectedCategory("All");
|
||||||
|
setVisibleProjects(13);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (selectedCategory === category) {
|
if (selectedCategory === category) {
|
||||||
// If clicking on the same category, remove the filter
|
// If clicking on the same category, remove the filter
|
||||||
setSelectedCategory("All");
|
setSelectedCategory("All");
|
||||||
@@ -427,10 +176,10 @@ export default function ProjectsPage() {
|
|||||||
|
|
||||||
{/* Projects Grid */}
|
{/* Projects Grid */}
|
||||||
<motion.div
|
<motion.div
|
||||||
|
key={selectedCategory}
|
||||||
variants={containerVariants}
|
variants={containerVariants}
|
||||||
initial="hidden"
|
initial="hidden"
|
||||||
whileInView="visible"
|
animate="visible"
|
||||||
viewport={{ once: true }}
|
|
||||||
className={styles.projectsGrid}
|
className={styles.projectsGrid}
|
||||||
>
|
>
|
||||||
{displayedProjects.map((project) => (
|
{displayedProjects.map((project) => (
|
||||||
|
|||||||
396
src/data/projects.ts
Normal file
396
src/data/projects.ts
Normal file
@@ -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",
|
||||||
|
},
|
||||||
|
];
|
||||||
Reference in New Issue
Block a user