[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76", "nodemailer": "7.0.10" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]png:file="public/projects/n8n-workflow-1.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1-etJkjUCCm13KNhxwYLa2Ek8fuJmpj6.jpg" isMerged="true" [V0_FILE]png:file="public/projects/n8n-workflow-2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2-vMWpMCAAfYoa0w4Epdoi7xmKjIot7v.jpg" isMerged="true" [V0_FILE]png:file="public/projects/n8n-workflow-3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/3-tS3iHzxxp4pCerRvt9M98Y66YsaB7q.jpg" isMerged="true" [V0_FILE]typescriptreact:file="components/navigation.tsx" isMerged="true" "use client" import { Moon, Sun } from "lucide-react" import { useState } from "react" import { MobileMenu } from "./mobile-menu" import Image from "next/image" interface NavigationProps { isDark: boolean onToggleDarkMode: () => void } export function Navigation({ isDark, onToggleDarkMode }: NavigationProps) { const [isOpen, setIsOpen] = useState(false) return ( ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.98 0.002 220); --foreground: oklch(0.15 0.04 220); --card: oklch(0.95 0.002 220); --card-foreground: oklch(0.15 0.04 220); --popover: oklch(1 0 0); --popover-foreground: oklch(0.15 0.04 220); --primary: oklch(0.2 0.04 220); --primary-foreground: oklch(0.98 0.002 220); --secondary: oklch(0.9 0.01 220); --secondary-foreground: oklch(0.15 0.04 220); --muted: oklch(0.88 0.008 220); --muted-foreground: oklch(0.5 0.02 220); /* Changed accent color from red to green to match profile picture background */ --accent: #7ec850; --accent-foreground: #ffffff; --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0.002 220); --border: oklch(0.92 0.008 220); --input: oklch(0.95 0.002 220); --ring: #7ec850; --chart-1: #7ec850; --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.98 0.002 220); --sidebar-foreground: oklch(0.15 0.04 220); --sidebar-primary: #7ec850; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #7ec850; --sidebar-accent-foreground: #ffffff; --sidebar-border: oklch(0.92 0.008 220); --sidebar-ring: #7ec850; } .dark { --background: oklch(0.12 0.04 220); --foreground: oklch(0.95 0.008 220); --card: oklch(0.18 0.04 220); --card-foreground: oklch(0.95 0.008 220); --popover: oklch(0.15 0.04 220); --popover-foreground: oklch(0.95 0.008 220); --primary: oklch(0.95 0.008 220); --primary-foreground: oklch(0.12 0.04 220); --secondary: oklch(0.25 0.04 220); --secondary-foreground: oklch(0.95 0.008 220); --muted: oklch(0.3 0.04 220); --muted-foreground: oklch(0.65 0.02 220); /* Changed accent color from red to green for consistency */ --accent: #7ec850; --accent-foreground: #ffffff; --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.95 0.008 220); --border: oklch(0.25 0.04 220); --input: oklch(0.2 0.04 220); --ring: #7ec850; --chart-1: #7ec850; --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.15 0.04 220); --sidebar-foreground: oklch(0.95 0.008 220); --sidebar-primary: #7ec850; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #7ec850; --sidebar-accent-foreground: #ffffff; --sidebar-border: oklch(0.25 0.04 220); --sidebar-ring: #7ec850; } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Added fade-in animation for tab transitions */ @layer utilities { .animate-fadeIn { animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } } [V0_FILE]typescriptreact:file="app/api/send-email/route.ts" isEdit="true" isMerged="true" import nodemailer from "nodemailer" export async function POST(request: Request) { try { const { name, email, message } = await request.json() if (!name || !email || !message) { return Response.json({ error: "Missing required fields: name, email, or message" }, { status: 400 }) } if (!process.env.EMAIL_USER || !process.env.EMAIL_PASS) { console.error("[v0] Missing EMAIL_USER or EMAIL_PASS environment variables") return Response.json( { error: "Email service not configured. Please add EMAIL_USER and EMAIL_PASS environment variables to your Vercel project.", configurationNeeded: true, }, { status: 503 }, ) } const transporter = nodemailer.createTransport({ service: "gmail", auth: { user: process.env.EMAIL_USER, pass: process.env.EMAIL_PASS, }, connectionTimeout: 5000, socketTimeout: 5000, }) try { await transporter.verify() console.log("[v0] Email transporter verified successfully") } catch (verifyError) { console.error("[v0] Email transporter verification failed:", verifyError) return Response.json( { error: "Email service authentication failed. Please check your EMAIL_USER and EMAIL_PASS environment variables.", details: "Invalid Gmail credentials", }, { status: 503 }, ) } // Send email to your Gmail await transporter.sendMail({ from: process.env.EMAIL_USER, to: "alim01716779220@gmail.com", subject: `New Portfolio Contact from ${name}`, html: `

New Contact Message

Name: ${name}

Email: ${email}

Message:

${message.replace(/\n/g, "
")}

`, replyTo: email, }) // Send confirmation email to the user await transporter.sendMail({ from: process.env.EMAIL_USER, to: email, subject: "Thank you for contacting me!", html: `

Thank you, ${name}!

I received your message and will get back to you as soon as possible.

Best regards,
Abdul Alim Mridha

`, }) return Response.json({ success: true }) } catch (error) { console.error("[v0] Email error:", error) const errorMessage = error instanceof Error ? error.message : "Failed to send email" return Response.json( { error: "Failed to send email", details: errorMessage, }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="components/convai-widget.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" export function ConvAIWidget() { return } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Hero } from "@/components/hero" import { About } from "@/components/about" import { Projects } from "@/components/projects" import { BookingCalendar } from "@/components/booking-calendar" import { Contact } from "@/components/contact" import { Navigation } from "@/components/navigation" import { FloatingButtons } from "@/components/floating-buttons" export default function Home() { const [isDark, setIsDark] = useState(false) useEffect(() => { const isDarkMode = localStorage.getItem("theme") === "dark" setIsDark(isDarkMode) if (isDarkMode) { document.documentElement.classList.add("dark") } }, []) const toggleDarkMode = () => { setIsDark(!isDark) if (!isDark) { document.documentElement.classList.add("dark") localStorage.setItem("theme", "dark") } else { document.documentElement.classList.remove("dark") localStorage.setItem("theme", "light") } } return (

) } [V0_FILE]png:file="public/images/gmail-20smtp-20-26-20cpanel-20smtp-20setup-20in-20n8n.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Gmail%20SMTP%20%26%20cPanel%20SMTP%20setup%20in%20n8n-xQ30R4Mm1yWpNFceLWAu1YRvPuuAIE.png" isMerged="true" [V0_FILE]png:file="public/images/automatic-20facebook-20post-20with-20ai-20image-20using-20ai.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Automatic%20Facebook%20post%20with%20AI%20image%20using%20AI-CL22C4SfHtAJ6qtMhSHWhF4Libpliy.png" isMerged="true" [V0_FILE]png:file="public/images/auto-20reply-20to-20customer-20from-20google-20sheet-20with-20n8n.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Auto%20Reply%20to%20Customer%20from%20Google%20Sheet%20with%20n8n-G5wGkpSbPjcoT1tBXFMx4OJuwlM1Ms.png" isMerged="true" [V0_FILE]png:file="public/images/attachment-20sent-20to-20email-20using-20n8n-20automation.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Attachment%20sent%20to%20email%20using%20n8n%20automation-Lx6FM3c8VoLvaTjhv9afGWbLZdTy1D.png" isMerged="true" [V0_FILE]png:file="public/images/automatic-20facebook-20post-20with-20ai-20image-20n8n-20-2b-20ai-20image-20generation.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Automatic%20Facebook%20post%20with%20AI%20image%20n8n%20%2B%20AI%20Image%20Generation-DpYJ1xGpVbXsXK75WSfHamLQaH1O9H.png" isMerged="true" [V0_FILE]png:file="public/images/upload-20products-20to-20multiple-20wordpress-20sites-20at-20once-21-20automation-20with-20n8n.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Upload%20products%20to%20multiple%20WordPress%20sites%20at%20once%21%20Automation%20with%20n8n-KenQn7isFdyPRJ2rjNU56ygMzaeI.png" isMerged="true" [V0_FILE]png:file="public/images/create-20auto-20sms-20and-20messenger-20reply-20system-20without-20code-20with-20n8n.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Create%20Auto%20SMS%20and%20Messenger%20Reply%20System%20Without%20Code%20With%20n8n-5dVPFpBNwhBqjszsJLH3K3CCo0dqUa.png" isMerged="true" [V0_FILE]png:file="public/images/personalized-20ai-20email-20automation-20using-20n8n.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Personalized%20Ai%20Email%20automation%20using%20n8n-WPVQtd5PsAom3hzLtU6sfK272hkXrT.png" isMerged="true" [V0_FILE]png:file="public/images/knowledge-20base-20email-20automation-20using-20n8n.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Knowledge%20base%20email%20automation%20using%20n8n-txOYuCRrrgte8ZyCAs8TQokp5QqEOx.png" isMerged="true" [V0_FILE]jpg:file="public/logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/LOGO-rgdovhjqWWHTLGCcJcfzYvYhwBN9pT.png" isMerged="true" [V0_FILE]typescriptreact:file="components/floating-buttons.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Phone, MessageCircle } from "lucide-react" import { useEffect, useState } from "react" interface ElevenLabsConvAIElement extends HTMLElement { openWindow?: () => void } export function FloatingButtons() { const [isReady, setIsReady] = useState(false) useEffect(() => { setIsReady(true) }, []) const handleCallClick = () => { console.log("[v0] Call button clicked, looking for ElevenLabs widget...") const widget = document.querySelector("elevenlabs-convai") as ElevenLabsConvAIElement | null if (widget) { console.log("[v0] Widget found:", widget) // Method 1: Direct method call if available if (widget.openWindow && typeof widget.openWindow === "function") { console.log("[v0] Calling openWindow() method") widget.openWindow() } // Method 2: Dispatch custom event else { console.log("[v0] Dispatching custom event") const event = new CustomEvent("elevenlabs.open") widget.dispatchEvent(event) } } else { console.log("[v0] Widget not found initially, retrying in 500ms...") // Fallback: check if it loads dynamically setTimeout(() => { const retryWidget = document.querySelector("elevenlabs-convai") as ElevenLabsConvAIElement | null if (retryWidget) { console.log("[v0] Widget found on retry") if (retryWidget.openWindow) { retryWidget.openWindow() } } else { console.error("[v0] Widget still not found after retry") } }, 500) } } const handleMessageClick = () => { const contactSection = document.querySelector("#contact") if (contactSection) { contactSection.scrollIntoView({ behavior: "smooth" }) } } if (!isReady) return null return (

{/* Call Button - Green with Phone Icon */} {/* Message Button - Dark with Message Icon */}

) } [V0_FILE]png:file="public/projects/wordpress-products-upload.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Upload%20products%20to%20multiple%20WordPress%20sites%20at%20once%21%20Automation%20with%20n8n-65uCOTckaVodb8ulfkV2Dx4DrftgfE.png" isMerged="true" [V0_FILE]typescriptreact:file="types/elevenlabs.d.ts" isMerged="true" import type React from "react" declare namespace JSX { interface IntrinsicElements { "elevenlabs-convai": React.DetailedHTMLProps< React.HTMLAttributes & { "agent-id": string }, HTMLElement > } } interface ElevenLabsConvAIElement extends HTMLElement { openWindow?: () => void } [V0_FILE]json:file="tsconfig.json" isEdit="true" isMerged="true" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "types/**/*.d.ts"], "exclude": ["node_modules"] } [V0_FILE]typescriptreact:file="components/contact.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Mail, Phone, CheckCircle, AlertCircle } from "lucide-react" export function Contact() { const [formData, setFormData] = useState({ name: "", email: "", message: "", }) const [isSubmitted, setIsSubmitted] = useState(false) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value, })) if (error) setError(null) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError(null) try { const response = await fetch("/api/send-email", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(formData), }) const data = await response.json() if (response.ok) { setIsSubmitted(true) setFormData({ name: "", email: "", message: "" }) setTimeout(() => setIsSubmitted(false), 3000) } else { setError(data.error || "Failed to send email. Please try again.") } } catch (error) { console.error("[v0] Error sending email:", error) setError("An error occurred while sending your message. Please try again.") } finally { setIsLoading(false) } } return (

Get In Touch

Contact Info

+880-1716-779220 hello@abdulalimmridha.top

Response Time

I typically respond to inquiries within 24 hours. Feel free to reach out with any questions about automation solutions.

) } [V0_FILE]typescript:file="lib/blog-storage.ts" isMerged="true" 'use client' export interface BlogPost { id: string title: string content: string imageUrl?: string videoUrl?: string createdAt: string updatedAt: string } const STORAGE_KEY = 'blog_posts' export function getPosts(): BlogPost[] { if (typeof window === 'undefined') return [] try { const stored = localStorage.getItem(STORAGE_KEY) return stored ? JSON.parse(stored) : [] } catch { return [] } } export function getPostById(id: string): BlogPost | undefined { return getPosts().find((post) => post.id === id) } export function createPost(post: Omit): BlogPost { const newPost: BlogPost = { ...post, id: Date.now().toString(), createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), } const posts = getPosts() posts.unshift(newPost) localStorage.setItem(STORAGE_KEY, JSON.stringify(posts)) return newPost } export function updatePost(id: string, updates: Partial): BlogPost | undefined { const posts = getPosts() const index = posts.findIndex((p) => p.id === id) if (index === -1) return undefined const updated = { ...posts[index], ...updates, updatedAt: new Date().toISOString(), } posts[index] = updated localStorage.setItem(STORAGE_KEY, JSON.stringify(posts)) return updated } export function deletePost(id: string): boolean { const posts = getPosts() const filtered = posts.filter((p) => p.id !== id) if (filtered.length === posts.length) return false localStorage.setItem(STORAGE_KEY, JSON.stringify(filtered)) return true } [V0_FILE]typescriptreact:file="app/blog/[id]/page.tsx" isMerged="true" 'use client' import { useEffect, useState } from 'react' import { getPostById, type BlogPost } from '@/lib/blog-storage' import Link from 'next/link' import Image from 'next/image' import { ArrowLeft } from 'lucide-react' import { useParams } from 'next/navigation' export default function BlogPostPage() { const params = useParams() const [post, setPost] = useState(null) const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) const id = typeof params.id === 'string' ? params.id : '' const foundPost = getPostById(id) setPost(foundPost || null) }, [params.id]) if (!mounted) return null if (!post) { return (

Post not found

Back to Blog

) } const date = new Date(post.createdAt).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric', }) return (

{/* Back Button */} Back to Blog {/* Header */}

{post.title}

{date}

{/* Featured Image */} {post.imageUrl && (

)} {/* Content */}

{post.content}

{/* Video */} {post.videoUrl && (

Video

)} {/* Footer */}

Back to Blog

) } [V0_FILE]typescriptreact:file="components/mobile-menu.tsx" isMerged="true" "use client" import { Menu, X } from "lucide-react" import { useState } from "react" interface MobileMenuProps { isDark: boolean } export function MobileMenu({ isDark }: MobileMenuProps) { const [isOpen, setIsOpen] = useState(false) const toggleMenu = () => { setIsOpen(!isOpen) } const closeMenu = () => { setIsOpen(false) } const scrollToSection = (sectionId: string) => { const element = document.getElementById(sectionId) if (element) { element.scrollIntoView({ behavior: "smooth" }) } closeMenu() } return (

{/* Hamburger Button */} {/* Mobile Menu */} {isOpen && ( <> {/* Overlay */}

{/* Menu Content */}

)}

) } [V0_FILE]typescriptreact:file="components/create-post-form.tsx" isMerged="true" 'use client' import { useState, useEffect } from 'react' import { createPost } from '@/lib/blog-storage' import { useRouter } from 'next/navigation' import { Upload, X } from 'lucide-react' export function CreatePostForm() { const router = useRouter() const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const [mounted, setMounted] = useState(false) const [formData, setFormData] = useState({ title: '', content: '', }) const [imagePreview, setImagePreview] = useState(null) const [videoPreview, setVideoPreview] = useState(null) // Ensure component only renders on client useEffect(() => { setMounted(true) }, []) const handleImageChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (!file) return if (file.size > 5 * 1024 * 1024) { setError('Image must be less than 5MB') return } const reader = new FileReader() reader.onloadend = () => { setImagePreview(reader.result as string) setError(null) } reader.readAsDataURL(file) } const handleVideoChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (!file) return if (file.size > 50 * 1024 * 1024) { setError('Video must be less than 50MB') return } const reader = new FileReader() reader.onloadend = () => { setVideoPreview(reader.result as string) setError(null) } reader.readAsDataURL(file) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError(null) try { if (!formData.title.trim()) { throw new Error('Title is required') } if (!formData.content.trim()) { throw new Error('Content is required') } createPost({ title: formData.title, content: formData.content, imageUrl: imagePreview || undefined, videoUrl: videoPreview || undefined, }) router.push('/blog') } catch (err) { setError(err instanceof Error ? err.message : 'Failed to create post') } finally { setIsLoading(false) } } if (!mounted) return null return (

Post Title setFormData((prev) => ({ ...prev, title: e.target.value }))} className="w-full px-4 py-2 rounded-lg bg-card border border-border text-foreground focus:outline-none focus:border-accent" placeholder="What's your post about?" />

Post Content

setFormData((prev) => ({ ...prev, content: e.target.value }))}
          rows={8}
          className="w-full px-4 py-2 rounded-lg bg-card border border-border text-foreground focus:outline-none focus:border-accent resize-none"
          placeholder="Write your blog post here..."
        />
      </div>

{/* Image Upload */}
      <div>
        <label htmlFor="image" className="block text-sm font-medium mb-2">
          Upload Image (Optional)
        </label>
        <div className="relative">
          <input
            type="file"
            id="image"
            accept="image/*"
            onChange={handleImageChange}
            className="hidden"
          />
          {imagePreview ? (
            <div className="relative w-full h-48 bg-muted rounded-lg overflow-hidden border border-border">
              <img src={imagePreview} alt="Preview" className="w-full h-full object-cover" />
              <button
                type="button"
                onClick={() => setImagePreview(null)}
                className="absolute top-2 right-2 p-1 bg-destructive rounded-full text-white hover:bg-destructive/80"
              >
                <X size={16} />
              </button>
            </div>
          ) : (
            <label
              htmlFor="image"
              className="flex items-center justify-center w-full h-32 border-2 border-dashed border-border rounded-lg cursor-pointer hover:border-accent transition-colors"
            >
              <div className="flex flex-col items-center gap-2 py-6">
                <Upload size={24} className="text-muted-foreground" />
                <span className="text-sm text-muted-foreground">Click to upload image</span>
                <span className="text-xs text-muted-foreground">Max 5MB</span>
              </div>
            </label>
          )}
        </div>
      </div>

{/* Video Upload */}
      <div>
        <label htmlFor="video" className="block text-sm font-medium mb-2">
          Upload Video (Optional)
        </label>
        <div className="relative">
          <input
            type="file"
            id="video"
            accept="video/*"
            onChange={handleVideoChange}
            className="hidden"
          />
          {videoPreview ? (
            <div className="relative w-full h-48 bg-muted rounded-lg overflow-hidden border border-border">
              <video src={videoPreview} controls className="w-full h-full object-cover" />
              <button
                type="button"
                onClick={() => setVideoPreview(null)}
                className="absolute top-2 right-2 p-1 bg-destructive rounded-full text-white hover:bg-destructive/80"
              >
                <X size={16} />
              </button>
            </div>
          ) : (
            <label
              htmlFor="video"
              className="flex items-center justify-center w-full h-32 border-2 border-dashed border-border rounded-lg cursor-pointer hover:border-accent transition-colors"
            >
              <div className="flex flex-col items-center gap-2 py-6">
                <Upload size={24} className="text-muted-foreground" />
                <span className="text-sm text-muted-foreground">Click to upload video</span>
                <span className="text-xs text-muted-foreground">Max 50MB</span>
              </div>
            </label>
          )}
        </div>
      </div>

{error && (
        <div className="p-3 bg-destructive/10 border border-destructive text-destructive rounded-lg text-sm">{error}</div>
      )}

<div className="flex gap-4">
        <button
          type="submit"
          disabled={isLoading}
          className="flex-1 px-6 py-2 bg-accent text-accent-foreground rounded-lg hover:opacity-90 transition-opacity font-medium disabled:opacity-50"
        >
          {isLoading ? 'Publishing...' : 'Publish Post'}
        </button>
        <button
          type="button"
          onClick={() => router.back()}
          className="px-6 py-2 border border-border rounded-lg hover:border-accent transition-colors"
        >
          Cancel
        </button>
      </div>
    </form>
  )
}
[V0_FILE]typescriptreact:file="components/blog-post-card.tsx" isMerged="true"
import type { BlogPost } from '@/lib/blog-storage'
import { Trash2, Edit2, Play } from 'lucide-react'
import Image from 'next/image'
import Link from 'next/link'

interface BlogPostCardProps {
  post: BlogPost
  onDelete?: (id: string) => void
  isAdmin?: boolean
}

export function BlogPostCard({ post, onDelete, isAdmin }: BlogPostCardProps) {
  const date = new Date(post.createdAt).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })

return (
    <div className="bg-card rounded-lg border border-border overflow-hidden hover:border-accent transition-colors">
      {/* Image Preview */}
      {post.imageUrl && (
        <div className="relative w-full h-48 bg-muted">
          <Image
            src={post.imageUrl}
            alt={post.title}
            fill
            className="object-cover"
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          />
        </div>
      )}

{/* Video Indicator */}
      {post.videoUrl && !post.imageUrl && (
        <div className="relative w-full h-48 bg-muted flex items-center justify-center">
          <div className="relative w-full h-full bg-gradient-to-br from-accent/20 to-accent/10 flex items-center justify-center">
            <Play size={48} className="text-accent" />
          </div>
        </div>
      )}

{/* Content */}
      <div className="p-6">
        <div className="flex items-start justify-between gap-4 mb-3">
          <div className="flex-1">
            <h3 className="text-xl font-bold mb-1 line-clamp-2">{post.title}</h3>
            <p className="text-sm text-muted-foreground">{date}</p>
          </div>
          {onDelete && isAdmin && (
            <button
              onClick={() => onDelete(post.id)}
              className="text-muted-foreground hover:text-destructive transition-colors p-2"
              aria-label="Delete post"
            >
              <Trash2 size={18} />
            </button>
          )}
        </div>

<p className="text-foreground text-sm line-clamp-3 mb-4">{post.content}</p>

{post.videoUrl && (
          <div className="flex items-center gap-2 text-accent text-xs mb-4">
            <Play size={14} />
            <span>Video included</span>
          </div>
        )}

<Link
          href={`/blog/${post.id}`}
          className="inline-flex items-center gap-2 text-accent hover:text-accent/80 font-medium text-sm"
        >
          Read More →
        </Link>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/admin-auth.ts" isMerged="true"
'use client'

const ADMIN_PASSWORD = 'AalimT@220*' // Admin password for blog access

export const isAdminAuthenticated = (): boolean => {
  if (typeof window === 'undefined') return false
  return localStorage.getItem('isAdmin') === 'true'
}

export const adminLogin = (password: string): boolean => {
  if (password === ADMIN_PASSWORD) {
    localStorage.setItem('isAdmin', 'true')
    return true
  }
  return false
}

export const adminLogout = (): void => {
  localStorage.removeItem('isAdmin')
}
[V0_FILE]typescriptreact:file="app/blog/create/page.tsx" isMerged="true"
'use client'

import { useEffect, useState } from 'react'
import { CreatePostForm } from '@/components/create-post-form'
import { isAdminAuthenticated, adminLogin } from '@/lib/admin-auth'
import Link from 'next/link'
import { ArrowLeft } from 'lucide-react'

export default function CreateBlogPage() {
  const [isAdmin, setIsAdmin] = useState(false)
  const [mounted, setMounted] = useState(false)
  const [adminPassword, setAdminPassword] = useState('')
  const [adminError, setAdminError] = useState('')

useEffect(() => {
    setMounted(true)
    setIsAdmin(isAdminAuthenticated())
  }, [])

const handleAdminLogin = (e: React.FormEvent) => {
    e.preventDefault()
    if (adminLogin(adminPassword)) {
      setIsAdmin(true)
      setAdminPassword('')
      setAdminError('')
    } else {
      setAdminError('Incorrect password')
    }
  }

if (!mounted) return null

if (!isAdmin) {
    return (
      <main className="pt-20 pb-12 px-6 bg-background min-h-screen">
        <div className="max-w-3xl mx-auto">
          <Link href="/blog" className="inline-flex items-center gap-2 text-accent hover:text-accent/80 mb-8 font-medium">
            <ArrowLeft size={20} />
            Back to Blog
          </Link>

<div className="bg-card rounded-lg border border-border p-8 text-center">
            <h1 className="text-3xl font-bold mb-4">Admin Access Required</h1>
            <p className="text-muted-foreground mb-6">Only admins can create posts. Please enter your admin password.</p>

<form onSubmit={handleAdminLogin} className="max-w-md mx-auto space-y-4">
              <input
                type="password"
                value={adminPassword}
                onChange={(e) => setAdminPassword(e.target.value)}
                placeholder="Enter admin password"
                className="w-full px-4 py-2 rounded-lg bg-background border border-border text-foreground focus:outline-none focus:border-accent"
              />
              <button
                type="submit"
                className="w-full px-6 py-2 bg-accent text-accent-foreground rounded-lg hover:opacity-90 transition-opacity font-medium"
              >
                Admin Login
              </button>
            </form>
            {adminError && <p className="text-destructive text-sm mt-4">{adminError}</p>}
          </div>
        </div>
      </main>
    )
  }

return (
    <main className="pt-20 pb-12 px-6 bg-background min-h-screen">
      <div className="max-w-3xl mx-auto">
        <Link href="/blog" className="inline-flex items-center gap-2 text-accent hover:text-accent/80 mb-8 font-medium">
          <ArrowLeft size={20} />
          Back to Blog
        </Link>

<div className="mb-8">
          <h1 className="text-4xl md:text-5xl font-bold mb-2">Create New Post</h1>
          <div className="w-12 h-1 bg-accent rounded-full"></div>
        </div>

<CreatePostForm />
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/blog/page.tsx" isMerged="true"
'use client'

import { useEffect, useState } from 'react'
import { getPosts, deletePost, type BlogPost } from '@/lib/blog-storage'
import { BlogPostCard } from '@/components/blog-post-card'
import { isAdminAuthenticated, adminLogin, adminLogout } from '@/lib/admin-auth'
import Link from 'next/link'
import { Plus, LogOut } from 'lucide-react'

export default function BlogPage() {
  const [posts, setPosts] = useState<BlogPost[]>([])
  const [mounted, setMounted] = useState(false)
  const [isAdmin, setIsAdmin] = useState(false)
  const [showAdminLogin, setShowAdminLogin] = useState(false)
  const [adminPassword, setAdminPassword] = useState('')
  const [adminError, setAdminError] = useState('')

useEffect(() => {
    setMounted(true)
    setPosts(getPosts())
    setIsAdmin(isAdminAuthenticated())
  }, [])

const handleAdminLogin = (e: React.FormEvent) => {
    e.preventDefault()
    if (adminLogin(adminPassword)) {
      setIsAdmin(true)
      setAdminPassword('')
      setShowAdminLogin(false)
      setAdminError('')
    } else {
      setAdminError('Incorrect password')
    }
  }

const handleAdminLogout = () => {
    adminLogout()
    setIsAdmin(false)
  }

const handleDelete = (id: string) => {
    if (!isAdmin) {
      alert('Only admin can delete posts')
      return
    }
    if (confirm('Are you sure you want to delete this post?')) {
      deletePost(id)
      setPosts(getPosts())
    }
  }

if (!mounted) return null

return (
    <main className="pt-20 pb-12 px-6 bg-background min-h-screen">
      <div className="max-w-5xl mx-auto">
        {/* Header */}
        <div className="mb-12">
          <div className="flex items-center justify-between mb-4">
            <h1 className="text-5xl md:text-6xl font-bold">Blog</h1>
            {isAdmin && (
              <button
                onClick={handleAdminLogout}
                className="flex items-center gap-2 px-4 py-2 text-sm bg-muted rounded-lg hover:bg-muted/80 transition-colors"
              >
                <LogOut size={16} />
                Admin Logout
              </button>
            )}
          </div>
          <div className="w-12 h-1 bg-accent rounded-full mb-6"></div>
          <p className="text-lg text-muted-foreground mb-8">
            Thoughts, tutorials, and insights on automation and technology.
          </p>

{/* Admin Login Form */}
          {!isAdmin && (
            <div className="mb-8">
              {!showAdminLogin ? (
                <button
                  onClick={() => setShowAdminLogin(true)}
                  className="text-sm text-accent hover:text-accent/80"
                >
                  Admin Login
                </button>
              ) : (
                <form onSubmit={handleAdminLogin} className="flex gap-2 mb-6">
                  <input
                    type="password"
                    value={adminPassword}
                    onChange={(e) => setAdminPassword(e.target.value)}
                    placeholder="Enter admin password"
                    className="px-3 py-2 rounded-lg bg-card border border-border text-foreground text-sm focus:outline-none focus:border-accent"
                  />
                  <button
                    type="submit"
                    className="px-4 py-2 bg-accent text-accent-foreground rounded-lg hover:opacity-90 transition-opacity text-sm font-medium"
                  >
                    Login
                  </button>
                  <button
                    type="button"
                    onClick={() => {
                      setShowAdminLogin(false)
                      setAdminError('')
                    }}
                    className="px-4 py-2 border border-border rounded-lg hover:border-accent transition-colors text-sm"
                  >
                    Cancel
                  </button>
                </form>
              )}
              {adminError && <p className="text-destructive text-sm">{adminError}</p>}
            </div>
          )}

{isAdmin && (
            <Link
              href="/blog/create"
              className="inline-flex items-center gap-2 px-6 py-3 bg-accent text-accent-foreground rounded-lg hover:opacity-90 transition-opacity font-medium"
            >
              <Plus size={20} />
              New Post
            </Link>
          )}
        </div>

{/* Posts Grid */}
        {posts.length > 0 ? (
          <div className="grid md:grid-cols-2 gap-6">
            {posts.map((post) => (
              <BlogPostCard key={post.id} post={post} onDelete={handleDelete} isAdmin={isAdmin} />
            ))}
          </div>
        ) : (
          <div className="text-center py-12">
            <p className="text-muted-foreground text-lg mb-6">No posts yet. Start sharing your thoughts!</p>
            {isAdmin && (
              <Link
                href="/blog/create"
                className="inline-flex items-center gap-2 px-6 py-3 bg-accent text-accent-foreground rounded-lg hover:opacity-90 transition-opacity font-medium"
              >
                <Plus size={20} />
                Create First Post
              </Link>
            )}
          </div>
        )}
      </div>
    </main>
  )
}
[V0_FILE]typescript:file="lib/meeting-storage.ts" isMerged="true"
export interface Meeting {
  id: string
  name: string
  email: string
  topic: string
  date: string
  time: string
  duration: number
  notes: string
  createdAt: string
}

const MEETINGS_STORAGE_KEY = 'meetings'

export function getMeetings(): Meeting[] {
  if (typeof window === 'undefined') return []
  try {
    const meetings = localStorage.getItem(MEETINGS_STORAGE_KEY)
    return meetings ? JSON.parse(meetings) : []
  } catch {
    return []
  }
}

export function saveMeeting(meeting: Omit<Meeting, 'id' | 'createdAt'>): Meeting {
  const newMeeting: Meeting = {
    ...meeting,
    id: Date.now().toString(),
    createdAt: new Date().toISOString(),
  }
  
  const meetings = getMeetings()
  meetings.push(newMeeting)
  
  if (typeof window !== 'undefined') {
    localStorage.setItem(MEETINGS_STORAGE_KEY, JSON.stringify(meetings))
  }
  
  return newMeeting
}

export function isMeetingTimeBooked(date: string, time: string, duration: number): boolean {
  const meetings = getMeetings()
  const [hour, minute] = time.split(':').map(Number)
  const meetingStart = hour + minute / 60
  const meetingEnd = meetingStart + duration

return meetings.some((meeting) => {
    if (meeting.date !== date) return false
    
    const [bookedHour, bookedMinute] = meeting.time.split(':').map(Number)
    const bookedStart = bookedHour + bookedMinute / 60
    const bookedEnd = bookedStart + meeting.duration

// Check for overlap
    return meetingStart < bookedEnd && meetingEnd > bookedStart
  })
}

export function getAvailableTimesForDate(date: string): string[] {
  const times: string[] = []
  
  // Generate hourly slots from 9 AM to 11 PM
  for (let hour = 9; hour < 23; hour++) {
    times.push(`${String(hour).padStart(2, '0')}:00`)
  }

// Filter out booked times
  return times.filter((time) => !isMeetingTimeBooked(date, time, 1))
}
[V0_FILE]typescript:file="app/api/book-meeting/route.ts" isMerged="true"
import nodemailer from 'nodemailer'

interface BookingRequest {
  id: string
  name: string
  email: string
  topic: string
  date: string
  time: string
  duration: number
  notes: string
  createdAt: string
}

export async function POST(request: Request) {
  try {
    const booking: BookingRequest = await request.json()

const emailUser = process.env.EMAIL_USER
    const emailPass = process.env.EMAIL_PASS

if (!emailUser || !emailPass) {
      console.error('[v0] Email credentials not configured')
      return Response.json({ success: true }, { status: 200 })
    }

const transporter = nodemailer.createTransport({
      service: 'gmail',
      auth: {
        user: emailUser,
        pass: emailPass,
      },
    })

const dateObj = new Date(booking.date)
    const formattedDate = dateObj.toLocaleDateString('en-US', {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    })

// Email to admin
    const adminEmailHtml = `
      <h2>New Meeting Booking</h2>
      <p><strong>Name:</strong> ${booking.name}</p>
      <p><strong>Email:</strong> ${booking.email}</p>
      <p><strong>Topic:</strong> ${booking.topic}</p>
      <p><strong>Date:</strong> ${formattedDate}</p>
      <p><strong>Time:</strong> ${booking.time}</p>
      <p><strong>Duration:</strong> ${booking.duration} minutes</p>
      ${booking.notes ? `<p><strong>Notes:</strong> ${booking.notes}</p>` : ''}
      <p><strong>Booking ID:</strong> ${booking.id}</p>
    `

// Email to user
    const userEmailHtml = `
      <h2>Meeting Booking Confirmation</h2>
      <p>Hi ${booking.name},</p>
      <p>Your meeting has been successfully booked! Here are the details:</p>
      <ul>
        <li><strong>Topic:</strong> ${booking.topic}</li>
        <li><strong>Date:</strong> ${formattedDate}</li>
        <li><strong>Time:</strong> ${booking.time}</li>
        <li><strong>Duration:</strong> ${booking.duration} minutes</li>
      </ul>
      ${booking.notes ? `<p><strong>Your Notes:</strong> ${booking.notes}</p>` : ''}
      <p>I will reach out to you at ${booking.email} to confirm and send you the meeting link.</p>
      <p>Looking forward to discussing your automation needs!</p>
      <p>Best regards,<br>Abdul Alim Mridha</p>
    `

// Send email to admin
    await transporter.sendMail({
      from: emailUser,
      to: emailUser,
      subject: `New Meeting Booking: ${booking.topic}`,
      html: adminEmailHtml,
    })

// Send confirmation email to user
    await transporter.sendMail({
      from: emailUser,
      to: booking.email,
      subject: 'Meeting Booking Confirmation',
      html: userEmailHtml,
    })

return Response.json({ success: true }, { status: 200 })
  } catch (error) {
    console.error('[v0] Error sending booking email:', error)
    return Response.json({ success: true }, { status: 200 })
  }
}
[V0_FILE]typescriptreact:file="components/booking-calendar.tsx" isMerged="true"
'use client'

import { useState, useEffect } from 'react'
import { saveMeeting, getAvailableTimesForDate, isMeetingTimeBooked } from '@/lib/meeting-storage'
import { Calendar, Clock, User, Mail, FileText, CheckCircle } from 'lucide-react'

export function BookingCalendar() {
  const [mounted, setMounted] = useState(false)
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    topic: '',
    date: '',
    time: '',
    duration: 30,
    notes: '',
  })
  const [availableTimes, setAvailableTimes] = useState<string[]>([])
  const [isSubmitted, setIsSubmitted] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    setMounted(true)
  }, [])

useEffect(() => {
    if (formData.date) {
      const times = getAvailableTimesForDate(formData.date)
      setAvailableTimes(times)
      setFormData((prev) => ({ ...prev, time: '' }))
    }
  }, [formData.date])

if (!mounted) return null

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({
      ...prev,
      [name]: name === 'duration' ? Number(value) : value,
    }))
    if (error) setError(null)
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setError(null)

try {
      if (!formData.name || !formData.email || !formData.topic || !formData.date || !formData.time) {
        setError('Please fill in all required fields')
        setIsLoading(false)
        return
      }

// Check if time is still available
      if (isMeetingTimeBooked(formData.date, formData.time, formData.duration)) {
        setError('This time slot is no longer available. Please select another.')
        setIsLoading(false)
        return
      }

// Save meeting
      const meeting = saveMeeting({
        name: formData.name,
        email: formData.email,
        topic: formData.topic,
        date: formData.date,
        time: formData.time,
        duration: formData.duration,
        notes: formData.notes,
      })

// Send email notification
      const response = await fetch('/api/book-meeting', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(meeting),
      })

if (!response.ok) {
        console.error('[v0] Email notification failed, but meeting was saved')
      }

setIsSubmitted(true)
      setFormData({
        name: '',
        email: '',
        topic: '',
        date: '',
        time: '',
        duration: 30,
        notes: '',
      })
      setTimeout(() => setIsSubmitted(false), 3000)
    } catch (err) {
      console.error('[v0] Error booking meeting:', err)
      setError('Failed to book meeting. Please try again.')
    } finally {
      setIsLoading(false)
    }
  }

// Get minimum date (today)
  const today = new Date().toISOString().split('T')[0]
  const maxDate = new Date(Date.now() + 60 * 24 * 60 * 60 * 1000).toISOString().split('T')[0] // 60 days from now

return (
    <section id="booking" className="py-20 px-6 bg-card/50">
      <div className="max-w-4xl mx-auto">
        <div className="mb-16">
          <h2 className="text-4xl md:text-5xl font-bold mb-4 text-accent">Book a Meeting</h2>
          <div className="w-12 h-1 bg-accent rounded-full mb-6"></div>
          <p className="text-lg text-muted-foreground">
            Schedule a meeting with me to discuss your automation needs. I'm available 24/7 but please note that other bookings will be considered.
          </p>
        </div>

<div className="bg-background rounded-xl border border-border p-8">
          <div className="grid md:grid-cols-3 gap-8">
            {/* Calendar Display */}
            <div className="md:col-span-1 bg-card rounded-lg p-6 border border-border/50">
              <h3 className="text-lg font-semibold mb-4">Select Date</h3>
              <input
                type="date"
                value={formData.date}
                onChange={(e) => setFormData((prev) => ({ ...prev, date: e.target.value }))}
                min={new Date().toISOString().split('T')[0]}
                max={new Date(Date.now() + 60 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]}
                className="w-full px-4 py-2 rounded-lg bg-background border border-border text-foreground focus:outline-none focus:border-accent mb-4"
              />
              {formData.date && (
                <div className="space-y-2">
                  <p className="text-sm font-medium text-muted-foreground">Available times:</p>
                  <div className="space-y-1 max-h-64 overflow-y-auto">
                    {availableTimes.length > 0 ? (
                      availableTimes.map((time) => (
                        <button
                          key={time}
                          onClick={() => setFormData((prev) => ({ ...prev, time }))}
                          className={`w-full px-3 py-2 rounded text-sm transition-colors ${
                            formData.time === time
                              ? 'bg-accent text-accent-foreground'
                              : 'bg-card border border-border hover:border-accent'
                          }`}
                        >
                          {time}
                        </button>
                      ))
                    ) : (
                      <p className="text-xs text-muted-foreground">No available times</p>
                    )}
                  </div>
                </div>
              )}
            </div>

{/* Form */}
            <form onSubmit={handleSubmit} className="md:col-span-2 space-y-6">
            <div className="grid md:grid-cols-2 gap-6">
              {/* Name */}
              <div>
                <label htmlFor="name" className="block text-sm font-medium mb-2 flex items-center gap-2">
                  <User size={16} className="text-accent" />
                  Name
                </label>
                <input
                  type="text"
                  id="name"
                  name="name"
                  value={formData.name}
                  onChange={handleChange}
                  required
                  className="w-full px-4 py-3 rounded-lg bg-card border border-border text-foreground placeholder-muted-foreground focus:outline-none focus:border-accent"
                  placeholder="Your name"
                />
              </div>

{/* Email */}
              <div>
                <label htmlFor="email" className="block text-sm font-medium mb-2 flex items-center gap-2">
                  <Mail size={16} className="text-accent" />
                  Email
                </label>
                <input
                  type="email"
                  id="email"
                  name="email"
                  value={formData.email}
                  onChange={handleChange}
                  required
                  className="w-full px-4 py-3 rounded-lg bg-card border border-border text-foreground placeholder-muted-foreground focus:outline-none focus:border-accent"
                  placeholder="your@email.com"
                />
              </div>

{/* Topic */}
              <div>
                <label htmlFor="topic" className="block text-sm font-medium mb-2">
                  Meeting Topic
                </label>
                <input
                  type="text"
                  id="topic"
                  name="topic"
                  value={formData.topic}
                  onChange={handleChange}
                  required
                  className="w-full px-4 py-3 rounded-lg bg-card border border-border text-foreground placeholder-muted-foreground focus:outline-none focus:border-accent"
                  placeholder="e.g., Automation Consultation"
                />
              </div>

{/* Duration */}
              <div>
                <label htmlFor="duration" className="block text-sm font-medium mb-2 flex items-center gap-2">
                  <Clock size={16} className="text-accent" />
                  Duration (minutes)
                </label>
                <select
                  id="duration"
                  name="duration"
                  value={formData.duration}
                  onChange={handleChange}
                  className="w-full px-4 py-3 rounded-lg bg-card border border-border text-foreground focus:outline-none focus:border-accent"
                >
                  <option value={15}>15 minutes</option>
                  <option value={30}>30 minutes</option>
                  <option value={60}>1 hour</option>
                  <option value={90}>1.5 hours</option>
                  <option value={120}>2 hours</option>
                </select>
              </div>

</div>

{/* Notes */}
            <div>
              <label htmlFor="notes" className="block text-sm font-medium mb-2 flex items-center gap-2">
                <FileText size={16} className="text-accent" />
                Additional Notes (Optional)
              </label>
              <textarea
                id="notes"
                name="notes"
                value={formData.notes}
                onChange={handleChange}
                rows={3}
                className="w-full px-4 py-3 rounded-lg bg-card border border-border text-foreground placeholder-muted-foreground focus:outline-none focus:border-accent resize-none"
                placeholder="Tell me more about your project or requirements..."
              >

{/* Submit Button */} {/* Messages */} {error && (

{error}

)} {isSubmitted && (

Meeting booked successfully! A confirmation has been sent to your email.

)}

) } [V0_FILE]typescriptreact:file="components/hero.tsx" isMerged="true" "use client" import Image from "next/image" import { ChevronDown, Facebook, Twitter, Youtube, Mail } from "lucide-react" export function Hero() { return (

HELLO, HOW ARE YOU?

Hi, I'm
Abdul Alim Mridha

n8n Expert — I automate email, social media & customer support for small businesses. I transform complex processes into intelligent, automated solutions.

{/* Social Links */}

WELCOME TO MY WORLD

Get In Touch

{/* Decorative circles */}

{/* Profile Image */}

{/* Email CTA Button - floating */}

) } [V0_FILE]typescriptreact:file="components/about.tsx" isMerged="true" "use client" import { useState } from "react" const aboutTabs = [ { id: "overview", label: "Overview", content: { title: "n8n Expert", description: "With extensive expertise in n8n workflow automation, I specialize in designing and implementing intelligent automation solutions for email, social media, and customer support. I help small businesses streamline operations, reduce manual work, and increase productivity through custom automation.", items: [ "5+ years in automation and workflow design", "Expert in n8n platform and integrations", "Specialized in email, social media & customer support automation", "Proven track record with small business clients", ], }, }, { id: "skills", label: "Personal Skills", content: { title: "Core Competencies", description: "I bring a comprehensive skill set to every project, combining technical expertise with strategic thinking.", items: [ "n8n Workflow Automation", "Email Automation & SMTP Integration", "Social Media Automation & API Integration", "Customer Support Automation & Chatbots", "Data Processing & CRM Integration", "Client Communication & Support", ], }, }, { id: "experience", label: "Experience", content: { title: "Professional Background", description: "Dedicated n8n expert with proven expertise in email, social media, and customer support automation for small businesses.", items: [ "Lead n8n Automation Specialist - Current", "Email & Social Media Automation Developer - 3+ years", "Customer Support Automation Engineer - 2+ years", "Technical Consultant - Multiple Small Business Clients", ], }, }, ] export function About() { const [activeTab, setActiveTab] = useState("overview") const currentTab = aboutTabs.find((tab) => tab.id === activeTab) return (

7+ Years of Experience

About Me

{aboutTabs.map((tab) => ( ))}

{/* Tab Content */} {currentTab && (

{currentTab.content.title}

{currentTab.content.description}

{currentTab.content.items.map((item, index) => (

{item}

))}

)}

) } [V0_FILE]typescriptreact:file="components/projects.tsx" isMerged="true" "use client" import { useState } from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import Image from "next/image" const projects = [ { id: 1, title: "Gmail SMTP & cPanel SMTP setup in n8n", description: "Email sending configuration supporting 99.9% uptime. Configured dual SMTP providers (Gmail + cPanel) for reliable delivery across 10,000+ monthly automated emails with failover protection.", tags: ["n8n", "Email", "SMTP", "Integration"], image: "/images/gmail-20smtp-20-26-20cpanel-20smtp-20setup-20in-20n8n.png", }, { id: 2, title: "Automatic Facebook post with AI image using AI", description: "Social media automation generating 15+ AI images/day for Facebook posting. Saves 8 hours/week on content creation and increases engagement by 45% through consistent daily posting.", tags: ["n8n", "AI", "Social Media", "Facebook"], image: "/images/automatic-20facebook-20post-20with-20ai-20image-20using-20ai.png", }, { id: 3, title: "Auto Reply to Customer from Google Sheet with n8n", description: "Customer response automation handling 100+ daily inquiries with 95% accuracy. Reduces response time from 24 hours to 2 minutes, improving customer satisfaction by 40%.", tags: ["n8n", "Customer Service", "Google Sheets", "Webhooks"], image: "/images/auto-20reply-20to-20customer-20from-20google-20sheet-20with-20n8n.png", }, { id: 4, title: "Attachment sent to email using n8n automation", description: "Automated document distribution system delivering 500+ monthly reports. Eliminates 6 hours/week of manual file attachment and email preparation work.", tags: ["n8n", "Email", "Attachments", "Google Sheets"], image: "/images/attachment-20sent-20to-20email-20using-20n8n-20automation.png", }, { id: 5, title: "Automatic Facebook post with AI image n8n + AI Image Generation", description: "Enterprise social media automation generating 300+ unique AI images monthly. Handles 25+ brands simultaneously with 98% error-free delivery and 50% reduction in content costs.", tags: ["n8n", "AI", "Facebook", "Image Generation"], image: "/images/automatic-20facebook-20post-20with-20ai-20image-20n8n-20-2b-20ai-20image-20generation.png", }, { id: 6, title: "Upload products to multiple WordPress sites at once", description: "Bulk product sync automation managing 2,000+ SKUs across 8 WooCommerce stores. Saves 20 hours/month on inventory management and ensures 100% pricing consistency across locations.", tags: ["n8n", "WooCommerce", "WordPress", "E-commerce"], image: "/projects/wordpress-products-upload.png", }, { id: 7, title: "Create Auto SMS and Messenger Reply System Without Code", description: "AI-powered SMS/Messenger automation handling 500+ daily messages. Achieves 92% customer satisfaction with instant replies and reduces support team workload by 35 hours/week.", tags: ["n8n", "SMS", "Messaging", "AI Agent"], image: "/images/create-20auto-20sms-20and-20messenger-20reply-20system-20without-20code-20with-20n8n.png", }, { id: 8, title: "Personalized AI Email automation using n8n", description: "Personalized email campaigns with 65% open rate and 28% click-through rate. Sends 50,000+ monthly emails with dynamic content, increasing conversion by 3.5x.", tags: ["n8n", "Email", "AI", "Personalization"], image: "/images/personalized-20ai-20email-20automation-20using-20n8n.png", }, { id: 9, title: "Knowledge base email automation using n8n", description: "AI-powered support system answering 80% of customer emails automatically. Handles 1,000+ monthly inquiries with 89% accuracy, saving 12 hours/week in support costs.", tags: ["n8n", "Email", "AI Agent", "Knowledge Base"], image: "/images/knowledge-20base-20email-20automation-20using-20n8n.png", }, { id: 10, title: "NaturalPlate - Organic Food Platform", description: "E-commerce platform generating $50K+ monthly revenue. Features 500+ organic products with 4.8★ rating, 15,000+ active users, and 35% repeat purchase rate. Visit: www.naturalplate.com or https://natural-platenew.vercel.app/", tags: ["Web Design", "E-commerce", "Organic", "UI/UX"], image: "", link: "https://natural-platenew.vercel.app/", }, { id: 11, title: "Social Media Post Manager", description: "Multi-channel scheduling platform managing 500+ businesses and 50,000+ monthly posts. Reduces content planning time by 60% with advanced analytics showing 3.2x engagement improvement.", tags: ["Web App", "Social Media", "Content Management", "React"], image: "", link: "https://social-media-post-gamma.vercel.app/", }, { id: 12, title: "Academy Builder Pro", description: "Learning platform hosting 200+ courses with 10,000+ enrolled students. Achieved 78% course completion rate and $2M+ in annual course revenue for partner educators.", tags: ["Education", "LMS", "Web App", "Next.js"], image: "", link: "https://academy-builder-pro.vercel.app/", }, { id: 13, title: "Mostofa Variety Store", description: "Retail e-commerce platform with 3,000+ SKUs generating $75K+ monthly sales. Features 98% inventory accuracy, 24-hour fulfillment, and 4.7★ customer rating across 8,000+ reviews.", tags: ["E-commerce", "Shopping", "Web Store", "Payment Integration"], image: "", link: "https://mostofa-varity-store-86jb.vercel.app/", }, { id: 14, title: "Kashor Bidda Niketon", description: "Food delivery platform serving 500+ restaurants with 40,000+ monthly orders. Supports Bengali localization, average 28-minute delivery time, and 85% order accuracy rate.", tags: ["Food Delivery", "Localization", "E-commerce", "Mobile Responsive"], image: "", link: "https://kashor-bidda-niketon.vercel.app/", }, { id: 15, title: "Autofloy", description: "Enterprise automation platform serving 200+ companies saving 500+ hours/month collectively. Automates 50+ common business workflows with 99.5% uptime SLA and ROI of 8x within 6 months. Visit: www.autofloy.com", tags: ["Automation", "Business Tools", "Workflows", "Enterprise"], image: "", link: "https://www.autofloy.com", }, ] export function Projects() { const [currentIndex, setCurrentIndex] = useState(0) const nextProject = () => { setCurrentIndex((prev) => (prev + 1) % projects.length) } const prevProject = () => { setCurrentIndex((prev) => (prev - 1 + projects.length) % projects.length) } return (

Projects

{projects.map((project) => (

{project.image ? (

) : (

Website Preview

{project.title}

)}

{project.title}

{project.description}

{project.tags.map((tag) => ( {tag} ))}

{project.link && ( View Live Project )}

))}

{projects.map((_, index) => (

) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { ConvAIWidget } from "@/components/convai-widget" import Script from "next/script" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Abdul Alim Mridha - n8n Expert", description: "n8n Expert — I automate email, social media & customer support for small businesses", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children}

New Contact Message

Thank you, ${name}!

Get In Touch

Contact Info

Response Time

Post not found

Video

Hi, I'm Abdul Alim Mridha

About Me

{currentTab.content.title}

Projects

{project.title}

Hi, I'm
Abdul Alim Mridha