[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Facebook, Send } from "lucide-react" import { useState } from "react" export default function Portfolio() { const [formData, setFormData] = useState({ name: "", email: "", message: "", }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() console.log("[v0] Form submitted:", formData) // Handle form submission alert("Thank you for your message! I will get back to you soon.") setFormData({ name: "", email: "", message: "" }) } const scrollToSection = (id: string) => { const element = document.getElementById(id) element?.scrollIntoView({ behavior: "smooth" }) } const projects = [ { title: "Social Media Design", description: "Creative social media campaigns that drive engagement and build brand identity.", image: "/modern-social-media-design-mockup.jpg", }, { title: "AI Branding Concept", description: "Innovative AI-powered branding solutions for next-generation businesses.", image: "/futuristic-ai-branding-concept.jpg", }, { title: "Video Campaign", description: "Compelling video content that tells stories and connects with audiences.", image: "/video-production-campaign.jpg", }, { title: "Brand Identity Design", description: "Complete brand identity systems from logo to visual guidelines.", image: "/brand-identity-design-system.png", }, { title: "Digital Marketing", description: "Strategic digital marketing campaigns that deliver measurable results.", image: "/digital-marketing-dashboard.png", }, { title: "Content Creation", description: "High-quality content that resonates with your target audience.", image: "/creative-content-creation-workspace.jpg", }, ] return (

{/* Hero Section */}

Hi, I'm{" "} Kazi Ashker Ibna Shaik

Professional Digital Creator | Designing ideas that inspire.

{/* About Section */}

About Me

I'm a passionate digital creator dedicated to transforming ideas into compelling visual experiences. With expertise in branding, content design, and creative strategy, I help businesses and individuals tell their stories through innovative digital solutions.

My journey in digital creation has been driven by a commitment to excellence and a love for pushing creative boundaries. From social media campaigns to comprehensive brand identities, I bring a unique blend of artistic vision and strategic thinking to every project.

Connect With Me

Personal Profile Facebook Page

{/* Projects Section */}

Featured Projects

A showcase of my creative work and digital solutions

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

{project.title}

{project.description}

))}

{/* Contact Section */}

Get In Touch

Have a project in mind? Let's create something amazing together.

Name setFormData({ ...formData, name: e.target.value })} className="w-full h-12 rounded-xl border-gray-300 focus:border-purple-600 focus:ring-purple-600" placeholder="Your name" />

Email setFormData({ ...formData, email: e.target.value })} className="w-full h-12 rounded-xl border-gray-300 focus:border-purple-600 focus:ring-purple-600" placeholder="your.email@example.com" />

Message

setFormData({ ...formData, message: e.target.value })}
                      className="w-full min-h-32 rounded-xl border-gray-300 focus:border-purple-600 focus:ring-purple-600"
                      placeholder="Tell me about your project..."
                    />
                  </div>

<Button
                    type="submit"
                    size="lg"
                    className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white shadow-lg hover:shadow-xl transition-all duration-300 h-12 rounded-xl"
                  >
                    <Send className="w-5 h-5 mr-2" />
                    Send Message
                  </Button>
                </form>

<div className="mt-8 pt-8 border-t border-gray-200">
                  <p className="text-center text-gray-600 mb-4">Or connect with me on social media</p>
                  <div className="flex justify-center gap-4">
                    <a
                      href="https://www.facebook.com/m.mejony"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="p-3 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition-all duration-300 shadow-md hover:shadow-lg hover:scale-110"
                    >
                      <Facebook className="w-6 h-6" />
                    </a>
                    <a
                      href="https://www.facebook.com/healthandweightforever/"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="p-3 bg-purple-600 text-white rounded-full hover:bg-purple-700 transition-all duration-300 shadow-md hover:shadow-lg hover:scale-110"
                    >
                      <Facebook className="w-6 h-6" />
                    </a>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="bg-gradient-to-r from-gray-900 to-gray-800 text-white py-12">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center gap-6">
            <div className="text-center md:text-left">
              <p className="text-lg font-semibold mb-2">Kazi Ashker Ibna Shaik</p>
              <p className="text-gray-400">Professional Digital Creator</p>
            </div>

<div className="mt-8 pt-8 border-t border-gray-700 text-center text-gray-400">
            <p>© 2025 Kazi Ashker Ibna Shaik. All Rights Reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Poppins } from "next/font/google"
import "./globals.css"

const poppins = Poppins({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700"],
  variable: "--font-poppins",
})

export const metadata: Metadata = {
  title: "Kazi Ashker Ibna Shaik - Digital Creator",
  description: "Professional Digital Creator | Designing ideas that inspire.",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className={`${poppins.variable}`}>
      <body className="font-sans antialiased">{children}</body>
    </html>
  )
}
[V0_FILE]jpg:file="public/modern-social-media-design-mockup.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-social-media-design-mockup-u5wBvykSyAY8TX0PB7dV9JslhEJJjF.jpg" isMerged="true"
[V0_FILE]jpg:file="public/futuristic-ai-branding-concept.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/futuristic-ai-branding-concept-3UffoWb7tmLVsMrLmBFBBsmRtHBefs.jpg" isMerged="true"
[V0_FILE]jpg:file="public/video-production-campaign.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/video-production-campaign-1i2npvwAzZCYx5ugHKxNbLAdh7z31x.jpg" isMerged="true"
[V0_FILE]png:file="public/brand-identity-design-system.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/brand-identity-design-system-8eFuIKWc31zLovSCqRdX6gbbTg0oED.png" isMerged="true"
[V0_FILE]png:file="public/digital-marketing-dashboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/digital-marketing-dashboard-jy6ZloCWWDECpZzb5w5FqMv7Ro0Qf1.png" isMerged="true"
[V0_FILE]jpg:file="public/creative-content-creation-workspace.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/creative-content-creation-workspace-w0LvX2MH020qLI8XU0RG4VNSyvAYcM.jpg" isMerged="true"
[V0_FILE]jpg:file="public/abstract-creative-pattern.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-creative-pattern-iEeA6P9GxUB9pynbeNnKTX2O6QpaIN.jpg" isMerged="true"
[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": "next lint"
  },
  "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",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "15.5.4",
    "next-themes": "^0.4.6",
    "react": "19.1.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.1.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"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]css:file="app/globals.css" isEdit="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --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.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --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.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: var(--font-poppins);
  --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);
}

* {
  scroll-behavior: smooth;
}

body {
  font-feature-settings: "rlig" 1, "calt" 1;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 1s ease-out;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}</article></body></html>