{/* Hero Section */}

Welcome to SleekDesigns – Elevate Your Brand with Stunning Design & High-Converting Landing Pages

At SleekDesigns, we specialise in creating powerful, engaging, and visually compelling marketing materials that drive results. Whether you need a high-converting landing page, a professional logo, or eye-catching flyers, we have the expertise to bring your vision to life.

{/* Services Section */}

Our Services

We offer comprehensive design solutions to help your business stand out

{/* Service Package Section */}

Service Packages

Choose the perfect package for a Professional Landing Page / Website

{/* Why Choose Us Section */}

Why Choose Us

We deliver excellence in every project

{whyChooseUsItems.map((item, index) => (

{item.title}

{item.description}

))}

{/* How It Works Section */}

How It Works

Our simple process to bring your vision to life

{[ { step: "1", title: "Consultation", description: "Tell us about your project and vision." }, { step: "2", title: "Design & Development", description: "Our expert designers create stunning visuals based on your needs.", }, { step: "3", title: "Review & Revisions", description: "We refine the design until you're fully satisfied.", }, { step: "4", title: "Delivery", description: "Receive your final files, ready for use!" }, ].map((item, index) => (

{item.step}

{item.title}

{item.description}

))}

{/* Landing Page Designs Section */}

Landing Page Designs

Captivating landing pages that convert visitors into customers

Rocket themed landing page design with 'Lift-Off Your Landing Page' text

Minimalist landing page design with computer illustration

{/* Flyer Designs Section */}

Flyer Designs

Eye-catching flyers that make your message stand out

Modern flyer design with 'Design Flyers That Pop!' text

Vintage style flyer design with photography equipment

{/* Logo Designs Section */}

Logo Designs

Memorable logos that represent your brand identity

{/* Contact Section */}

Get In Touch

Ready to elevate your brand? Let's discuss your project

</div>
                    <Button type="submit" className="w-full">
                      <Send className="mr-2 h-4 w-4" /> Send Message
                    </Button>
                  </form>
                </CardContent>
              </Card>
            </motion.div>

<motion.div
              initial={{ opacity: 0, x: 50 }}
              animate={contactInView ? { opacity: 1, x: 0 } : {}}
              transition={{ duration: 0.6, delay: 0.4 }}
              className="flex flex-col justify-center"
            >
              <div className="space-y-6">
                <div className="flex items-start">
                  <Mail className="mr-4 h-6 w-6 text-primary" />
                  <div>
                    <h3 className="text-lg font-medium">Email</h3>
                    <p className="text-muted-foreground">info@sleekdesigns.online</p>
                  </div>
                </div>
                <div className="flex items-start">
                  <MapPin className="mr-4 h-6 w-6 text-primary" />
                  <div>
                    <h3 className="text-lg font-medium">Address</h3>
                    <p className="text-muted-foreground">
                      Rochester, Kent
                      <br />
                      United Kingdom
                    </p>
                  </div>
                </div>
              </div>
            </motion.div>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="bg-slate-900 py-12 text-white">
        <div className="container">
          <div className="grid gap-8 md:grid-cols-4">
            <div>
              <h3 className="mb-4 text-xl font-bold">SleekDesigns</h3>
              <p className="mb-4 text-slate-300">
                Elevating brands with stunning designs. We specialise in creating visual identities that make an impact.
              </p>
            </div>

<div>
              <h3 className="mb-4 text-xl font-bold">Services</h3>
              <ul className="space-y-2 text-slate-300">
                <li>
                  <Link href="#" className="hover:text-primary">
                    Landing Pages
                  </Link>
                </li>
                <li>
                  <Link href="#" className="hover:text-primary">
                    Flyer Design
                  </Link>
                </li>
                <li>
                  <Link href="#" className="hover:text-primary">
                    Logo Design
                  </Link>
                </li>
                <li>
                  <Link href="#" className="hover:text-primary">
                    Brand Identity
                  </Link>
                </li>
                <li>
                  <Link href="#" className="hover:text-primary">
                    UI/UX Design
                  </Link>
                </li>
              </ul>
            </div>

<div>
              <h3 className="mb-4 text-xl font-bold">Quick Links</h3>
              <ul className="space-y-2 text-slate-300">
                <li>
                  <Link href="#" className="hover:text-primary">
                    Home
                  </Link>
                </li>
                <li>
                  <Link href="#" className="hover:text-primary">
                    About Us
                  </Link>
                </li>
                <li>
                  <Link href="#" className="hover:text-primary">
                    Portfolio
                  </Link>
                </li>
                <li>
                  <Link href="#" className="hover:text-primary">
                    Testimonials
                  </Link>
                </li>
                <li>
                  <Link href="#" className="hover:text-primary">
                    Contact
                  </Link>
                </li>
              </ul>
            </div>

<div>
              <h3 className="mb-4 text-xl font-bold">Newsletter</h3>
              <p className="mb-4 text-slate-300">Subscribe to our newsletter for design tips and updates.</p>
              <div className="flex">
                <Input placeholder="Your Email" className="rounded-r-none bg-slate-800 text-white" />
                <Button className="rounded-l-none">Subscribe</Button>
              </div>
            </div>
          </div>

<div className="mt-12 border-t border-slate-700 pt-8 text-center text-slate-300">
            <p>© {new Date().getFullYear()} SleekDesigns. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </main>
  )
}

[V0_FILE]typescriptreact:file="components/design-canvas.tsx" isFixed="true" isQuickEdit="true" isMerged="true" isEdit="true"
"use client"

import { useEffect, useRef } from "react"

interface DesignCanvasProps {
  id: string
  type: "landing-page" | "flyer"
  index: number
}

export default function DesignCanvas({ id, type, index }: DesignCanvasProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)

useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

// Set canvas dimensions
    canvas.width = canvas.offsetWidth
    canvas.height = canvas.offsetHeight

// Handle resize
    const handleResize = () => {
      canvas.width = canvas.offsetWidth
      canvas.height = canvas.offsetHeight
      drawDesign()
    }

window.addEventListener("resize", handleResize)

// Draw the design based on type and index
    const drawDesign = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)

if (type === "landing-page") {
        drawLandingPage(ctx, canvas.width, canvas.height, index)
      } else if (type === "flyer") {
        drawFlyer(ctx, canvas.width, canvas.height, index)
      }
    }

// Initial draw
    drawDesign()

return () => {
      window.removeEventListener("resize", handleResize)
    }
  }, [type, index])

// Function to draw landing page design
  const drawLandingPage = (ctx: CanvasRenderingContext2D, width: number, height: number, index: number) => {
    // Background
    ctx.fillStyle = index === 1 ? "#f8fafc" : "#1e293b"
    ctx.fillRect(0, 0, width, height)

// Header
    ctx.fillStyle = index === 1 ? "#e2e8f0" : "#334155"
    ctx.fillRect(0, 0, width, height * 0.1)

// Logo
    ctx.fillStyle = index === 1 ? "#0ea5e9" : "#38bdf8"
    ctx.beginPath()
    ctx.arc(width * 0.1, height * 0.05, height * 0.03, 0, Math.PI * 2)
    ctx.fill()

// Navigation
    for (let i = 0; i < 4; i++) {
      ctx.fillStyle = index === 1 ? "#64748b" : "#94a3b8"
      ctx.fillRect(width * (0.5 + i * 0.1), height * 0.04, width * 0.08, height * 0.02)
    }

// Hero section
    ctx.fillStyle = index === 1 ? "#0ea5e9" : "#38bdf8"
    ctx.fillRect(width * 0.1, height * 0.15, width * 0.8, height * 0.3)

// Hero text
    ctx.fillStyle = "#ffffff"
    ctx.fillRect(width * 0.15, height * 0.2, width * 0.3, height * 0.05)
    ctx.fillRect(width * 0.15, height * 0.27, width * 0.25, height * 0.03)

// CTA button
    ctx.fillStyle = index === 1 ? "#f97316" : "#fb923c"
    ctx.fillRect(width * 0.15, height * 0.33, width * 0.15, height * 0.05)

// Content sections
    const sectionColors = index === 1 ? ["#e2e8f0", "#f1f5f9", "#e2e8f0"] : ["#334155", "#1e293b", "#334155"]

for (let i = 0; i < 3; i++) {
      ctx.fillStyle = sectionColors[i]
      ctx.fillRect(0, height * (0.5 + i * 0.15), width, height * 0.15)

// Section content
      ctx.fillStyle = index === 1 ? "#64748b" : "#94a3b8"
      ctx.fillRect(width * 0.1, height * (0.52 + i * 0.15), width * 0.2, height * 0.03)
      ctx.fillRect(width * 0.1, height * (0.56 + i * 0.15), width * 0.8, height * 0.02)
      ctx.fillRect(width * 0.1, height * (0.59 + i * 0.15), width * 0.6, height * 0.02)
    }
  }

// Function to draw flyer design
  const drawFlyer = (ctx: CanvasRenderingContext2D, width: number, height: number, index: number) => {
    // Set aspect ratio for flyer (typically taller than wide)
    const flyerWidth = width
    const flyerHeight = height

// Background
    const gradient = ctx.createLinearGradient(0, 0, 0, flyerHeight)

if (index === 1) {
      gradient.addColorStop(0, "#4338ca")
      gradient.addColorStop(1, "#3b82f6")
    } else {
      gradient.addColorStop(0, "#be123c")
      gradient.addColorStop(1, "#f43f5e")
    }

ctx.fillStyle = gradient
    ctx.fillRect(0, 0, flyerWidth, flyerHeight)

// Header/Title
    ctx.fillStyle = "#ffffff"
    ctx.fillRect(flyerWidth * 0.1, flyerHeight * 0.1, flyerWidth * 0.8, flyerHeight * 0.1)

// Event details
    ctx.fillStyle = "rgba(255, 255, 255, 0.9)"
    ctx.fillRect(flyerWidth * 0.1, flyerHeight * 0.25, flyerWidth * 0.8, flyerHeight * 0.4)

// Text lines in event details
    ctx.fillStyle = index === 1 ? "#4338ca" : "#be123c"
    for (let i = 0; i < 5; i++) {
      const lineWidth = Math.random() * 0.3 + 0.3 // Random width between 0.3 and 0.6 of container
      ctx.fillRect(flyerWidth * 0.15, flyerHeight * (0.28 + i * 0.06), flyerWidth * lineWidth, flyerHeight * 0.03)
    }

// Date and time
    ctx.fillStyle = "#ffffff"
    ctx.fillRect(flyerWidth * 0.1, flyerHeight * 0.7, flyerWidth * 0.35, flyerHeight * 0.1)

// Location
    ctx.fillRect(flyerWidth * 0.55, flyerHeight * 0.7, flyerWidth * 0.35, flyerHeight * 0.1)

// Footer with contact info
    ctx.fillStyle = "rgba(255, 255, 255, 0.7)"
    ctx.fillRect(flyerWidth * 0.1, flyerHeight * 0.85, flyerWidth * 0.8, flyerHeight * 0.05)
  }

return <canvas ref={canvasRef} id={id} className="h-[400px] w-full" />
}

[V0_FILE]typescriptreact:file="components/logo-canvas.tsx" isFixed="true" isQuickEdit="true" isMerged="true" isEdit="true"
"use client"

import { useEffect, useRef } from "react"

interface LogoCanvasProps {
  id: string
  index: number
  isMainLogo?: boolean
}

export default function LogoCanvas({ id, index, isMainLogo = false }: LogoCanvasProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)

useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

// Set canvas dimensions
    canvas.width = canvas.offsetWidth
    canvas.height = canvas.offsetHeight

// Handle resize
    const handleResize = () => {
      canvas.width = canvas.offsetWidth
      canvas.height = canvas.offsetHeight
      drawLogo()
    }

window.addEventListener("resize", handleResize)

// Draw the logo based on index
    const drawLogo = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)

// If it's the main logo, draw SleekDesigns logo
      if (isMainLogo) {
        drawSleekDesignsLogo(ctx, canvas.width, canvas.height)
      } else {
        drawSampleLogo(ctx, canvas.width, canvas.height, index)
      }
    }

// Initial draw
    drawLogo()

return () => {
      window.removeEventListener("resize", handleResize)
    }
  }, [index, isMainLogo])

// Function to draw the SleekDesigns logo
  const drawSleekDesignsLogo = (ctx: CanvasRenderingContext2D, width: number, height: number) => {
    const centerX = width / 2
    const centerY = height / 2
    const size = Math.min(width, height) * 0.4

// Draw the main shape
    ctx.fillStyle = "#0ea5e9"
    ctx.beginPath()

// Draw an "S" shape
    ctx.moveTo(centerX - size * 0.5, centerY - size * 0.5)
    ctx.bezierCurveTo(centerX - size * 0.8, centerY - size * 0.5, centerX - size * 0.8, centerY, centerX, centerY)
    ctx.bezierCurveTo(
      centerX + size * 0.8,
      centerY,
      centerX + size * 0.8,
      centerY + size * 0.5,
      centerX + size * 0.5,
      centerY + size * 0.5,
    )
    ctx.fill()

// Draw the "D" element
    ctx.fillStyle = "#f97316"
    ctx.beginPath()
    ctx.arc(centerX, centerY, size * 0.3, Math.PI * 0.5, Math.PI * 1.5, true)
    ctx.lineTo(centerX + size * 0.1, centerY - size * 0.3)
    ctx.lineTo(centerX + size * 0.1, centerY + size * 0.3)
    ctx.closePath()
    ctx.fill()

// Add text if the canvas is large enough
    if (width > 100) {
      ctx.fillStyle = "#0f172a"
      ctx.font = `bold ${size * 0.3}px sans-serif`
      ctx.textAlign = "center"
      ctx.textBaseline = "bottom"
      ctx.fillText("SLEEK", centerX, centerY + size * 0.8)

ctx.fillStyle = "#0ea5e9"
      ctx.font = `bold ${size * 0.3}px sans-serif`
      ctx.textAlign = "center"
      ctx.textBaseline = "top"
      ctx.fillText("DESIGNS", centerX, centerY + size * 0.8)
    }
  }

// Function to draw sample logos
  const drawSampleLogo = (ctx: CanvasRenderingContext2D, width: number, height: number, index: number) => {
    const centerX = width / 2
    const centerY = height / 2
    const size = Math.min(width, height) * 0.4

if (index === 1) {
      // Abstract geometric logo
      ctx.fillStyle = "#3b82f6"
      ctx.beginPath()
      ctx.moveTo(centerX, centerY - size)
      ctx.lineTo(centerX + size, centerY)
      ctx.lineTo(centerX, centerY + size)
      ctx.lineTo(centerX - size, centerY)
      ctx.closePath()
      ctx.fill()

ctx.fillStyle = "#1e40af"
      ctx.beginPath()
      ctx.arc(centerX, centerY, size * 0.5, 0, Math.PI * 2)
      ctx.fill()

ctx.fillStyle = "#ffffff"
      ctx.beginPath()
      ctx.arc(centerX, centerY, size * 0.3, 0, Math.PI * 2)
      ctx.fill()
    } else if (index === 2) {
      // Circular logo with elements
      ctx.fillStyle = "#10b981"
      ctx.beginPath()
      ctx.arc(centerX, centerY, size, 0, Math.PI * 2)
      ctx.fill()

ctx.fillStyle = "#059669"
      ctx.beginPath()
      ctx.arc(centerX, centerY, size * 0.7, 0, Math.PI * 2)
      ctx.fill()

ctx.fillStyle = "#ffffff"
      for (let i = 0; i < 3; i++) {
        const angle = (i * Math.PI * 2) / 3
        ctx.beginPath()
        ctx.arc(
          centerX + Math.cos(angle) * size * 0.4,
          centerY + Math.sin(angle) * size * 0.4,
          size * 0.15,
          0,
          Math.PI * 2,
        )
        ctx.fill()
      }
    } else {
      // Default logo
      ctx.fillStyle = "#f97316"
      ctx.beginPath()
      ctx.arc(centerX, centerY, size * 0.8, 0, Math.PI * 2)
      ctx.fill()

ctx.fillStyle = "#ffffff"
      ctx.beginPath()
      ctx.moveTo(centerX - size * 0.4, centerY - size * 0.4)
      ctx.lineTo(centerX + size * 0.4, centerY + size * 0.4)
      ctx.moveTo(centerX + size * 0.4, centerY - size * 0.4)
      ctx.lineTo(centerX - size * 0.4, centerY + size * 0.4)
      ctx.lineWidth = size * 0.1
      ctx.strokeStyle = "#ffffff"
      ctx.stroke()
    }
  }

return <canvas ref={canvasRef} id={id} className="h-full w-full" />
}

[V0_FILE]typescriptreact:file="components/slide-show.tsx" isFixed="true" isQuickEdit="true" isMerged="true" isEdit="true"
"use client"

import { useEffect, useState, useCallback } from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function SlideShow() {
  const [currentSlide, setCurrentSlide] = useState(0)

const slides = [
    {
      image: "/placeholder.svg?height=1080&width=1920",
      alt: "Modern landing page design",
    },
    {
      image: "/placeholder.svg?height=1080&width=1920",
      alt: "Creative flyer design",
    },
    {
      image: "/placeholder.svg?height=1080&width=1920",
      alt: "Professional logo design",
    },
  ]

const nextSlide = useCallback(() => {
    setCurrentSlide((prev) => (prev + 1) % slides.length)
  }, [slides.length])

const prevSlide = () => {
    setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length)
  }

// Auto-advance slides
  useEffect(() => {
    const interval = setInterval(() => {
      nextSlide()
    }, 5000)

return () => clearInterval(interval)
  }, [nextSlide])

return (
    <div className="relative h-full w-full overflow-hidden">
      {slides.map((slide, index) => (
        <div
          key={index}
          className={`absolute inset-0 h-full w-full transition-opacity duration-1000 ${
            index === currentSlide ? "opacity-100" : "opacity-0"
          }`}
        >
          <img src={slide.image || "/placeholder.svg"} alt={slide.alt} className="h-full w-full object-cover" />
        </div>
      ))}

<Button
        variant="outline"
        size="icon"
        className="absolute left-4 top-1/2 z-10 -translate-y-1/2 rounded-full bg-white/20 backdrop-blur-sm hover:bg-white/40"
        onClick={prevSlide}
      >
        <ChevronLeft className="h-6 w-6" />
        <span className="sr-only">Previous slide</span>
      </Button>

<Button
        variant="outline"
        size="icon"
        className="absolute right-4 top-1/2 z-10 -translate-y-1/2 rounded-full bg-white/20 backdrop-blur-sm hover:bg-white/40"
        onClick={nextSlide}
      >
        <ChevronRight className="h-6 w-6" />
        <span className="sr-only">Next slide</span>
      </Button>

<div className="absolute bottom-4 left-1/2 z-10 flex -translate-x-1/2 space-x-2">
        {slides.map((_, index) => (
          <button
            key={index}
            className={`h-2 w-8 rounded-full transition-colors ${index === currentSlide ? "bg-white" : "bg-white/50"}`}
            onClick={() => setCurrentSlide(index)}
          >
            <span className="sr-only">Slide {index + 1}</span>
          </button>
        ))}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" isEdit="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        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))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

[V0_FILE]css:file="app/globals.css" isMerged="true" isEdit="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

--popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

--primary: 199 89% 48%;
    --primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

--radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

--primary: 199 89% 48%;
    --primary-foreground: 222.2 47.4% 11.2%;

--secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" isEdit="true"
import type React from "react"
import "./globals.css"
import type { Metadata } from "next"
import { Inter } from "next/font/google"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "SleekDesigns - Professional Design Services",
  description: "Elevate your brand with stunning landing pages, flyers, and logos",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="components/slideshow-header.tsx" isMerged="true" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"

const slides = [
  {
    image:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/SleekDesigns2.jpg-jhvvxxP3NPwjTBmtIf1GRGsRGP7Hzg.jpeg",
    title: "Welcome to SleekDesigns",
    subtitle: "Elevate Your Brand with Stunning Design & High-Converting Landing Pages",
  },
  {
    image: "/placeholder.svg?height=1080&width=1920",
    title: "Professional Logo Design",
    subtitle: "Create a lasting impression with our custom logo designs",
  },
  {
    image: "/placeholder.svg?height=1080&width=1920",
    title: "Eye-Catching Flyers",
    subtitle: "Promote your business effectively with our flyer designs",
  },
]

export default function SlideshowHeader() {
  const [currentSlide, setCurrentSlide] = useState(0)

useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prevSlide) => (prevSlide + 1) % slides.length)
    }, 5000)

return () => clearInterval(timer)
  }, [])

return (
    <div className="relative h-screen overflow-hidden">
      <AnimatePresence initial={false}>
        <motion.div
          key={currentSlide}
          className="absolute inset-0"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.5 }}
        >
          <div
            className="absolute inset-0 bg-cover bg-center"
            style={{ backgroundImage: `url(${slides[currentSlide].image})` }}
          />
          <div className="absolute inset-0 bg-black bg-opacity-50" />
          <div className="absolute inset-0 flex items-center justify-center">
            <div className="text-center text-white">
              <motion.h1
                className="mb-4 text-4xl font-bold md:text-5xl lg:text-6xl"
                initial={{ y: 20, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ delay: 0.2 }}
              >
                {slides[currentSlide].title}
              </motion.h1>
              <motion.p
                className="text-lg md:text-xl"
                initial={{ y: 20, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ delay: 0.4 }}
              >
                {slides[currentSlide].subtitle}
              </motion.p>
            </div>
          </div>
        </motion.div>
      </AnimatePresence>
    </div>
  )
}
</article></body></html>

{title}

What You Get:

{title}

Welcome to SleekDesigns – Elevate Your Brand with Stunning Design & High-Converting Landing Pages

Our Services

Service Packages

Why Choose Us

{item.title}

How It Works

{item.title}

Landing Page Designs

Flyer Designs

Logo Designs

Get In Touch

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This