Contact Exemple 2

1"use client";
2 
3import { useRef, useState } from "react";
4import { motion, useInView, cubicBezier } from "framer-motion";
5import { Mail, MapPin, Phone, ArrowRight, Check } from "lucide-react";
6 
7// ─── Animation variants ──────────────────────────────────────────────────────
8const customEase = cubicBezier(0.4, 0, 0.2, 1);
9 
10const fadeUp = (delay = 0) => ({
11    hidden: { opacity: 0, y: 22 },
12    visible: { opacity: 1, y: 0, transition: { duration: 0.52, ease: customEase, delay } },
13});
14 
15const fadeLeft = (delay = 0) => ({
16    hidden: { opacity: 0, x: -20 },
17    visible: { opacity: 1, x: 0, transition: { duration: 0.52, ease: customEase, delay } },
18});
19 
20const fadeRight = (delay = 0) => ({
21    hidden: { opacity: 0, x: 20 },
22    visible: { opacity: 1, x: 0, transition: { duration: 0.52, ease: customEase, delay } },
23});
24 
25// ─── Contact info items ──────────────────────────────────────────────────────
26const contactInfo = [
27    { icon: <Mail size={18} strokeWidth={1.8} />, label: "support@bagui.dev" },
28    { icon: <MapPin size={18} strokeWidth={1.8} />, label: "123 Tech Avenue, San Francisco, USA" },
29    { icon: <Phone size={18} strokeWidth={1.8} />, label: "+1 (000) 555-6666" },
30];
31 
32// ─── Field component ─────────────────────────────────────────────────────────
33function Field({
34                   label,
35                   placeholder,
36                   type = "text",
37                   textarea = false,
38                   delay = 0,
39                   inView,
40               }: {
41    label: string;
42    placeholder: string;
43    type?: string;
44    textarea?: boolean;
45    delay?: number;
46    inView: boolean;
47}) {
48    const [focused, setFocused] = useState(false);
49 
50    const inputClass = [
51        "w-full bg-white text-[14px] text-gray-800 placeholder:text-gray-400",
52        "border border-gray-200 rounded-xl px-4 outline-none",
53        "transition-all duration-200",
54        focused ? "border-gray-800 ring-[3px] ring-gray-100" : "hover:border-gray-300",
55        textarea ? "py-3.5 resize-none h-[140px]" : "h-[50px]",
56    ].join(" ");
57 
58    return (
59        <motion.div
60            variants={fadeUp(delay)}
61// … truncated