[V0_FILE]typescriptreact:file="lib/utils.ts" 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" 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" 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" isQuickEdit="true" isMerged="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 && (

)} ) } [V0_FILE]typescriptreact:file="components/domain-card-stack.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { ArrowUpRight, Home, Globe, Cpu, Heart, DollarSign, Briefcase } from "lucide-react" interface DomainCard { id: number domain: string category: string description: string icon: string colors: { primary: string secondary: string text: string shadow: string } } // Function to categorize domains and assign colors const categorizeDomain = (domain: string) => { // Real Estate related domains if ( domain.includes("property") || domain.includes("estate") || domain.includes("house") || domain.includes("home") || domain.includes("rent") || domain.includes("inmuebles") || domain.includes("casa") || domain.includes("apartments") || domain.includes("immo") ) { return { category: "Real Estate", icon: "home", colors: { primary: "#2d4a22", secondary: "#4a7a38", text: "#ffffff", shadow: "rgba(45, 74, 34, 0.6)", }, } } // Blockchain/Crypto related domains else if ( domain.includes("btc") || domain.includes("blockchain") || domain.includes("token") || domain.includes("onchain") || domain.includes("crypto") || domain.includes("wallet") || domain.includes("eth") || domain.includes("nft") || domain.includes("chain") ) { return { category: "Blockchain & Crypto", icon: "dollar", colors: { primary: "#1a3a5f", secondary: "#2d5f8a", text: "#ffffff", shadow: "rgba(26, 58, 95, 0.6)", }, } } // AI/Tech related domains else if ( domain.includes("ai") || domain.includes("tech") || domain.includes("digital") || domain.includes("smart") || domain.includes("software") || domain.includes("data") || domain.includes("intelligent") || domain.includes("innovation") ) { return { category: "AI & Technology", icon: "cpu", colors: { primary: "#5a3a31", secondary: "#8c5b4a", text: "#ffffff", shadow: "rgba(90, 58, 49, 0.6)", }, } } // Healthcare related domains else if ( domain.includes("medical") || domain.includes("health") || domain.includes("cure") || domain.includes("doctor") || domain.includes("clinic") || domain.includes("dental") ) { return { category: "Healthcare", icon: "heart", colors: { primary: "#7a1f1f", secondary: "#a82929", text: "#ffffff", shadow: "rgba(122, 31, 31, 0.6)", }, } } // Travel/Hospitality related domains else if ( domain.includes("hotel") || domain.includes("resort") || domain.includes("tour") || domain.includes("travel") || domain.includes("holiday") || domain.includes("viajes") || domain.includes("visit") ) { return { category: "Travel & Hospitality", icon: "globe", colors: { primary: "#0f2b46", secondary: "#1e4976", text: "#ffffff", shadow: "rgba(15, 43, 70, 0.6)", }, } } // Finance related domains else if ( domain.includes("loan") || domain.includes("bank") || domain.includes("money") || domain.includes("finance") || domain.includes("capital") || domain.includes("insure") || domain.includes("broker") ) { return { category: "Finance & Banking", icon: "briefcase", colors: { primary: "#3a2d5f", secondary: "#5a468a", text: "#ffffff", shadow: "rgba(58, 45, 95, 0.6)", }, } } // Default category for other domains else { return { category: "Business & Services", icon: "arrowUpRight", colors: { primary: "#1a1a1a", secondary: "#333333", text: "#ffffff", shadow: "rgba(0, 0, 0, 0.5)", }, } } } // Generate description based on domain name and category const generateDescription = (domain: string, category: string) => { const domainName = domain.split(".")[0] const descriptions = { "Real Estate": [ `Premium ${domainName} platform for property listings, management, and real estate investments.`, `Showcase luxury ${domainName} properties and connect buyers with sellers in an exclusive marketplace.`, `Revolutionize the real estate industry with innovative ${domainName} solutions and property management tools.`, ], "Blockchain & Crypto": [ `Secure ${domainName} blockchain solutions for digital assets, smart contracts, and decentralized applications.`, `Next-generation ${domainName} cryptocurrency platform with advanced trading features and wallet security.`, `Tokenize real-world assets with ${domainName} blockchain technology for transparent and efficient transactions.`, ], "AI & Technology": [ `Cutting-edge ${domainName} AI solutions that transform businesses through intelligent automation and insights.`, `Harness the power of artificial intelligence with ${domainName} to solve complex problems and drive innovation.`, `Advanced ${domainName} technology platform offering smart solutions for businesses and consumers alike.`, ], Healthcare: [ `Comprehensive ${domainName} healthcare services and solutions for improved patient outcomes and wellbeing.`, `Innovative ${domainName} medical platform connecting patients with healthcare providers and resources.`, `Transform healthcare delivery with ${domainName} digital solutions for clinics, hospitals, and medical practices.`, ], "Travel & Hospitality": [ `Exclusive ${domainName} travel experiences and luxury accommodations for discerning travelers worldwide.`, `Book unforgettable ${domainName} vacations, tours, and adventures with our premium travel platform.`, `Revolutionize the hospitality industry with ${domainName} innovative solutions for hotels, resorts, and tourism.`, ], "Finance & Banking": [ `Secure ${domainName} financial services platform offering loans, investments, and wealth management solutions.`, `Transform your financial future with ${domainName} innovative banking solutions and investment opportunities.`, `Comprehensive ${domainName} insurance and risk management services for individuals and businesses.`, ], "Business & Services": [ `Elevate your business with ${domainName} professional services and innovative solutions.`, `Connect with ${domainName} industry experts and access premium business resources and tools.`, `Transform your operations with ${domainName} cutting-edge business solutions and strategic services.`, ], } // Select a random description from the appropriate category const categoryDescriptions = descriptions[category as keyof typeof descriptions] || descriptions["Business & Services"] return categoryDescriptions[Math.floor(Math.random() * categoryDescriptions.length)] } // Create domain cards from the list const createDomainCards = (domainList: string[]) => { return domainList.map((domain, index) => { const { category, icon, colors } = categorizeDomain(domain) return { id: index + 1, domain, category, description: generateDescription(domain, category), icon, colors, } }) } // List of domains from the provided text const domainList = [ "felicity.lol", "rwa.bingo", "resort.tours", "hotel.insure", "carrier.boats", "room.holiday", "inn.apartments", "program.expert", "property.cruises", "walletlink.click", "onchain.red", "btc.reisen", "property.delivery", "aiai.sbs", "loan.lat", "loot.lat", "ownership.tokyo", "friend.college", "integration.tokyo", "sushi.support", "loan.beauty", "rwa.beauty", "ia.viajes", "realestate.irish", "dubaihotline.com", "realestateagency.vip", "btc.plumbing", "arcane.mobi", "btcs.poker", "property.solar", "wenft.buzz", "natty.lol", "greeninnovate.green", "rwa.coupons", "profits.autos", "greenplanet.earth", "getcryptobank.com", "digitaltokenflow.com", "techtribehub.com", "tokenelevator.com", "sipdebut.com", "information.homes", "homelux.design", "immutable.homes", "details.homes", "dataanalysis.homes", "cures.homes", "estates.immo", "medical.baby", "blockchain.nagoya", "fabrication.one", "payhost.xyz", "medicalinstitute.net", "payhost.net", "mostai.xyz", "futuretech.my", "subasta.my", "sip.quest", "mastery.quest", "buys.cheap", "loan.kim", "cocktail.lat", "landmass.xyz", "locale.blog", "universi.dad", "crypto.dentist", "joinai.club", "skill.lat", "smarttokenize.com", "property.baby", "properties.ninja", "ideas.tokyo", "loan.hair", "onchain.autos", "teamrwa.com", "dubaiconection.com", "ia.bingo", "healths.insure", "medtech.care", "rwacapital.net", "iconic.lat", "infantia.xyz", "solutionsai.xyz", "statesky.com", "housesolar.xyz", "tokenization.lat", "sip.motorcycles", "loan.immobilien", "loan.cruises", "trends.lat", "btcs.casino", "feme.cyou", "btc.catering", "buys.immo", "rwa.makeup", "steps.tokyo", "hotel.giving", "casa.cyou", "agente.ninja", "arcanegames.net", "beanbegin.bet", "beanbegin.com", "broker.lat", "btc.watches", "btc.wedding", "chainkeep.locker", "connection.baby", "cover.rest", "digitalization.shop", "diversity.lat", "domain.industries", "dubai.jetzt", "dubaiconection.contractors", "espacio.rent", "eth.deal", "exclusivo.gold", "expedition.lol", "gpt.gd", "guard.college", "guardiansoflowi.city", "guardiansoflowi.com", "guinoki.com", "idaudit.xyz", "imperio.gold", "inmuebles.asia", "innovators.quest", "intelligentnetworks.xyz", "joyeria.gold", "laia.lat", "legacybias.com", "legacybias.domains", "lujo.gold", "luxestatenow.capital", "luxestatenow.com", "medical.cyou", "money.football", "noid.democrat", "pal.lat", "piso.rent", "rulo.pro", "secrets.tours", "snazzy.my", "sushi.email", "tesoro.gold", "tokenizar.co", "tokenizar.pro", "tokenizar.xyz", "trustless.vip", "visit.singles", "voguedentalclinic.xyz", "w4ll3t.com", "w4ll3t.fund", "wall37.com", "wallet.charity", "wcoin.one", "ai.viajes", "aiblockchain.dev", "aicad.pro", "aiinsights.dev", "airemote.org", "animalstrends.top", "aprobaciones.com", "architect.casa", "autenticaciones.com", "bakegrill.com", "betglobal.dev", "betinnovations.dev", "blazeglow.com", "blockchain.dentist", "blockchain.reisen", "blockchain.yokohama", "blockchainrenewables.com", "bloom.yachts", "buddygather.com", "car.engineer", "car.ltda", "cars.vet", "carshub.dev", "casinonewspaper.com", "centraliot.com", "chainaura.com", "chainprogress.com", "clavechain.com", "datoblock.com", "digitalwallettech.com", "drinktaste.com", "ecofy.life", "empujes.com", "fabricate.casa", "feelscary.com", "fitnessprogress.top", "fluxpulse.com", "futuretechpredictions.com", "goalscareers.top", "helpkids.gives", "hobbiesstrategies.top", "house.fitness", "housing.apartments", "improverepair.com", "iwontletyoudown.com", "joinushub.com", "joltpath.com", "land.casa", "lifestyleinvesting.top", "lyriccoin.com", "matrixmatter.com", "meal.business", "netframer.com", "newsgaming.top", "oocyber.com", "parent.family", "pleasantonrent.com", "plot.casa", "prestigious.top", "progressai.top", "renewablehive.com", "resourcescommunity.top", "savorywave.com", "sectorify.com", "skillssolutions.top", "software.fashion", "softwarebet.top", "softwaretech.xyz", "softwaretrends.me", "spaceprojects.online", "spaceprojects.top", "styleglam.beauty", "sustainablefuture.ai", "syncluxe.com", "traditionalcuban.com", "trailblazer.top", "ultrasteps.com", "visualibrary.com", "webtokenize.com", "yard.casa", "zurep.com", "D4pp.com", "reproductions.info", "reproductions.online", "reproductions.xyz", "aizima.com", "aiinnovatenews.com", "cureweb3.com", ] export default function DomainCardStack() { const initialDomainCards = createDomainCards(domainList) const [cards, setCards] = useState(initialDomainCards) const [currentIndex, setCurrentIndex] = useState(0) const removeCard = () => { setCurrentIndex((prevIndex) => (prevIndex + 1) % cards.length) } const getIconComponent = (iconName: string) => { switch (iconName) { case "home": return case "globe": return case "cpu": return case "heart": return case "dollar": return case "briefcase": return case "arrowUpRight": default: return } } // Get the cards to display (current and next two) const displayCards = Array.from({ length: 3 }, (_, i) => { const index = (currentIndex + i) % cards.length return cards[index] }) return (

{displayCards.map((card, index) => ( ))}

) } interface CardProps { card: DomainCard index: number removeCard: () => void getIconComponent: (iconName: string) => JSX.Element totalCards: number } function Card({ card, index, removeCard, getIconComponent, totalCards }: CardProps) { const zIndex = totalCards - index const yOffset = index * 30 // Vertical offset const xOffset = index * 5 // 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) { removeCard() } } }} 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.domain}

{card.category}

{/* Card Content */}

{getIconComponent(card.icon)}

{card.domain.split(".")[0]}

.{card.domain.split(".")[1]}

{/* Card Footer */}

{getIconComponent(card.icon)} {card.category}

{card.description}

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

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

Domain Name Showcase

Swipe through our collection of premium domain names

) }

About

About