Contact Exemple 1

1"use client";
2
3import { useState } from "react";
4import { motion, Variants } from "framer-motion";
5import { Video, Clock, CalendarDays, Globe, X } from "lucide-react";
6import Image from "next/image";
7
8/**
9 * Contact1 — Booking / scheduling card (responsive)
10 * Stack: Next.js (App Router) + Tailwind CSS + Framer Motion
11 */
12
13const details = [
14  { icon: Clock, label: "60 minutes one-on-one session" },
15  { icon: Video, label: "Video Call (Google Meet)" },
16  { icon: CalendarDays, label: "2:00 PM - 3:00 PM Tuesday, Feb 20, 2025" },
17  { icon: Globe, label: "GMT +7" },
18];
19
20const container: Variants = {
21  hidden: { opacity: 0 },
22  show: {
23    opacity: 1,
24    transition: { staggerChildren: 0.08, delayChildren: 0.15 },
25  },
26};
27
28const item: Variants = {
29  hidden: { opacity: 0, y: 10 },
30  show: { opacity: 1, y: 0, transition: { duration: 0.35, ease: "easeOut" } },
31};
32
33export default function Contact1() {
34  const [message, setMessage] = useState("");
35  const [portfolio, setPortfolio] = useState<"share" | "none">("share");
36
37  const maxLength = 200;
38
39  return (
40    <section className="flex min-h-screen w-full items-center justify-center px-4 py-8 sm:py-16">
41      <motion.div
42        initial={{ opacity: 0, y: 24, scale: 0.98 }}
43        animate={{ opacity: 1, y: 0, scale: 1 }}
44        transition={{ duration: 0.5, ease: "easeOut" }}
45        className="grid w-full max-w-[900px] grid-cols-1 overflow-hidden rounded-2xl border border-zinc-200 bg-black shadow-2xl shadow-black/10 md:grid-cols-[minmax(0,0.85fr)_minmax(0,1.15fr)]"
46      >
47        {/* Left panel — session summary (dark) */}
48        <motion.div
49          variants={container}
50          initial="hidden"
51          animate="show"
52          className="flex h-full flex-col gap-5 bg-zinc-950 p-5 sm:gap-6 sm:p-7"
53        >
54          <motion.div
55            variants={item}
56            className="flex h-9 w-9 items-center justify-center rounded-full bg-zinc-900 ring-1 ring-zinc-800"
57          >
58            <Image
59              src="/logoW.png"
60              alt="BagUI"
61              width={18}
62              height={18}
63              className="h-[18px] w-[18px]"
64            />
65          </motion.div>
66
67          <motion.div variants={item} className="space-y-1">
68            <p className="text-xs text-zinc-400">Bag\Ui - by Anelka</p>
69            <h2 className="text-base font-semibold tracking-tight text-white sm:text-lg">
70// … truncated