feat: Add welcome banner with 24-hour display logic

README.md

@@ -1,4 +1,22 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# Big Brain Coding - Modern Software Development
+
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app) for Big Brain Coding's company website.
+
+## 🚀 Features
+
+### Current Features:
+- **Modern Web Design** - Responsive, accessible, and performant
+- **AI Integration Services** - Showcase of AI-powered solutions
+- **Project Portfolio** - Interactive project showcases
+- **Contact Management** - Professional contact forms and communication
+- **Analytics Integration** - Comprehensive tracking and insights
+- **Welcome Banner** - Informative banner with 24-hour persistence
+
+### Coming Soon:
+- **Automated Project Documentation** - Screenshot generation for GitHub repos and live websites
+- **Blog System** - MDX-based content with authentication and comments
+- **E-commerce Integration** - Stripe-powered payment processing
+- **Advanced Analytics** - Enhanced tracking and reporting features
 
 ## Getting Started
 

TODO_BLOG_FEATURES.md

@@ -17,6 +17,55 @@
 
 ---
 
+## 🖼️ Project Screenshot Automation (Coming Soon)
+
+### Automated Project Documentation:
+- [ ] **Screenshot Generation Script** - Puppeteer-based automation
+- [ ] **GitHub Repository Integration** - Capture repo information and stats
+- [ ] **Live Website Screenshots** - Capture deployed project screenshots
+- [ ] **Multi-Resolution Support** - Desktop (1920x1080), tablet, and mobile views
+- [ ] **Modal Gallery System** - Interactive project showcase with image carousel
+- [ ] **Technology Stack Display** - Automated detection and display of tech stack
+- [ ] **Project Statistics** - Stars, forks, issues, and deployment status
+
+### Screenshot Capture Features:
+- [ ] **GitHub Repository Pages** - Main branch, README, and key files
+- [ ] **Live Website Pages** - Homepage, features, about, and key functionality
+- [ ] **Responsive Design Testing** - Multiple viewport sizes for comprehensive coverage
+- [ ] **Custom Viewport Support** - Specific resolutions for optimal presentation
+- [ ] **Error Handling** - Graceful fallbacks for unavailable sites or repos
+
+### Technical Implementation:
+- [ ] **Puppeteer Integration** - Reliable screenshot generation with headless Chrome
+- [ ] **File Storage System** - Organized screenshot storage with versioning
+- [ ] **Database Integration** - Project metadata and screenshot management
+- [ ] **Manual Trigger System** - On-demand screenshot generation for updates
+- [ ] **Image Optimization** - Compressed screenshots for fast loading
+- [ ] **Caching Strategy** - Efficient storage and retrieval of project assets
+
+### User Experience Features:
+- [ ] **Interactive Project Modals** - Rich project showcase with multiple views
+- [ ] **Image Carousel Navigation** - Smooth browsing through project screenshots
+- [ ] **Technology Badges** - Visual representation of project tech stack
+- [ ] **GitHub Statistics Display** - Real-time repository metrics
+- [ ] **Responsive Gallery** - Mobile-friendly project presentation
+- [ ] **Loading States** - Smooth user experience during image generation
+
+### Workflow Process:
+1. **Setup Phase** - Configure screenshot scripts for each project
+2. **Capture Phase** - Generate screenshots of GitHub repos and live websites
+3. **Integration Phase** - Update project pages with new screenshots and data
+4. **Maintenance Phase** - Re-run scripts when projects undergo major updates
+
+### Benefits:
+- **Consistent Project Documentation** - Standardized presentation across all projects
+- **Time-Saving Automation** - Eliminates manual screenshot capture and editing
+- **Professional Presentation** - High-quality, consistent project showcases
+- **Easy Updates** - Simple script execution for project refresh
+- **Comprehensive Coverage** - Both code and live website documentation
+
+---
+
 ## 📝 Blog Implementation (Future Priority)
 
 ### Core Blog Features:

src/app/layout.tsx

@@ -6,6 +6,7 @@ import Header from "@/components/layout/Header";
 import Footer from "@/components/layout/Footer";
 import { ThemeProvider } from "@/components/providers/ThemeProvider";
 import { ThemeToggle } from "@/components/ui/theme-toggle";
+import UpdateBanner from "@/components/shared/UpdateBanner";
 import {
   ConsentManagerDialog,
   ConsentManagerProvider,
@@ -78,6 +79,7 @@ export default function RootLayout({
           >
             <ConsentManagerDialog />
             <CookieBanner />
+            <UpdateBanner />
             <div className="flex min-h-screen flex-col">
               <Header />
               <main className="flex-1">{children}</main>

src/components/shared/UpdateBanner.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { X, Bell } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+const BANNER_KEY = 'update-banner-dismissed'
+const BANNER_DELAY = 2000 // 2 seconds delay
+
+export default function UpdateBanner() {
+  const [isVisible, setIsVisible] = useState(false)
+  const [isDismissed, setIsDismissed] = useState(false)
+
+  useEffect(() => {
+    // Check if banner was dismissed within last 24 hours
+    const dismissedTime = localStorage.getItem(BANNER_KEY)
+    const now = Date.now()
+    const twentyFourHours = 24 * 60 * 60 * 1000
+
+    if (!dismissedTime || (now - parseInt(dismissedTime)) > twentyFourHours) {
+      // Show banner after delay
+      const timer = setTimeout(() => {
+        setIsVisible(true)
+        // Set CSS custom property for header positioning
+        document.documentElement.style.setProperty('--banner-height', '60px')
+      }, BANNER_DELAY)
+
+      return () => clearTimeout(timer)
+    }
+  }, [])
+
+  const handleDismiss = () => {
+    setIsDismissed(true)
+    localStorage.setItem(BANNER_KEY, Date.now().toString())
+  }
+
+  return (
+    <AnimatePresence>
+      {isVisible && !isDismissed && (
+        <motion.div
+          initial={{ y: -100, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          exit={{ y: -100, opacity: 0 }}
+          transition={{ duration: 0.5, ease: 'easeOut' }}
+          className="fixed top-0 left-0 right-0 z-[9999] flex justify-center pt-4"
+          data-banner-visible="true"
+        >
+          <div className="flex items-center space-x-4 px-6 py-4 bg-primary/95 backdrop-blur supports-[backdrop-filter]:bg-primary/90 border border-primary/20 rounded-lg shadow-lg">
+            <Bell className="h-5 w-5 text-primary-foreground flex-shrink-0" />
+                            <p className="text-sm text-primary-foreground whitespace-nowrap">
+                  🚀&nbsp;We&apos;re building exciting products to bring convenience to your everyday tasks. Check back frequently for updates!
+                </p>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleDismiss}
+              className="text-primary-foreground hover:bg-primary-foreground/10 h-10 w-10 p-0 flex-shrink-0"
+            >
+              <X className="h-5 w-5" />
+              <span className="sr-only">Dismiss banner</span>
+            </Button>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}