From 3625ea066a672dba7cdb6186470ba0ca9e3a1d6f Mon Sep 17 00:00:00 2001 From: MeetPatel-2005 Date: Fri, 27 Mar 2026 01:37:24 +0530 Subject: [PATCH 1/5] add:bento added to platform --- bun.lock | 3 + package.json | 1 + src/data/contents/blocks/bento-1/bento-1.mdx | 29 + src/data/contents/blocks/bento-1/demo.tsx | 9 + src/data/contents/blocks/bento-1/index.tsx | 932 +++++++ .../contents/blocks/bento-14/bento-14.mdx | 30 + src/data/contents/blocks/bento-14/demo.tsx | 9 + src/data/contents/blocks/bento-14/index.tsx | 707 +++++ .../contents/blocks/bento-16/bento-16.mdx | 31 + src/data/contents/blocks/bento-16/demo.tsx | 9 + src/data/contents/blocks/bento-16/index.tsx | 397 +++ src/data/contents/blocks/bento-2/bento-2.mdx | 29 + src/data/contents/blocks/bento-2/demo.tsx | 9 + src/data/contents/blocks/bento-2/index.tsx | 1465 ++++++++++ src/data/contents/blocks/bento-3/bento-3.mdx | 29 + src/data/contents/blocks/bento-3/demo.tsx | 9 + src/data/contents/blocks/bento-3/index.tsx | 744 ++++++ src/data/contents/blocks/bento-4/bento-4.mdx | 29 + src/data/contents/blocks/bento-4/demo.tsx | 9 + src/data/contents/blocks/bento-4/index.tsx | 1844 +++++++++++++ src/data/contents/blocks/bento-5/bento-5.mdx | 28 + src/data/contents/blocks/bento-5/demo.tsx | 9 + src/data/contents/blocks/bento-5/index.tsx | 2349 +++++++++++++++++ src/data/contents/blocks/bento-6/bento-6.mdx | 29 + src/data/contents/blocks/bento-6/demo.tsx | 9 + src/data/contents/blocks/bento-6/index.tsx | 909 +++++++ src/data/contents/blocks/bento-7/bento-7.mdx | 28 + src/data/contents/blocks/bento-7/demo.tsx | 9 + src/data/contents/blocks/bento-7/index.tsx | 905 +++++++ src/types/matter-js.d.ts | 4 + 30 files changed, 10603 insertions(+) create mode 100644 src/data/contents/blocks/bento-1/bento-1.mdx create mode 100644 src/data/contents/blocks/bento-1/demo.tsx create mode 100644 src/data/contents/blocks/bento-1/index.tsx create mode 100644 src/data/contents/blocks/bento-14/bento-14.mdx create mode 100644 src/data/contents/blocks/bento-14/demo.tsx create mode 100644 src/data/contents/blocks/bento-14/index.tsx create mode 100644 src/data/contents/blocks/bento-16/bento-16.mdx create mode 100644 src/data/contents/blocks/bento-16/demo.tsx create mode 100644 src/data/contents/blocks/bento-16/index.tsx create mode 100644 src/data/contents/blocks/bento-2/bento-2.mdx create mode 100644 src/data/contents/blocks/bento-2/demo.tsx create mode 100644 src/data/contents/blocks/bento-2/index.tsx create mode 100644 src/data/contents/blocks/bento-3/bento-3.mdx create mode 100644 src/data/contents/blocks/bento-3/demo.tsx create mode 100644 src/data/contents/blocks/bento-3/index.tsx create mode 100644 src/data/contents/blocks/bento-4/bento-4.mdx create mode 100644 src/data/contents/blocks/bento-4/demo.tsx create mode 100644 src/data/contents/blocks/bento-4/index.tsx create mode 100644 src/data/contents/blocks/bento-5/bento-5.mdx create mode 100644 src/data/contents/blocks/bento-5/demo.tsx create mode 100644 src/data/contents/blocks/bento-5/index.tsx create mode 100644 src/data/contents/blocks/bento-6/bento-6.mdx create mode 100644 src/data/contents/blocks/bento-6/demo.tsx create mode 100644 src/data/contents/blocks/bento-6/index.tsx create mode 100644 src/data/contents/blocks/bento-7/bento-7.mdx create mode 100644 src/data/contents/blocks/bento-7/demo.tsx create mode 100644 src/data/contents/blocks/bento-7/index.tsx create mode 100644 src/types/matter-js.d.ts diff --git a/bun.lock b/bun.lock index 7875d080..d15bc51e 100644 --- a/bun.lock +++ b/bun.lock @@ -29,6 +29,7 @@ "hugeicons-react": "^0.4.0", "input-otp": "^1.4.2", "lucide-react": "^0.563.0", + "matter-js": "^0.20.0", "media-chrome": "^4.17.2", "motion": "^12.34.1", "next-themes": "^0.4.6", @@ -1324,6 +1325,8 @@ "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="], + "matter-js": ["matter-js@0.20.0", "", {}, "sha512-iC9fYR7zVT3HppNnsFsp9XOoQdQN2tUyfaKg4CHLH8bN+j6GT4Gw7IH2rP0tflAebrHFw730RR3DkVSZRX8hwA=="], + "mdast-util-from-markdown": ["mdast-util-from-markdown@2.0.2", "", { "dependencies": { "@types/mdast": "^4.0.0", "@types/unist": "^3.0.0", "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "mdast-util-to-string": "^4.0.0", "micromark": "^4.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-decode-string": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA=="], "mdast-util-frontmatter": ["mdast-util-frontmatter@2.0.1", "", { "dependencies": { "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "escape-string-regexp": "^5.0.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0", "micromark-extension-frontmatter": "^2.0.0" } }, "sha512-LRqI9+wdgC25P0URIJY9vwocIzCcksduHQ9OF2joxQoyTNVduwLAFUzjoopuRJbJAReaKrNQKAZKL3uCMugWJA=="], diff --git a/package.json b/package.json index 728186ca..62b90893 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "hugeicons-react": "^0.4.0", "input-otp": "^1.4.2", "lucide-react": "^0.563.0", + "matter-js": "^0.20.0", "media-chrome": "^4.17.2", "motion": "^12.34.1", "next-themes": "^0.4.6", diff --git a/src/data/contents/blocks/bento-1/bento-1.mdx b/src/data/contents/blocks/bento-1/bento-1.mdx new file mode 100644 index 00000000..6518f8bd --- /dev/null +++ b/src/data/contents/blocks/bento-1/bento-1.mdx @@ -0,0 +1,29 @@ +--- +title: Bento-1 +slug: bento-1 +category: bento +description: >- + A dark-themed bento layout featuring growth insights, workflow + integration, scalable visuals, and seamless team collaboration. +image: 'https://assets.watermelon.sh/components/bento-1.webp' +video: 'https://assets.watermelon.sh/components/bento-1.mp4' +featured: false +comingSoon: false +dependencies: + - motion/react +install: + - 'npx shadcn@latest add https://registry.watermelon.sh/r/bento-1.json' +componentNumber: 1 +--- + +# Bento-1 + +A sleek, high-contrast bento layout designed to present insights, simplify workflows, and highlight collaboration through clean visual blocks. + +- **Growth Insights** - Smooth visual indicators to represent trends and performance over time. +- **Custom Design Modules** - Clean, modular sections to showcase tailored solutions. +- **Auto Scaling Visuals** - Subtle curves and highlights that reflect adaptability and system evolution. +- **Workflow Integration** - Organized display of connected tools and services. +- **Team Collaboration** - Interactive avatar groups that bring a sense of real-time teamwork. +- **Tag-Based Highlights** - Compact pill elements for quick access to key features. +- **Dark Premium UI** - High-contrast design with soft glows, gradients, and minimal accents. diff --git a/src/data/contents/blocks/bento-1/demo.tsx b/src/data/contents/blocks/bento-1/demo.tsx new file mode 100644 index 00000000..6c007cbc --- /dev/null +++ b/src/data/contents/blocks/bento-1/demo.tsx @@ -0,0 +1,9 @@ +import Bento1 from '.' + +const demo = () => { + return ( + + ) +} + +export default demo \ No newline at end of file diff --git a/src/data/contents/blocks/bento-1/index.tsx b/src/data/contents/blocks/bento-1/index.tsx new file mode 100644 index 00000000..571bb0b9 --- /dev/null +++ b/src/data/contents/blocks/bento-1/index.tsx @@ -0,0 +1,932 @@ +"use client"; +import { motion } from "motion/react"; +import { + Card, + CardHeader, + CardTitle, + CardDescription, + CardContent, +} from "@/components/base-ui/card"; + +const MotionCard = motion(Card); + +const Bento1 = () => { + const buttonLinks = [ + "Design Workshops", + "Workshop", + "Trend Report", + "Asset library", + "Premium designers", + "Multillingual support", + "Design Workshops", + ]; + + const circleRows = [ + [ + { From: Figma, To: Github, delay: 0 }, + { From: Twitter, To: Slack, delay: 0.07 }, + { From: Claude, To: Cloudflare, delay: 0.14 }, + ], + [ + { From: Github, To: Figma, delay: 0.21 }, + { From: Slack, To: Twitter, delay: 0.28 }, + { From: Cloudflare, To: Claude, delay: 0.35 }, + ], + ]; + + return ( +
+ +
+ {/* Row 1 - 3 Columns */} +
+ {/* Card 1 */} + +
+ + Growth + +
+ {[ + { top: 52, bottom: 25 }, + { top: 38, bottom: 18 }, + { top: 50, bottom: 18 }, + { top: 62, bottom: 32 }, + { top: 62, bottom: 45 }, + { top: 62, bottom: 15 }, + { top: 52, bottom: 25 }, + { top: 52, bottom: 25 }, + { top: 38, bottom: -2 }, + { top: 48, bottom: 12 }, + { top: 58, bottom: 15 }, + { top: 72, bottom: 15 }, + { top: 85, bottom: 35 }, + { top: 100, bottom: 40 }, + { top: 75, bottom: 45 }, + { top: 52, bottom: 25 }, + ].map((b, i) => ( +
+ {b && ( +
+ )} + + {i === 0 && ( + <> +
+ + Mar, 10 + + + )} + + {i === 7 && ( + <> +
+ + Mar, 12 + + + )} + + {i === 13 && ( + <> +
+ + Today + + + )} +
+ ))} +
+
+ +
+ + + {/* Card 2 */} + + {/* Design Graphic */} + +
+ {/* Deep Back card */} + +
+
+
+
+ + Pending + +
+ + Research + + + friday, 10:00 + +
+ + + {/* Back card */} + +
+
+
+
+ + Done + +
+ + Development + + + tuesday, 1:30 + +
+ + + {/* Front card */} + +
+
+
+
+
+ + New + +
+ + Modern Design + + + monday, 12:30 + +
+ + + {/* Dashed lines underneath */} +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + Custom - made designs + + + with more than expertise to make your vision come to reality + + + + + {/* Card 3 */} + + + + + + + + Auto Scale Handling + + + we are ready to meet you evolving nends. + + + +
+ + {/* Row 2 - 2 Columns */} +
+ {/* Card 4 */} + + {/* Background Dark Circles pattern */} +
+ {circleRows.map((row, rowIdx) => ( +
+ {row.map(({ From, To, delay }, i) => ( +
+ + + + + + +
+ ))} +
+ ))} +
+ + + + WorkFlow +
+ Management + + + Seamlessly manage all you existing apps. + + + + + {/* Card 5 */} + + + + Team Collaboration +
+ effortlessly + + + Seamless connection and collab with other teams + + + + {/* Overlapping Rings UI */} + + {/* Ring 1 - Red */} +
+ {/* Ring 2 - Purple */} +
+ {/* Ring 3 - Green with Glow */} +
+ {/* Ring 4 - Dark grey */} +
+ + {/* Cursor and Label */} + + + + +
+ + Jack + + + Mike + +
+ +
+ + + +
+ + {/* Row 3 - Tags */} +
+
+ {buttonLinks.map((button, idx) => ( + + ))} +
+
+
+ + +
+ ); +}; + +export default Bento1; + +const Graph = () => { + const originalD = + "M1.86621 239L7.86621 226.5L15.3662 215.5L23.3662 205.5L31.3662 197.5L38.8662 192L48.3662 187L58.8662 183.5L67.3662 181.5L77.8662 179.5L87.8662 177L97.3662 172L103.866 166L108.866 159L111.866 151.5L112.866 144.5V137.5V134"; + const extensionD = + "M112.866 134 C113.366 119.667 124.866 98.8004 166.866 154 C208.866 209.2 220.2 117.5 220.866 64.5 C220.866 50 220.966 19.3 255.366 18.5 C289.766 17.7 280.7 -17.1667 271.866 -34.5"; + + return ( + + + + + + + + + + + + + + + {/* Subtle large outer glow */} + + {/* Glowing tip */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const Figma = () => { + return ( + + + + + + + + + + + + + + + ); +}; + +const Twitter = () => { + return ( + + + + ); +}; + +const Claude = () => { + return ( + + + + + + + + + + + + + + + ); +}; + +const Github = () => { + return ( + + + + + + + + + + + + ); +}; + +const Slack = () => { + return ( + + + + + + + + + + + + + + ); +}; + +const Cloudflare = () => { + return ( + + + + + + + + + + + + + ); +}; diff --git a/src/data/contents/blocks/bento-14/bento-14.mdx b/src/data/contents/blocks/bento-14/bento-14.mdx new file mode 100644 index 00000000..5d15e2f1 --- /dev/null +++ b/src/data/contents/blocks/bento-14/bento-14.mdx @@ -0,0 +1,30 @@ +--- +title: Bento-14 +slug: bento-14 +category: bento +description: >- + A media-focused bento layout combining playback controls, + file handling, connected systems, and precision-driven insights. +image: 'https://assets.watermelon.sh/components/bento-14.webp' +video: 'https://assets.watermelon.sh/components/bento-14.mp4' +featured: false +comingSoon: false +dependencies: + - motion/react + - lucide-react + - react-icons +install: + - 'npx shadcn@latest add https://registry.watermelon.sh/r/bento-14.json' +componentNumber: 1 +--- + +# Bento-14 + +A media-oriented bento layout built around playback, file interaction, and connected systems, arranged across four distinct blocks. + +- **Connected Hub** – A node-based visual linking devices (camera, center node, display), representing distribution or sync across endpoints. +- **Playback Interface** – A full-width media control bar with timeline, play/pause, and navigation controls centered around “Break Free”. +- **Precision Panel** – A patterned background with repeated labels, emphasizing controlled output and contextual handling. +- **File Drop Zone** – A framed upload area with “Add Your File” and a floating file tag (my_file.mp3), indicating drag-and-drop interaction. +- **Balanced Grid Layout** – Two upper cards paired with two lower cards, separating system, media, and file workflows. +- **Minimal Control Icons** – Lightweight playback and interaction icons kept subtle to maintain focus on content. \ No newline at end of file diff --git a/src/data/contents/blocks/bento-14/demo.tsx b/src/data/contents/blocks/bento-14/demo.tsx new file mode 100644 index 00000000..2687fc1b --- /dev/null +++ b/src/data/contents/blocks/bento-14/demo.tsx @@ -0,0 +1,9 @@ +import Bento14 from '.' + +const demo = () => { + return ( + + ) +} + +export default demo \ No newline at end of file diff --git a/src/data/contents/blocks/bento-14/index.tsx b/src/data/contents/blocks/bento-14/index.tsx new file mode 100644 index 00000000..fc53ed4e --- /dev/null +++ b/src/data/contents/blocks/bento-14/index.tsx @@ -0,0 +1,707 @@ +"use client"; +import type { RefObject } from "react"; +import React, { useEffect, useId, useRef, useState } from "react"; +import { + AnimatePresence, + motion, + useAnimationFrame, + useMotionValue, +} from "framer-motion"; +import { + Play, + Pause, + Heart, + Volume2, + Repeat, + Shuffle, + Monitor, + Speaker, + SkipForward, + SkipBack, +} from "lucide-react"; +import { cn } from "@/lib/utils"; +import { + Card, + CardTitle, + CardDescription, + CardContent, + CardFooter, +} from "@/components/base-ui/card"; + +function Row({ + direction, + isHovered, +}: { + direction: number; + isHovered: boolean; +}) { + const x = useMotionValue(0); + const containerRef = useRef(null); + + useAnimationFrame((_, delta) => { + if (!containerRef.current) return; + + const halfWidth = containerRef.current.scrollWidth / 2; + const speed = isHovered ? 5 : 30; + + let next = x.get() + (direction * -speed * delta) / 1000; + + if (next <= -halfWidth) next += halfWidth; + if (next >= 0) next -= halfWidth; + + x.set(next); + }); + + const items = [...Array(12)]; + + return ( +
+ + {[...items, ...items].map((_, i) => ( + + Sale on entire stock + ✦ + + ))} + +
+ ); +} +function MarqueeCard() { + const [isHovered, setIsHovered] = useState(false); + + return ( + setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > + +
+ + + +
+ + + Tailored Precision + + Chime offers tailored precision and intelligent insights, adeptly + managing diverse sophisticated contextual understanding. + + + + ); +} + +function UploadCard() { + const dragVariants = { + rest: { + x: 130, + y: -80, + }, + hover: { + x: 0, + y: -25, + transition: { + duration: 0.7, + ease: "easeInOut" as const, + }, + }, + }; + + return ( + + + +
+
+ +
+ +
+
+
+
+
+
+ +
+ + Add your file + + + +
+ my_file.mp3 +
+ +
+ + + Add Your File + + Powerful capabilities, simplified. Our advanced features are integrated + with remarkably easy and seamless to master. + + + + + ); +} + +export interface AnimatedBeamProps { + className?: string; + containerRef: RefObject; // Container ref + fromRef: RefObject; + toRef: RefObject; + curvature?: number; + reverse?: boolean; + pathColor?: string; + pathWidth?: number; + pathOpacity?: number; + gradientStartColor?: string; + gradientStopColor?: string; + delay?: number; + duration?: number; + startXOffset?: number; + startYOffset?: number; + endXOffset?: number; + endYOffset?: number; +} + +export const AnimatedBeam: React.FC = ({ + className, + containerRef, + fromRef, + toRef, + curvature = 0, + reverse = false, + duration = Math.random() * 3 + 4, + delay = 0, + pathColor = "gray", + pathWidth = 2, + pathOpacity = 0.2, + gradientStartColor = "#ffaa40", + gradientStopColor = "#9c40ff", + startXOffset = 0, + startYOffset = 0, + endXOffset = 0, + endYOffset = 0, +}) => { + const id = useId(); + const [pathD, setPathD] = useState(""); + const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 }); + + const gradientCoordinates = reverse + ? { + x1: ["90%", "-10%"], + x2: ["100%", "0%"], + y1: ["0%", "0%"], + y2: ["0%", "0%"], + } + : { + x1: ["10%", "110%"], + x2: ["0%", "100%"], + y1: ["0%", "0%"], + y2: ["0%", "0%"], + }; + + useEffect(() => { + const updatePath = () => { + if (containerRef.current && fromRef.current && toRef.current) { + const containerRect = containerRef.current.getBoundingClientRect(); + const rectA = fromRef.current.getBoundingClientRect(); + const rectB = toRef.current.getBoundingClientRect(); + + const svgWidth = containerRect.width; + const svgHeight = containerRect.height; + setSvgDimensions({ width: svgWidth, height: svgHeight }); + + const startX = + rectA.left - containerRect.left + rectA.width / 2 + startXOffset; + const startY = + rectA.top - containerRect.top + rectA.height / 2 + startYOffset; + const endX = + rectB.left - containerRect.left + rectB.width / 2 + endXOffset; + const endY = + rectB.top - containerRect.top + rectB.height / 2 + endYOffset; + + const controlY = startY - curvature; + const d = `M ${startX},${startY} Q ${ + (startX + endX) / 2 + },${controlY} ${endX},${endY}`; + setPathD(d); + } + }; + + const resizeObserver = new ResizeObserver(() => { + updatePath(); + }); + + if (containerRef.current) { + resizeObserver.observe(containerRef.current); + } + + updatePath(); + + return () => { + resizeObserver.disconnect(); + }; + }, [ + containerRef, + fromRef, + toRef, + curvature, + startXOffset, + startYOffset, + endXOffset, + endYOffset, + ]); + + return ( + + + + + + + + + + + + + ); +}; + +function Card2() { + const moniterRef = useRef(null); + const rippleRef = useRef(null); + const speakerRef = useRef(null); + const containerRef = useRef(null); + return ( + + +
+
+ +
+ +
+ + +
+
+
+
+ +
+ +
+ + +
+ + + + Connected Hub + + A dedicated platform engineered to empower your creative vision, and + global distribution. + + + + ); +} + +const tracks = [ + { + id: 1, + title: "Midnight Dreams", + artist: "Luna Waves", + cover: "https://images.unsplash.com/photo-1511379938547-c1f69419868d?w=300", + duration: 101, + }, + { + id: 2, + title: "Ocean Lights", + artist: "Aurora Sky", + cover: "https://images.unsplash.com/photo-1507838153414-b4b713384a76?w=300", + duration: 124, + }, + { + id: 3, + title: "Neon Streets", + artist: "Pulse City", + cover: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=300", + duration: 95, + }, +]; + +function formatTime(t: number) { + const m = Math.floor(t / 60); + const s = Math.floor(t % 60); + return `${m}:${s.toString().padStart(2, "0")}`; +} + +const barVariants = { + initial: { y: -60, opacity: 0, scale: 0, filter: "blur(4px)" }, + animate: { y: 16, opacity: 1, scale: 1, filter: "blur(0px)" }, + exit: { y: -60, opacity: 0, scale: 0, filter: "blur(4px)" }, +}; + +const songVariants = { + enter: (dir: number) => ({ + x: dir > 0 ? 180 : -180, + opacity: 0, + scale: 0.75, + filter: "blur(4px)", + }), + center: { x: 0, opacity: 1, scale: 1, filter: "blur(0px)" }, + exit: (dir: number) => ({ + x: dir > 0 ? -180 : 180, + opacity: 0, + scale: 0.75, + filter: "blur(4px)", + }), +}; + +function PlayerCard() { + const [index, setIndex] = useState(0); + const [time, setTime] = useState(0); + const [playing, setPlaying] = useState(false); + const [liked, setLiked] = useState(false); + const [loop, setLoop] = useState(false); + const [shuffle, setShuffle] = useState(false); + const [hover, setHover] = useState(false); + const [direction, setDirection] = useState(0); + + const duration = tracks[index].duration; + const track = tracks[index]; + + const ref = useRef(null); + + useEffect(() => { + if (!playing || !hover) return; + + const interval = setInterval(() => { + setTime((t) => { + if (t >= duration) { + if (loop) return 0; + setDirection(1); + if (shuffle) { + setIndex(Math.floor(Math.random() * tracks.length)); + } else { + setIndex((i) => (i + 1) % tracks.length); + } + return 0; + } + return t + 1; + }); + }, 1000); + + return () => clearInterval(interval); + }, [playing, duration, hover, loop, shuffle]); + + function next() { + setDirection(1); + if (shuffle) { + setIndex(Math.floor(Math.random() * tracks.length)); + } else { + setIndex((i) => (i + 1) % tracks.length); + } + setTime(0); + } + + function prev() { + setDirection(-1); + setIndex((i) => (i - 1 + tracks.length) % tracks.length); + setTime(0); + } + + function seek(e: React.MouseEvent) { + if (!ref.current) return; + + const rect = ref.current.getBoundingClientRect(); + const x = e.clientX - rect.left; + const percent = x / rect.width; + + setTime(percent * duration); + } + + const progress = (time / duration) * 100; + + return ( + { + setHover(true); + setPlaying(true); + }} + onMouseLeave={() => { + setHover(false); + setPlaying(false); + }} + className="md:col-span-7 relative bg-neutral-900 rounded-md flex flex-col justify-between border border-white/5 overflow-hidden h-[340px] p-0 gap-0 ring-0 shadow-none" + > + + {hover && ( + +
+ + + + +
+ + {track.title} + + + {track.artist} + +
+ + +
+ + )} + + + +
+ +
+ +
+
+
+
+
+ +
+ {formatTime(time)} + {formatTime(duration)} +
+
+ +
+ setLiked(!liked)} + className={`w-5 h-5 cursor-pointer ${ + liked ? "text-blue-500 fill-blue-500" : "text-neutral-400" + }`} + /> + + + + + +
setPlaying(!playing)} + className="bg-white rounded-full p-2.5 shadow-[0_0_18px_rgba(255,255,255,0.15)] cursor-pointer" + > + {playing ? ( + + ) : ( + + )} +
+ + + + setLoop(!loop)} + className={`w-5 h-5 cursor-pointer ${ + loop ? "text-blue-500" : "text-neutral-400" + }`} + /> + + setShuffle(!shuffle)} + className={`w-5 h-5 cursor-pointer ${ + shuffle ? "text-blue-500" : "text-neutral-400" + }`} + /> +
+
+ + + + Break Free + + Seize full command over your music's journey + + + + ); +} +const page = () => { + return ( +
+
+ + + + + + + +
+
+ ); +}; + +export default page; diff --git a/src/data/contents/blocks/bento-16/bento-16.mdx b/src/data/contents/blocks/bento-16/bento-16.mdx new file mode 100644 index 00000000..ee905da1 --- /dev/null +++ b/src/data/contents/blocks/bento-16/bento-16.mdx @@ -0,0 +1,31 @@ +--- +title: Bento-16 +slug: bento-16 +category: bento +description: >- + A finance-oriented bento layout combining global reach, + transaction security, performance metrics, and tax insights. +image: 'https://assets.watermelon.sh/components/bento-16.webp' +video: 'https://assets.watermelon.sh/components/bento-16.mp4' +featured: false +comingSoon: false +dependencies: + - motion/react + - lucide-react + - react-icons +install: + - 'npx shadcn@latest add https://registry.watermelon.sh/r/bento-16.json' +componentNumber: 1 +--- + +# Bento-16 + +A finance-focused bento layout structured around funding, security, and performance indicators across multiple data-driven blocks. + +- **Global Reach Panel** – A world map with highlighted nodes, introducing scale and international presence. +- **Verification Block** – A soft card with structured rows, suggesting identity checks or approval workflows. +- **Radial Insight Card** – A circular visualization representing distribution, allocation, or risk layers. +- **Performance Chart** – A vertical bar graph showing upward growth trends. +- **Security Section** – A shield-centered card labeled “Secure transactions”, emphasizing protection and trust. +- **Tax Optimization Panel** – A wide block with segmented bars showing tax credit, savings, and paid amounts. +- **Mixed Layout Grid** – Combination of wide and compact cards to separate insights, metrics, and controls. \ No newline at end of file diff --git a/src/data/contents/blocks/bento-16/demo.tsx b/src/data/contents/blocks/bento-16/demo.tsx new file mode 100644 index 00000000..6b1745ea --- /dev/null +++ b/src/data/contents/blocks/bento-16/demo.tsx @@ -0,0 +1,9 @@ +import Bento16 from '.' + +const demo = () => { + return ( + + ) +} + +export default demo \ No newline at end of file diff --git a/src/data/contents/blocks/bento-16/index.tsx b/src/data/contents/blocks/bento-16/index.tsx new file mode 100644 index 00000000..c3fa0508 --- /dev/null +++ b/src/data/contents/blocks/bento-16/index.tsx @@ -0,0 +1,397 @@ +"use client"; +import { motion, type Variants } from "motion/react"; +import { useMemo, useState } from "react"; +import { FaShield } from "react-icons/fa6"; +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/components/base-ui/card"; + +// const container:Variants = { +// hidden: { opacity: 0 }, +// show: { +// opacity: 1, +// transition: { staggerChildren: 0.08 }, +// }, +// }; + +const item:Variants = { + hidden: { opacity: 0, y: 20 }, + show: { opacity: 1, y: 0 }, +}; + +function PerformanceCard() { + return ( + + + + + + + + + + + + + + + + Build for performance + + + Grew 30,000+ strong global design community!! + + + + + ); +} + +const dots = [ + { t: "13%", l: "40%" }, + { t: "38%", l: "30%" }, + { t: "32%", l: "60%" }, + { t: "70%", l: "50%" }, + { t: "80%", l: "73%" }, + { t: "85%", l: "35%" }, +]; + +const createDelays = (seed: number) => + dots.map((_, index) => { + const value = Math.abs(Math.sin((index + 1) * seed) * 10000); + return (value - Math.floor(value)) * 0.8; + }); + +function EarthDots() { + const [hovered, setHovered] = useState(false); + + const enterDelays = useMemo(() => createDelays(12.9898), []); + const exitDelays = useMemo(() => createDelays(78.233), []); + + return ( + setHovered(true)} + onHoverEnd={() => setHovered(false)} + className="col-span-12 lg:col-span-6" + > + + +
+ + + {dots.map((pos, i) => ( + + ))} +
+ + + + + Effortless funding + + + Grew 30,000+ strong global design community!! + + + + + ); +} + +const card:Variants = { + hidden: { y: 80, opacity: 0 }, + show: { + y: 0, + opacity: 1, + transition: { + duration: 0.6, + ease: "easeOut", + when: "beforeChildren", + staggerChildren: 0.12, + }, + }, +}; + +const skeletonItem:Variants = { + hidden: { opacity: 0, y: 12 }, + show: { opacity: 1, y: 0 }, +}; + +function ProjectQualificationCard() { + return ( + + + + + Project qualification and verification + + + + Grew 30,000+ strong global design community!! + + + + + + {[...Array(7)].map((_, i) => ( + +
+
+ + ))} + + + + + ); +} + +function GraphBar({ className, delay = 0, origin = "left" }:{className:string, delay?:number, origin?:"left"|"right"}) { + return ( + + ); +} + +function Card5() { + return ( + + + + + Tax liability optimize + + + + +
+ +
+
Tax credit
+
$100000
+
+
+ +
+
+
Tax saving
+
$1200000
+
+ + +
+ +
+ +
+
Paid
+
$500000
+
+
+ + + + ); +} + +export default function Bento16() { + return ( + + + + + + + + Ongoing support + + Grew 30,000+ strong global design community!! + + + + +
+
+
+
+ + +
+ +
+
+ + + + + + + + + Secure transactions + + Grew 30,000+ strong global design community!! + + + + +
+ + + + + + +
+ + + + + + + ); +} + +function ArrowPathIcon({ className, ...props }: { className?: string; [key: string]: unknown }) { + return ( + + + + + ); +} diff --git a/src/data/contents/blocks/bento-2/bento-2.mdx b/src/data/contents/blocks/bento-2/bento-2.mdx new file mode 100644 index 00000000..2e49fa3d --- /dev/null +++ b/src/data/contents/blocks/bento-2/bento-2.mdx @@ -0,0 +1,29 @@ +--- +title: Bento-2 +slug: bento-2 +category: bento +description: >- + A low-light bento layout focused on property discovery, blending + listing visuals, quick stats, and action-driven interface elements. +image: 'https://assets.watermelon.sh/components/bento-2.webp' +video: 'https://assets.watermelon.sh/components/bento-2.mp4' +featured: false +comingSoon: false +dependencies: + - motion/react +install: + - 'npx shadcn@latest add https://registry.watermelon.sh/r/bento-2.json' +componentNumber: 1 +--- + +# Bento-2 + +A property-driven bento layout that combines immersive listing visuals with compact interaction blocks and data cues. + +- **Listing Focus Panel** – A wide card introducing properties through stacked house visuals, connected by a central transition point. +- **Stat Indicator Block** – Vertical bars with a highlighted value (1.6k), giving a quick sense of activity or traction. +- **Search Entry Zone** – A smaller section with floating particles and a “Find House” action, hinting at exploration flow. +- **Core Actions Cluster** – Centralized icons (home, user, search) representing browsing, identity, and discovery. +- **Radial Highlighting** – Each block uses a soft glow from the center to guide visual attention. +- **Split Composition** – A dominant left panel balanced with stacked, utility-driven cards on the right. +- **Accent-Driven UI** – Pink highlights used consistently for actions, focus points, and key data. diff --git a/src/data/contents/blocks/bento-2/demo.tsx b/src/data/contents/blocks/bento-2/demo.tsx new file mode 100644 index 00000000..c4f538e1 --- /dev/null +++ b/src/data/contents/blocks/bento-2/demo.tsx @@ -0,0 +1,9 @@ +import Bento2 from '.' + +const demo = () => { + return ( + + ) +} + +export default demo \ No newline at end of file diff --git a/src/data/contents/blocks/bento-2/index.tsx b/src/data/contents/blocks/bento-2/index.tsx new file mode 100644 index 00000000..8c4d96e0 --- /dev/null +++ b/src/data/contents/blocks/bento-2/index.tsx @@ -0,0 +1,1465 @@ +"use client"; + +import React from "react"; +import { AnimatePresence, motion } from "motion/react"; +import NumberFlow from "@number-flow/react"; +import { + Card, + CardHeader, + CardTitle, + CardDescription, + CardContent, +} from "@/components/base-ui/card"; + +const GLOBE_PHRASES = ["Find House", "Performance Market", "Handle Traffic"]; + +const Bento2 = () => { + return ( +
+ +
+
+ {/* Bento-1 */} + + + + A World of Properties Awaits + + + Utilize our dynamic platform to showcase your property in + stunning detail or dive into a curated marketplace. Every + listing is an opportunity waiting to be explored. + + + + + + + + {/* Bento-2 */} + + + + + + + Marketplace Synergy + + + Experience a frictionless journey from property management to + monetization. + + + +
+ +
+ {/* Bento-3 */} + + + + + + + Advanced Analytics + + + Stop reacting and start strategizing. Our predictive analytics + help you identify growth + + + + + {/* Bento-4 */} + + + + + + + Integrated Management Tools + + + Our comprehensive toolkit simplifies the complexities of + property ownership, automating routine tasks so you can focus on + growth + + + +
+
+
+ ); +}; + +export default Bento2; + +const Transforming = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const BARS = [ + { height: 70, value: 0.9 }, + { height: 107, value: 1.4 }, + { height: 160, value: 2.0 }, + { height: 125, value: 1.6 }, + { height: 145, value: 1.8 }, +]; + +const BAR_W = 28; +const BAR_GAP = 12; +const TOTAL_W = BARS.length * BAR_W + (BARS.length - 1) * BAR_GAP; +const MAX_H = Math.max(...BARS.map((b) => b.height)); +const TICKER_W = 60; + +const Graph = () => { + const [activeBar, setActiveBar] = React.useState(2); + + React.useEffect(() => { + const timer = setTimeout(() => { + setActiveBar((prev) => (prev + 1) % BARS.length); + }, 1500); + return () => clearTimeout(timer); + }, [activeBar]); + + const barLeft = (i: number) => i * (BAR_W + BAR_GAP); + const barCenter = (i: number) => barLeft(i) + BAR_W / 2; + const tickerLeft = barCenter(activeBar) - TICKER_W / 2; + const tickerBottom = BARS[activeBar].height + 10; + + return ( +
+ {/* Bars */} + {BARS.map((bar, i) => ( +
+ {/* Gray base */} +
+ {/* Pink overlay */} + +
+ ))} + + {/* Static centered glow */} +
+ + {/* Ticker */} + + {/* Badge */} +
+ +
+ {/* Downward triangle pointer */} +
+ +
+ ); +}; + +const Globe = () => { + const basePillWidth = 119; + const [activePhrase, setActivePhrase] = React.useState(0); + + const [phraseWidths, setPhraseWidths] = React.useState(() => + GLOBE_PHRASES.map(() => basePillWidth) + ); + + React.useEffect(() => { + if (typeof document === "undefined") return; + + const canvas = document.createElement("canvas"); + const ctx = canvas.getContext("2d"); + if (!ctx) return; + + ctx.font = "700 15px Inter, sans-serif"; + const measuredWidths = GLOBE_PHRASES.map((phrase) => + Math.max(90, Math.ceil(ctx.measureText(phrase).width) + 34) + ); + + setPhraseWidths(measuredWidths); + }, []); + + const currentPillWidth = phraseWidths[activePhrase] ?? basePillWidth; + const currentPillX = (basePillWidth - currentPillWidth) / 2; + + React.useEffect(() => { + const interval = setInterval(() => { + setActivePhrase((prev) => (prev + 1) % GLOBE_PHRASES.length); + }, 2400); + + return () => clearInterval(interval); + }, []); + + return ( + + + + + + + + + + + + + + + + +
+ + + {GLOBE_PHRASES[activePhrase]} + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const Tools = () => { + const profileX = [0, -15, 20, -8, 0]; + const profileY = [0, -15, 18, 11, 0]; + const searchX = [0, 16, -15, 18, 0]; + const searchY = [0, 20, -15, 25, 0]; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/data/contents/blocks/bento-3/bento-3.mdx b/src/data/contents/blocks/bento-3/bento-3.mdx new file mode 100644 index 00000000..23166140 --- /dev/null +++ b/src/data/contents/blocks/bento-3/bento-3.mdx @@ -0,0 +1,29 @@ +--- +title: Bento-3 +slug: bento-3 +category: bento +description: >- + A workflow-focused bento layout highlighting tool access, activity tracking, + performance metrics, and team-level interactions in a structured grid. +image: 'https://assets.watermelon.sh/components/bento-3.webp' +video: 'https://assets.watermelon.sh/components/bento-3.mp4' +featured: false +comingSoon: false +dependencies: + - motion/react +install: + - 'npx shadcn@latest add https://registry.watermelon.sh/r/bento-3.json' +componentNumber: 1 +--- + +# Bento-3 + +A utility-driven bento layout built around workflows, combining quick access panels, live updates, and performance indicators. + +- **Access Hub Panel** – A primary block introducing “Smart Access Hub” with a layered menu (Table, Status, Position, Comments, Search). +- **Live Activity Feed** – A minimal stream section showing ongoing updates and team actions in real time. +- **Performance Metric Card** – A bold “+93.5%” indicator paired with supporting text for quick KPI visibility. +- **Toggle Interaction Block** – A small switch element with user context (Kyle), suggesting permission or state control. +- **User Selection List** – Selectable user entries with check states, hinting at assignment or filtering actions. +- **Update Timeline** – A compact feed of recent actions (Leo, Raj, Mia) showing chronological workflow events. +- **Structured Grid Layout** – Balanced distribution of large and small cards, prioritizing access, updates, and control. \ No newline at end of file diff --git a/src/data/contents/blocks/bento-3/demo.tsx b/src/data/contents/blocks/bento-3/demo.tsx new file mode 100644 index 00000000..a915c0fd --- /dev/null +++ b/src/data/contents/blocks/bento-3/demo.tsx @@ -0,0 +1,9 @@ +import Bento3 from '.' + +const demo = () => { + return ( + + ) +} + +export default demo \ No newline at end of file diff --git a/src/data/contents/blocks/bento-3/index.tsx b/src/data/contents/blocks/bento-3/index.tsx new file mode 100644 index 00000000..a908dbac --- /dev/null +++ b/src/data/contents/blocks/bento-3/index.tsx @@ -0,0 +1,744 @@ +"use client"; +import React from "react"; +import { AnimatePresence, motion, useInView } from "motion/react"; +import { + Card, + CardHeader, + CardTitle, + CardDescription, + CardContent, + CardFooter, +} from "@/components/base-ui/card"; + +const CARD6_FEED = [ + { + id: "alice", + name: "Alice g.", + message: "Alice successfully participated in the Team", + date: "13.10.2025 Tuesday", + }, + { + id: "raj", + name: "Raj g.", + message: "Raj successfully participated in the Team", + date: "13.10.2025 Tuesday", + }, + { + id: "shane", + name: "Shane p.", + message: "Shane successfully participated in the Team", + date: "13.10.2025 Tuesday", + }, + { + id: "mia", + name: "Mia r.", + message: "Mia completed a customer feedback sync", + date: "14.10.2025 Wednesday", + }, + { + id: "leo", + name: "Leo t.", + message: "Leo updated the sprint delivery timeline", + date: "14.10.2025 Wednesday", + }, +] as const; + +type Card6FeedItem = (typeof CARD6_FEED)[number]; +type Card6VisibleEntry = { + key: number; + item: Card6FeedItem; +}; + +const CARD3_TARGET_TENTHS = 936; +const CARD3_DURATION_SECONDS = 4.2; + +const buildDigitTrack = (steps: number) => + Array.from({ length: steps + 1 }, (_, index) => index % 10); + +const CARD3_TENS_STEPS = Math.floor(CARD3_TARGET_TENTHS / 100); +const CARD3_ONES_STEPS = Math.floor(CARD3_TARGET_TENTHS / 10); +const CARD3_DECIMAL_STEPS = CARD3_TARGET_TENTHS; + +const CARD3_TENS_TRACK = buildDigitTrack(CARD3_TENS_STEPS); +const CARD3_ONES_TRACK = buildDigitTrack(CARD3_ONES_STEPS); +const CARD3_DECIMAL_TRACK = buildDigitTrack(CARD3_DECIMAL_STEPS); + +const CARD5_USERS = [ + { id: "alice", name: "Alice g.", email: "alice@gmail.com" }, + { id: "park", name: "Park k.", email: "alice@gmail.com" }, + { id: "leon", name: "Leon k.", email: "alice@gmail.com" }, +] as const; + +const MotionCard = motion(Card); + +const Bento3 = () => { + const [isCard4On, setIsCard4On] = React.useState(false); + const card4Name = isCard4On ? "Mia" : "Kyle"; + const [card2SwapIndex, setCard2SwapIndex] = React.useState(0); + const card3Ref = React.useRef(null); + const isCard3InView = useInView(card3Ref, { once: true, amount: 0.6 }); + const [card5CheckedCount, setCard5CheckedCount] = React.useState(0); + + const card2Cards = [ + { id: "think", label: "Think" }, + { id: "analyze", label: "Analyze" }, + { id: "record", label: "Record" }, + { id: "status", label: "Status" }, + { id: "write", label: "Write" }, + { id: "host", label: "Host" }, + ] as const; + + const card2SwapOrder = ["think", "analyze", "write", "host", "status"] as const; + + const card2Slots = { + think: { x: -138, y: -92 }, + analyze: { x: 138, y: -92 }, + record: { x: 0, y: -44 }, + status: { x: 0, y: 90 }, + write: { x: -138, y: 44 }, + host: { x: 138, y: 44 }, + } as const; + + React.useEffect(() => { + const intervalId = setInterval(() => { + setCard2SwapIndex((prev) => (prev + 1) % card2SwapOrder.length); + }, 1800); + + return () => clearInterval(intervalId); + }, [card2SwapOrder.length]); + + const getCard2SlotId = (cardId: (typeof card2Cards)[number]["id"]) => { + const currentSwapTarget = card2SwapOrder[card2SwapIndex]; + + if (cardId === "record") return currentSwapTarget; + if (cardId === currentSwapTarget) return "record"; + return cardId; + }; + + const [card6VisibleEntries, setCard6VisibleEntries] = React.useState(() => [ + { key: 0, item: CARD6_FEED[0] }, + { key: 1, item: CARD6_FEED[1] }, + { key: 2, item: CARD6_FEED[2] }, + ]); + const card6CursorRef = React.useRef(3); + const card6KeyRef = React.useRef(3); + + React.useEffect(() => { + const intervalId = setInterval(() => { + setCard6VisibleEntries((prev) => { + const nextItem = CARD6_FEED[card6CursorRef.current % CARD6_FEED.length]; + card6CursorRef.current += 1; + + const nextKey = card6KeyRef.current; + card6KeyRef.current += 1; + + return [prev[1], prev[2], { key: nextKey, item: nextItem }]; + }); + }, 1800); + + return () => clearInterval(intervalId); + }, []); + + React.useEffect(() => { + const hasCompletedCycle = card5CheckedCount >= CARD5_USERS.length; + + const timeoutId = setTimeout(() => { + if (hasCompletedCycle) { + // Reset all checks together before starting the next loop. + setCard5CheckedCount(0); + return; + } + + setCard5CheckedCount((prev) => Math.min(prev + 1, CARD5_USERS.length)); + }, hasCompletedCycle ? 1100 : 800); + + return () => clearTimeout(timeoutId); + }, [card5CheckedCount]); + + return ( +
+ {/* Back */} + + {/* + Layout structure (nested flex for per-row column control): + Row 1: [Card1 (wide)] [Card2 (narrower)] + Rows 2-3: [Left section] [Right: Card5 spanning full height] + Left section Row A: [Card3 (wider)] [Card4 (narrower)] + Left section Row B: [Card6 (equal)] [Card7 (equal)] + */} +
+ {/* ===== ROW 1 ===== */} +
+ {/* Card 1 - Your Workflow, Accelerated (wider) */} + +
+ {/* Left content */} + + + + Your Workflow, Accelerated. + + + Smart Access Hub + + + Your most-used tools, intelligently organized. Spend less time + searching and more time doing. + + + + {/* Right floating menu card */} + +

Table

+

Status

+

Position

+

Comments

+

+ Active Search +

+ + + + + {/* Card 2 - Live Activity Stream (Think, Analyze, Record, Write, Host) */} + +
+ + {/* Labels and circles arrangement */} + {/* Top row labels */} + + {card2Cards.map((card) => { + const slotId = getCard2SlotId(card.id); + const slot = card2Slots[slotId]; + + return ( + + + {card.label} + + + ); + })} + + + {/* Bottom text */} + + + Live Activity Stream + + + See important updates from your team as they happen. + + + +
+ + {/* ===== ROWS 2-3 wrapper ===== */} +
+ {/* Left section (rows 2 and 3 stacked) */} +
+ {/* Row 2: Success Metric + Kyle */} +
+ {/* Card 3 - Success Metric (+93.6%) — wider */} +
+ +
+ + {/* Big percentage */} +
+ + + + + . + + % +
+ + {/* Text content */} + + + Success Metric + + + Key performance indicators, visualized. + + + +
+ + {/* Card 4 - Kyle avatar — narrower */} + +
+ setIsCard4On((prev) => !prev)} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + setIsCard4On((prev) => !prev); + } + }} + className={`w-18 h-10 rounded-full border relative`} + animate={{ + backgroundColor: isCard4On + ? "#4488FF" + : "rgba(217, 217, 217, 0.1)", + borderColor: isCard4On ? "#5BA6FF" : "#3A3A3A", + }} + transition={{ duration: 0.45, ease: "easeInOut" }} + > + + + + + + + + +
+ + + {card4Name} + + +
+ + + +
+ + {/* Row 3: Activity Timeline + Work From Anywhere (EQUAL width) */} +
+ {/* Card 6 - Live Activity Stream (Timeline) */} + +
+ + {/* Activity entries */} + + + {card6VisibleEntries.map(({ key, item }, index) => ( + +
+ +
+
+

+ {item.name} +

+

+ {item.message} +

+

+ {item.date} +

+
+ + ))} + + + + {/* Bottom text */} + + + Live Activity Stream + + + See important updates from your team as they happen. + + + + + {/* Card 7 - Work From Anywhere (Phone mockup) */} + +
+ + {/* Phone mockup */} + + + + + + + + + + {/* Bottom text */} + + + Work From Anywhere. + + + Manage your pipeline on the go. Get the native app for iOS + and Android. + + + +
+
+ + {/* Right section: Card 5 - User Management (spans full height of rows 2-3) */} + +
+ + {/* Top tags */} + +
+ + Change + + + Edit users + +
+ +
+ Current Date +
+
+ Current Day +
+ + + {/* User list */} + + {CARD5_USERS.map((user, index) => { + const isChecked = index < card5CheckedCount; + + return ( +
+ + + + + + + +

+ + {user.name} + + +

+

+ + {user.email} + + +

+ +
+ ); + })} + + + {/* Keyboard */} + + + + +
+
+
+ ); +}; + +export default Bento3; + +/* ============================ + SUB-COMPONENTS + ============================ */ + +const BullseyeIcon = ({ className }: { className?: string }) => { + return ( + + + + + + + + + + + + + + + + + + + + + ); +}; + +const PhoneMockup = () => { + return ( + Phone Mockup + ); +}; + +const KeyboardGraphic = () => { + return ( + Keyboard Graphic + ); +}; + +const Arrow = () => { + return ( + + + + ); +}; + +const RollingDigit = ({ + steps, + track, + shouldStart, + durationSeconds, +}: { + steps: number; + track: number[]; + shouldStart: boolean; + durationSeconds: number; +}) => { + return ( + + + {track.map((value, index) => ( + + {value} + + ))} + + + ); +}; diff --git a/src/data/contents/blocks/bento-4/bento-4.mdx b/src/data/contents/blocks/bento-4/bento-4.mdx new file mode 100644 index 00000000..5c287ddf --- /dev/null +++ b/src/data/contents/blocks/bento-4/bento-4.mdx @@ -0,0 +1,29 @@ +--- +title: Bento-4 +slug: bento-4 +category: bento +description: >- + A prompt-focused bento layout built around a central hero, surrounded by + usage stats, creation tools, and guided prompt utilities. +image: 'https://assets.watermelon.sh/components/bento-4.webp' +video: 'https://assets.watermelon.sh/components/bento-4.mp4' +featured: false +comingSoon: false +dependencies: + - motion/react +install: + - 'npx shadcn@latest add https://registry.watermelon.sh/r/bento-4.json' +componentNumber: 1 +--- + +# Bento-4 + +A prompt-centric bento layout where a dominant central block is supported by surrounding stats, actions, and utility cards. + +- **Central Prompt Core** – A large hero block (“Master AI Prompting”) with a circular cutout, acting as the visual anchor of the layout. +- **Usage Metrics** – Highlighted stats like “17M+ prompts crafted” and “21K users” placed in isolated cards for quick scanning. +- **Trial Entry Block** – A dedicated section promoting onboarding with “10 days free trial” and pricing context. +- **Creation Trigger** – A prominent “Create” button placed in its own card to emphasize primary action. +- **Prompt Utilities** – Supporting cards like “Branching paths” and “Precision booster” describing how prompts can be refined. +- **Template Access Panel** – A block offering formats (JPG, PNG, PDF) and quick actions like rewrite and trial entry. +- **Accent-Driven Layout** – Strong orange tones used to highlight hierarchy, especially around the central core and key metrics. diff --git a/src/data/contents/blocks/bento-4/demo.tsx b/src/data/contents/blocks/bento-4/demo.tsx new file mode 100644 index 00000000..4e7db5fb --- /dev/null +++ b/src/data/contents/blocks/bento-4/demo.tsx @@ -0,0 +1,9 @@ +import Bento4 from '.' + +const demo = () => { + return ( + + ) +} + +export default demo \ No newline at end of file diff --git a/src/data/contents/blocks/bento-4/index.tsx b/src/data/contents/blocks/bento-4/index.tsx new file mode 100644 index 00000000..ed77c2b0 --- /dev/null +++ b/src/data/contents/blocks/bento-4/index.tsx @@ -0,0 +1,1844 @@ +"use client"; +import React, { useRef, useEffect } from "react"; +import { motion } from "motion/react"; +import Matter from "matter-js"; +import { + Card, + CardHeader, + CardTitle, + CardDescription, + CardContent, + CardFooter, +} from "@/components/base-ui/card"; + +const Bento4 = () => { + return ( +
+ + {/* Bento Grid Container */} +
+
+ {/* Card 1 */} + + + + + Perfect Prompts, Instantly + + + + + + 10 days free trial + + + then – $5/month + + + + + {/* Card 2 */} + +
+ +
+ + IdeaFlow +
+ + Master AI Prompting. + + + +
+ + + {/* Card 3 */} + + + + + + + {/* Card 4 */} + + + 17M+ + + + + prompts crafted + + + + {/* Card 5 */} + + + + 21K + + + satisfied users + + + +
+
+ +
+
+ + + + {/* Card 6 */} + +
+
+ {/* Hidden SVG definitions */} + + + + + + + + + {/* Clipped container */} +
+ + + {/* Decorative lines */} + +
+
+ + } + /> + + + + Branching paths + + + Discover ideas through multiple prompt routes. + + +
+ + + {/* Card 7 */} + +
+
+ {/* Hidden SVG definitions */} + + + + + + + + + {/* Clipped container */} +
+ + + {/* Decorative lines */} + +
+
+ + } + /> + + + + Precision booster + + + Sharpen every prompt with keyword boosts. + + +
+ + + {/* Card 8 */} + + + + Prompt templates + + + Start faster with ready-to-use templates. + + + + + + + + + {/* Card 9 */} + + + + + +
+
+
+ ); +}; + +export default Bento4; + +const TinyStarIcon = ({ className }: { className?: string }) => { + return ( + + ); +}; + +const CardThreeToggle = () => { + const [enabled, setEnabled] = React.useState(false); + + return ( + + ); +}; + +type StarParticle = { + id: number; + angle: number; + distance: number; + rotate: number; + size: number; + delay: number; + duration: number; +}; + +const makeStarParticles = (count: number): StarParticle[] => { + return Array.from({ length: count }, (_, index) => ({ + id: index, + angle: Math.random() * Math.PI * 2, + distance: 60 + Math.random() * 54, + rotate: -180 + Math.random() * 360, + size: 20 + Math.random() * 10, + delay: Math.random() * 0.08, + duration: 0.7 + Math.random() * 0.45, + })); +}; + +const CardNineCTA = ({ compact = false }: { compact?: boolean }) => { + const [bursts, setBursts] = React.useState< + Array<{ id: number; particles: StarParticle[] }> + >([]); + const burstIdRef = React.useRef(0); + const lastTriggerAtRef = React.useRef(0); + + const triggerConfetti = () => { + const now = Date.now(); + // Guard against duplicate click events emitted in very quick succession. + if (now - lastTriggerAtRef.current < 220) { + return; + } + lastTriggerAtRef.current = now; + + const id = burstIdRef.current + 1; + burstIdRef.current = id; + + // Keep only one active burst so every user action maps to exactly one burst. + setBursts([ + { + id, + particles: makeStarParticles(compact ? 12 : 16), + }, + ]); + + window.setTimeout(() => { + setBursts((previous) => previous.filter((burst) => burst.id !== id)); + }, 1600); + }; + + return ( +
+ + +
+ +
+ {bursts.map((burst) => + burst.particles.map((particle) => { + const x = Math.cos(particle.angle) * particle.distance; + const y = Math.sin(particle.angle) * particle.distance; + + return ( + + + + ); + }), + )} +
+
+ ); +}; + +// GravityStack – matter-js physics, each item falls and stacks on the one below +const GravityStack = () => { + const stackRef = useRef(null); + const itemRef0 = useRef(null); + const itemRef1 = useRef(null); + const itemRef2 = useRef(null); + const itemRef3 = useRef(null); + const itemRef4 = useRef(null); + + useEffect(() => { + const container = stackRef.current; + if (!container) return; + + let animId = 0; + const { Engine, Runner, Bodies, Body, Composite, World } = Matter; + + const W = container.clientWidth; + const H = container.clientHeight; + const randomInRange = (min: number, max: number) => + min + Math.random() * (max - min); + const eventCleanup: Array<() => void> = []; + + const engine = Engine.create({ gravity: { x: 0, y: 1.35 } }); + const runner = Runner.create(); + + // Static boundaries + const ground = Bodies.rectangle(W / 2, H + 28, W * 2, 56, { + isStatic: true, + friction: 0.95, + }); + const wallL = Bodies.rectangle(-25, H / 2, 50, H * 3, { isStatic: true }); + const wallR = Bodies.rectangle(W + 25, H / 2, 50, H * 3, { + isStatic: true, + }); + Composite.add(engine.world, [ground, wallL, wallR]); + + type Synced = { + body: ReturnType; + el: HTMLDivElement; + w: number; + h: number; + }; + const synced: Synced[] = []; + let activeInteraction: { body: ReturnType; pointerId: number } | null = null; + + const getLocalPoint = (event: PointerEvent) => { + const rect = container.getBoundingClientRect(); + return { + x: event.clientX - rect.left, + y: event.clientY - rect.top, + }; + }; + + const handlePointerMove = (event: PointerEvent) => { + if ( + !activeInteraction || + activeInteraction.pointerId !== event.pointerId + ) { + return; + } + + const { body } = activeInteraction; + const point = getLocalPoint(event); + const deltaX = point.x - body.position.x; + const deltaY = point.y - body.position.y; + const clamp = (value: number, limit: number) => + Math.max(-limit, Math.min(limit, value)); + + Body.applyForce(body, body.position, { + x: clamp(deltaX * 0.000012, 0.0009), + y: clamp(deltaY * 0.00001, 0.0007), + }); + Body.setAngularVelocity( + body, + body.angularVelocity + clamp(deltaX * 0.00015, 0.025), + ); + }; + + const releaseInteraction = (event: PointerEvent) => { + if ( + !activeInteraction || + activeInteraction.pointerId !== event.pointerId + ) { + return; + } + activeInteraction = null; + }; + + window.addEventListener("pointermove", handlePointerMove); + window.addEventListener("pointerup", releaseInteraction); + window.addEventListener("pointercancel", releaseInteraction); + eventCleanup.push(() => + window.removeEventListener("pointermove", handlePointerMove), + ); + eventCleanup.push(() => + window.removeEventListener("pointerup", releaseInteraction), + ); + eventCleanup.push(() => + window.removeEventListener("pointercancel", releaseInteraction), + ); + + const itemRefs = [itemRef0, itemRef1, itemRef2, itemRef3, itemRef4]; + itemRefs.forEach((ref, i) => { + const el = ref.current; + if (!el) return; + const w = el.offsetWidth; + const h = el.offsetHeight; + const minX = w / 2 + 12; + const maxX = W - w / 2 - 12; + const startX = randomInRange(minX, Math.max(minX, maxX)); + const startY = -(50 + i * 62); + const startAngle = randomInRange(-0.26, 0.26); + + const body = Bodies.rectangle(startX, startY, w, h, { + restitution: 0.08, + friction: 0.88, + frictionStatic: 1, + frictionAir: 0.018, + chamfer: { radius: Math.min(18, h / 2) }, + }); + Body.setPosition(body, { x: startX, y: startY }); + Body.setAngle(body, startAngle); + Body.setAngularVelocity(body, randomInRange(-0.018, 0.018)); + + // Initially position DOM element + el.style.position = "absolute"; + el.style.left = `${startX - w / 2}px`; + el.style.top = `${startY - h / 2}px`; + el.style.transform = `rotate(${startAngle}rad)`; + el.style.transformOrigin = "center"; + el.style.cursor = "grab"; + + Composite.add(engine.world, body); + synced.push({ body, el, w, h }); + + const handlePointerDown = (event: PointerEvent) => { + activeInteraction = { body, pointerId: event.pointerId }; + el.style.cursor = "grabbing"; + Body.applyForce(body, body.position, { + x: randomInRange(-0.0004, 0.0004), + y: -0.00035, + }); + }; + + const handlePointerRelease = (event: PointerEvent) => { + if (activeInteraction?.pointerId === event.pointerId) { + el.style.cursor = "grab"; + } + }; + + el.addEventListener("pointerdown", handlePointerDown); + el.addEventListener("pointerup", handlePointerRelease); + el.addEventListener("pointercancel", handlePointerRelease); + eventCleanup.push(() => + el.removeEventListener("pointerdown", handlePointerDown), + ); + eventCleanup.push(() => + el.removeEventListener("pointerup", handlePointerRelease), + ); + eventCleanup.push(() => + el.removeEventListener("pointercancel", handlePointerRelease), + ); + }); + + Runner.run(runner, engine); + + const sync = () => { + synced.forEach(({ body, el, w, h }) => { + el.style.left = `${body.position.x - w / 2}px`; + el.style.top = `${body.position.y - h / 2}px`; + el.style.transform = `rotate(${body.angle}rad)`; + }); + animId = requestAnimationFrame(sync); + }; + sync(); + + return () => { + Runner.stop(runner); + cancelAnimationFrame(animId); + eventCleanup.forEach((dispose) => dispose()); + World.clear(engine.world, false); + Engine.clear(engine); + }; + + }, []); + + return ( +
+
+ 10 days trial +
+
+ +

Rewrite

+
+
+ +
+
+ +

JPG

+ +

PNG

+ +

PDF

+
+
+ +
+
+ ); +}; + +const Icon = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const Icon2 = ({ className }: { className?: string }) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const PictureIcon = ({ className }: { className?: string }) => { + return ( + + + + + ); +}; + +const MagicStar = () => { + return ( + + + + + ); +}; + +const Star = ({ + className, + style, +}: { + className?: string; + style?: React.CSSProperties; +}) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const Gift = ({ className }: { className?: string }) => { + return ( + + + + + + + + + + + + ); +}; + +const Camera = ({ className }: { className?: string }) => { + return ( + + + + + + + + + + + + + + ); +}; + +const CurvedCard = ({ className }: { className?: string }) => { + const idBase = React.useId().replace(/:/g, ""); + const notchArcId = `${idBase}-curved-notch-arc`; + const notchFadeId = `${idBase}-curved-notch-fade`; + + return ( + + + + + + + + + {/* Base Shape */} + + + {/* Gradient Overlay */} + + + + + ); +}; + +const buildBinaryRibbon = (seed: number, groups: number, bitsPerGroup = 4) => { + let value = seed >>> 0; + + return Array.from({ length: groups }, () => { + let chunk = ""; + + for (let index = 0; index < bitsPerGroup; index += 1) { + value = (value * 1664525 + 1013904223) >>> 0; + chunk += ((value >>> 31) & 1).toString(); + } + + return chunk; + }).join(" "); +}; + +const MAIN_BINARY_RIBBON = buildBinaryRibbon(0x51f4, 19); +const CURVED_CARD_BINARY_RIBBON = buildBinaryRibbon(0xc18d, 15); + +const mutateBinaryText = (value: string) => { + return value + .split("") + .map((character) => { + if (character !== "0" && character !== "1") { + return character; + } + + // Flip each bit independently with a random chance per tick. + if (Math.random() < 0.28) { + return character === "0" ? "1" : "0"; + } + + return character; + }) + .join(""); +}; + +const BinaryRibbon = ({ + pathId, + pathD, + fadeId, + gradientStart, + gradientEnd, + activeColor, + text, + fontSize, + fontWeight, + letterSpacing, + startOffset = "50%", + dy = 0, +}: { + pathId: string; + pathD: string; + fadeId: string; + gradientStart: number; + gradientEnd: number; + activeColor: string; + text: string; + fontSize: number; + fontWeight: string | number; + letterSpacing: number; + startOffset?: string; + dy?: number | string; +}) => { + const [animatedText, setAnimatedText] = React.useState(text); + + React.useEffect(() => { + setAnimatedText(text); + + const intervalId = window.setInterval(() => { + setAnimatedText((current) => mutateBinaryText(current)); + }, 150); + + return () => window.clearInterval(intervalId); + }, [text]); + + return ( + <> + + + + + + + + + + + + + {animatedText} + + + + ); +}; + +const MainCurvedCard = ({ className }: { className?: string }) => { + const idBase = React.useId().replace(/:/g, ""); + const topArcId = `${idBase}-top-binary-arc`; + const topFadeId = `${idBase}-top-binary-fade`; + + return ( + + + + + + + + + + + + + ); +}; + +const Wire = ({ className }: { className?: string }) => { + return ( + + + + + ); +}; + +const MagicCapture = ({ className }: { className?: string }) => { + return ( + + + + + + + + + ); +}; + +const Barrel = ({ + className, + icon, + iconClassName, +}: { + className?: string; + icon?: React.ReactNode; + iconClassName?: string; +}) => { + return ( +
+
+
+ {icon} +
+ + + + + + + + + + + + + + + + + + + + + + + +
+
+ ); +}; + +const Branch = ({ className }: { className?: string }) => { + const travelPath = + "M 5 2 C 5 5 35 33 39.38 40 L 39.38 103 C 40 108 55 122 67.38 133"; + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +}; diff --git a/src/data/contents/blocks/bento-5/bento-5.mdx b/src/data/contents/blocks/bento-5/bento-5.mdx new file mode 100644 index 00000000..777fbad4 --- /dev/null +++ b/src/data/contents/blocks/bento-5/bento-5.mdx @@ -0,0 +1,28 @@ +--- +title: Bento-5 +slug: bento-5 +category: bento +description: >- + A three-block bento layout centered on cybersecurity themes, + highlighting protection, global connection, and performance. +image: 'https://assets.watermelon.sh/components/bento-5.webp' +video: 'https://assets.watermelon.sh/components/bento-5.mp4' +featured: false +comingSoon: false +dependencies: + - motion/react +install: + - 'npx shadcn@latest add https://registry.watermelon.sh/r/bento-5.json' +componentNumber: 1 +--- + +# Bento-5 + +A minimal three-card bento focused on cybersecurity onboarding, pairing symbolic visuals with short explanatory text. + +- **Shield Entry Card** – A centered shield icon with a glowing ring, introducing the “Begin Your Cyber Journey” message. +- **Global Network Panel** – A wide card with flowing connection lines, representing collaboration with cybersecurity experts. +- **Speed Indicator Block** – A radial gauge labeled “Fastest”, suggesting performance, response time, or system strength. +- **Consistent Visual Language** – Blue highlights used across all cards to unify meaning around security and trust. +- **Even Grid Structure** – Three equal-width cards arranged horizontally for balanced presentation. +- **Soft Glow Focus** – Each visual element uses a subtle halo to draw attention without overpowering the layout. \ No newline at end of file diff --git a/src/data/contents/blocks/bento-5/demo.tsx b/src/data/contents/blocks/bento-5/demo.tsx new file mode 100644 index 00000000..37896511 --- /dev/null +++ b/src/data/contents/blocks/bento-5/demo.tsx @@ -0,0 +1,9 @@ +import Bento5 from '.' + +const demo = () => { + return ( + + ) +} + +export default demo \ No newline at end of file diff --git a/src/data/contents/blocks/bento-5/index.tsx b/src/data/contents/blocks/bento-5/index.tsx new file mode 100644 index 00000000..155dfefb --- /dev/null +++ b/src/data/contents/blocks/bento-5/index.tsx @@ -0,0 +1,2349 @@ +"use client"; + +import { useState, useEffect } from "react"; +import { motion, AnimatePresence } from "motion/react"; +import { Card, CardContent, CardDescription ,CardFooter, CardTitle } from '@/components/base-ui/card'; + +const Bento5 = () => { + return ( +
+ +
+ {/* Box-1 */} +
+ +
+ +
+ + + Begin Your Cyber Journey + + + Step into the essential field of digital defense. We provide the + foundational knowledge and hands-on skills to start your career + with confidence. + + + +
+ + {/* Box-2 */} +
+ + + + +
+
+ + + Connect with Global Experts + + + You're not alone. Join a worldwide network of cybersecurity + professionals to exchange ideas, discuss emerging threats. + + + +
+ + {/* Box-3 */} +
+ + +
+ + + + + + + Begin Your Cyber Journey + + + Step into the essential field of digital defense. We provide the + foundational knowledge and hands-on skills to start your In a + world of evolving threats, your skills are your weapon.{" "} + + + +
+
+
+ ); +}; + +export default Bento5; + +const LOOPING_TEXTS = ["Advanced", "Fastest", "Performance"]; + +const LoopingText = () => { + const [index, setIndex] = useState(0); + + useEffect(() => { + const timer = setInterval(() => { + setIndex((prev) => (prev + 1) % LOOPING_TEXTS.length); + }, 1500); + return () => clearInterval(timer); + }, []); + + return ( +
+ + + {LOOPING_TEXTS[index]} + + +
+ ); +}; + +const One = ({ className }: { className?: string }) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const Two = ({ className }: { className?: string }) => { + const path1 = "M-34 0.891113C14.3787 25.5114 264.026 138.484 514 0.891113"; + const path2 = "M-35 200.891C13.3787 176.271 263.026 63.2987 513 200.891"; + const path3 = "M-118 17.8911C-54.7898 42.5114 271.392 155.484 598 17.8911"; + + return ( + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const FloatingDot = ({ + name, + pathType, + duration, + delay, +}: { + name: string; + pathType: "path1" | "path2" | "path3"; + duration: number; + delay: number; +}) => { + // Cubic Bezier interpolation: P(t) = (1-t)^3*P0 + 3(1-t)^2*t*P1 + 3(1-t)*t^2*P2 + t^3*P3 + const getBezierPoints = (p0: any, p1: any, p2: any, p3: any) => { + const pointsX = []; + const pointsY = []; + for (let t = 0; t <= 1; t += 0.1) { + const x = + Math.pow(1 - t, 3) * p0.x + + 3 * Math.pow(1 - t, 2) * t * p1.x + + 3 * (1 - t) * Math.pow(t, 2) * p2.x + + Math.pow(t, 3) * p3.x; + const y = + Math.pow(1 - t, 3) * p0.y + + 3 * Math.pow(1 - t, 2) * t * p1.y + + 3 * (1 - t) * Math.pow(t, 2) * p2.y + + Math.pow(t, 3) * p3.y; + pointsX.push(x); + pointsY.push(y); + } + return { x: pointsX, y: pointsY }; + }; + + const pathData = { + path1: getBezierPoints( + { x: -34, y: 0.89 }, + { x: 14.37, y: 25.51 }, + { x: 264.02, y: 138.48 }, + { x: 514, y: 0.89 }, + ), + path2: getBezierPoints( + { x: -35, y: 200.89 }, + { x: 13.37, y: 176.27 }, + { x: 263.02, y: 63.29 }, + { x: 513, y: 200.89 }, + ), + path3: getBezierPoints( + { x: -118, y: 17.89 }, + { x: -54.78, y: 42.51 }, + { x: 271.39, y: 155.48 }, + { x: 598, y: 17.89 }, + ), + }; + + const { x, y } = pathData[pathType]; + + return ( + + + + + + + + + {name} + + + + ); +}; + +const Three = ({ className }: { className?: string }) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/data/contents/blocks/bento-6/bento-6.mdx b/src/data/contents/blocks/bento-6/bento-6.mdx new file mode 100644 index 00000000..07d3f3cd --- /dev/null +++ b/src/data/contents/blocks/bento-6/bento-6.mdx @@ -0,0 +1,29 @@ +--- +title: Bento-6 +slug: bento-6 +category: bento +description: >- + A developer-focused bento layout combining documentation previews, + terminal feedback, and feature highlights across a structured grid. +image: 'https://assets.watermelon.sh/components/bento-6.webp' +video: 'https://assets.watermelon.sh/components/bento-6.mp4' +featured: false +comingSoon: false +dependencies: + - motion/react +install: + - 'npx shadcn@latest add https://registry.watermelon.sh/r/bento-6.json' +componentNumber: 1 +--- + +# Bento-6 + +A product-oriented bento layout that blends documentation, system feedback, and feature highlights into a unified view. + +- **Docs Preview Panel** – A sidebar-style block showing sections like Getting Started, API Reference, and User Guides. +- **Terminal Feedback Block** – A code-style panel displaying setup logs and running status (“listening on port 3000”). +- **Performance Card** – A large icon-led block emphasizing speed and efficiency. +- **Integration Cluster** – A central node surrounded by connected tool icons, representing ecosystem compatibility. +- **Conversion Focus Card** – A feature block highlighting user-to-customer flow. +- **Vertical Progress List** – A stacked list (developer, designer, product) aligned with a timeline-style indicator. +- **Payment Section** – A card introducing subscription and payment handling. \ No newline at end of file diff --git a/src/data/contents/blocks/bento-6/demo.tsx b/src/data/contents/blocks/bento-6/demo.tsx new file mode 100644 index 00000000..a94b5b31 --- /dev/null +++ b/src/data/contents/blocks/bento-6/demo.tsx @@ -0,0 +1,9 @@ +import Bento6 from '.' + +const demo = () => { + return ( + + ) +} + +export default demo \ No newline at end of file diff --git a/src/data/contents/blocks/bento-6/index.tsx b/src/data/contents/blocks/bento-6/index.tsx new file mode 100644 index 00000000..4ba22bef --- /dev/null +++ b/src/data/contents/blocks/bento-6/index.tsx @@ -0,0 +1,909 @@ +import React, { useState, useEffect } from "react"; +import { motion, AnimatePresence } from "motion/react"; +import { Card, CardContent, CardFooter } from "@/components/base-ui/card"; + +const Bento6 = () => { + return ( +
+ +
+
+ + + + + + +

+ Gorgeous out of the box +

+

+ Everything you need to start building fast. +

+ + + + {/* Card 2: Developer forward */} + + + + + + +

Developer forward

+

+ Built for developers with clean and flexible tools. +

+ + + + {/* Card 3: Build for performance */} + + + + + +

Build for performance

+

+ Fast, efficient, and optimized for scale and reliability. +

+ + + + {/* Card 4: Conversion as a priority */} + + + + + +

+ Conversion as a priority +

+

+ Designed to turn visitors into loyal customers. +

+ + + + {/* Card 5: Effortless funding */} + + + + + +

Effortless funding

+

+ Simple payments and subscription management for your business. +

+ + +
+
+ + {/* Background Subtle Effects */} +
+
+
+
+
+ ); +}; + +export default Bento6; + +const Card1 = () => { + const [activeTab, setActiveTab] = useState<"doc" | "api">("doc"); + + return ( +
+
+ + + +
+ +
+
+ +

+ Starter Kit +

+
+ + +
+ +
+ + +
+ +
+ + {activeTab === "doc" ? ( + +
+
+
+ +
+

+ Getting Started +

+
+
+
+ +
+

+ API Reference +

+
+
+
+ +
+

+ User Guides +

+
+
+ +
+
+

+ Get Started +

+
+

+ Introduction +

+

+ Gain control of your spending with intuitive tracking. +

+
+
+
+ + ) : ( + +
+
+
+ GET +
+

+ /v1/user/profile +

+
+
+
+ POST +
+

+ /v1/user/auth +

+
+
+
+ PUT +
+

+ /v1/user/update +

+
+
+ +
+
+ Response + 200 OK +
+
+ {"{"} +
+ "status":{" "} + "success", +
+
+ "data": {"{"} +
+ "id":{" "} + "usr_928", +
+
+ "email":{" "} + "malay@patel.com", +
+
+ "role":{" "} + "premium" +
+
{"}"}
+
+ {"}"} +
+
+ + )} + +
+
+ ); +}; + +const Icon = ({ className }: { className?: string }) => { + return ( + + + + ); +}; + +const Folder = ({ className }: { className?: string }) => { + return ( + + + + ); +}; + +const API = ({ className }: { className?: string }) => { + return ( + + + + + + + + ); +}; + +const Profile = ({ className }: { className?: string }) => { + return ( + + + + + + ); +}; + +const Card2 = () => { + const [sessionKey, setSessionKey] = useState(0); + + const terminalTemplates = [ + [ + { text: "➜ ~ pkg install @motion/core", color: "text-zinc-100" }, + { text: "added 124 packages in 2.1s", color: "text-zinc-500" }, + { text: "➜ ~ npx ui-pro@latest init", color: "text-zinc-100" }, + { + text: "✔ Configuration synced successfully", + color: "text-emerald-400", + }, + { text: "➜ ~ npm run dev:motion", color: "text-zinc-100" }, + { text: "▲ Ready - listening on port 3000", color: "text-sky-400" }, + ], + [ + { text: "λ /motion-app: git branch", color: "text-violet-400" }, + { text: "* main", color: "text-zinc-100" }, + { text: "λ /motion-app: motion deploy --prod", color: "text-violet-400" }, + { text: "⠋ Uploading assets to edge...", color: "text-zinc-500" }, + { text: "✔ Deployment successful (2.4s)", color: "text-amber-400" }, + { + text: "➜ https://motion.dev/prod-v42", + color: "text-zinc-100 underline decoration-amber-500/50", + }, + ], + ]; + + const currentLines = terminalTemplates[sessionKey % terminalTemplates.length]; + const isTemplateOne = sessionKey % 2 === 0; + + useEffect(() => { + const timer = setInterval(() => { + setSessionKey((prev) => prev + 1); + }, 3000); // 6s loop for readability + return () => clearInterval(timer); + }, []); + + const containerVariants = { + animate: { + transition: { + staggerChildren: 0.2, + delayChildren: 0.4, + }, + }, + } as const; + + const lineVariants = { + initial: { opacity: 0, y: 4 }, + animate: { + opacity: 1, + y: 0, + transition: { + duration: 0.25, + }, + }, + } as const; + + const cursorVariants = { + animate: { + opacity: [0, 1, 0], + transition: { + duration: 0.8, + repeat: Infinity, + ease: "linear" as const, + }, + }, + }; + + return ( +
+ {/* Header */} +
+
+
+
+
+
+
+ + {isTemplateOne ? "bash — setup" : "zsh — production"} + +
+
+ Card 2 +
+
+ + {/* Terminal Content */} +
+ + + {currentLines.map((line, i) => ( + + {line.text} + {i === currentLines.length - 1 && ( + + )} + + ))} + + +
+
+ ); +}; + +const Card3 = () => { + return ( + + ); +}; + +const Card5 = () => { + const items = [ + { title: "Developer forward", desc: "with intuitive tracking and tools." }, + { title: "Designer creative", desc: "enhanced user experience design." }, + { title: "Product strategic", desc: "seamless and rapid integration." }, + ]; + + return ( +
+ {/* Background Vertical Line */} +
+ + {/* Moving Spark on the line */} + + +
+ {items.map((item, i) => ( + + ))} +
+
+ ); +}; + +const TimelineItem = ({ + index, + title, + desc, +}: { + index: number; + title: string; + desc: string; +}) => { + const syncDelay = index * 2; + const syncDuration = 2.5; + + return ( +
+ {/* Node (Dot) */} +
+ + + {/* Subtle Outer Ring Pulse */} + +
+ + {/* Content Card */} +
+
+ + {title} + + + {desc} + +
+
+ ); +}; + +const GoogleCloudIcon = ({ className }: { className?: string }) => { + return ( + + + + + + + + + + + + + + ); +}; + +const ClineIcon = ({ className }: { className?: string }) => { + return ( + + + + + ); +}; + +const CloudfareIcon = ({ className }: { className?: string }) => { + return ( + + + + + + + + + + + + + ); +}; + +const FeatherlessIcon = ({ className }: { className?: string }) => { + return ( + + + + ); +}; + +const LumaIcon = ({ className }: { className?: string }) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const MoleculerIcon = ({ className }: { className?: string }) => { + return ( + + + + ); +}; + +const Card4 = () => { + const icons = [ + { component: GoogleCloudIcon, color: "#4285F4" }, + { component: ClineIcon, color: "#FFFFFF" }, + { component: LumaIcon, color: "#FFFFFF" }, + { component: MoleculerIcon, color: "#3cafce" }, + { component: CloudfareIcon, color: "#F4811F" }, + { component: FeatherlessIcon, color: "#ffe184" }, + ]; + + return ( +
+ {/* Background Orbit Paths */} +
+
+
+ + {/* Decorative Glow */} +
+
+ + {/* Main Center Icon with Pulsing Effect */} + + + + + {/* Orbiting Icons */} +
+ {icons.map((item, i) => ( + + ))} +
+
+ ); +}; + +const OrbitingElement = ({ + index, + total, + IconComponent, + color, +}: { + index: number; + total: number; + IconComponent: React.ComponentType<{ className?: string }>; + color: string; +}) => { + // Use a smaller radius on mobile to prevent overflow + const [radius, setRadius] = useState(105); + + useEffect(() => { + const updateRadius = () => { + setRadius(window.innerWidth < 640 ? 70 : 90); + }; + updateRadius(); + window.addEventListener("resize", updateRadius); + return () => window.removeEventListener("resize", updateRadius); + }, []); + + const initialAngle = (index / total) * 360; + const duration = 20; + + return ( + + + + + + ); +}; diff --git a/src/data/contents/blocks/bento-7/bento-7.mdx b/src/data/contents/blocks/bento-7/bento-7.mdx new file mode 100644 index 00000000..8fc04161 --- /dev/null +++ b/src/data/contents/blocks/bento-7/bento-7.mdx @@ -0,0 +1,28 @@ +--- +title: Bento-7 +slug: bento-7 +category: bento +description: >- + A three-block bento layout showcasing AI-assisted workflows, + a central intelligence hub, and system-level optimization. +image: 'https://assets.watermelon.sh/components/bento-7.webp' +video: 'https://assets.watermelon.sh/components/bento-7.mp4' +featured: false +comingSoon: false +dependencies: + - motion/react +install: + - 'npx shadcn@latest add https://registry.watermelon.sh/r/bento-7.json' +componentNumber: 1 +--- + +# Bento-7 + +A three-card bento layout built around AI-driven interactions, with each block centered on a single function and visual focus. + +- **AI Assist Module** – A compact toggle interface (A/B state with check) representing assisted decision or tool switching. +- **Cognito Core** – A hexagonal central unit connected with vertical signal lines, suggesting monitoring and internal processing. +- **System Engine Block** – A structured card element with layered UI pieces, representing coordinated system output. +- **Centered Composition** – Each card places a single object in focus, avoiding clutter and reinforcing clarity. +- **Soft Surface Styling** – Raised elements with subtle shadows and highlights, giving a tactile interface feel. +- **Signal-Based Detailing** – Thin lines and small nodes hint at data flow and system communication. \ No newline at end of file diff --git a/src/data/contents/blocks/bento-7/demo.tsx b/src/data/contents/blocks/bento-7/demo.tsx new file mode 100644 index 00000000..a538c65a --- /dev/null +++ b/src/data/contents/blocks/bento-7/demo.tsx @@ -0,0 +1,9 @@ +import Bento7 from '.' + +const demo = () => { + return ( + + ) +} + +export default demo \ No newline at end of file diff --git a/src/data/contents/blocks/bento-7/index.tsx b/src/data/contents/blocks/bento-7/index.tsx new file mode 100644 index 00000000..2fc7d738 --- /dev/null +++ b/src/data/contents/blocks/bento-7/index.tsx @@ -0,0 +1,905 @@ +"use client"; +import React from "react"; +import { motion } from "motion/react"; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/base-ui/card'; + +const Bento7 = () => { + const [status, setStatus] = React.useState<"loading" | "complete">("loading"); + + React.useEffect(() => { + const cycle = setInterval(() => { + setStatus((prev) => (prev === "loading" ? "complete" : "loading")); + }, 3000); + return () => clearInterval(cycle); + }, []); + + return ( +
+ + +
+ {/* card 1 */} + + +
+ + + +
+
+ +
+
+ +
+
+ +
+ A +
+
+ B +
+
+
+
+
+ + + + AI Driven Assist + + Enhance your design projects with AI tools for creativity and + efficiency.{" "} + + + + + {/* Card 2 */} + + + + + + Cognito Core + + The intelligent hub that unifies, monitors, and autonomously + tunes.{" "} + + + + + {/* Card 3 */} + + + + +
+
+ +
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+ + + + System Synergy Engine + + + A proactive AI unit that maximizes efficiency and resource + distribution.{" "} + + + +
+
+ ); +}; + +export default Bento7; + +const CheckIcon = ({ + className, + status, +}: { + className?: string; + status: "loading" | "complete"; +}) => { + return ( + + {status === "loading" ? ( + + + + + ) : ( + + )} + + ); +}; + +const Wires = ({ className }: { className?: string }) => { + return ( + + + + {[ + "M5.88318 39.5H57.0234L71.3923 24.5H92.8077", + "M96.5 62H83.9462L69.9154 45.5H0.948601", + "M95.0231 64.5H54.4077L40.3769 49.5L0.500003 50", + ].map((d, i) => ( + + + + + ))} + + + + + + + + + + + + + + + + ); +}; + +const Star = ({ className }: { className?: string }) => { + return ( + + + + + + + + + + + + + + ); +}; + +const StarIcon = ({ className }: { className?: string }) => { + return ( + + + + + ); +}; + +const Cognito = ({ className }: { className?: string }) => { + return ( + + + {[ + "M173.017 117L173.017 60.0005L188.017 43.9851L188.017 20.1159", + "M150.517 16.0005L150.517 29.9928L167.017 45.6313L167.017 122.5", + "M148.017 17.6466L148.017 62.9159L163.017 78.5543L162.517 123", + ].map((d, i) => ( + + ))} + + {[ + "M163.019 265L163.019 322L148.019 338.016L148.019 361.885", + "M185.519 366L185.519 352.008L169.019 336.37L169.019 259.5", + "M188.019 364.354L188.019 319.085L173.019 303.447L173.519 259", + ].map((d, i) => ( + + ))} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; \ No newline at end of file diff --git a/src/types/matter-js.d.ts b/src/types/matter-js.d.ts new file mode 100644 index 00000000..a5484906 --- /dev/null +++ b/src/types/matter-js.d.ts @@ -0,0 +1,4 @@ +declare module "matter-js" { + const Matter: any; + export default Matter; +} \ No newline at end of file From 1f300314748116821977ea03c0fa867e6e81b7e0 Mon Sep 17 00:00:00 2001 From: MeetPatel-2005 Date: Fri, 27 Mar 2026 02:19:23 +0530 Subject: [PATCH 2/5] fix:name convection --- src/data/contents/blocks/bento-14/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/data/contents/blocks/bento-14/index.tsx b/src/data/contents/blocks/bento-14/index.tsx index fc53ed4e..66172886 100644 --- a/src/data/contents/blocks/bento-14/index.tsx +++ b/src/data/contents/blocks/bento-14/index.tsx @@ -688,7 +688,7 @@ function PlayerCard() { ); } -const page = () => { +const Bento14 = () => { return (
@@ -704,4 +704,4 @@ const page = () => { ); }; -export default page; +export default Bento14; From abd5c4e2f0451c2accdb3adeeedd0d5674475340 Mon Sep 17 00:00:00 2001 From: MeetPatel-2005 Date: Fri, 27 Mar 2026 23:54:32 +0530 Subject: [PATCH 3/5] bento fixes --- src/data/contents/blocks/bento-1/index.tsx | 199 ++++++++++---------- src/data/contents/blocks/bento-14/index.tsx | 28 ++- src/data/contents/blocks/bento-16/index.tsx | 157 ++++++++------- src/data/contents/blocks/bento-6/index.tsx | 8 +- 4 files changed, 210 insertions(+), 182 deletions(-) diff --git a/src/data/contents/blocks/bento-1/index.tsx b/src/data/contents/blocks/bento-1/index.tsx index 571bb0b9..d8040b04 100644 --- a/src/data/contents/blocks/bento-1/index.tsx +++ b/src/data/contents/blocks/bento-1/index.tsx @@ -1,24 +1,25 @@ -"use client"; -import { motion } from "motion/react"; +'use client'; +import { motion } from 'motion/react'; import { Card, CardHeader, CardTitle, CardDescription, CardContent, -} from "@/components/base-ui/card"; +} from '@/components/base-ui/card'; +import { MdDesignServices, MdDeveloperMode } from 'react-icons/md'; const MotionCard = motion(Card); const Bento1 = () => { const buttonLinks = [ - "Design Workshops", - "Workshop", - "Trend Report", - "Asset library", - "Premium designers", - "Multillingual support", - "Design Workshops", + 'Design Workshops', + 'Workshop', + 'Trend Report', + 'Asset library', + 'Premium designers', + 'Multillingual support', + 'Design Workshops', ]; const circleRows = [ @@ -35,18 +36,17 @@ const Bento1 = () => { ]; return ( -
- -
+
+
{/* Row 1 - 3 Columns */} -
+
{/* Card 1 */} - -
- + +
+ Growth -
+
{[ { top: 52, bottom: 25 }, { top: 38, bottom: 18 }, @@ -67,11 +67,11 @@ const Bento1 = () => { ].map((b, i) => (
{b && (
{ {i === 0 && ( <> -
- +
+ Mar, 10 @@ -90,8 +90,8 @@ const Bento1 = () => { {i === 7 && ( <> -
- +
+ Mar, 12 @@ -99,8 +99,8 @@ const Bento1 = () => { {i === 13 && ( <> -
- +
+ Today @@ -110,39 +110,39 @@ const Bento1 = () => {
-
+
{/* Card 2 */} {/* Design Graphic */} - -
+ +
{/* Deep Back card */} -
-
+
+
-
- +
+ Pending
- + Research - + friday, 10:00
@@ -154,21 +154,23 @@ const Bento1 = () => { initial: { scale: 0.9, y: 0 }, hover: { scale: 1, y: 28 }, }} - transition={{ ease: "easeInOut", duration: 0.4 }} - className="absolute top-0 w-full bg-[#151515] rounded-[2rem] p-4 flex items-center gap-4 h-fit z-10 border border-white/5" + transition={{ ease: 'easeInOut', duration: 0.4 }} + className="absolute top-0 z-10 flex h-fit w-full items-center gap-4 rounded-[2rem] border border-white/5 bg-[#151515] p-4" > -
-
+
+ +
+
-
- +
+ Done
- + Development - + tuesday, 1:30
@@ -179,40 +181,41 @@ const Bento1 = () => { variants={{ initial: { opacity: 1, - filter: "blur(0px)", + filter: 'blur(0px)', scale: 1, y: 0, }, hover: { opacity: 0, - filter: "blur(12px)", + filter: 'blur(12px)', scale: 0.95, y: 10, }, }} - transition={{ duration: 0.4, ease: "easeInOut" }} - className="absolute top-7 w-full bg-[#151515] rounded-[2rem] p-4 flex gap-4 h-fit z-20 border border-white/5" + transition={{ duration: 0.4, ease: 'easeInOut' }} + className="absolute top-7 z-20 flex h-fit w-full gap-4 rounded-[2rem] border border-white/5 bg-[#151515] p-4" > -
+
+
-
- +
+ New
- + Modern Design - + monday, 12:30
{/* Dashed lines underneath */} -
+
{ - + Custom - made designs - + with more than expertise to make your vision come to reality @@ -317,17 +320,17 @@ const Bento1 = () => { - + - - + + Auto Scale Handling - + we are ready to meet you evolving nends. @@ -335,42 +338,42 @@ const Bento1 = () => {
{/* Row 2 - 2 Columns */} -
+
{/* Card 4 */} {/* Background Dark Circles pattern */} -
+
{circleRows.map((row, rowIdx) => (
{row.map(({ From, To, delay }, i) => (
@@ -381,12 +384,12 @@ const Bento1 = () => {
- + WorkFlow
Management - + Seamlessly manage all you existing apps. @@ -396,24 +399,24 @@ const Bento1 = () => { - + Team Collaboration
effortlessly - + Seamless connection and collab with other teams {/* Overlapping Rings UI */} - + {/* Ring 1 - Red */}
{ >
{/* Ring 2 - Purple */}
{ >
{/* Ring 3 - Green with Glow */}
{ >
{/* Ring 4 - Dark grey */}
{ initial: { x: 0, y: 0 }, hover: { x: -140, y: -25 }, }} - transition={{ type: "spring", bounce: 0.4, duration: 0.8 }} - className="absolute -bottom-13 right-8 z-10 flex flex-col items-center drop-shadow-lg" + transition={{ type: 'spring', bounce: 0.4, duration: 0.8 }} + className="absolute right-8 -bottom-13 z-10 flex flex-col items-center drop-shadow-lg" > { viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" - className="-rotate-12 -translate-x-1 transition-transform duration-300 group-hover:rotate-45" + className="-translate-x-1 -rotate-12 transition-transform duration-300 group-hover:rotate-45" > { strokeWidth="1.5" /> -
+
{ @@ -490,7 +493,7 @@ const Bento1 = () => {
-
+
@@ -498,14 +501,14 @@ const Bento1 = () => { {/* Row 3 - Tags */}
-
+
{buttonLinks.map((button, idx) => ( @@ -525,9 +528,9 @@ export default Bento1; const Graph = () => { const originalD = - "M1.86621 239L7.86621 226.5L15.3662 215.5L23.3662 205.5L31.3662 197.5L38.8662 192L48.3662 187L58.8662 183.5L67.3662 181.5L77.8662 179.5L87.8662 177L97.3662 172L103.866 166L108.866 159L111.866 151.5L112.866 144.5V137.5V134"; + 'M1.86621 239L7.86621 226.5L15.3662 215.5L23.3662 205.5L31.3662 197.5L38.8662 192L48.3662 187L58.8662 183.5L67.3662 181.5L77.8662 179.5L87.8662 177L97.3662 172L103.866 166L108.866 159L111.866 151.5L112.866 144.5V137.5V134'; const extensionD = - "M112.866 134 C113.366 119.667 124.866 98.8004 166.866 154 C208.866 209.2 220.2 117.5 220.866 64.5 C220.866 50 220.966 19.3 255.366 18.5 C289.766 17.7 280.7 -17.1667 271.866 -34.5"; + 'M112.866 134 C113.366 119.667 124.866 98.8004 166.866 154 C208.866 209.2 220.2 117.5 220.866 64.5 C220.866 50 220.966 19.3 255.366 18.5 C289.766 17.7 280.7 -17.1667 271.866 -34.5'; return ( - +
@@ -166,9 +166,9 @@ function UploadCard() {
- + Add Your File - + Powerful capabilities, simplified. Our advanced features are integrated with remarkably easy and seamless to master. @@ -358,8 +358,8 @@ function Card2() { const speakerRef = useRef(null); const containerRef = useRef(null); return ( - - + +
@@ -416,9 +424,9 @@ function Card2() {
- + Connected Hub - + A dedicated platform engineered to empower your creative vision, and global distribution. diff --git a/src/data/contents/blocks/bento-16/index.tsx b/src/data/contents/blocks/bento-16/index.tsx index c3fa0508..52d1c0f1 100644 --- a/src/data/contents/blocks/bento-16/index.tsx +++ b/src/data/contents/blocks/bento-16/index.tsx @@ -29,22 +29,22 @@ function PerformanceCard() { - - - + + + - + - - + + Build for performance @@ -147,7 +147,7 @@ function ProjectQualificationCard() { animate="show" className="col-span-12 lg:col-span-3" > - + Project qualification and verification @@ -158,7 +158,7 @@ function ProjectQualificationCard() { - + ); } function Card5() { + const [hovered, setHovered] = useState(false); + return ( setHovered(true)} + onHoverEnd={() => setHovered(false)} className="col-span-12 lg:col-span-6" > - + Tax liability optimize - -
- -
-
Tax credit
-
$100000
+ +
+
+
+
Tax credit
+
$100000
+
+
+
+
-
-
-
Tax saving
-
$1200000
+
+
+
+
Tax saving
+
$1200000
+
+
+
+
- -
-
- -
-
Paid
-
$500000
+
+
+
+
Paid
+
$500000
+
+
+
+
@@ -249,17 +262,17 @@ function Card5() { ); } -export default function Bento16() { - return ( - - - +function OngoingSupportCard() { + const [hovered, setHovered] = useState(false); - setHovered(true)} + onHoverEnd={() => setHovered(false)} className="col-span-12 md:col-span-6 lg:col-span-3" > - + Ongoing support @@ -267,34 +280,34 @@ export default function Bento16() { - -
+ +
- -
- + />
+ ); +} + +export default function Bento16() { + return ( + + + + - -
+ +
{ const [activeTab, setActiveTab] = useState<"doc" | "api">("doc"); return ( -
+
setActiveTab("api")} + onMouseLeave={() => setActiveTab("doc")} + >
@@ -132,7 +136,7 @@ const Card1 = () => { Documentation
-
+ Upload Icon +
Add your file @@ -389,7 +394,13 @@ function Card2() { />
-
+
+ Audio Waveform +
@@ -712,4 +723,4 @@ const Bento14 = () => { ); }; -export default Bento14; +export default Bento14; \ No newline at end of file diff --git a/src/data/contents/blocks/bento-16/index.tsx b/src/data/contents/blocks/bento-16/index.tsx index 52d1c0f1..a7a21eab 100644 --- a/src/data/contents/blocks/bento-16/index.tsx +++ b/src/data/contents/blocks/bento-16/index.tsx @@ -294,7 +294,13 @@ function OngoingSupportCard() { "conic-gradient(from 0deg, rgba(255,255,255,0.18) 0deg 90deg, transparent 60deg 360deg)", }} /> -
+
+ Support Agent +
diff --git a/src/data/contents/blocks/bento-3/index.tsx b/src/data/contents/blocks/bento-3/index.tsx index a908dbac..34e5a554 100644 --- a/src/data/contents/blocks/bento-3/index.tsx +++ b/src/data/contents/blocks/bento-3/index.tsx @@ -80,12 +80,12 @@ const Bento3 = () => { const [card5CheckedCount, setCard5CheckedCount] = React.useState(0); const card2Cards = [ - { id: "think", label: "Think" }, - { id: "analyze", label: "Analyze" }, - { id: "record", label: "Record" }, - { id: "status", label: "Status" }, - { id: "write", label: "Write" }, - { id: "host", label: "Host" }, + { id: "think", label: "Think", img: "https://assets.watermelon.sh/Cube.svg" }, + { id: "analyze", label: "Analyze", img: "https://assets.watermelon.sh/Compose.svg" }, + { id: "record", label: "Record", img: "https://assets.watermelon.sh/Closed%20Treasure%20Chest.svg" }, + { id: "status", label: "Status", img:"https://assets.watermelon.sh/Cube.svg" }, + { id: "write", label: "Write", img: "https://assets.watermelon.sh/Edit%20Chat%20History.svg" }, + { id: "host", label: "Host", img: "https://assets.watermelon.sh/Cloud%20Storage.svg" }, ] as const; const card2SwapOrder = ["think", "analyze", "write", "host", "status"] as const; @@ -228,7 +228,7 @@ const Bento3 = () => { return ( { mass: 0.8, }} > + {`${card.label} {card.label} diff --git a/src/data/contents/blocks/bento-4/index.tsx b/src/data/contents/blocks/bento-4/index.tsx index ed77c2b0..b1c83001 100644 --- a/src/data/contents/blocks/bento-4/index.tsx +++ b/src/data/contents/blocks/bento-4/index.tsx @@ -50,7 +50,7 @@ const Bento4 = () => { {/* Card 2 */} - +
@@ -65,6 +65,12 @@ const Bento4 = () => {
+ Decorative + {/* Card 3 */} { 21K - + satisfied users -
-
+
+ Profile-1 +
+
-
+
+ Profile-2 +
diff --git a/src/data/contents/blocks/bento-5/index.tsx b/src/data/contents/blocks/bento-5/index.tsx index 155dfefb..335672fa 100644 --- a/src/data/contents/blocks/bento-5/index.tsx +++ b/src/data/contents/blocks/bento-5/index.tsx @@ -33,11 +33,16 @@ const Bento5 = () => { {/* Box-2 */}
- +
+ Support Agent Connect with Global Experts From 33eedc9b19a69d3879e88b11b2eb4c65208e5633 Mon Sep 17 00:00:00 2001 From: Malay146 Date: Mon, 30 Mar 2026 23:30:23 +0530 Subject: [PATCH 5/5] minor fixes --- src/data/contents/blocks/bento-1/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/data/contents/blocks/bento-1/index.tsx b/src/data/contents/blocks/bento-1/index.tsx index d8040b04..5c5d648c 100644 --- a/src/data/contents/blocks/bento-1/index.tsx +++ b/src/data/contents/blocks/bento-1/index.tsx @@ -350,7 +350,7 @@ const Bento1 = () => { {circleRows.map((row, rowIdx) => (
{row.map(({ From, To, delay }, i) => (