[V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isQuickEdit="true" isMerged="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))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-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)", }, fontFamily: { sans: ["var(--font-libre-franklin)"], "proza-libre": ["var(--font-proza-libre)"], }, 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 }, }, float: { "0%, 100%": { transform: "translateY(0)" }, "50%": { transform: "translateY(-10px)" }, }, "spin-slow": { "0%": { transform: "rotate(0deg)" }, "100%": { transform: "rotate(360deg)" }, }, wiggle: { "0%, 100%": { transform: "rotate(-3deg)" }, "50%": { transform: "rotate(3deg)" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", float: "float 6s ease-in-out infinite", "spin-slow": "spin-slow 20s linear infinite", wiggle: "wiggle 1s ease-in-out infinite", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" import { motion } from "framer-motion" import MemphisShape from "./memphis-shape" export default function HeroSection() { const containerRef = useRef(null) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (!containerRef.current) return const { clientX, clientY } = e const { left, top, width, height } = containerRef.current.getBoundingClientRect() const x = (clientX - left) / width const y = (clientY - top) / height const shapes = containerRef.current.querySelectorAll(".memphis-shape") shapes.forEach((shape, index) => { const speed = index % 2 === 0 ? 20 : -20 const translateX = (x - 0.5) * speed const translateY = (y - 0.5) * speed ;(shape as HTMLElement).style.transform = `translate(${translateX}px, ${translateY}px)` }) } document.addEventListener("mousemove", handleMouseMove) return () => document.removeEventListener("mousemove", handleMouseMove) }, []) return (

{/* Background Memphis patterns */}

{/* Animated Memphis shapes */}

{/* Hero content */}

Bold. Vibrant.{" "} Playful. We create award-winning designs that capture attention and inspire action. Explore Our Work

{/* Halftone overlay */}

) } [V0_FILE]typescriptreact:file="components/memphis-shape.tsx" isMerged="true" "use client" import { motion } from "framer-motion" type ShapeProps = { type: "circle" | "triangle" | "zigzag" | "squiggle" color: string } export default function MemphisShape({ type, color }: ShapeProps) { const getShape = () => { switch (type) { case "circle": return ( ) case "triangle": return (

) case "zigzag": return ( ) case "squiggle": return ( ) default: return

} } return

{getShape()}

} [V0_FILE]typescriptreact:file="components/custom-cursor.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" export default function CustomCursor() { const [position, setPosition] = useState({ x: 0, y: 0 }) const [clicked, setClicked] = useState(false) const [linkHovered, setLinkHovered] = useState(false) const [hidden, setHidden] = useState(true) useEffect(() => { const addEventListeners = () => { document.addEventListener("mousemove", onMouseMove) document.addEventListener("mouseenter", onMouseEnter) document.addEventListener("mouseleave", onMouseLeave) document.addEventListener("mousedown", onMouseDown) document.addEventListener("mouseup", onMouseUp) } const removeEventListeners = () => { document.removeEventListener("mousemove", onMouseMove) document.removeEventListener("mouseenter", onMouseEnter) document.removeEventListener("mouseleave", onMouseLeave) document.removeEventListener("mousedown", onMouseDown) document.removeEventListener("mouseup", onMouseUp) } const onMouseMove = (e: MouseEvent) => { setPosition({ x: e.clientX, y: e.clientY }) const target = e.target as HTMLElement if ( target.tagName === "A" || target.tagName === "BUTTON" || target.closest("a") || target.closest("button") || target.classList.contains("cursor-pointer") ) { setLinkHovered(true) } else { setLinkHovered(false) } } const onMouseDown = () => { setClicked(true) } const onMouseUp = () => { setClicked(false) } const onMouseLeave = () => { setHidden(true) } const onMouseEnter = () => { setHidden(false) } addEventListeners() return () => removeEventListeners() }, []) // Hide cursor on mobile devices useEffect(() => { const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) if (isMobile) { document.body.classList.remove("cursor-none") } else { document.body.classList.add("cursor-none") } }, []) return (

) } [V0_FILE]typescriptreact:file="app/about/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import Image from "next/image" import MemphisShape from "@/components/memphis-shape" const teamMembers = [ { name: "Alex Johnson", role: "Creative Director", image: "/placeholder.svg?height=400&width=400", color: "bg-primary", }, { name: "Sam Rivera", role: "Lead Designer", image: "/placeholder.svg?height=400&width=400", color: "bg-secondary", }, { name: "Taylor Kim", role: "UI/UX Designer", image: "/placeholder.svg?height=400&width=400", color: "bg-accent", }, { name: "Jordan Lee", role: "Art Director", image: "/placeholder.svg?height=400&width=400", color: "bg-primary/80", }, ] export default function AboutPage() { return (

{/* Decorative Memphis shapes */}

About Our Studio

We are a collective of designers, thinkers, and creators who believe in the power of bold, vibrant design to transform brands and captivate audiences.

{/* Studio Philosophy */}

Our Philosophy

We draw inspiration from the Memphis Design movement, embracing bold geometric patterns, vibrant colors, and playful compositions to create designs that stand out in today's crowded visual landscape.

Our approach combines the energy and irreverence of Memphis Design with contemporary aesthetics and cutting-edge technology to deliver memorable brand experiences that resonate with modern audiences.

We believe that great design should be both visually striking and strategically sound, helping our clients achieve their business goals while making a lasting impression.

{/* Halftone effect overlay */}

{/* Decorative elements */}

{/* Team Section */}

Meet Our Team

{teamMembers.map((member, index) => (

{/* Halftone effect overlay */}

{/* Decorative shape */}

{member.name}

{member.role}

))}

{/* Awards & Recognition */}

Awards & Recognition

Design Excellence Award

International Design Association, 2023

Best Brand Identity

Creative Design Awards, 2022

Digital Innovation Prize

Web Design Global Summit, 2023

Packaging of the Year

Packaging Design Awards, 2022

Creative Agency of the Year

Design Industry Association, 2023

Best User Experience

UX Design Awards, 2022

) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion } from "framer-motion" import { Send, Mail, MapPin, Phone } from "lucide-react" import MemphisShape from "@/components/memphis-shape" export default function ContactPage() { const [formState, setFormState] = useState({ name: "", email: "", subject: "", message: "", }) const handleChange = (e: React.ChangeEvent) => { setFormState({ ...formState, [e.target.name]: e.target.value, }) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Form submission logic would go here console.log(formState) alert("Thanks for your message! We'll get back to you soon.") setFormState({ name: "", email: "", subject: "", message: "", }) } return (

{/* Decorative Memphis shapes */}

Get in Touch

Have a project in mind? We'd love to hear from you. Let's create something amazing together.

{/* Contact Form */}

Send Us a Message

Name

Subject

Message

</div>

<button
                type="submit"
                className="w-full bg-primary text-primary-foreground px-6 py-3 rounded-md font-medium flex items-center justify-center gap-2 hover:bg-primary/90 transition-colors"
              >
                Send Message <Send size={18} />
              </button>
            </form>
          </motion.div>

{/* Contact Information */}
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
          >
            <h2 className="text-2xl font-bold mb-6">Contact Information</h2>

<div className="space-y-8">
              <div className="flex items-start gap-4">
                <div className="bg-primary/10 p-3 rounded-full text-primary">
                  <MapPin size={24} />
                </div>
                <div>
                  <h3 className="text-lg font-semibold mb-1">Our Location</h3>
                  <p className="text-muted-foreground">
                    123 Design Street
                    <br />
                    Creative District
                    <br />
                    New York, NY 10001
                  </p>
                </div>
              </div>

<div className="flex items-start gap-4">
                <div className="bg-secondary/10 p-3 rounded-full text-secondary">
                  <Mail size={24} />
                </div>
                <div>
                  <h3 className="text-lg font-semibold mb-1">Email Us</h3>
                  <p className="text-muted-foreground">
                    hello@memphisstudio.com
                    <br />
                    info@memphisstudio.com
                  </p>
                </div>
              </div>

{/* Map or Image */}
            <div className="mt-12 relative">
              <div className="relative aspect-video overflow-hidden rounded-lg">
                <div className="w-full h-full bg-muted flex items-center justify-center">
                  <p className="text-muted-foreground">Interactive Map Would Go Here</p>
                </div>

{/* Halftone effect overlay */}
                <div
                  className="absolute inset-0 bg-foreground opacity-5"
                  style={{
                    backgroundImage:
                      "radial-gradient(#fff 10%, transparent 11%), radial-gradient(#fff 10%, transparent 11%)",
                    backgroundSize: "4px 4px",
                    backgroundPosition: "0 0, 2px 2px",
                  }}
                ></div>
              </div>

{/* Decorative elements */}
              <div className="absolute -bottom-4 -left-4 w-20 h-20 bg-primary rounded-lg -z-10"></div>
              <div className="absolute -top-4 -right-4 w-20 h-20 bg-accent rounded-lg -z-10"></div>
            </div>

{/* Social Media */}
            <div className="mt-12">
              <h3 className="text-lg font-semibold mb-4">Follow Us</h3>
              <div className="flex gap-4">
                <a
                  href="#"
                  className="bg-muted p-3 rounded-full hover:bg-primary hover:text-primary-foreground transition-colors"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="lucide lucide-instagram"
                  >
                    <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
                    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
                    <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
                  </svg>
                </a>
                <a
                  href="#"
                  className="bg-muted p-3 rounded-full hover:bg-primary hover:text-primary-foreground transition-colors"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="lucide lucide-twitter"
                  >
                    <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
                  </svg>
                </a>
                <a
                  href="#"
                  className="bg-muted p-3 rounded-full hover:bg-primary hover:text-primary-foreground transition-colors"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="lucide lucide-linkedin"
                  >
                    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
                    <rect width="4" height="12" x="2" y="9" />
                    <circle cx="4" cy="4" r="2" />
                  </svg>
                </a>
                <a
                  href="#"
                  className="bg-muted p-3 rounded-full hover:bg-primary hover:text-primary-foreground transition-colors"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="lucide lucide-dribbble"
                  >
                    <circle cx="12" cy="12" r="10" />
                    <path d="M19.13 5.09C15.22 9.14 10 10.44 2.25 10.94" />
                    <path d="M21.75 12.84c-6.62-1.41-12.14 1-16.38 6.32" />
                    <path d="M8.56 2.75c4.37 6 6 9.42 8 17.72" />
                  </svg>
                </a>
                <a
                  href="#"
                  className="bg-muted p-3 rounded-full hover:bg-primary hover:text-primary-foreground transition-colors"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="lucide lucide-youtube"
                  >
                    <path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" />
                    <path d="m10 15 5-3-5-3z" />
                  </svg>
                </a>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/brands/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import Image from "next/image"
import { ArrowUpRight } from "lucide-react"

const brands = [
  {
    id: 1,
    name: "Spotify",
    logo: "/placeholder.svg?height=80&width=200",
    description:
      "Redesigned the visual identity for Spotify's annual music festival, incorporating Memphis-inspired patterns and vibrant colors to create a distinctive and energetic brand experience.",
    work: ["Brand Identity", "Event Design", "Digital Experience"],
  },
  {
    id: 2,
    name: "Airbnb",
    logo: "/placeholder.svg?height=80&width=200",
    description:
      "Created a limited edition packaging system for Airbnb's host welcome kits, featuring playful geometric patterns and bold typography that embodied the brand's friendly and inclusive values.",
    work: ["Packaging Design", "Print Materials"],
  },
  {
    id: 3,
    name: "Nike",
    logo: "/placeholder.svg?height=80&width=200",
    description:
      "Developed a campaign identity for Nike's summer collection launch, using Memphis design elements to create a fresh, dynamic visual language that resonated with their young urban audience.",
    work: ["Campaign Design", "Digital Assets", "In-store Graphics"],
  },
  {
    id: 4,
    name: "Google",
    logo: "/placeholder.svg?height=80&width=200",
    description:
      "Designed the visual identity for Google's annual developer conference, incorporating Memphis-inspired patterns and a vibrant color palette to create a cohesive and engaging experience across digital and physical touchpoints.",
    work: ["Event Branding", "Digital Experience", "Environmental Design"],
  },
]

export default function BrandsPage() {
  const [hoveredBrand, setHoveredBrand] = useState<number | null>(null)

return (
    <div className="pt-32 pb-20 relative overflow-hidden">
      <div className="container mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="max-w-3xl mx-auto text-center mb-16"
        >
          <h1 className="text-5xl md:text-6xl font-bold mb-6">Our Brands</h1>
          <p className="text-lg text-muted-foreground">
            We've had the privilege of working with some of the world's most innovative brands, helping them stand out
            with bold, distinctive design.
          </p>
        </motion.div>

<div className="grid gap-12">
          {brands.map((brand, index) => (
            <motion.div
              key={brand.id}
              initial={{ opacity: 0, y: 50 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: index * 0.1 }}
              viewport={{ once: true }}
              className="bg-muted rounded-lg overflow-hidden shadow-lg transition-shadow duration-300 hover:shadow-xl"
              onMouseEnter={() => setHoveredBrand(brand.id)}
              onMouseLeave={() => setHoveredBrand(null)}
            >
              <div className="flex flex-col md:flex-row">
                <div className="md:w-1/3 bg-background p-8 flex items-center justify-center">
                  <div className="relative h-20 w-full">
                    <Image
                      src={brand.logo || "/placeholder.svg"}
                      alt={brand.name}
                      fill
                      className="object-contain filter brightness-0 invert transition-all duration-300"
                      style={{ opacity: hoveredBrand === brand.id ? 0.7 : 1 }}
                    />
                  </div>
                </div>
                <div className="md:w-2/3 p-8">
                  <h2 className="text-2xl font-bold mb-4">{brand.name}</h2>
                  <p className="text-muted-foreground mb-6">{brand.description}</p>
                  <div className="flex flex-wrap gap-2 mb-4">
                    {brand.work.map((item, i) => (
                      <span
                        key={i}
                        className="text-xs font-medium bg-background text-foreground px-3 py-1 rounded-full"
                      >
                        {item}
                      </span>
                    ))}
                  </div>
                  <motion.a
                    href={`#${brand.name.toLowerCase()}`}
                    className="inline-flex items-center text-primary hover:text-primary/80 transition-colors"
                    whileHover={{ x: 5 }}
                  >
                    View Case Study <ArrowUpRight size={16} className="ml-1" />
                  </motion.a>
                </div>
              </div>
            </motion.div>
          ))}
        </div>

{/* CTA Section */}
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
          className="mt-20 bg-muted p-12 rounded-lg relative overflow-hidden text-center"
        >
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Join Our Client List?</h2>
          <p className="text-lg mb-8 text-muted-foreground max-w-2xl mx-auto">
            Let's create something bold and memorable together. Get in touch to start your project.
          </p>
          <a
            href="/contact"
            className="inline-flex items-center gap-2 bg-primary text-primary-foreground px-8 py-4 rounded-full text-lg font-medium hover:bg-primary/90 transition-colors"
          >
            Start a Project <ArrowUpRight size={20} />
          </a>
        </motion.div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useRef } from "react"
import { motion, useScroll, useTransform } from "framer-motion"
import Link from "next/link"
import { ArrowRight } from "lucide-react"
import HeroSection from "@/components/hero-section"
import MemphisShape from "@/components/memphis-shape"
import ProjectCard from "@/components/project-card"
import ClientLogo from "@/components/client-logo"

const clients = [
  { id: 1, name: "Spotify", logo: "/placeholder.svg?height=80&width=200" },
  { id: 2, name: "Airbnb", logo: "/placeholder.svg?height=80&width=200" },
  { id: 3, name: "Nike", logo: "/placeholder.svg?height=80&width=200" },
  { id: 4, name: "Google", logo: "/placeholder.svg?height=80&width=200" },
  { id: 5, name: "Apple", logo: "/placeholder.svg?height=80&width=200" },
  { id: 6, name: "Microsoft", logo: "/placeholder.svg?height=80&width=200" },
]

export default function Home() {
  const targetRef = useRef<HTMLDivElement>(null)
  const { scrollYProgress } = useScroll({
    target: targetRef,
    offset: ["start end", "end start"],
  })

const opacity = useTransform(scrollYProgress, [0, 0.5], [0, 1])
  const y = useTransform(scrollYProgress, [0, 0.5], [100, 0])

return (
    <div className="relative overflow-hidden text-foreground">
      {/* Remove any background-related classes from here */}

{/* Decorative Memphis shapes */}
      <div className="fixed -z-10 top-20 left-10 w-32 h-32 opacity-20">
        <MemphisShape type="circle" color="bg-primary" />
      </div>
      <div className="fixed -z-10 bottom-20 right-10 w-40 h-40 opacity-20">
        <MemphisShape type="triangle" color="bg-secondary" />
      </div>
      <div className="fixed -z-10 top-1/2 right-1/4 w-24 h-24 opacity-20">
        <MemphisShape type="zigzag" color="bg-accent" />
      </div>

{/* Hero Section */}
      <HeroSection />

{/* Introduction */}
      <section className="relative py-20 px-4 overflow-hidden">
        <div className="absolute inset-0 bg-muted/30"></div>
        <div className="absolute inset-0 memphis-dots opacity-5"></div>
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          className="relative container mx-auto max-w-3xl text-center"
        >
          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-foreground">Award-Winning Design Studio</h2>
          <p className="text-lg md:text-xl text-muted-foreground mb-8">
            We create bold, vibrant, and playful designs that stand out in today's crowded visual landscape. Our
            Memphis-inspired approach combines geometric patterns, bright colors, and unexpected compositions to deliver
            memorable brand experiences.
          </p>
          <Link
            href="/about"
            className="inline-flex items-center gap-2 text-lg font-medium text-primary hover:text-primary/80 transition-colors"
          >
            Learn more about our studio <ArrowRight size={20} />
          </Link>
        </motion.div>
        {/* Decorative shapes */}
        <div className="absolute -bottom-8 -left-8 w-24 h-24 opacity-20">
          <MemphisShape type="circle" color="bg-accent" />
        </div>
        <div className="absolute -top-8 -right-8 w-32 h-32 opacity-20">
          <MemphisShape type="triangle" color="bg-primary" />
        </div>
      </section>

{/* Featured Projects */}
      <section ref={targetRef} className="py-20 relative overflow-hidden">
        <div className="absolute inset-0 bg-muted/50"></div>
        <div className="absolute inset-0 memphis-dots opacity-5"></div>
        <div className="container relative mx-auto px-4">
          <motion.div style={{ opacity, y }} className="mb-12 text-center">
            <h2 className="text-4xl md:text-5xl font-bold mb-4 text-foreground">Featured Projects</h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              A selection of our award-winning work showcasing our unique approach to design.
            </p>
          </motion.div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {projects.map((project, index) => (
              <ProjectCard key={project.id} project={project} index={index} />
            ))}
          </div>

<div className="mt-12 text-center">
            <Link
              href="/projects"
              className="inline-flex items-center gap-2 bg-primary text-primary-foreground px-8 py-3 rounded-full hover:bg-primary/90 transition-colors"
            >
              View all projects <ArrowRight size={20} />
            </Link>
          </div>
        </div>
      </section>

{/* Clients */}
      <section className="py-20 container mx-auto px-4">
        <motion.div
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center mb-12"
        >
          <h2 className="text-4xl md:text-5xl font-bold mb-4 text-foreground">Trusted by Brands</h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            We've collaborated with some of the world's most innovative brands.
          </p>
        </motion.div>

<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 items-center">
          {clients.map((client, index) => (
            <ClientLogo key={client.id} client={client} index={index} />
          ))}
        </div>
      </section>

{/* CTA */}
      <section className="py-20 bg-muted relative overflow-hidden">
        <div className="absolute inset-0 memphis-stripes opacity-10"></div>
        <div className="container mx-auto px-4 text-center">
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            className="max-w-3xl mx-auto"
          >
            <h2 className="text-4xl md:text-5xl font-bold mb-6 text-foreground">Ready to Stand Out?</h2>
            <p className="text-lg md:text-xl mb-8 text-muted-foreground">
              Let's create something bold, vibrant, and unforgettable together.
            </p>
            <Link
              href="/contact"
              className="inline-flex items-center gap-2 bg-primary text-primary-foreground px-8 py-4 rounded-full text-lg font-medium hover:bg-primary/90 transition-colors"
            >
              Start a Project <ArrowRight size={20} />
            </Link>
          </motion.div>
        </div>
      </section>
    </div>
  )
}

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

import { useState } from "react"
import { motion } from "framer-motion"
import Image from "next/image"
import Link from "next/link"
import { ArrowUpRight } from "lucide-react"

type Project = {
  id: number
  title: string
  category: string
  image: string
  color: string
}

type ProjectCardProps = {
  project: Project
  index: number
}

export default function ProjectCard({ project, index }: ProjectCardProps) {
  const [isHovered, setIsHovered] = useState(false)

return (
    <motion.div
      initial={{ opacity: 0, y: 50 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, delay: index * 0.1 }}
      viewport={{ once: true }}
      className="group relative overflow-hidden rounded-lg"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div className="relative aspect-[4/3] overflow-hidden">
        <Image
          src={project.image || "/placeholder.svg"}
          alt={project.title}
          fill
          className="object-cover transition-transform duration-500 group-hover:scale-110"
        />

{/* Halftone effect overlay */}
        <div
          className="absolute inset-0 bg-foreground opacity-0 group-hover:opacity-10 transition-opacity duration-300"
          style={{
            backgroundImage: "radial-gradient(#fff 10%, transparent 11%), radial-gradient(#fff 10%, transparent 11%)",
            backgroundSize: "4px 4px",
            backgroundPosition: "0 0, 2px 2px",
          }}
        ></div>
      </div>

{/* Project info */}
      <div className="absolute inset-0 flex flex-col justify-end p-6">
        <div
          className={`${project.color} p-6 rounded-lg transform transition-all duration-300 ${
            isHovered ? "translate-y-0 opacity-95" : "translate-y-8 opacity-0"
          }`}
        >
          <div className="flex items-start justify-between">
            <div>
              <span className="text-sm font-medium text-primary-foreground/80 mb-2 block">{project.category}</span>
              <h3 className="text-2xl font-bold text-primary-foreground mb-2">{project.title}</h3>
            </div>
            <Link href={`/projects/${project.id}`}>
              <div className="bg-primary-foreground rounded-full p-2 text-primary hover:bg-primary-foreground/90 transition-colors">
                <ArrowUpRight size={20} />
              </div>
            </Link>
          </div>
        </div>
      </div>
    </motion.div>
  )
}

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

import { motion } from "framer-motion"
import Image from "next/image"

type Client = {
  id: number
  name: string
  logo: string
}

type ClientLogoProps = {
  client: Client
  index: number
}

export default function ClientLogo({ client, index }: ClientLogoProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, delay: index * 0.1 }}
      viewport={{ once: true }}
      className="group relative"
    >
      <div className="relative h-16 w-full grayscale transition-all duration-300 group-hover:grayscale-0">
        <Image
          src={client.logo || "/placeholder.svg"}
          alt={client.name}
          fill
          className="object-contain brightness-0 invert"
        />
      </div>

{/* Hover effect */}
      <div className="absolute inset-0 bg-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-md"></div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/page-background.tsx"
import MemphisShape from "./memphis-shape"

export default function PageBackground() {
  return (
    <div className="fixed inset-0 -z-10 overflow-hidden">
      {/* Grid paper background */}
      <div className="absolute inset-0 grid-paper-background"></div>

{/* Decorative Memphis shapes */}
      <div className="absolute top-20 left-10 w-32 h-32 opacity-20">
        <MemphisShape type="circle" color="bg-primary" />
      </div>
      <div className="absolute bottom-20 right-10 w-40 h-40 opacity-20">
        <MemphisShape type="triangle" color="bg-secondary" />
      </div>
      <div className="absolute top-1/2 right-1/4 w-24 h-24 opacity-20">
        <MemphisShape type="zigzag" color="bg-accent" />
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true"
import type React from "react"
import type { Metadata } from "next"
import { Libre_Franklin, Proza_Libre } from "next/font/google"
import "./globals.css"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import CustomCursor from "@/components/custom-cursor"
import PageBackground from "@/components/page-background"

const libreFranklin = Libre_Franklin({
  subsets: ["latin"],
  variable: "--font-libre-franklin",
})

const prozaLibre = Proza_Libre({
  weight: ["400", "500", "600", "700", "800"],
  subsets: ["latin"],
  variable: "--font-proza-libre",
})

export const metadata: Metadata = {
  title: "Memphis Design Studio",
  description: "Award-winning design studio specializing in bold, creative solutions",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className="scroll-smooth">
      <body className={`${libreFranklin.variable} ${prozaLibre.variable} font-sans text-foreground`}>
        <PageBackground />
        <CustomCursor />
        <Navbar />
        <main className="relative z-10">{children}</main>
        <Footer />
      </body>
    </html>
  )
}

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

@layer base {
  :root {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 322 100% 60%;
    --primary-foreground: 0 0% 98%;
    --secondary: 187 100% 42%;
    --secondary-foreground: 240 5.9% 10%;
    --accent: 47 100% 50%;
    --accent-foreground: 240 5.9% 10%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 142.4 71.8% 29.2%;
    --radius: 0.5rem;

/* Graph paper background variables */
    --graph-bg: 220 13% 22%; /* Slightly lighter charcoal */
    --graph-line: 0 100% 50%; /* Brighter red */
    --graph-size: 20px; /* Size of each grid square */
    --graph-line-width: 1px; /* Width of grid lines */
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply font-sans text-foreground;
    cursor: none;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-proza-libre font-bold;
  }

/* Hide default cursor when custom cursor is active */
  .cursor-none {
    cursor: none;
  }

/* Graph paper background */
  .grid-paper-background {
    background-color: hsl(var(--graph-bg));
    background-image: linear-gradient(
        to right,
        hsla(var(--graph-line), 0.2) var(--graph-line-width),
        transparent var(--graph-line-width)
      ),
      linear-gradient(
        to bottom,
        hsla(var(--graph-line), 0.2) var(--graph-line-width),
        transparent var(--graph-line-width)
      );
    background-size: var(--graph-size) var(--graph-size);
  }

/* Memphis patterns */
  .memphis-dots {
    background-image: radial-gradient(circle, hsl(var(--accent)) 10%, transparent 11%);
    background-size: 30px 30px;
  }

.memphis-zigzag {
    background: linear-gradient(135deg, hsl(var(--secondary)) 25%, transparent 25%) -10px 0,
      linear-gradient(225deg, hsl(var(--secondary)) 25%, transparent 25%) -10px 0,
      linear-gradient(315deg, hsl(var(--secondary)) 25%, transparent 25%),
      linear-gradient(45deg, hsl(var(--secondary)) 25%, transparent 25%);
    background-size: 20px 20px;
  }

.memphis-stripes {
    background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      hsl(var(--primary)) 10px,
      hsl(var(--primary)) 20px
    );
  }

/* Halftone effect */
  .halftone {
    position: relative;
  }

.halftone::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#fff 10%, transparent 11%), radial-gradient(#fff 10%, transparent 11%);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
    opacity: 0.1;
    pointer-events: none;
  }

/* Content overlay for better readability */
  .content-overlay {
    background-color: hsla(var(--background), 0.8);
    backdrop-filter: blur(5px);
  }
}

[V0_FILE]typescriptreact:file="app/projects/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import Image from "next/image"
import Link from "next/link"
import { ArrowUpRight } from "lucide-react"

const categories = ["All", "Brand Identity", "Web Design", "Packaging", "Print Design", "Motion"]

const projects = [
  {
    id: 1,
    title: "Neon Dreams",
    category: "Brand Identity",
    image: "/placeholder.svg?height=600&width=800",
    color: "bg-primary",
  },
  {
    id: 2,
    title: "Geometric Harmony",
    category: "Web Design",
    image: "/placeholder.svg?height=600&width=800",
    color: "bg-secondary",
  },
  {
    id: 3,
    title: "Bold Patterns",
    category: "Packaging",
    image: "/placeholder.svg?height=600&width=800",
    color: "bg-accent",
  },
  {
    id: 4,
    title: "Abstract Visions",
    category: "Print Design",
    image: "/placeholder.svg?height=600&width=800",
    color: "bg-primary/80",
  },
  {
    id: 5,
    title: "Digital Waves",
    category: "Motion",
    image: "/placeholder.svg?height=600&width=800",
    color: "bg-secondary/80",
  },
  {
    id: 6,
    title: "Vibrant Identity",
    category: "Brand Identity",
    image: "/placeholder.svg?height=600&width=800",
    color: "bg-accent/80",
  },
  {
    id: 7,
    title: "Playful Packaging",
    category: "Packaging",
    image: "/placeholder.svg?height=600&width=800",
    color: "bg-primary/70",
  },
  {
    id: 8,
    title: "Interactive Experience",
    category: "Web Design",
    image: "/placeholder.svg?height=600&width=800",
    color: "bg-secondary/70",
  },
]

export default function ProjectsPage() {
  const [activeCategory, setActiveCategory] = useState("All")
  const [hoveredProject, setHoveredProject] = useState<number | null>(null)

const filteredProjects =
    activeCategory === "All" ? projects : projects.filter((project) => project.category === activeCategory)

return (
    <div className="pt-32 pb-20">
      <div className="container mx-auto px-4">
        <motion.h1
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="text-5xl md:text-6xl font-bold mb-8 text-center"
        >
          Our Projects
        </motion.h1>

{/* Filter Categories */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.2 }}
          className="flex flex-wrap justify-center gap-4 mb-12"
        >
          {categories.map((category, index) => (
            <button
              key={category}
              onClick={() => setActiveCategory(category)}
              className={`px-6 py-2 rounded-full text-sm font-medium transition-colors ${
                activeCategory === category
                  ? "bg-primary text-primary-foreground"
                  : "bg-muted text-muted-foreground hover:bg-muted/80"
              }`}
            >
              {category}
            </button>
          ))}
        </motion.div>

{/* Projects Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <AnimatePresence mode="wait">
            {filteredProjects.map((project, index) => (
              <motion.div
                key={project.id}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: 20 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                className="group relative overflow-hidden rounded-lg"
                onMouseEnter={() => setHoveredProject(project.id)}
                onMouseLeave={() => setHoveredProject(null)}
              >
                <div className="relative aspect-[4/3] overflow-hidden">
                  <Image
                    src={project.image || "/placeholder.svg"}
                    alt={project.title}
                    fill
                    className="object-cover transition-transform duration-500 group-hover:scale-110"
                  />

{/* Halftone effect overlay */}
                  <div
                    className="absolute inset-0 bg-foreground opacity-0 group-hover:opacity-10 transition-opacity duration-300"
                    style={{
                      backgroundImage:
                        "radial-gradient(#fff 10%, transparent 11%), radial-gradient(#fff 10%, transparent 11%)",
                      backgroundSize: "4px 4px",
                      backgroundPosition: "0 0, 2px 2px",
                    }}
                  ></div>
                </div>

{/* Project info */}
                <div className="absolute inset-0 flex flex-col justify-end p-6">
                  <div
                    className={`${project.color} p-6 rounded-lg transform transition-all duration-300 ${
                      hoveredProject === project.id ? "translate-y-0 opacity-95" : "translate-y-8 opacity-0"
                    }`}
                  >
                    <div className="flex items-start justify-between">
                      <div>
                        <span className="text-sm font-medium text-primary-foreground/80 mb-2 block">
                          {project.category}
                        </span>
                        <h3 className="text-2xl font-bold text-primary-foreground mb-2">{project.title}</h3>
                      </div>
                      <Link href={`/projects/${project.id}`}>
                        <div className="bg-primary-foreground rounded-full p-2 text-primary hover:bg-primary-foreground/90 transition-colors">
                          <ArrowUpRight size={20} />
                        </div>
                      </Link>
                    </div>
                  </div>
                </div>
              </motion.div>
            ))}
          </AnimatePresence>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/navbar.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { motion, AnimatePresence } from "framer-motion"
import { Menu, X } from "lucide-react"

const navLinks = [
  { href: "/", label: "Home" },
  { href: "/projects", label: "Projects" },
  { href: "/brands", label: "Brands" },
  { href: "/about", label: "About" },
  { href: "/contact", label: "Contact" },
]

export default function Navbar() {
  const [isOpen, setIsOpen] = useState(false)
  const [scrolled, setScrolled] = useState(false)

useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 20)
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

return (
    <header
      className={`fixed top-4 left-0 right-0 w-[95%] max-w-7xl mx-auto z-50 transition-all duration-300 rounded-full ${
        scrolled ? "bg-background/60 shadow-lg shadow-primary/20" : "bg-background/40"
      } backdrop-blur-md`}
    >
      <div className="px-6">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <Link href="/" className="text-2xl font-bold font-proza-libre">
            <span className="text-primary">M</span>
            <span className="text-foreground">Studio</span>
          </Link>

{/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-8">
            {navLinks.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                className="text-foreground hover:text-primary transition-colors relative group"
              >
                {link.label}
                <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
              </Link>
            ))}
          </nav>

{/* Mobile Menu Button */}
          <button className="md:hidden text-foreground focus:outline-none" onClick={() => setIsOpen(!isOpen)}>
            {isOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>
      </div>

{/* Mobile Navigation */}
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.3 }}
            className="md:hidden bg-background/60 backdrop-blur-md rounded-2xl mt-2 shadow-lg shadow-primary/20"
          >
            <div className="container mx-auto px-4 py-4">
              <nav className="flex flex-col space-y-4">
                {navLinks.map((link, index) => (
                  <motion.div
                    key={link.href}
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: index * 0.1 }}
                  >
                    <Link
                      href={link.href}
                      className="text-foreground hover:text-primary transition-colors block py-2"
                      onClick={() => setIsOpen(false)}
                    >
                      {link.label}
                    </Link>
                  </motion.div>
                ))}
              </nav>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </header>
  )
}

[V0_FILE]typescriptreact:file="components/footer.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { motion } from "framer-motion"
import { Instagram, Twitter, Linkedin, Dribbble, Youtube, ArrowRight } from "lucide-react"

const socialLinks = [
  { icon: Instagram, href: "#", label: "Instagram" },
  { icon: Twitter, href: "#", label: "Twitter" },
  { icon: Linkedin, href: "#", label: "LinkedIn" },
  { icon: Dribbble, href: "#", label: "Dribbble" },
  { icon: Youtube, href: "#", label: "YouTube" },
]

const quickLinks = [
  { href: "/", label: "Home" },
  { href: "/projects", label: "Projects" },
  { href: "/brands", label: "Brands" },
  { href: "/about", label: "About" },
  { href: "/contact", label: "Contact" },
]

export default function Footer() {
  const [email, setEmail] = useState("")

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Handle email submission logic here
    console.log("Email submitted:", email)
    setEmail("")
  }

return (
    <footer className="bg-background/60 backdrop-blur-md text-foreground py-16 relative overflow-hidden">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
          {/* Logo and Copyright */}
          <div className="flex flex-col items-start">
            <Link href="/" className="text-2xl font-bold font-proza-libre mb-4">
              <span className="text-primary">M</span>
              <span className="text-foreground">Studio</span>
            </Link>
            <p className="text-sm text-muted-foreground">
              © {new Date().getFullYear()} Memphis Design Studio.
              <br />
              All rights reserved.
            </p>
          </div>

{/* Social Links */}
          <div>
            <h3 className="text-lg font-semibold mb-4">Connect With Us</h3>
            <div className="flex space-x-4">
              {socialLinks.map((link) => (
                <motion.a
                  key={link.label}
                  href={link.href}
                  whileHover={{ scale: 1.1 }}
                  whileTap={{ scale: 0.95 }}
                  className="text-muted-foreground hover:text-primary transition-colors"
                >
                  <link.icon size={20} />
                  <span className="sr-only">{link.label}</span>
                </motion.a>
              ))}
            </div>
          </div>

{/* Quick Links */}
          <div>
            <h3 className="text-lg font-semibold mb-4">Quick Links</h3>
            <ul className="space-y-2">
              {quickLinks.map((link) => (
                <li key={link.href}>
                  <Link href={link.href} className="text-muted-foreground hover:text-primary transition-colors">
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>

{/* Stay in the Loop */}
        <div className="mt-12 pt-8 border-t border-muted">
          <h3 className="text-lg font-semibold mb-4">Stay in the Loop</h3>
          <form onSubmit={handleSubmit} className="flex max-w-md">
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="Enter your email"
              className="flex-grow bg-muted text-foreground placeholder-muted-foreground px-4 py-2 rounded-l-md focus:outline-none focus:ring-2 focus:ring-primary"
              required
            />
            <button
              type="submit"
              className="bg-primary text-primary-foreground px-4 py-2 rounded-r-md hover:bg-primary/90 transition-colors flex items-center"
            >
              Subscribe <ArrowRight className="ml-2" size={16} />
            </button>
          </form>
        </div>
      </div>
    </footer>
  )
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This