newish get started page

apps/web/components/get-started.tsx

@@ -0,0 +1,362 @@
+import { AnimatePresence, motion } from "framer-motion"
+import { Brain, Chrome, ExternalLink, Plus } from "lucide-react"
+import { useEffect, useState } from "react"
+import { ConnectAIModal } from "@/components/connect-ai-modal"
+import { analytics } from "@/lib/analytics"
+
+interface GetStartedProps {
+	setShowAddMemoryView?: (show: boolean) => void
+}
+
+export const GetStarted = ({ setShowAddMemoryView }: GetStartedProps) => {
+	const [imageLoaded, setImageLoaded] = useState(false)
+	const [showContent, setShowContent] = useState(false)
+	const [showConnectAIModal, setShowConnectAIModal] = useState(false)
+
+	useEffect(() => {
+		const img = new Image()
+		img.onload = () => {
+			setImageLoaded(true)
+			setTimeout(() => setShowContent(true), 100)
+		}
+		img.src = "/images/onboarding.png"
+	}, [])
+
+	const containerVariants = {
+		hidden: { opacity: 0 },
+		visible: {
+			opacity: 1,
+			transition: {
+				duration: 0.8,
+				ease: [0.25, 0.1, 0.25, 1] as const,
+				staggerChildren: 0.15,
+				delayChildren: 0.2,
+			},
+		},
+	}
+
+	const leftColumnVariants = {
+		hidden: {
+			opacity: 0,
+			x: -40,
+		},
+		visible: {
+			opacity: 1,
+			x: 0,
+			transition: {
+				duration: 1,
+				ease: [0.25, 0.1, 0.25, 1] as const,
+				staggerChildren: 0.1,
+			},
+		},
+	}
+
+	const rightColumnVariants = {
+		hidden: {
+			opacity: 0,
+			x: 40,
+		},
+		visible: {
+			opacity: 1,
+			x: 0,
+			transition: {
+				duration: 0.8,
+				ease: [0.25, 0.1, 0.25, 1] as const,
+				delay: 0.6,
+				staggerChildren: 0.1,
+			},
+		},
+	}
+
+	const textLineVariants = {
+		hidden: {
+			opacity: 0,
+			y: 30,
+		},
+		visible: {
+			opacity: 1,
+			y: 0,
+			transition: {
+				duration: 0.8,
+				ease: [0.25, 0.1, 0.25, 1] as const,
+			},
+		},
+	}
+
+	const cardVariants = {
+		hidden: {
+			opacity: 0,
+			y: 20,
+			scale: 0.95,
+		},
+		visible: {
+			opacity: 1,
+			y: 0,
+			scale: 1,
+			transition: {
+				duration: 0.6,
+				ease: [0.25, 0.1, 0.25, 1] as const,
+			},
+		},
+	}
+
+	const backgroundVariants = {
+		hidden: {
+			scale: 1.1,
+			opacity: 0,
+		},
+		visible: {
+			scale: 1,
+			opacity: 1,
+			transition: {
+				duration: 1.5,
+				ease: [0.25, 0.1, 0.25, 1] as const,
+			},
+		},
+	}
+
+	const handleChromeExtension = () => {
+		analytics.extensionInstallClicked()
+		window.open(
+			"https://chromewebstore.google.com/detail/supermemory/afpgkkipfdpeaflnpoaffkcankadgjfc",
+			"_blank",
+		)
+	}
+
+	const handleAddMemory = () => {
+		setShowConnectAIModal(false)
+		if (setShowAddMemoryView) {
+			setShowAddMemoryView(true)
+		}
+	}
+
+	return (
+		<div className="fixed inset-0 overflow-hidden bg-black">
+			<AnimatePresence>
+				{!imageLoaded && (
+					<motion.div
+						className="absolute inset-0 bg-gradient-to-br from-zinc-950 to-zinc-900 flex items-center justify-center z-[1000]"
+						exit={{ opacity: 0 }}
+						initial={{ opacity: 1 }}
+						transition={{ duration: 0.5 }}
+					>
+						<motion.div
+							animate={{
+								opacity: [0.3, 1, 0.3],
+								scale: [1, 1.05, 1],
+							}}
+							className="text-white/80 text-xl font-medium tracking-widest"
+							transition={{
+								duration: 2,
+								repeat: Number.POSITIVE_INFINITY,
+								ease: "easeInOut",
+							}}
+						>
+							SUPERMEMORY
+						</motion.div>
+					</motion.div>
+				)}
+			</AnimatePresence>
+
+			{imageLoaded && (
+				<>
+					<motion.div
+						animate="visible"
+						className="absolute inset-0 bg-cover bg-center bg-no-repeat"
+						initial="hidden"
+						style={{
+							backgroundImage: "url('/images/onboarding.png')",
+						}}
+						variants={backgroundVariants}
+					/>
+
+					<motion.div
+						animate={{ opacity: 1 }}
+						className="absolute inset-0"
+						initial={{ opacity: 0 }}
+						style={{
+							background: `
+								radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
+								linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.6) 100%)
+							`,
+						}}
+						transition={{ duration: 1, delay: 0.5 }}
+					/>
+
+					<AnimatePresence>
+						{showContent && (
+							<motion.div
+								animate="visible"
+								className="relative h-screen grid grid-cols-1 lg:grid-cols-2 items-center p-6 md:p-16 gap-8 lg:gap-16 max-w-7xl mx-auto"
+								initial="hidden"
+								variants={containerVariants}
+							>
+								{/* Left Column - Quote */}
+								<motion.div
+									className="flex flex-col justify-center order-2 lg:order-1"
+									variants={leftColumnVariants}
+								>
+									<motion.div
+										className="text-2xl md:text-4xl lg:text-5xl xl:text-6xl font-black leading-none text-white mb-2 md:mb-4 tracking-tight font-space-grotesk"
+										style={{
+											textShadow: "0 8px 32px rgba(0,0,0,0.6)",
+										}}
+										variants={textLineVariants}
+									>
+										<span
+											className="bg-gradient-to-r from-white to-gray-200 bg-clip-text text-transparent"
+											style={{
+												filter: "drop-shadow(0 0 20px rgba(255,255,255,0.1))",
+											}}
+										>
+											Intelligence without memory
+										</span>
+									</motion.div>
+
+									<motion.div
+										className="text-2xl md:text-4xl lg:text-5xl xl:text-6xl font-black leading-none text-white mb-2 md:mb-4 tracking-tight font-space-grotesk"
+										style={{
+											textShadow: "0 8px 32px rgba(0,0,0,0.6)",
+										}}
+										variants={textLineVariants}
+									>
+										<span
+											className="bg-gradient-to-r from-white to-gray-200 bg-clip-text text-transparent"
+											style={{
+												filter: "drop-shadow(0 0 20px rgba(255,255,255,0.1))",
+											}}
+										>
+											is just sophisticated
+										</span>
+									</motion.div>
+
+									<motion.div
+										className="text-2xl md:text-4xl lg:text-5xl xl:text-6xl font-black leading-none tracking-tight font-space-grotesk"
+										style={{
+											textShadow: "0 8px 32px rgba(0,0,0,0.6)",
+										}}
+										variants={textLineVariants}
+									>
+										<span
+											className="bg-gradient-to-r from-blue-500 via-cyan-500 to-blue-600 bg-clip-text text-transparent"
+											style={{
+												filter: "drop-shadow(0 0 20px rgba(59, 130, 246, 0.3))",
+											}}
+										>
+											randomness
+										</span>
+									</motion.div>
+								</motion.div>
+
+								{/* Right Column - Actions */}
+								<motion.div
+									className="flex md:flex-col justify-center order-1 lg:order-2 flex-col-reverse"
+									variants={rightColumnVariants}
+								>
+									{/* Mobile Chrome Extension Link */}
+									<motion.p
+										className="text-sm text-blue-400 hover:text-blue-300 transition-colors underline cursor-pointer mb-4 lg:hidden text-center mt-4 md:mt-0"
+										onClick={handleChromeExtension}
+										variants={textLineVariants}
+									>
+										Download Chrome extension to use with ChatGPT
+									</motion.p>
+
+									<div className="flex flex-col gap-5">
+										{/* Chrome Extension Card - Hidden on mobile */}
+										<motion.button
+											className="hidden lg:flex bg-white/8 backdrop-blur-xl border border-white/10 rounded-xl p-6 text-left cursor-pointer transition-all duration-300 items-center gap-4 hover:bg-white/12 hover:border-white/20"
+											onClick={handleChromeExtension}
+											variants={cardVariants}
+											whileHover={{
+												scale: 1.02,
+												y: -2,
+												transition: { duration: 0.2, ease: "easeOut" },
+											}}
+											whileTap={{ scale: 0.98 }}
+										>
+											<Chrome
+												className="text-amber-500 flex-shrink-0"
+												size={24}
+											/>
+											<div className="flex-1">
+												<h3 className="text-lg font-semibold text-white mb-1">
+													Add to Chrome
+												</h3>
+												<p className="text-sm text-white/70 leading-relaxed">
+													Save items and use supermemory with ChatGPT and other
+													apps. Import your ChatGPT memories, twitter bookmarks,
+													and other data.
+												</p>
+											</div>
+											<ExternalLink
+												className="text-white/50 flex-shrink-0"
+												size={16}
+											/>
+										</motion.button>
+
+										{/* Connect AI Card */}
+										<ConnectAIModal
+											onOpenChange={setShowConnectAIModal}
+											open={showConnectAIModal}
+										>
+											<motion.div
+												className="bg-white/8 backdrop-blur-xl border border-white/10 rounded-xl p-6 text-left cursor-pointer transition-all duration-300 flex items-center gap-4 hover:bg-white/12 hover:border-white/20"
+												variants={cardVariants}
+												whileHover={{
+													scale: 1.02,
+													y: -2,
+													transition: { duration: 0.2, ease: "easeOut" },
+												}}
+												whileTap={{ scale: 0.98 }}
+											>
+												<Brain
+													className="text-blue-500 flex-shrink-0"
+													size={24}
+												/>
+												<div className="flex-1">
+													<h3 className="text-lg font-semibold text-white mb-1">
+														Connect to AI
+													</h3>
+													<p className="text-sm text-white/70 leading-relaxed">
+														Set up your AI connection for intelligent assistance
+													</p>
+												</div>
+											</motion.div>
+										</ConnectAIModal>
+
+										{/* Add Memory Card */}
+										<motion.button
+											className="bg-white/8 backdrop-blur-xl border border-white/10 rounded-xl p-6 text-left cursor-pointer transition-all duration-300 flex items-center gap-4 hover:bg-white/12 hover:border-white/20"
+											onClick={handleAddMemory}
+											variants={cardVariants}
+											whileHover={{
+												scale: 1.02,
+												y: -2,
+												transition: { duration: 0.2, ease: "easeOut" },
+											}}
+											whileTap={{ scale: 0.98 }}
+										>
+											<Plus
+												className="text-emerald-500 flex-shrink-0"
+												size={24}
+											/>
+											<div className="flex-1">
+												<h3 className="text-lg font-semibold text-white mb-1">
+													Add Memory
+												</h3>
+												<p className="text-sm text-white/70 leading-relaxed">
+													Start building your knowledge base
+												</p>
+											</div>
+										</motion.button>
+									</div>
+								</motion.div>
+							</motion.div>
+						)}
+					</AnimatePresence>
+				</>
+			)}
+		</div>
+	)
+}