"use client" import { useState } from "react" import { motion } from "framer-motion" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Separator } from "@/components/ui/separator" import { GradientMesh } from "@/components/backgrounds/gradient-mesh" import { scaleIn, fadeIn, stagger, staggerItem, buttonTapTarget } from "@/lib/animations" import { Globe, Code2, Bird, Monitor, Mail, ArrowRight } from "lucide-react" const ssoProviders = [ { name: "Google", icon: Globe }, { name: "GitHub", icon: Code2 }, { name: "Microsoft", icon: Monitor }, { name: "Slack", icon: Bird }, ] export default function SingleSignOn() { const [showEmail, setShowEmail] = useState(false) return (

Single Sign-On Choose your preferred sign-in method. {showEmail ? (

Work email

) : ( {ssoProviders.map(({ name, icon: Icon }) => ( ))}

)}

) }