[V0_FILE]typescriptreact:file="contact-page.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { toast } from "sonner" import { Send } from "lucide-react" import type React from "react" // Added import for React export default function ContactPage() { const [name, setName] = useState("") const [email, setEmail] = useState("") const [message, setMessage] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Here you would typically send the form data to your backend console.log({ name, email, message }) toast("Message sent successfully!", { className: "bg-purple-900 text-purple-100 border-purple-700", }) // Reset form fields setName("") setEmail("") setMessage("") } return (

Contact Us

We'd love to hear from you. Send us a message!

Name setName(e.target.value)} className="mt-1 bg-indigo-900/50 border-indigo-700 text-indigo-100 placeholder-indigo-400" placeholder="Your name" required />

Email setEmail(e.target.value)} className="mt-1 bg-indigo-900/50 border-indigo-700 text-indigo-100 placeholder-indigo-400" placeholder="your@email.com" required />

Message

setMessage(e.target.value)}
              className="mt-1 bg-indigo-900/50 border-indigo-700 text-indigo-100 placeholder-indigo-400"
              placeholder="Your message here..."
              rows={4}
              required
            />
          </div>
          <Button type="submit" className="w-full bg-indigo-600 hover:bg-indigo-700 text-white">
            Send Message
            <Send className="ml-2 h-4 w-4" />
          </Button>
        </form>
      </Card>
    </div>
  )
}

[V0_FILE]css:file="global.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .perspective-1000 {
    perspective: 1000px;
  }

.transform-style-3d {
    transform-style: preserve-3d;
  }

.backface-hidden {
    backface-visibility: hidden;
  }
}

@layer base {
  :root {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;

--primary: 224 64% 33%;
    --primary-foreground: 210 40% 98%;

--accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;

--border: 216 34% 17%;
    --ring: 216 34% 17%;

--radius: 0.5rem;
  }
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This