[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import CardStack from "@/components/card-stack" export default function Home() { return (

Interactive Card Stack

) } [V0_FILE]typescriptreact:file="lib/utils.ts" isEdit="true" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" isMoved="true" isMovedFrom="globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.75rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } * { @apply border-border; } body { @apply bg-background text-foreground; } [V0_FILE]typescriptreact:file="components/card-stack.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { ArrowUpRight, Bed, Users, DollarSign } from "lucide-react" import ColorThief from "colorthief" interface CardData { id: number title: string subtitle: string description: string imageUrl: string icon: string colors: { primary: string secondary: string text: string shadow: string } } // Sample data with Unsplash images const initialCards: CardData[] = [ { id: 1, title: "MAGNA COASTAL", subtitle: "Invest in Future", description: "An undiscovered coastal jewel on the Gulf of Aqaba near the Red Sea, Magna will be a place like nothing on earth.", imageUrl: "https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80", icon: "bed", colors: { primary: "#1a1a1a", secondary: "#333333", text: "#ffffff", shadow: "rgba(0, 0, 0, 0.5)", }, }, { id: 2, title: "AZURE RETREAT", subtitle: "Luxury Redefined", description: "Experience the pinnacle of coastal living with panoramic ocean views and world-class amenities.", imageUrl: "https://images.unsplash.com/photo-1582719508461-905c673771fd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2760&q=80", icon: "users", colors: { primary: "#0f2b46", secondary: "#1e4976", text: "#ffffff", shadow: "rgba(15, 43, 70, 0.6)", }, }, { id: 3, title: "TERRA VISTA", subtitle: "Natural Harmony", description: "Nestled between mountains and sea, this sustainable development offers the perfect balance of luxury and nature.", imageUrl: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2760&q=80", icon: "dollar", colors: { primary: "#2d4a22", secondary: "#4a7a38", text: "#ffffff", shadow: "rgba(45, 74, 34, 0.6)", }, }, { id: 4, title: "SOLARIS HEIGHTS", subtitle: "Urban Innovation", description: "A revolutionary urban development that combines cutting-edge architecture with sustainable living solutions.", imageUrl: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2760&q=80", icon: "arrowUpRight", colors: { primary: "#5a3a31", secondary: "#8c5b4a", text: "#ffffff", shadow: "rgba(90, 58, 49, 0.6)", }, }, { id: 5, title: "MERIDIAN BAY", subtitle: "Coastal Excellence", description: "Where luxury meets the sea. Exclusive waterfront properties with private beaches and marina access.", imageUrl: "https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2760&q=80", icon: "bed", colors: { primary: "#1a3a5f", secondary: "#2d5f8a", text: "#ffffff", shadow: "rgba(26, 58, 95, 0.6)", }, }, ] export default function CardStack() { const [cards, setCards] = useState(initialCards) const [loading, setLoading] = useState(true) const [extractedColors, setExtractedColors] = useState(false) // Extract colors from images when component mounts useEffect(() => { const extractColors = async () => { if (extractedColors) return const updatedCards = [...cards] const colorThief = new ColorThief() for (let i = 0; i < updatedCards.length; i++) { const card = updatedCards[i] try { const img = new Image() img.crossOrigin = "Anonymous" img.src = card.imageUrl await new Promise((resolve) => { img.onload = () => { try { const palette = colorThief.getPalette(img, 3) // Convert RGB to hex and create color scheme const primaryColor = `rgb(${palette[0][0]}, ${palette[0][1]}, ${palette[0][2]})` const secondaryColor = `rgb(${palette[1][0]}, ${palette[1][1]}, ${palette[1][2]})` const shadowColor = `rgba(${palette[0][0]}, ${palette[0][1]}, ${palette[0][2]}, 0.6)` // Determine if text should be white or black based on primary color brightness const brightness = (palette[0][0] * 299 + palette[0][1] * 587 + palette[0][2] * 114) / 1000 const textColor = brightness < 128 ? "#ffffff" : "#000000" updatedCards[i].colors = { primary: primaryColor, secondary: secondaryColor, text: textColor, shadow: shadowColor, } } catch (error) { console.error("Error extracting colors:", error) } resolve(null) } }) } catch (error) { console.error("Error loading image:", error) } } setCards(updatedCards) setExtractedColors(true) setLoading(false) } extractColors() }, [cards, extractedColors]) const removeCard = (id: number) => { setCards((prevCards) => { const newCards = prevCards.filter((card) => card.id !== id) const maxId = Math.max(...prevCards.map((card) => card.id)) const newCard = { ...prevCards[0], id: maxId + 1, title: `NEW PROPERTY ${maxId + 1}`, description: "A newly discovered property with unique features and amenities.", imageUrl: prevCards[maxId % prevCards.length].imageUrl, icon: ["bed", "users", "dollar", "arrowUpRight"][Math.floor(Math.random() * 4)] as string, colors: prevCards[0].colors, } return [...newCards, newCard] }) } const getIconComponent = (iconName: string) => { switch (iconName) { case "bed": return case "users": return case "dollar": return case "arrowUpRight": default: return } } if (loading) { return

Loading cards...

} return (

{cards.slice(0, 3).map((card, index) => ( ))}

) } interface CardProps { card: CardData index: number removeCard: (id: number) => void getIconComponent: (iconName: string) => JSX.Element totalCards: number } function Card({ card, index, removeCard, getIconComponent, totalCards }: CardProps) { const zIndex = totalCards - index const yOffset = index * 30 // Increased vertical offset const xOffset = index * 5 // Added horizontal offset return ( { if (index === 0) { const distance = Math.sqrt(Math.pow(info.offset.x, 2) + Math.pow(info.offset.y, 2)) if (distance > 150) { // Adjust this threshold as needed removeCard(card.id) } } }} whileDrag={{ scale: 1.05, boxShadow: `0 ${15 + index * 5}px ${40 + index * 10}px ${card.colors.shadow}`, }} > {/* Card Header */}

{getIconComponent(card.icon)}

{/* Card Title */}

{card.title}

{card.subtitle}

{/* Card Image */}

{/* Card Footer */}

{card.subtitle}

{card.description}

{/* Drag indicator for the top card */} {index === 0 && (

)} ) }

About

Tags

Share

About

Tags

Share

More Templates Like This