[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Hero from "@/components/hero" import Services from "@/components/services" import Portfolio from "@/components/portfolio" import Testimonials from "@/components/testimonials" import Team from "@/components/team" import Process from "@/components/process" import Contact from "@/components/contact" import Header from "@/components/header" import Footer from "@/components/footer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/testimonials.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import Image from "next/image" import { useInView } from "framer-motion" import { ChevronLeft, ChevronRight, Quote } from "lucide-react" import { Button } from "@/components/ui/button" import { motion } from "framer-motion" export default function Testimonials() { const ref = useRef(null) const isInView = useInView(ref, { once: true, amount: 0.2 }) const testimonials = [ { quote: "Working with Designo transformed our digital presence. Their attention to detail and user-focused approach resulted in a website that not only looks beautiful but performs exceptionally well.", author: "Sarah Johnson", role: "CEO, TechStart", avatar: "/placeholder.svg?height=100&width=100", logo: "/placeholder-logo.svg?height=40&width=120", }, { quote: "The team at Designo understood our brand vision immediately and translated it into a cohesive digital experience that our customers love. The results have exceeded our expectations.", author: "Michael Chen", role: "Marketing Director, Elevate Brands", avatar: "/placeholder.svg?height=100&width=100", logo: "/placeholder-logo.svg?height=40&width=120", }, { quote: "From concept to execution, Designo delivered a flawless experience. Their strategic approach to design and development has significantly improved our conversion rates.", author: "Emma Rodriguez", role: "Product Manager, InnovateCo", avatar: "/placeholder.svg?height=100&width=100", logo: "/placeholder-logo.svg?height=40&width=120", }, { quote: "Designo's ability to balance aesthetic excellence with technical performance sets them apart. They've become an invaluable extension of our team.", author: "David Park", role: "CTO, FutureTech", avatar: "/placeholder.svg?height=100&width=100", logo: "/placeholder-logo.svg?height=40&width=120", }, ] const [current, setCurrent] = useState(0) const [autoplay, setAutoplay] = useState(true) const next = () => { setCurrent((current + 1) % testimonials.length) } const prev = () => { setCurrent((current - 1 + testimonials.length) % testimonials.length) } useEffect(() => { if (!autoplay) return const interval = setInterval(() => { next() }, 5000) return () => clearInterval(interval) }, [current, autoplay]) const clientLogos = [ "/placeholder-logo.svg?height=40&width=120", "/placeholder-logo.svg?height=40&width=120", "/placeholder-logo.svg?height=40&width=120", "/placeholder-logo.svg?height=40&width=120", "/placeholder-logo.svg?height=40&width=120", "/placeholder-logo.svg?height=40&width=120", ] return (

Testimonials

What Our Clients Say

Don't just take our word for it. Here's what our clients have to say about working with us.

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

{testimonial.quote}

{testimonial.author}

{testimonial.role}

))}

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

Trusted by innovative companies

{clientLogos.map((logo, index) => (

))}

) } [V0_FILE]typescriptreact:file="components/process.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useRef } from "react" import { useInView } from "framer-motion" import { Check } from "lucide-react" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { motion } from "framer-motion" export default function Process() { const ref = useRef(null) const isInView = useInView(ref, { once: true, amount: 0.2 }) const steps = [ { number: "01", title: "Discovery", description: "We start by understanding your business, goals, and target audience to create a solid foundation for your project.", details: [ "Stakeholder interviews", "Market research", "Competitive analysis", "User research", "Project planning", ], }, { number: "02", title: "Strategy", description: "Based on our findings, we develop a comprehensive strategy that aligns with your business objectives.", details: [ "Information architecture", "User journey mapping", "Content strategy", "Technical planning", "Project roadmap", ], }, { number: "03", title: "Design", description: "We create visually stunning and user-friendly designs that reflect your brand and engage your audience.", details: ["Wireframing", "UI design", "Prototyping", "User testing", "Design refinement"], }, { number: "04", title: "Development", description: "Our development team brings the designs to life with clean, efficient, and scalable code.", details: [ "Frontend development", "Backend integration", "Responsive implementation", "Performance optimization", "Quality assurance", ], }, { number: "05", title: "Launch & Support", description: "We ensure a smooth launch and provide ongoing support to help your digital product succeed.", details: [ "Pre-launch testing", "Deployment", "Analytics setup", "Training and documentation", "Ongoing maintenance", ], }, ] return (

Our Process

How We Work

Our proven process ensures we deliver exceptional results that meet your business objectives.

{steps.map((step, index) => (

{step.number}

{step.title}

{step.description}

{detail}

))}

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isQuickEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", 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))", dark: "#392d69", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", dark: "#b57bee", }, 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")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="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: 222.2 47.4% 11.2%; --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: 210 40% 98%; --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; } } /* Custom Scrollbar Styling */ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: #392d69; /* primary-dark */ border-radius: 6px; } ::-webkit-scrollbar-thumb { background: #b57bee; /* secondary-dark */ border-radius: 6px; border: 2px solid #392d69; } ::-webkit-scrollbar-thumb:hover { background: #c68df5; /* slightly lighter than secondary-dark */ } /* Firefox scrollbar styling */ * { scrollbar-width: thin; scrollbar-color: #b57bee #392d69; } /* Smooth scrolling */ html { scroll-behavior: smooth; } /* Animation utilities */ @layer utilities { .animation-delay-200 { animation-delay: 200ms; } .animation-delay-400 { animation-delay: 400ms; } } /* Gradient text */ .text-gradient { @apply bg-clip-text text-transparent bg-gradient-to-r from-white to-white/70; } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Designo - Creative Design Agency", description: "Creating exceptional digital experiences through thoughtful design and innovative solutions.", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/team.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useRef } from "react" import Image from "next/image" import { useInView } from "framer-motion" import { motion } from "framer-motion" import { Twitter, Linkedin, Mail } from "lucide-react" import { Button } from "@/components/ui/button" export default function Team() { const ref = useRef(null) const isInView = useInView(ref, { once: true, amount: 0.2 }) const team = [ { name: "Alex Morgan", role: "Founder & Creative Director", bio: "With over 15 years of experience in design and branding, Alex leads our creative vision and ensures every project exceeds expectations.", image: "/placeholder.svg?height=400&width=400", social: { twitter: "#", linkedin: "#", email: "alex@designo.com", }, }, { name: "Sophia Chen", role: "Lead UX Designer", bio: "Sophia combines user research with creative problem-solving to create intuitive and engaging digital experiences.", image: "/placeholder.svg?height=400&width=400", social: { twitter: "#", linkedin: "#", email: "sophia@designo.com", }, }, { name: "Marcus Johnson", role: "Technical Director", bio: "Marcus oversees all technical aspects of our projects, ensuring they're built with the latest technologies and best practices.", image: "/placeholder.svg?height=400&width=400", social: { twitter: "#", linkedin: "#", email: "marcus@designo.com", }, }, { name: "Olivia Rodriguez", role: "Strategy Lead", bio: "Olivia helps our clients define their digital strategy and ensures our solutions align with their business objectives.", image: "/placeholder.svg?height=400&width=400", social: { twitter: "#", linkedin: "#", email: "olivia@designo.com", }, }, ] const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }, } return (

Our Team

Meet the Experts

Our talented team of designers, developers, and strategists are passionate about creating exceptional digital experiences.

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

{member.name}

{member.role}

{member.bio}

))}

Want to join our team? We're always looking for talented individuals to help us create exceptional digital experiences.

) } [V0_FILE]plaintext:file="public/images/agency.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/agency-AjuKDm3WqtfUbdJfkL0TgcvzTqpJLn.png" isMerged="true" [V0_FILE]typescriptreact:file="components/ui/button.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-secondary-dark text-white hover:bg-secondary-dark/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-white/20 bg-transparent hover:bg-primary-dark/20 hover:border-secondary-dark text-white", secondary: "bg-primary-dark text-white hover:bg-primary-dark/80", ghost: "hover:bg-primary-dark/20 text-white hover:text-white", link: "text-secondary-dark underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/hero.tsx" isEdit="true" "use client" import Image from "next/image" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" export default function Hero() { return (

Award-Winning Agency We craft{" "} digital{" "} experiences that{" "} inspire Transforming brands through strategic design and innovative technology solutions that drive meaningful connections.

3D character illustration of an astronaut meeting an alien

{/* Animated background elements */}

{/* Scroll indicator */} Scroll

) } [V0_FILE]typescriptreact:file="components/services.tsx" isEdit="true" "use client" import { useRef } from "react" import { useInView } from "framer-motion" import { ArrowRight, Lightbulb, Palette, Smartphone, Code, BarChart3, Globe } from "lucide-react" import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { motion } from "framer-motion" export default function Services() { const ref = useRef(null) const isInView = useInView(ref, { once: true, amount: 0.2 }) const services = [ { icon: , title: "UI/UX Design", description: "Creating intuitive and engaging user experiences that delight and convert.", }, { icon:

,
      title: "Web Development",
      description: "Building fast, responsive, and accessible websites with modern technologies.",
    },
    {
      icon: ,
      title: "Mobile Apps",
      description: "Designing and developing native and cross-platform mobile applications.",
    },
    {
      icon: ,
      title: "Brand Strategy",
      description: "Developing comprehensive brand identities that resonate with your audience.",
    },
    {
      icon: ,
      title: "Digital Marketing",
      description: "Driving growth through data-driven marketing strategies and campaigns.",
    },
    {
      icon: ,
      title: "E-commerce Solutions",
      description: "Building scalable online stores that drive conversions and revenue.",
    },
  ]

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
      },
    },
  }

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] } },
  }

  return (
    
      
        
          
            Our Services
            What We Do
            
              We offer a comprehensive range of design and development services to help your business succeed in the
              digital landscape.
            
          
        

        
          {services.map((service, index) => (
            
              
                
                
                  
                    {service.icon}
                  
                  
                    {service.title}
                  
                  
                    {service.description}
                  
                
                
                  
                    Learn more{" "}
                    
                  
                
              
            
          ))}
        
      
    
  )
}

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

import { useState, useRef } from "react"
import Image from "next/image"
import { useInView } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { motion } from "framer-motion"
import { ExternalLink, ArrowRight } from "lucide-react"

export default function Portfolio() {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, amount: 0.2 })
  const [selectedProject, setSelectedProject] = useState(null)

  const categories = ["All", "Web Design", "Mobile Apps", "Branding"]

  const projects = [
    {
      id: 1,
      title: "Minimal E-commerce Platform",
      category: "Web Design",
      image: "/placeholder.svg?height=600&width=800",
      client: "Fashion Retailer",
      description:
        "A minimalist e-commerce platform designed for a high-end fashion retailer, focusing on user experience and conversion optimization.",
      challenge:
        "Creating a seamless shopping experience that highlights product photography while maintaining fast load times and high conversion rates.",
      solution:
        "We developed a custom e-commerce solution with lazy-loading images, predictive search, and a streamlined checkout process that increased conversions by 24%.",
      technologies: ["React", "Next.js", "Tailwind CSS", "Stripe", "Sanity CMS"],
      results: [
        "35% increase in average order value",
        "24% higher conversion rate",
        "42% reduction in cart abandonment",
      ],
    },
    {
      id: 2,
      title: "Financial Dashboard",
      category: "Web Design",
      image: "/placeholder.svg?height=600&width=800",
      client: "Investment Firm",
      description:
        "A comprehensive financial dashboard providing real-time data visualization and portfolio management tools.",
      challenge:
        "Displaying complex financial data in an intuitive interface that both novice and expert users could navigate effectively.",
      solution:
        "We created a modular dashboard with customizable widgets, interactive charts, and personalized insights powered by data analysis.",
      technologies: ["Vue.js", "D3.js", "Node.js", "MongoDB", "AWS"],
      results: [
        "87% user satisfaction rating",
        "52% increase in daily active users",
        "28% reduction in support tickets",
      ],
    },
    {
      id: 3,
      title: "Lifestyle Mobile App",
      category: "Mobile Apps",
      image: "/placeholder.svg?height=600&width=800",
      client: "Wellness Startup",
      description:
        "A lifestyle and wellness app that helps users track habits, set goals, and improve their daily routines.",
      challenge:
        "Creating an engaging mobile experience that motivates users to maintain healthy habits and achieve personal goals.",
      solution:
        "We designed a gamified experience with progress tracking, social features, and personalized recommendations based on user behavior.",
      technologies: ["React Native", "Firebase", "Redux", "Node.js", "MongoDB"],
      results: ["4.8/5 App Store rating", "68% user retention after 3 months", "2.5M downloads in first year"],
    },
    {
      id: 4,
      title: "Artisan Coffee Brand",
      category: "Branding",
      image: "/placeholder.svg?height=600&width=800",
      client: "Specialty Coffee Roaster",
      description:
        "A complete brand identity for a specialty coffee roaster, including logo, packaging, and digital presence.",
      challenge:
        "Differentiating the brand in a crowded market while communicating quality, sustainability, and craftsmanship.",
      solution:
        "We developed a distinctive visual identity inspired by the coffee's origin regions, with custom illustrations and a warm, earthy color palette.",
      deliverables: [
        "Logo & brand guidelines",
        "Packaging design",
        "Website",
        "Social media templates",
        "In-store materials",
      ],
      results: [
        "42% increase in direct-to-consumer sales",
        "Featured in 3 major design publications",
        "Successful expansion to 12 new retail locations",
      ],
    },
    {
      id: 5,
      title: "Health & Wellness Platform",
      category: "Web Design",
      image: "/placeholder.svg?height=600&width=800",
      client: "Healthcare Provider",
      description:
        "An integrated health and wellness platform connecting patients with providers and personalized resources.",
      challenge:
        "Building a secure, HIPAA-compliant platform that provides a seamless experience for both patients and healthcare providers.",
      solution:
        "We created a comprehensive platform with telehealth integration, secure messaging, appointment scheduling, and personalized health content.",
      technologies: ["React", "Node.js", "PostgreSQL", "AWS", "Twilio"],
      results: [
        "63% increase in patient engagement",
        "41% reduction in appointment no-shows",
        "92% provider satisfaction",
      ],
    },
    {
      id: 6,
      title: "Travel Companion App",
      category: "Mobile Apps",
      image: "/placeholder.svg?height=600&width=800",
      client: "Travel Technology Company",
      description:
        "A smart travel companion app that helps users plan, book, and navigate their journeys with personalized recommendations.",
      challenge:
        "Creating an all-in-one travel solution that works offline and provides relevant, location-based information and services.",
      solution:
        "We built a feature-rich app with offline maps, AI-powered recommendations, local guides, and seamless booking integration.",
      technologies: ["Flutter", "Firebase", "Google Maps API", "TensorFlow Lite", "Stripe"],
      results: [
        "4.7/5 average rating across app stores",
        "3.8M active users",
        "Featured as 'App of the Day' in App Store",
      ],
    },
  ]

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
      },
    },
  }

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.6 } },
  }

  const handleExternalLink = (e) => {
    e.preventDefault()
    window.open("https://instagram.com/dollargill", "_blank")
  }

  return (
    
      
        
          
            Our Portfolio
            Featured Work
            
              Explore our latest projects and see how we've helped our clients achieve their goals through thoughtful
              design and development.
            
          
        

        
          
            
              
                {categories.map((category) => (
                  
                    {category}
                  
                ))}
              
            

            {categories.map((category) => (
              
                
                  {projects
                    .filter((project) => category === "All" || project.category === category)
                    .map((project) => (
                      
                        
                          
                            
                              
                                
                              
                              
                                {project.title}
                                {project.category}
                                
                              
                            
                          
                          
                            
                              {project.title}
                              
                                {project.client} • {project.category}
                              
                            
                            
                              
                                
                              
                              
                                
                                  Overview
                                  {project.description}
                                
                                
                                  Challenge
                                  {project.challenge}
                                
                                
                                  Solution
                                  {project.solution}
                                
                              
                            
                            
                              
                                Technologies
                                
                                  {project.technologies?.map((tech, index) => (
                                    
                                      {tech}
                                    
                                  ))}
                                
                              
                              
                                Results
                                
                                  {project.results?.map((result, index) => (
                                    
                                      
                                      {result}
                                    
                                  ))}
                                
                              
                            
                            
                              
                            
                          
                        
                      
                    ))}
                
              
            ))}
          
        

        
          
        
      
    
  )
}

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

import type React from "react"

import { useState, useRef } from "react"
import { useInView } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  DialogClose,
} from "@/components/ui/dialog"
import { Check, Mail, MapPin, Phone, Twitter, Instagram, Linkedin, Github, ArrowRight } from "lucide-react"
import { motion } from "framer-motion"

export default function Contact() {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, amount: 0.2 })
  const [formSubmitted, setFormSubmitted] = useState(false)

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // In a real application, you would handle form submission here
    setFormSubmitted(true)
  }

  const socialLinks = [
    { icon: , label: "Twitter", href: "https://instagram.com/dollargill" },
    { icon: , label: "Instagram", href: "https://instagram.com/dollargill" },
    { icon: , label: "LinkedIn", href: "https://instagram.com/dollargill" },
    { icon: , label: "GitHub", href: "https://instagram.com/dollargill" },
  ]

  return (
    
      
        
          
            Get in Touch
            Start Your Project
            
              Ready to transform your digital presence? Let's discuss how we can help you achieve your goals.
            
          
        

        
          
            
              Contact Information
              Fill out the form or contact us directly using the information below.
            

            
              
                
                  
                
                
                  Email
                  
                    hello@designo.com
                  
                
              

              
                
                  
                
                
                  Phone
                  
                    +1 (555) 123-4567
                  
                
              

              
                
                  
                
                
                  Office
                  123 Design Street, San Francisco, CA 94107
                
              
            

            
              {/* Map would be embedded here in a real application */}
              
                Map location
              
            

            
              Follow Us
              
                {socialLinks.map((link, index) => (
                  
                    {link.icon}
                  
                ))}
              
            
          

          
            
              
                
                  
                    First name
                  
                  
                
                
                  
                    Last name
                  
                  
                
              

              
                
                  Email
                
                
              

              
                
                  Phone (optional)
                
                
              

              
                What service are you interested in?
                
                  
                    
                      
                      
                        UI/UX Design
                      
                    
                    
                      
                      
                        Web Development
                      
                    
                    
                      
                      
                        Mobile Apps
                      
                    
                    
                      
                      
                        Branding
                      
                    
                  
                
              

              
                
                  Message
                
                              </div>

              <Button
                type="submit"
                className="w-full bg-secondary-dark text-white hover:bg-secondary-dark/90 group"
                onClick={() => window.open("https://instagram.com/dollargill", "_blank")}
              >
                Send Message
                <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
              </Button>
            </form>
          </motion.div>
        </div>
      </div>

      <Dialog open={formSubmitted} onOpenChange={setFormSubmitted}>
        <DialogContent className="bg-gradient-to-b from-primary-dark to-secondary-dark border-white/10 text-white">
          <DialogHeader>
            <DialogTitle>Message Sent!</DialogTitle>
            <DialogDescription className="text-white/70">
              Thank you for contacting us. We'll get back to you within 24 hours.
            </DialogDescription>
          </DialogHeader>
          <div className="flex h-20 w-20 items-center justify-center rounded-full bg-white/10 mx-auto">
            <Check className="h-10 w-10 text-white" />
          </div>
          <DialogFooter>
            <DialogClose asChild>
              <Button
                className="w-full bg-secondary-dark text-white hover:bg-secondary-dark/90"
                onClick={() => window.open("https://instagram.com/dollargill", "_blank")}
              >
                Close
              </Button>
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </section>
  )
}

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

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Twitter, Instagram, Linkedin, Github, ArrowRight } from "lucide-react"

export default function Footer() {
  const socialLinks = [
    { icon: <Twitter className="h-5 w-5" />, label: "Twitter", href: "https://instagram.com/dollargill" },
    { icon: <Instagram className="h-5 w-5" />, label: "Instagram", href: "https://instagram.com/dollargill" },
    { icon: <Linkedin className="h-5 w-5" />, label: "LinkedIn", href: "https://instagram.com/dollargill" },
    { icon: <Github className="h-5 w-5" />, label: "GitHub", href: "https://instagram.com/dollargill" },
  ]

  return (
    <footer className="border-t border-white/10 py-12 md:py-16">
      <div className="container px-4 md:px-6">
        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
          <div className="space-y-4">
            <Link href="https://instagram.com/dollargill" className="flex items-center space-x-2">
              <span className="text-xl font-semibold tracking-tight">Designo</span>
            </Link>
            <p className="text-sm text-white/70">
              Creating exceptional digital experiences through thoughtful design and innovative solutions.
            </p>
            <div className="flex gap-3">
              {socialLinks.map((link, index) => (
                <a
                  key={index}
                  href={link.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={link.label}
                  className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-dark/50 text-white transition-colors hover:bg-secondary-dark hover:text-white"
                >
                  {link.icon}
                </a>
              ))}
            </div>
          </div>

          <div className="space-y-3">
            <h3 className="text-sm font-medium">Company</h3>
            <ul className="space-y-2">
              {["About", "Team", "Careers", "Press", "News"].map((item) => (
                <li key={item}>
                  <Link
                    href="https://instagram.com/dollargill"
                    className="text-sm text-white/70 hover:text-white transition-colors"
                  >
                    {item}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div className="space-y-3">
            <h3 className="text-sm font-medium">Services</h3>
            <ul className="space-y-2">
              {["UI/UX Design", "Web Development", "Mobile Apps", "Branding", "Digital Marketing"].map((item) => (
                <li key={item}>
                  <Link
                    href="https://instagram.com/dollargill"
                    className="text-sm text-white/70 hover:text-white transition-colors"
                  >
                    {item}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div className="space-y-3">
            <h3 className="text-sm font-medium">Subscribe to our newsletter</h3>
            <p className="text-sm text-white/70">Stay updated with our latest projects and insights.</p>
            <div className="flex gap-2">
              <Input
                type="email"
                placeholder="Enter your email"
                className="bg-white/5 border-white/10 text-white placeholder:text-white/50 hover:border-secondary-dark focus:border-secondary-dark focus:ring-primary-dark transition-colors"
              />
              <Button
                size="icon"
                className="bg-secondary-dark text-white hover:bg-secondary-dark/90"
                onClick={() => window.open("https://instagram.com/dollargill", "_blank")}
              >
                <ArrowRight className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </div>

        <div className="mt-8 border-t border-white/10 pt-8">
          <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
            <p className="text-xs text-white/70">© 2025 Designo. All rights reserved.</p>
            <div className="flex gap-4">
              {["Terms", "Privacy", "Cookies"].map((item) => (
                <Link
                  key={item}
                  href="https://instagram.com/dollargill"
                  className="text-xs text-white/70 hover:text-white transition-colors"
                >
                  {item}
                </Link>
              ))}
            </div>
          </div>
        </div>
      </div>
    </footer>
  )
}

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

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

export default function Header() {
  const [isScrolled, setIsScrolled] = useState(false)
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

  const navItems = ["Services", "Work", "Team", "Process", "Contact"]

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 10) {
        setIsScrolled(true)
      } else {
        setIsScrolled(false)
      }
    }

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

  return (
    <header
      className={`sticky top-0 z-40 w-full border-b border-white/10 backdrop-blur transition-all duration-300 ${
        isScrolled ? "bg-primary-dark/80" : "bg-transparent"
      }`}
    >
      <div className="container flex h-16 items-center justify-between">
        <Link href="https://instagram.com/dollargill" className="flex items-center space-x-2 z-50">
          <motion.span
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="text-xl font-semibold tracking-tight"
          >
            Designo
          </motion.span>
        </Link>
        <nav className="hidden md:flex gap-6">
          {navItems.map((item, index) => (
            <motion.div
              key={item}
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
            >
              <Link
                href="https://instagram.com/dollargill"
                className="text-sm font-medium transition-colors hover:text-secondary-dark"
              >
                {item}
              </Link>
            </motion.div>
          ))}
        </nav>

        <Button
          variant="ghost"
          size="icon"
          className="md:hidden text-white z-50"
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
        >
          {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
        </Button>

        <AnimatePresence>
          {mobileMenuOpen && (
            <motion.div
              initial={{ opacity: 0, x: "100%" }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: "100%" }}
              transition={{ type: "spring", damping: 25, stiffness: 300 }}
              className="fixed inset-0 top-0 z-40 flex flex-col bg-gradient-to-b from-primary-dark to-secondary-dark p-6 pt-24"
            >
              <nav className="flex flex-col gap-4">
                {navItems.map((item, index) => (
                  <motion.div
                    key={item}
                    initial={{ opacity: 0, x: 20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: index * 0.1 }}
                  >
                    <Link
                      href="https://instagram.com/dollargill"
                      className="text-xl font-medium py-2 transition-colors hover:text-white/70"
                      onClick={() => setMobileMenuOpen(false)}
                    >
                      {item}
                    </Link>
                  </motion.div>
                ))}
              </nav>
              <div className="mt-auto">
                <Button
                  className="w-full mt-6 bg-secondary-dark text-white hover:bg-secondary-dark/90"
                  onClick={() => {
                    window.open("https://instagram.com/dollargill", "_blank")
                    setMobileMenuOpen(false)
                  }}
                >
                  Get in Touch
                </Button>
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </header>
  )
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This