feat: add BoutiqueBot project and screenshots for all featured projects

Author: networkandcode

public/images/projects/boutique_bot_screenshot_1786124950528.jpg

@@ -4,16 +4,27 @@ export interface Project {
   description: string;
   articleUrl: string;
   repoUrl?: string;
+  image?: string;
   techStack: string[];
 }
 
 export const featuredProjects: Project[] = [
+  {
+    title: "BoutiqueBot - Automated Retail & Telegram E-Commerce Bot",
+    name: "boutiquebot",
+    description: "Automated e-commerce & retail bot with real-time stock notifications, instant order alerts via Telegram, and automated inventory sync.",
+    articleUrl: "https://www.youtube.com/watch?v=LjT4EP2kYHo",
+    repoUrl: "https://github.com/networkandcode/boutique-bot",
+    image: "/images/projects/boutique_bot_screenshot_1786124950528.jpg",
+    techStack: ["Node.js", "Telegram Bot API", "E-Commerce", "Automation"]
+  },
   {
     title: "BrailleBoard Web Application",
     name: "brailleboard",
     description: "Text-to-Braille conversion web application built with Appwrite backend, Next.js frontend, and Web Speech API for accessibility.",
     articleUrl: "https://networkandcode.hashnode.dev/text-to-braille-webpp-with-appwrite-nextjs-and-web-speech-api",
     repoUrl: "https://github.com/networkandcode/brailleboard",
+    image: "/images/projects/brailleboard_screenshot_1786124966684.jpg",
     techStack: ["Next.js", "Appwrite", "Web Speech API", "React"]
   },
   {
@@ -22,6 +33,7 @@ export const featuredProjects: Project[] = [
     description: "Live cricket match scoring app with real-time score updates, match stats, and database management.",
     articleUrl: "https://dev.to/networkandcode/cricket-scoring-app-using-appwrite-nextjs-3730",
     repoUrl: "https://github.com/networkandcode/cricscore",
+    image: "/images/projects/cricscore_screenshot_1786124994883.jpg",
     techStack: ["Next.js", "Appwrite", "TailwindCSS", "Node.js"]
   },
   {
@@ -30,6 +42,7 @@ export const featuredProjects: Project[] = [
     description: "Full-stack notes application featuring instant search, dynamic tags, and cloud database persistence.",
     articleUrl: "https://dev.to/networkandcode/notes-app-with-nextjs-2l4g",
     repoUrl: "https://github.com/networkandcode/notes-app",
+    image: "/images/projects/notes_app_screenshot_1786125224920.jpg",
     techStack: ["Next.js", "Serverless", "React", "REST API"]
   },
   {
@@ -38,6 +51,7 @@ export const featuredProjects: Project[] = [
     description: "Comprehensive school administrative dashboard deployed on Linode cloud with student records, attendance, and role-based access.",
     articleUrl: "https://networkandcode.hashnode.dev/school-admin-app-with-nextjs-on-linode",
     repoUrl: "https://github.com/networkandcode/sms",
+    image: "/images/projects/school_admin_screenshot_1786125016041.jpg",
     techStack: ["Next.js", "TypeScript", "Linode Cloud", "Docker"]
   },
   {
@@ -46,6 +60,7 @@ export const featuredProjects: Project[] = [
     description: "E-commerce web application backed by HarperDB NoSQL/SQL database and Next.js frontend rendering.",
     articleUrl: "https://networkandcode.hashnode.dev/online-shop-with-nextjs-and-harperdb",
     repoUrl: "https://github.com/networkandcode/shop",
+    image: "/images/projects/shop_app_screenshot_1786125244408.jpg",
     techStack: ["Next.js", "HarperDB", "GraphQL", "React"]
   }
 ];

public/images/projects/brailleboard_screenshot_1786124966684.jpg

@@ -24,6 +24,11 @@ import { featuredProjects } from '../data/projects';
     <div class="projects-grid">
       {featuredProjects.map(proj => (
         <div class="glass-card project-card">
+          {proj.image && (
+            <div class="card-image-wrapper">
+              <img src={proj.image} alt={`${proj.title} Screenshot`} class="project-image" loading="lazy" />
+            </div>
+          )}
           <div class="card-top">
             <span class="tag-badge">{proj.name}</span>
             <div class="pill-group">
@@ -36,7 +41,7 @@ import { featuredProjects } from '../data/projects';
           <p class="project-desc">{proj.description}</p>
           <div class="card-bottom">
             <a href={proj.articleUrl} target="_blank" rel="noopener" class="btn btn-primary btn-sm">
-              Read Technical Case Study &rarr;
+              {proj.articleUrl.includes('youtube') ? 'Watch Demo Video →' : 'Read Case Study →'}
             </a>
             {proj.repoUrl && (
               <a href={proj.repoUrl} target="_blank" rel="noopener" class="repo-link">
@@ -121,6 +126,27 @@ import { featuredProjects } from '../data/projects';
     flex-direction: column;
     justify-content: space-between;
     gap: 1.25rem;
+    overflow: hidden;
+  }
+
+  .card-image-wrapper {
+    width: calc(100% + 3.5rem);
+    margin: -1.75rem -1.75rem 0.5rem -1.75rem;
+    height: 180px;
+    overflow: hidden;
+    background: rgba(15, 23, 42, 0.6);
+    border-bottom: 1px solid var(--border-glass);
+  }
+
+  .project-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.4s ease;
+  }
+
+  .project-card:hover .project-image {
+    transform: scale(1.04);
   }
 
   .card-top {