{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "bento-2", "dependencies": [ "@number-flow/react", "lucide-react", "motion" ], "registryDependencies": [ "card" ], "files": [ { "path": "src/components/watermelon-ui/bento-2.tsx", "content": "\"use client\";\n\nimport React from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport NumberFlow from \"@number-flow/react\";\nimport {\n Card,\n CardHeader,\n CardTitle,\n CardDescription,\n CardContent,\n} from \"@/components/ui/card\";\n\nconst GLOBE_PHRASES = [\"Find House\", \"Performance Market\", \"Handle Traffic\"];\n\nconst Bento2 = () => {\n return (\n
\n\n
\n
\n {/* Bento-1 */}\n \n \n \n A World of Properties Awaits\n \n \n Utilize our dynamic platform to showcase your property in\n stunning detail or dive into a curated marketplace. Every\n listing is an opportunity waiting to be explored.\n \n \n \n \n \n \n\n {/* Bento-2 */}\n \n \n \n \n \n \n Marketplace Synergy\n \n \n Experience a frictionless journey from property management to\n monetization.\n \n \n \n
\n\n
\n {/* Bento-3 */}\n \n \n \n \n \n \n Advanced Analytics\n \n \n Stop reacting and start strategizing. Our predictive analytics\n help you identify growth\n \n \n \n\n {/* Bento-4 */}\n \n \n \n \n \n \n Integrated Management Tools\n \n \n Our comprehensive toolkit simplifies the complexities of\n property ownership, automating routine tasks so you can focus on\n growth\n \n \n \n
\n
\n
\n );\n};\n\nexport default Bento2;\n\nconst Transforming = () => {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nconst BARS = [\n { height: 70, value: 0.9 },\n { height: 107, value: 1.4 },\n { height: 160, value: 2.0 },\n { height: 125, value: 1.6 },\n { height: 145, value: 1.8 },\n];\n\nconst BAR_W = 28;\nconst BAR_GAP = 12;\nconst TOTAL_W = BARS.length * BAR_W + (BARS.length - 1) * BAR_GAP;\nconst MAX_H = Math.max(...BARS.map((b) => b.height));\nconst TICKER_W = 60;\n\nconst Graph = () => {\n const [activeBar, setActiveBar] = React.useState(2);\n\n React.useEffect(() => {\n const timer = setTimeout(() => {\n setActiveBar((prev) => (prev + 1) % BARS.length);\n }, 1500);\n return () => clearTimeout(timer);\n }, [activeBar]);\n\n const barLeft = (i: number) => i * (BAR_W + BAR_GAP);\n const barCenter = (i: number) => barLeft(i) + BAR_W / 2;\n const tickerLeft = barCenter(activeBar) - TICKER_W / 2;\n const tickerBottom = BARS[activeBar].height + 10;\n\n return (\n \n {/* Bars */}\n {BARS.map((bar, i) => (\n \n {/* Gray base */}\n \n {/* Pink overlay */}\n \n \n ))}\n\n {/* Static centered glow */}\n \n\n {/* Ticker */}\n \n {/* Badge */}\n \n \n \n {/* Downward triangle pointer */}\n \n \n \n );\n};\n\nconst Globe = () => {\n const basePillWidth = 119;\n const [activePhrase, setActivePhrase] = React.useState(0);\n\n const [phraseWidths, setPhraseWidths] = React.useState(() =>\n GLOBE_PHRASES.map(() => basePillWidth)\n );\n\n React.useEffect(() => {\n if (typeof document === \"undefined\") return;\n\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return;\n\n ctx.font = \"700 15px Inter, sans-serif\";\n const measuredWidths = GLOBE_PHRASES.map((phrase) =>\n Math.max(90, Math.ceil(ctx.measureText(phrase).width) + 34)\n );\n\n setPhraseWidths(measuredWidths);\n }, []);\n\n const currentPillWidth = phraseWidths[activePhrase] ?? basePillWidth;\n const currentPillX = (basePillWidth - currentPillWidth) / 2;\n\n React.useEffect(() => {\n const interval = setInterval(() => {\n setActivePhrase((prev) => (prev + 1) % GLOBE_PHRASES.length);\n }, 2400);\n\n return () => clearInterval(interval);\n }, []);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {GLOBE_PHRASES[activePhrase]}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nconst Tools = () => {\n const profileX = [0, -15, 20, -8, 0];\n const profileY = [0, -15, 18, 11, 0];\n const searchX = [0, 16, -15, 18, 0];\n const searchY = [0, 20, -15, 25, 0];\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n", "type": "registry:ui", "target": "components/ui/bento-2.tsx" } ], "type": "registry:ui" }