[V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" import { type Config } from "tailwindcss" export default { content: [ './pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}', ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#8B5CF6", foreground: "#FFFFFF", }, secondary: { DEFAULT: "#1F1F1F", foreground: "#FFFFFF", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, card: { DEFAULT: "#1A1A1A", foreground: "#FFFFFF", }, }, }, }, plugins: [], } satisfies Config [V0_FILE]typescriptreact:file="components/ui/card-wrapper.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type React from "react" interface CardWrapperProps { children: React.ReactNode className?: string } export function CardWrapper({ children, className = "" }: CardWrapperProps) { return

{children}

} [V0_FILE]typescriptreact:file="components/stats.tsx" isMerged="true" interface StatProps { value: string label: string } function StatItem({ value, label }: StatProps) { return (

{value}

{label}

) } export function Stats() { return (

) } [V0_FILE]typescriptreact:file="components/services.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import { Code, Palette, Globe } from "lucide-react" import { CardWrapper } from "./ui/card-wrapper" interface ServiceProps { title: string description: string icon: React.ReactNode } function ServiceCard({ title, description, icon }: ServiceProps) { return (

{icon}

{title}

{description}

) } export function Services() { return (

What I Do

I offer a wide range of services to help businesses and individuals create impactful digital experiences. Here's how I can help you succeed.

} title="Website Design" description="I craft custom stunning, user-friendly, and responsive designs tailored to your needs." /> } title="UI/UX Design" description="Creating intuitive and engaging user experiences that delight your users." /> } title="Web Development" description="Building fast, secure, and scalable web applications using modern technologies." />

) } [V0_FILE]typescriptreact:file="components/skills.tsx" isEdit="true" isMerged="true" interface SkillProps { name: string percentage: number } function SkillItem({ name, percentage }: SkillProps) { return (

{name} {percentage}%

) } export function Skills() { return (

My Skills

I've spent years honing my skills in web development. Here's an overview of my technical expertise and proficiency levels.

) } [V0_FILE]typescriptreact:file="components/testimonials.tsx" isEdit="true" isMerged="true" import { CardWrapper } from "./ui/card-wrapper" import Image from "next/image" import { Quote } from "lucide-react" interface TestimonialProps { content: string author: string position: string image: string } function TestimonialCard({ content, author, position, image }: TestimonialProps) { return (

{content}

{author}

{position}

) } export function Testimonials() { const testimonials = [ { author: "Sarah Johnson", position: "CEO at TechStart", image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&auto=format&fit=crop&q=60", content: "Working with this developer was an absolute pleasure. Their attention to detail and creative solutions made our project a success.", }, { author: "Michael Chen", position: "Product Manager", image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&auto=format&fit=crop&q=60", content: "Exceptional work! The developer delivered beyond our expectations and was always responsive to our needs.", }, ] return (

Client Testimonials

Don't just take my word for it. Here's what my clients have to say about their experiences working with me.

{testimonials.map((testimonial, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/navbar.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import Link from "next/link" import { useState } from "react" import { Menu, X } from "lucide-react" import { Button } from "./ui/button" export function Navbar() { const [isOpen, setIsOpen] = useState(false) return (

{/* Desktop Navigation */}

Services Works Skills Testimonials

{/* Mobile Navigation */}

{/* Mobile Menu */} {isOpen && (

setIsOpen(false)} > Services setIsOpen(false)} > Works setIsOpen(false)} > Skills setIsOpen(false)} > Testimonials

)}

) } [V0_FILE]typescriptreact:file="components/projects.tsx" isFixed="true" isEdit="true" isQuickEdit="true" import Image from "next/image" import { CardWrapper } from "./ui/card-wrapper" import { Button } from "./ui/button" import { ExternalLink, Github } from "lucide-react" interface ProjectProps { title: string description: string image: string demoLink: string githubLink: string } function ProjectCard({ title, description, image, demoLink, githubLink }: ProjectProps) { return (

{title}

{description}

) } export function Projects() { const projects = [ { title: "NFT Marketplace Dashboard", description: "A modern dashboard for NFT trading with real-time updates and analytics.", image: "/placeholder.svg?height=300&width=400", demoLink: "#", githubLink: "#", }, { title: "E-commerce Platform", description: "Full-featured e-commerce solution with cart, checkout, and payment integration.", image: "/placeholder.svg?height=300&width=400", demoLink: "#", githubLink: "#", }, { title: "Social Media App", description: "Real-time social media platform with messaging and post sharing features.", image: "/placeholder.svg?height=300&width=400", demoLink: "#", githubLink: "#", }, { title: "Task Management Tool", description: "Collaborative task management app with drag-and-drop interface.", image: "/placeholder.svg?height=300&width=400", demoLink: "#", githubLink: "#", }, { title: "Weather Dashboard", description: "Weather forecasting app with interactive maps and real-time updates.", image: "/placeholder.svg?height=300&width=400", demoLink: "#", githubLink: "#", }, { title: "Fitness Tracking App", description: "Personal fitness tracker with workout plans and progress monitoring.", image: "/placeholder.svg?height=300&width=400", demoLink: "#", githubLink: "#", }, ] return (

Featured Projects

Explore my latest web development projects. Each project demonstrates my commitment to creating innovative and user-friendly digital solutions.

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

) } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" import { Button } from "@/components/ui/button" import { Stats } from "@/components/stats" import { Services } from "@/components/services" import { Projects } from "@/components/projects" import { Skills } from "@/components/skills" import { Testimonials } from "@/components/testimonials" import Image from "next/image" import { Navbar } from "@/components/navbar" import { Phone, Mail, MapPin } from "lucide-react" export default function Home() { return (

{/* Hero Section */}

I am Lukman Next-Level Web Developer.

I help their company and experience problems by building accessible and inclusive web products and digital experiences.

{/* Other Sections */}

{/* Contact Section */}

Let's Get In Touch

Have a project in mind or want to discuss potential opportunities? I'm just a message away.

Phone

+91 7074399354

Email

dev.lukmansk@gmail.com

Address

Murshidabad, West Bengal, India

<Button size="lg" className="w-full">
                  Send Message
                </Button>
              </form>
            </div>
          </div>
        </section>
      </div>

{/* Footer */}
      <footer className="bg-card mt-20">
        <div className="container mx-auto px-4 py-12">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div>
              <h3 className="text-xl font-bold mb-4">Lukman</h3>
              <p className="text-gray-400">
                Full Stack Developer based in your location. Available for freelance work.
              </p>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Company</h4>
              <ul className="space-y-2 text-gray-400">
                <li>About</li>
                <li>Blog</li>
                <li>Contact</li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Services</h4>
              <ul className="space-y-2 text-gray-400">
                <li>Web Development</li>
                <li>UI/UX Design</li>
                <li>Mobile Development</li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Contact Us</h4>
              <ul className="space-y-2 text-gray-400">
                <li>hello@example.com</li>
                <li>+1234567890</li>
                <li>Your Address Here</li>
              </ul>
            </div>
          </div>
          <div className="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
            <p>© 2024 Lukman. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </main>
  )
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This