From 218d264bcc3261f7f695fe10708f6d487314293e Mon Sep 17 00:00:00 2001 From: wtfdivyansh Date: Fri, 27 Mar 2026 00:24:05 +0530 Subject: [PATCH 1/5] feat:add bentos --- bun.lockb | Bin 425741 -> 425773 bytes .../contents/blocks/bento-10/bento-10.mdx | 23 + src/data/contents/blocks/bento-10/demo.tsx | 6 + src/data/contents/blocks/bento-10/index.tsx | 256 ++++++++ .../contents/blocks/bento-11/bento-11.mdx | 25 + src/data/contents/blocks/bento-11/demo.tsx | 6 + src/data/contents/blocks/bento-11/index.tsx | 558 ++++++++++++++++ .../contents/blocks/bento-12/bento-12.mdx | 24 + src/data/contents/blocks/bento-12/demo.tsx | 8 + src/data/contents/blocks/bento-12/index.tsx | 339 ++++++++++ .../contents/blocks/bento-13/bento-13.mdx | 25 + src/data/contents/blocks/bento-13/demo.tsx | 6 + src/data/contents/blocks/bento-13/index.tsx | 586 +++++++++++++++++ .../contents/blocks/bento-15/bento-15.mdx | 24 + src/data/contents/blocks/bento-15/demo.tsx | 6 + src/data/contents/blocks/bento-15/index.tsx | 600 ++++++++++++++++++ .../contents/blocks/bento-17/bento-17.mdx | 24 + src/data/contents/blocks/bento-17/demo.tsx | 6 + src/data/contents/blocks/bento-17/index.tsx | 514 +++++++++++++++ src/data/contents/blocks/bento-8/bento-8.mdx | 23 + src/data/contents/blocks/bento-8/demo.tsx | 6 + src/data/contents/blocks/bento-8/index.tsx | 506 +++++++++++++++ src/data/contents/blocks/bento-9/bento-9.mdx | 24 + src/data/contents/blocks/bento-9/demo.tsx | 6 + src/data/contents/blocks/bento-9/index.tsx | 344 ++++++++++ 25 files changed, 3945 insertions(+) create mode 100644 src/data/contents/blocks/bento-10/bento-10.mdx create mode 100644 src/data/contents/blocks/bento-10/demo.tsx create mode 100644 src/data/contents/blocks/bento-10/index.tsx create mode 100644 src/data/contents/blocks/bento-11/bento-11.mdx create mode 100644 src/data/contents/blocks/bento-11/demo.tsx create mode 100644 src/data/contents/blocks/bento-11/index.tsx create mode 100644 src/data/contents/blocks/bento-12/bento-12.mdx create mode 100644 src/data/contents/blocks/bento-12/demo.tsx create mode 100644 src/data/contents/blocks/bento-12/index.tsx create mode 100644 src/data/contents/blocks/bento-13/bento-13.mdx create mode 100644 src/data/contents/blocks/bento-13/demo.tsx create mode 100644 src/data/contents/blocks/bento-13/index.tsx create mode 100644 src/data/contents/blocks/bento-15/bento-15.mdx create mode 100644 src/data/contents/blocks/bento-15/demo.tsx create mode 100644 src/data/contents/blocks/bento-15/index.tsx create mode 100644 src/data/contents/blocks/bento-17/bento-17.mdx create mode 100644 src/data/contents/blocks/bento-17/demo.tsx create mode 100644 src/data/contents/blocks/bento-17/index.tsx create mode 100644 src/data/contents/blocks/bento-8/bento-8.mdx create mode 100644 src/data/contents/blocks/bento-8/demo.tsx create mode 100644 src/data/contents/blocks/bento-8/index.tsx create mode 100644 src/data/contents/blocks/bento-9/bento-9.mdx create mode 100644 src/data/contents/blocks/bento-9/demo.tsx create mode 100644 src/data/contents/blocks/bento-9/index.tsx diff --git a/bun.lockb b/bun.lockb index b858f82f37e6da8db32585a40d026e29b680825f..dc015bea4604f6fa20836d47e38c214089ac0bfb 100644 GIT binary patch delta 50677 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 diff --git a/src/data/contents/blocks/bento-10/bento-10.mdx b/src/data/contents/blocks/bento-10/bento-10.mdx new file mode 100644 index 00000000..3c534fc3 --- /dev/null +++ b/src/data/contents/blocks/bento-10/bento-10.mdx @@ -0,0 +1,23 @@ +--- +title: Bento 10 +slug: bento-10 +category: bento +description: A vibrant service marketplace bento layout featuring bold color blocks, + role-based listings, and quick action cards. Combining playful visuals with + structured information like pricing, availability, and profiles, it delivers + a highly scannable and engaging interface for discovering and connecting with + local service providers. +image: 'https://assets.watermelon.sh/components/bento-10.webp' +video: 'https://assets.watermelon.sh/components/bento-10.mp4' +featured: false +comingSoon: false +dependencies: + - motion/react + - lucide-react + - react-icons + - clsx + - tailwind-merge +install: + - 'npx shadcn@latest add https://registry.watermelon.sh/r/bento-10.json' +componentNumber: 5 +--- diff --git a/src/data/contents/blocks/bento-10/demo.tsx b/src/data/contents/blocks/bento-10/demo.tsx new file mode 100644 index 00000000..158d6c4a --- /dev/null +++ b/src/data/contents/blocks/bento-10/demo.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import BentoGrid10 from '.'; + +export default function BentoGrid10Demo() { + return ; +} diff --git a/src/data/contents/blocks/bento-10/index.tsx b/src/data/contents/blocks/bento-10/index.tsx new file mode 100644 index 00000000..a499902d --- /dev/null +++ b/src/data/contents/blocks/bento-10/index.tsx @@ -0,0 +1,256 @@ +'use client'; +import React from 'react'; +import { motion } from 'framer-motion'; +import { Card, CardContent } from '@/components/base-ui/card'; + +const container = { + hidden: { opacity: 0 }, + show: { + opacity: 1, + transition: { staggerChildren: 0.1 }, + }, +}; + +const item = { + hidden: { y: 20, opacity: 0 }, + show: { y: 0, opacity: 1 }, +}; + +export default function BentoGrid10() { + return ( + + + + + + +
+ Got a task in mind? +
+ + + +
+ + + +
+ + + + + + + + + +
+ $ + 165 +
+
+
+ Mechanic +
+

+ No surprises. See an estimated cost before the final price through + the app. +

+
+ + + + + + + + + + + + Brand idea + +

+ Right +
+ Skills for +
+ You +

+ + Welcome to Helper + + + + ); +} + +function BentoItem({ children, className }: { children?: React.ReactNode; className: string }) { + return ( + + + + {children} + + + + ); +} + +function WorkerCard({ name, rating, job }: { name: string; rating: string; job: string }) { + return ( +
+
+

+ {name} +

+

+ {rating} / {job} +

+
+ +
+ ); +} + +function TaskTag({ label, count }: { label: string; count: string }) { + return ( +
+ {label} + + {count} + +
+ ); +} + +function LogoIcon(props: React.SVGProps) { + return ( + + + + + + + ); +} + +function CalendarIcon(props: React.SVGProps) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/data/contents/blocks/bento-11/bento-11.mdx b/src/data/contents/blocks/bento-11/bento-11.mdx new file mode 100644 index 00000000..45282cac --- /dev/null +++ b/src/data/contents/blocks/bento-11/bento-11.mdx @@ -0,0 +1,25 @@ +--- +title: Bento 11 +slug: bento-11 +category: bento +description: A modern productivity-focused bento layout combining testimonials, task + scheduling, and data exploration into a unified interface. Featuring subtle + gradients, interactive charts, and real-time task controls, it delivers a + clean and functional experience for managing workflows, monitoring progress, + and collaborating across users in a dark, polished environment. +image: 'https://assets.watermelon.sh/components/bento-11.webp' +video: 'https://assets.watermelon.sh/components/bento-11.mp4' +featured: false +comingSoon: false +dependencies: + - motion/react + - lucide-react + - react-icons + - clsx + - tailwind-merge +install: + - 'npx shadcn@latest add https://registry.watermelon.sh/r/bento-11.json' +componentNumber: 5 +--- + + diff --git a/src/data/contents/blocks/bento-11/demo.tsx b/src/data/contents/blocks/bento-11/demo.tsx new file mode 100644 index 00000000..eb5ecdb2 --- /dev/null +++ b/src/data/contents/blocks/bento-11/demo.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import BentoGrid11 from '.'; + +export default function BentoGrid11Demo() { + return ; +} diff --git a/src/data/contents/blocks/bento-11/index.tsx b/src/data/contents/blocks/bento-11/index.tsx new file mode 100644 index 00000000..22c0ef13 --- /dev/null +++ b/src/data/contents/blocks/bento-11/index.tsx @@ -0,0 +1,558 @@ +'use client'; +import React from 'react'; +import { Card, CardContent, CardHeader } from '@/components/base-ui/card'; +import { Button } from '@/components/ui/button'; +import { Bell } from 'lucide-react'; +import { motion, type Transition, type Variants } from 'framer-motion'; +import { useState } from 'react'; + +import { + LineChart, + Line, + XAxis, + YAxis, + Tooltip, + ResponsiveContainer, +} from 'recharts'; + +function MailIcon(props: React.SVGProps) { + return ( + + + + + ); +} + +function CrownIcon(props: React.SVGProps) { + return ( + + + + ); +} +function CalendarAddIcon(props: React.SVGProps) { + return ( + + + + + ); +} + +function ShieldSmileIcon(props: React.SVGProps) { + return ( + + + + ); +} +const BentoCard = ({ + children, + className, +}: { + children: React.ReactNode; + className?: string; +}) => ( + + {children} + +); + +const reviews = [ + { + name: 'Sai Abhishek Mishra', + date: '11, Apr 2024', + location: 'Mumbai, India', + review: + 'Sanjay is a remarkable Product Designer, renowned for his exceptional UI skills and creating Awwwards-worthy websites. I highly recommend Sanjay for any Product Designer role that requires a talented and dedicated professional with a focus on UI skills.', + }, + { + name: 'Courtney Henry', + date: '11, Feb 2024', + location: 'Iceland', + review: + 'Courtney is a remarkable Product Designer, renowned for his exceptional UI skills and creating Awwwards-worthy websites. I highly recommend Sanjay for any Product Designer role that requires a talented and dedicated professional with a focus on UI skills', + }, +]; + +const containerVariants: Variants = { + initial: { y: 0 }, + hover: { y: -150 }, +}; + +const cardVariants: Variants = { + active: { x: 0, opacity: 1 }, + inactive: { x: 20, opacity: 0.8 }, +}; + +function ReviewsCard() { + const duplicated = [...reviews, ...reviews, ...reviews]; + const [active, setActive] = useState(0); + const [hovered, setHovered] = useState(false); + + return ( + + +
+ + + Testimonials + +
+ +

+ Reviews Showcase +

+ + +
{ + setHovered(true); + setActive((p) => (p + 1) % duplicated.length); + }} + onMouseLeave={() => { + setHovered(false); + setActive((p) => (p - 1 + duplicated.length) % duplicated.length); + }} + > +
+ +
+ + + {duplicated.map((review, i) => { + const state = i === active ? 'active' : 'inactive'; + + return ( + +
+
+ {review.name} +
+ +
+ {review.date} +
+
+ +
+ {review.location} +
+ +
+ +

+ {review.review} +

+ + ); + })} + +
+ + + ); +} + +function SchedulerCard() { + const size = 180; + const stroke = 6; + const radius = (size - stroke) / 2; + const circumference = 2 * Math.PI * radius; + const progress = 0.75; + const offset = circumference * (1 - progress); + + const container: Variants = { + hidden: {}, + show: { + transition: { + staggerChildren: 0.2, + delayChildren: 0, + }, + }, + }; + + const textItem: Variants = { + hidden: { + opacity: 0, + y: 10, + scale: 0.9, + filter: 'blur(4px)', + }, + show: { + opacity: 1, + y: 0, + scale: 1, + filter: 'blur(0px)', + transition: { + duration: 0.3, + ease: 'easeOut', + }, + }, + }; + + return ( + + +

+ Tasks Scheduler.{' '} + + Get your methods invoked at a certain time or intervals. + +

+ + +

+ The filler text we know today has been altered over the years. In fact + "Lorem" isn’t actually a word. It is suggested that the text starts + somewhere in classical Latin literature where there was a passage that + contained the word “Do-lorem”.contained the word “Do-lorem”.word word + +

+ +
+ + + + + + + +
+ + 09:16 + + + + + 11:51 + +
+ +
+ + + ); +} +const transition: Transition = { + duration: 0.7, + ease: [0.65, 0, 0.35, 1], +}; + +const user1: Variants = { + initial: { + x: 0, + y: 0, + }, + hover: { + x: 60, + y: -40, + transition, + }, +}; + +const user2: Variants = { + initial: { + x: 0, + y: 0, + }, + hover: { + x: -80, + y: 50, + transition, + }, +}; + +function CardTable() { + return ( + + + +

+ Multi-users.{' '} + + Each end-user has his own state enabling multi-user support. + +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CityStatus
New YorkCancelled
SingaporeIdle
IndiaActive
San RafaelProgress
+ + + + User 2 + + + + User 1 + + + + ); +} + +const data = [ + { day: 'MON', sales: 10 }, + { day: 'TUE', sales: 18 }, + { day: 'WED', sales: 35 }, + { day: 'THU', sales: 22 }, + { day: 'FRI', sales: 30 }, +]; + +function DatasetCard() { + return ( + + +

+ + Explore datasets with TalkToTaipy. + {' '} + + Leverage the LLM-based application to explore datasets using natural + languages. + +

+ + + +
+

+ Enter your prompt here +

+
+ plot sales by product in chart +
+
+
+

+ Sales by Product +

+ +
+ + + + + + + + +
+ +
+ MON + TUE + WED + THU + FRI +
+
+ + + ); +} + +const BentoGrid11 = () => { + return ( +
+
+ + + + + + +
+ +
+ +
+

Let's Work Together

+

+ Let's Make Magic Happen Together! +

+
+ + + + + + + + + + + +

+ Long jobs.{' '} + + Run heavy tasks in the background without slowing down + experience. + +

+ + + + + + + +
+
+ ); +}; + +export default BentoGrid11; diff --git a/src/data/contents/blocks/bento-12/bento-12.mdx b/src/data/contents/blocks/bento-12/bento-12.mdx new file mode 100644 index 00000000..14d7ade5 --- /dev/null +++ b/src/data/contents/blocks/bento-12/bento-12.mdx @@ -0,0 +1,24 @@ +--- +title: Bento 12 +slug: bento-12 +category: bento +description: + A high-performance fitness dashboard bento layout featuring bold data + visualizations, progress tracking, and motivational insights. With glowing + accent charts, dynamic activity metrics, and focused workout highlights, it + delivers an energetic and modern interface designed to keep users engaged, + informed, and consistently improving. +image: 'https://assets.watermelon.sh/components/bento-12.webp' +video: 'https://assets.watermelon.sh/components/bento-12.mp4' +featured: false +comingSoon: false +dependencies: + - motion/react + - lucide-react + - react-icons + - clsx + - tailwind-merge +install: + - 'npx shadcn@latest add https://registry.watermelon.sh/r/bento-12.json' +componentNumber: 5 +--- diff --git a/src/data/contents/blocks/bento-12/demo.tsx b/src/data/contents/blocks/bento-12/demo.tsx new file mode 100644 index 00000000..683fd36b --- /dev/null +++ b/src/data/contents/blocks/bento-12/demo.tsx @@ -0,0 +1,8 @@ +import React from 'react' +import BentoGrid12 from '.' + +export default function BentoGrid12Demo () { + return ( + + ) +} diff --git a/src/data/contents/blocks/bento-12/index.tsx b/src/data/contents/blocks/bento-12/index.tsx new file mode 100644 index 00000000..2fe388e4 --- /dev/null +++ b/src/data/contents/blocks/bento-12/index.tsx @@ -0,0 +1,339 @@ +'use client'; +import { motion, type Variants } from 'framer-motion'; +import { + Card, + CardHeader, + CardTitle, + CardDescription, + CardContent, +} from '@/components/base-ui/card'; +import { cn } from '@/lib/utils'; +import { useMemo } from 'react'; + +const BASE_DELAY = 0.3; + +const BentoCard = ({ + title, + description, + children, + className, + ...props +}: { + title?: React.ReactElement; + description?: React.ReactElement; + children?: React.ReactNode; + className?: string; +}) => ( + + {(title || description) && ( + + {title && {title}} + {description && ( + + {description} + + )} + + )} + + {children} + + +); + const dots = [ + { x: '50%', y: '10%' }, + { x: '50%', y: '90%' }, + { x: '-10%', y: '30%' }, + { x: '-10%', y: '70%' }, + { x: '15%', y: '50%' }, + { x: '110%', y: '30%' }, + { x: '110%', y: '70%' }, + { x: '85%', y: '50%' }, + ]; + const delays = dots.map(() => BASE_DELAY + Math.random() * 0.8); +const BentoGrid12 = () => { + + + const cardVariants: Variants = { + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { duration: 0.6, delay: 0.2, ease: [0.22, 1, 0.36, 1] }, + }, + }; + + const lineVariants: Variants = { + hidden: { pathLength: 0, opacity: 0 }, + visible: { + pathLength: 1, + opacity: 1, + transition: { duration: 1.6, ease: 'easeInOut' }, + }, + }; + + const containerVariants: Variants = { + hidden: {}, + visible: { transition: { staggerChildren: 0.12 } }, + }; + + const avatarVariants: Variants = { + hidden: { x: 60, opacity: 0 }, + visible: (i) => ({ + x: 0, + opacity: 1, + transition: { + delay: BASE_DELAY + i * 0.07, + duration: 0.5, + ease: [0.22, 1, 0.36, 1], + }, + }), + }; + + const barVariants: Variants = { + hidden: { height: 0, opacity: 0 }, + visible: (height: number) => ({ + height, + opacity: 1, + transition: { duration: 0.6, ease: [0.65, 0, 0.35, 1] }, + }), + }; + + + return ( +
+
+ + Train Smarter +
+ See Results Faster + + } + description={ + + Sync your health data to merge expert workouts with your personal + biometrics. Every rep, run, and ring closed, visualized. + + } + > + +
+
+ + 83k + +
+ + ACTIVITY + + + USERS + +
+
+
+ {[0, 2, 4, 6, 8, 10].map((val) => ( +
+ + {val}k + +
+
+ ))} + + + + + + + + + + + + + +
+ + + + + Outwork Yesterday + + } + description={ + + Track your stats and see how you stack up. Consistent effort + deserves to be recognized. + + } + > +
+
+
+
+ + Monthly Graph + + + This Year + +
+ + {[140, 170, 110, 80, 135, 190, 135].map((height, i) => ( +
+ + + {['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL'][i]} + +
+ ))} + +
+
+ + +
+ + Find Your Flow + + } + > +
+
+
+
+
+ {dots.map((dot, i) => { + return ( + + ); + })} +
+
+ + + +

+ Never the Same Workout Twice +

+ + + + Train with +
+ the Elite + + } + > + + {[1, 2, 3, 4].map((i) => ( + +
+ + ))} + + +
+
+
+ ); +}; + +export default BentoGrid12; diff --git a/src/data/contents/blocks/bento-13/bento-13.mdx b/src/data/contents/blocks/bento-13/bento-13.mdx new file mode 100644 index 00000000..029f9a0c --- /dev/null +++ b/src/data/contents/blocks/bento-13/bento-13.mdx @@ -0,0 +1,25 @@ +--- +title: Bento 13 +slug: bento-13 +category: bento +description: >- + A clean financial dashboard bento layout focused on wealth management and + growth insights. Featuring soft gradients, intuitive charts, and modular + cards for planning, investments, and community support, it delivers a calm + and structured interface for tracking finances, making informed decisions, + and visualizing progress over time. +image: 'https://assets.watermelon.sh/components/bento-13.webp' +video: 'https://assets.watermelon.sh/components/bento-13.mp4' +featured: false +comingSoon: false +dependencies: + - motion/react + - lucide-react + - react-icons + - clsx + - tailwind-merge +install: + - 'npx shadcn@latest add https://registry.watermelon.sh/r/bento-13.json' +componentNumber: 5 +--- + diff --git a/src/data/contents/blocks/bento-13/demo.tsx b/src/data/contents/blocks/bento-13/demo.tsx new file mode 100644 index 00000000..26fd7dd7 --- /dev/null +++ b/src/data/contents/blocks/bento-13/demo.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import BentoGrid13 from '.'; + +export default function BentoGrid13Demo() { + return ; +} diff --git a/src/data/contents/blocks/bento-13/index.tsx b/src/data/contents/blocks/bento-13/index.tsx new file mode 100644 index 00000000..909cff4f --- /dev/null +++ b/src/data/contents/blocks/bento-13/index.tsx @@ -0,0 +1,586 @@ +import React, { useMemo, useState } from 'react'; +import { cn } from '@/lib/utils'; +import { + motion, + MotionConfig, + type SpringOptions, + useSpring, + useTransform, + type Variants, +} from 'motion/react'; +import { useEffect } from 'react'; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from '@/components/base-ui/card'; + + +type AnimatedNumberProps = { + value: number; + className?: string; + springOptions?: Parameters[1]; + as?: 'span' | 'div' | 'p'; + decimals?: number; + prefix?: string; + suffix?: string; +}; + +const MotionMap = { + span: motion.span, + div: motion.div, + p: motion.p, +}; + +export function AnimatedNumber({ + value, + className, + springOptions, + as = 'span', + decimals = 0, + prefix = '', + suffix = '', +}: AnimatedNumberProps) { + const MotionComponent = MotionMap[as] || motion.span; + + const spring = useSpring(value, { + stiffness: 120, + damping: 20, + ...springOptions, + }); + + const display = useTransform(spring, (current) => { + const formatted = current.toFixed(decimals); + const number = Number(formatted).toLocaleString(); + return `${prefix}${number}${suffix}`; + }); + + useEffect(() => { + spring.set(value); + }, [spring, value]); + + return ( + + {display} + + ); +} +const phoneVariants: Variants = { + initial: { y: 100 }, + hover: { + y: 20, + transition: { + duration: 0.4, + ease: [0.65, 0, 0.35, 1], + staggerChildren: 0.03, + delayChildren: 0.05, + }, + }, +}; + +const hiddenItem: Variants = { + initial: { opacity: 0, y: 20 }, + hover: { + opacity: 1, + y: 0, + transition: { + duration: 0.45, + ease: [0.65, 0, 0.35, 1], + }, + }, +}; + +const progressVariants: Variants = { + initial: { strokeDashoffset: 230 }, + hover: { + strokeDashoffset: 75.36, + transition: { + duration: 0.45, + ease: [0.65, 0, 0.35, 1], + }, + }, +}; + +const barVariants: Variants = { + initial: { scaleY: 0.5 }, + hover: { + scaleY: 1, + transition: { + duration: 0.45, + ease: [0.65, 0, 0.35, 1], + }, + }, +}; + +const FinancialWellnessCard = () => { + const [isHovering, setIsHovering] = useState(false); + + return ( + + setIsHovering(true)} + onMouseLeave={() => setIsHovering(false)} + className="relative col-span-1 flex flex-col items-center overflow-hidden rounded-3xl border border-white/5 bg-[#1a1a1a] px-6 pt-8 text-center md:col-span-3" + > + + + + Financial Wellness + + + + Gain control of your spending with intuitive tracking and + categorization. + + + + + +
+
+ + 9:30 + + +
+
+
+
+
+
+ + + + + +
+
+
+
+
+ +
+

+ Welcome Back! +

+

Hi, Choudary Aoun

+
+ +
+
+
+
+
+ {[1, 2, 3, 4].map((i) => ( +
+ ))} +
+
+ + + Projects + +
+ +
+ + + + + + +
+ + Liked By + + +
+
+
+ +
+
+
+ + + +
+ + + Analytic + +
+ +
+ {[60, 80, 65, 95, 100, 40, 85, 50, 95, 45, 80, 70].map( + (h, i) => ( + + ), + )} +
+ +
+

This Week

+

+ 63% +

+
+
+ + +
+
+ + + +
+ + + Growth + +
+ +
+ + + +
+
+
+
+ + + Projects + +
+ +

+ On Discussed +

+ +

07

+ +
+
+ + + + + + ); +}; + +const containerVariants: Variants = { + initial: { + transition: { + staggerChildren: 0.04, + staggerDirection: -1, + }, + }, + hover: { + transition: { + staggerChildren: 0.06, + }, + }, +}; + +const barVariants2: Variants = { + initial: { + scaleY: 0.6, + }, + hover: { + scaleY: 1, + }, +}; + +const InvestmentGrowthCard = () => { + const data = [140, 230, 205, 290, 245, 220, 170]; + const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']; + + return ( + + + + + Investment Growth + + + + Explore diverse portfolios and watch your wealth flourish with + expert guidance. + + + + + +
+ Leaderboard + + + Last 28 days + +
+ + + {data.map((height, i) => ( +
+ + + + {months[i]} + +
+ ))} + + + + + ); +}; + +const BentoGrid13 = () => { + const [value, setValue] = useState(0); + const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { staggerChildren: 0.1 }, + }, + }; + + const itemVariants = { + hidden: { y: 20, opacity: 0 }, + visible: { y: 0, opacity: 1 }, + }; + + useEffect(() => { + const timer = setTimeout(() => { + setValue(250); + }, 500); + return () => clearTimeout(timer); + }, []); + + return ( +
+ + + + + + + + + + Financial Planning + + + Set goals and receive strategies for a secure future. + + + + + + + + + {[1, 2, 3, 4, 5, 6].map((i) => ( +
+ ))} + + + + Community Support + + + Visit and share money to your friends instantly! + + + + + + + + + + + Expand & Save + + + Collect points and spends on growth. + + + + + + + + + + $ + + K + + + + + Expert Advice + + + Access tailored financial recommendations! + + + + + + + + + + + + + + + Expert Advice + + + Access tailored financial recommendations! + + + + + +
+ ); +}; + +export default BentoGrid13; diff --git a/src/data/contents/blocks/bento-15/bento-15.mdx b/src/data/contents/blocks/bento-15/bento-15.mdx new file mode 100644 index 00000000..00128fad --- /dev/null +++ b/src/data/contents/blocks/bento-15/bento-15.mdx @@ -0,0 +1,24 @@ +--- +title: Bento 15 +slug: bento-15 +category: bento +description: >- + A sleek startup-focused bento layout highlighting growth, global reach, and + investment opportunities. Featuring minimal dark aesthetics, subtle data + visualizations, and brand integrations, it communicates scale and credibility + while guiding users through building, funding, and expanding modern tech + ventures. +image: 'https://assets.watermelon.sh/components/bento-15.webp' +video: 'https://assets.watermelon.sh/components/bento-15.mp4' +featured: false +comingSoon: false +dependencies: + - motion/react + - lucide-react + - react-icons + - clsx + - tailwind-merge +install: + - 'npx shadcn@latest add https://registry.watermelon.sh/r/bento-15.json' +componentNumber: 5 +--- diff --git a/src/data/contents/blocks/bento-15/demo.tsx b/src/data/contents/blocks/bento-15/demo.tsx new file mode 100644 index 00000000..3f5a42ad --- /dev/null +++ b/src/data/contents/blocks/bento-15/demo.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import BentoGrid15 from '.'; + +export default function BentoGrid15Demo() { + return ; +} diff --git a/src/data/contents/blocks/bento-15/index.tsx b/src/data/contents/blocks/bento-15/index.tsx new file mode 100644 index 00000000..276f0752 --- /dev/null +++ b/src/data/contents/blocks/bento-15/index.tsx @@ -0,0 +1,600 @@ +'use client'; +import React, { useMemo, useState } from 'react'; +import { motion } from 'framer-motion'; +import { FiMail } from 'react-icons/fi'; +import { Check, ChevronRight } from 'lucide-react'; +import { + Card, + CardTitle, + CardDescription, + CardContent, + CardFooter, +} from '@/components/base-ui/card'; + +const Logo = ({ width = 111, height = 35, ...props }) => { + return ( + + + + + + + + + + + + + + + + + + + ); +}; + +function Logo2(props: React.SVGProps) { + return ( + + + + + + + + + + + + ); +} +const Logo3 = ({ width = 117, height = 28, ...props }) => { + return ( + + + + + + + + + + + + + ); +}; + +type LogoProps = React.SVGProps; + +export const MetaLogo = (props: LogoProps) => ( + + + + + +); + +export const Logo100TB = (props: LogoProps) => ( + + + + +); + +export const AmazonLogo = (props: LogoProps) => ( + + + + +); + +export const BehanceLogo = (props: LogoProps) => ( + + + + +); + +const COMPANIES = [Logo, Logo2, Logo3]; +const LOGOS = [MetaLogo, AmazonLogo, BehanceLogo, Logo100TB]; + +const dots = [ + { t: '8%', l: '37%' }, + { t: '25%', l: '22%' }, + { t: '47%', l: '52%' }, + { t: '52%', l: '33%' }, + { t: '22%', l: '65%' }, + { t: '60%', l: '77%' }, +]; + + const enterDelays = dots.map(() => Math.random() * 0.8); + const exitDelays = dots.map(() => Math.random() * 0.8); + +function Card4() { + const [hovered, setHovered] = useState(false); + + return ( + setHovered(true)} + onHoverEnd={() => setHovered(false)} + className="col-span-12 md:col-span-4" + > + + +
+
+ + {dots.map((pos, i) => ( + + ))} +
+ + + + + Build a global portfolio + + + Grew 30,000+ strong global design community!! + + + + + ); +} +export function Card3() { + return ( + + + + + + + + {[...Array(10)].map((_, i) => ( + + {i} + + ))} + + {[...Array(12)].map((_, i) => ( + + {i + 1} + + ))} + + + + + + + + Bootstrapped and grow + + + Turn your side hustle into a company + + + + + ); +} +const swipeVariants = { + initial: { x: 5 }, + hover: { x: 225 }, +}; + +const checkVariants = { + initial: { scale: 0, opacity: 0 }, + hover: { scale: 1, opacity: 1 }, +}; +function Card5() { + return ( + + + +
+
+
+ +
+
+

New Account

+

user@mail.com

+
+
+ +
+ + + +
+
+ +
+
+
+ AC +
+
+

Alex costa

+

user@mail.com

+
+
+ +
+ +
+
+ +
+ + + + + + Swipe to fund + +
+ + + + + Invest in tech startups + + + Place my own bets on startups + + + + + ); +} +const BentoGrid15 = () => { + const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { staggerChildren: 0.1 }, + }, + }; + + const itemVariants = { + hidden: { y: 20, opacity: 0 }, + visible: { y: 0, opacity: 1 }, + }; + + return ( +
+ + + + + {COMPANIES.map((Logo, i) => ( + + ))} + + + + 50+ high growth copanies + + + Gain control of your spending with intuitive tracking and + categorization. + + + + + + + + + {LOGOS.map((Logo, i) => ( + + ))} + + + + Taught designer from big tech + + + Gain control of your spending with intuitive tracking and + categorization. + + + + + + + + + + + +
+ ); +}; + +export default BentoGrid15; diff --git a/src/data/contents/blocks/bento-17/bento-17.mdx b/src/data/contents/blocks/bento-17/bento-17.mdx new file mode 100644 index 00000000..dbb919c0 --- /dev/null +++ b/src/data/contents/blocks/bento-17/bento-17.mdx @@ -0,0 +1,24 @@ +--- +title: Bento 17 +slug: bento-17 +category: bento +description: >- + A modern SaaS-focused bento layout featuring rich data insights, seamless + integrations, and user engagement tools. With soft purple gradients, + interactive charts, and modular sections for support and communication, it + delivers a polished and intuitive interface for managing growth, workflows, + and customer interactions. +image: 'https://assets.watermelon.sh/components/bento-17.webp' +video: 'https://assets.watermelon.sh/components/bento-17.mp4' +featured: false +comingSoon: false +dependencies: + - motion/react + - lucide-react + - react-icons + - clsx + - tailwind-merge +install: + - 'npx shadcn@latest add https://registry.watermelon.sh/r/bento-17.json' +componentNumber: 5 +--- diff --git a/src/data/contents/blocks/bento-17/demo.tsx b/src/data/contents/blocks/bento-17/demo.tsx new file mode 100644 index 00000000..2a1766e1 --- /dev/null +++ b/src/data/contents/blocks/bento-17/demo.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import BentoGrid17 from '.'; + +export default function BentoGrid17Demo() { + return ; +} diff --git a/src/data/contents/blocks/bento-17/index.tsx b/src/data/contents/blocks/bento-17/index.tsx new file mode 100644 index 00000000..c6073e29 --- /dev/null +++ b/src/data/contents/blocks/bento-17/index.tsx @@ -0,0 +1,514 @@ +'use client'; +import React, { useState } from 'react'; +import { motion, useAnimation, type Variants } from 'framer-motion'; +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from '@/components/base-ui/card'; + +import type { SVGProps } from 'react'; + +const GlowEllipse = (props?: React.SVGProps) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const data = [190, 130, 145, 190, 145, 120, 170]; + +function ChartsCard() { + const [hovered, setHovered] = useState(false); + + const containerVariants: Variants = { + initial: { transition: { staggerChildren: 0.08, staggerDirection: -1 } }, + hover: { + transition: { + staggerChildren: 0.08, + }, + }, + }; + + const barVariants: Variants = { + initial: { scaleY: 0.75 }, + hover: { + scaleY: 1, + transition: { + duration: 0.45, + ease: 'easeOut', + }, + }, + }; + + return ( + setHovered(true)} + onHoverEnd={() => setHovered(false)} + onTapStart={() => setHovered(true)} + onTap={() => setTimeout(() => setHovered(false), 1000)} + initial="initial" + animate={hovered ? 'hover' : 'initial'} + className="col-span-1 row-span-1 md:col-span-4 md:row-span-2" + > + + + +
+
+ + Monthly Growth Report + +
+ + + + Access powerful data to help grow your business + + + + + + +
+
+ + Monthly Income + +
$ 68,700
+
+ + + Last 28 days + +
+ + + {data.map((height, i) => ( +
+ +
+ ))} + + + + + ); +} + +function NewsletterCard({ itemVariants }: { itemVariants: Variants }) { + const controls = useAnimation(); + const handles = useAnimation(); + + const startSelection = async () => { + await controls.start({ + opacity: 1, + width: '100%', + height: '100%', + transition: { duration: 0.35, ease: 'easeOut' }, + }); + + handles.start({ + opacity: 1, + scale: 1, + transition: { duration: 0.15 }, + }); + }; + + const resetSelection = () => { + handles.start({ opacity: 0, scale: 0 }); + + controls.start({ + opacity: 0, + width: 0, + height: 0, + transition: { duration: 0.2 }, + }); + }; + + return ( + setTimeout(resetSelection, 1500)} + className="col-span-1 row-span-1 md:col-span-4 md:row-span-2" + > + + + +
+
+ + Customize Newsletter + +
+ + + + We made it simple to create weekly newsletters + + + + +
+
+
+
+
+ +
+ +
+
+
+ To: All Contact +
+ +
+ Subject: Exciting updates are on the way!! +
+
+ +
+
+ + Monthly updates + + + + + {[ + '-top-[3px] -left-[3px]', + '-top-[3px] -right-[3px]', + '-bottom-[3px] -left-[3px]', + '-bottom-[3px] -right-[3px]', + ].map((pos, idx) => ( + + ))} +
+
+
+ + Font: Plus Jakarta Sans + +
+
+
+
+
+
+ + + + ); +} + +function IntegrationCard({ itemVariants }: { itemVariants: Variants }) { + const icons = [Notion, Slack, Figma, Paper]; + const controls = useAnimation(); + + const iconVariants: Variants = { + hidden: { + opacity: 1, + filter: 'grayscale(100%) blur(1px) ', + }, + visible: (i: number) => ({ + opacity: 1, + filter: 'grayscale(0%) blur(0px) ', + transition: { + delay: i * 0.2, + duration: 0.45, + ease: 'easeOut', + }, + }), + }; + + const handleHover = async () => controls.start('visible'); + const handleHoverEnd = async () => controls.start('hidden'); + + return ( + setTimeout(handleHoverEnd, 1500)} + className="col-span-1 row-span-1 md:col-span-4" + > + + + +
+
+ + Awesome Integration + +
+ + + + Work with your favorite tools + + + + +
+ + {icons.map((Icon, i) => ( + + + + + + ))} + +
+ + {Array(6) + .fill(null) + .map((_, i) => ( +
+ ))} + + + + ); +} + +const BentoGrid17 = () => { + const containerVariants: Variants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { staggerChildren: 0.1 }, + }, + }; + + const itemVariants: Variants = { + hidden: { y: 20, opacity: 0 }, + visible: { + y: 0, + opacity: 1, + transition: { duration: 0.5, ease: 'easeOut' }, + }, + }; + + return ( +
+ +
+ +
+ + + + + + + +
+
+ + Community Support + +
+ + + 24/7 fast team support + + + + +
+
+ Hey! there i am here to help. 👋 +
+ + + + + + + +
+ ); +}; + +const Notion = (props: SVGProps) => ( + + + + +); + +const Figma = (props: SVGProps) => ( + + + + + + + + + + + + + + +); + +const Slack = (props: SVGProps) => ( + + + + + + + + +); + +const Paper = (props: SVGProps) => ( + + + +); + +export default BentoGrid17; diff --git a/src/data/contents/blocks/bento-8/bento-8.mdx b/src/data/contents/blocks/bento-8/bento-8.mdx new file mode 100644 index 00000000..9d585c02 --- /dev/null +++ b/src/data/contents/blocks/bento-8/bento-8.mdx @@ -0,0 +1,23 @@ +--- +title: Bento 8 +slug: bento-8 +category: bento +description: A premium dark-themed bento layout showcasing intelligent personalization, + privacy-first design, and content discovery. Featuring glowing gradients, + soft ambient lighting, and interactive elements like tag filtering and user + identity selection, it blends elegant visuals with purposeful UX to create a + refined, futuristic dashboard experience. +image: 'https://assets.watermelon.sh/components/bento-8.webp' +video: 'https://assets.watermelon.sh/components/bento-8.mp4' +featured: false +comingSoon: false +dependencies: + - motion/react + - lucide-react + - react-icons + - clsx + - tailwind-merge +install: + - 'npx shadcn@latest add https://registry.watermelon.sh/r/bento-8.json' +componentNumber: 5 +--- diff --git a/src/data/contents/blocks/bento-8/demo.tsx b/src/data/contents/blocks/bento-8/demo.tsx new file mode 100644 index 00000000..49ee6940 --- /dev/null +++ b/src/data/contents/blocks/bento-8/demo.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import BentoGrid8 from '.'; + +export default function BentoGrid8Demo() { + return ; +} diff --git a/src/data/contents/blocks/bento-8/index.tsx b/src/data/contents/blocks/bento-8/index.tsx new file mode 100644 index 00000000..e6a888c7 --- /dev/null +++ b/src/data/contents/blocks/bento-8/index.tsx @@ -0,0 +1,506 @@ +'use client'; +import React from 'react'; +import { motion } from 'framer-motion'; +import { clsx, type ClassValue } from 'clsx'; +import { twMerge } from 'tailwind-merge'; +import { Card, CardContent, CardFooter } from '@/components/base-ui/card'; + +function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} + +const BentoCard = ({ children, className, title, description }: { children?: React.ReactNode; className?: string; title: string; description: string }) => ( + + + {children} + + + +

+ {title} +

+ +

+ {description} +

+ + +); + +const GlowingOrb = ({ + color, + className, +}: { + color: string; + className?: string; +}) => ( +
+ + + + +
+ +
+
+); + +const KeysList = () => { + return ( +
+ {Array(18) + .fill(0) + .map((_, i) => ( +
+
+
+ ))} +
+ ); +}; + +export default function BentoGrid8() { + return ( +
+
+ + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+ +
+
+
+ +
+
+
+ +
+ +
+ Kyle +
+
+
+
+
+ + + + + +
+
+ ); +} + +function ArrowIcon(props: React.SVGProps) { + return ( + + + + ); +} + +const GetInfoButton = () => { + return ( +
+
+ +
+
+ ); +}; + +const interests1 = [ + 'Developer', + 'Founder', + 'Engineer', + 'Writer', + 'Marketer', + 'Product', + 'Creator', + 'Researcher', + 'Artist', + 'Builder', + 'Strategist', +]; + +const interests2 = [ + 'Developer', + 'Founder', + 'Engineer', + 'Designer', + 'Writer', + 'Marketer', + 'Product', + 'Creator', + 'Researcher', + 'Artist', + 'Builder', + 'Strategist', +]; + +const interests3 = [ + 'Developer', + 'Founder', + 'Engineer', + 'Writer', + 'Marketer', + 'Product', + 'Creator', + 'Researcher', + 'Artist', + 'Builder', + 'Strategist', +]; + +function InterestsMarquee() { + return ( +
+
+
+ +
+ + + +
+ +
+
+
+ ); +} + +const Row = ({ + reverse = false, + items, +}: { + reverse?: boolean; + items: string[]; +}) => { + const loopItems = [...items, ...items]; + + return ( +
+ + {loopItems.map((item, i) => ( +
+ + {item} +
+ ))} + +
+ ); +}; + +const AuroraSvgBackground = () => { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +}; diff --git a/src/data/contents/blocks/bento-9/bento-9.mdx b/src/data/contents/blocks/bento-9/bento-9.mdx new file mode 100644 index 00000000..5546ffe6 --- /dev/null +++ b/src/data/contents/blocks/bento-9/bento-9.mdx @@ -0,0 +1,24 @@ +--- +title: Bento 9 +slug: bento-9 +category: bento +description: A robust monitoring-focused bento layout designed for incident tracking and + system reliability. Featuring real-time alerts, post-mortem timelines, and + proactive outage prevention, it combines structured data visualization with + a clean dark interface to deliver clarity, control, and fast diagnostics for + modern infrastructure workflows. +image: 'https://assets.watermelon.sh/components/bento-9.webp' +video: 'https://assets.watermelon.sh/components/bento-9.mp4' +featured: false +comingSoon: false +dependencies: + - motion/react + - lucide-react + - react-icons + - clsx + - tailwind-merge +install: + - 'npx shadcn@latest add https://registry.watermelon.sh/r/bento-9.json' +componentNumber: 5 +--- + diff --git a/src/data/contents/blocks/bento-9/demo.tsx b/src/data/contents/blocks/bento-9/demo.tsx new file mode 100644 index 00000000..24d7ea74 --- /dev/null +++ b/src/data/contents/blocks/bento-9/demo.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import BentoGrid9 from '.'; + +export default function BentoGrid9Demo() { + return ; +} diff --git a/src/data/contents/blocks/bento-9/index.tsx b/src/data/contents/blocks/bento-9/index.tsx new file mode 100644 index 00000000..8a6cc17d --- /dev/null +++ b/src/data/contents/blocks/bento-9/index.tsx @@ -0,0 +1,344 @@ +'use client'; +import React from 'react'; +import { motion } from 'framer-motion'; +import { Card, CardContent, CardFooter } from '@/components/base-ui/card'; + +const colors = { + bg: 'bg-zinc-950', + cardBg: 'bg-zinc-900', + border: 'border-zinc-800', + textMain: 'text-zinc-100', + textSub: 'text-zinc-400', + textMuted: 'text-zinc-500', + statusUp: 'bg-sky-500', + statusDown: 'bg-rose-500', + accent: 'text-sky-400', + highlightBg: 'bg-zinc-800', + faintBg: 'bg-zinc-800/50', + outline: 'border-zinc-700', + faintOutline: 'border-zinc-800', +}; + +const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.1, + delayChildren: 0.2, + }, + }, +}; + +type Incident = { + id: string; + message: string; + region: string; +}; + +type ChatIncidentProps = { + text: string; + incidents: Incident[]; +}; + +export const ChatIncident = ({ text, incidents }: ChatIncidentProps) => { + return ( +
+
+
+ +
+ {text} +
+
+ +
+ {incidents.map((item) => ( +
+
+
+
+ +

{item.message}

+ + + {item.region} + +
+
+ ))} +
+
+ ); +}; + +const Card3_BrowserMock = () => ( +
+
+
+
+
+ + allpine.com + + + +
+
+
+ ← + → + ↻ + + www.corestack.com + +
+
+ connection is secure +

+ Your information is private when +
it is seen on this site +

+
+
+
+); + +const Card4_IncidentsMock = () => ( +
+
+
+
+
+
+
+
+

+ 10 similar incidents +

+

+ 15 may 2025 at 06:04am +

+
+
+
+
+ {[ + { name: 'tesla.com', type: 'Peer certificate cannot be authenticated' }, + { name: 'around.co', type: 'Peer certificate cannot be authenticated' }, + ].map((item) => ( +
+
+ +
+

{item.name}

+

+ {item.type} +

+
+
+ ))} +
+
+
+); + +const Card5_StackMock = () => ( +
+ {['AWS', 'Vercel', 'Slack', 'Linear'].map((stack) => ( +
+ ))} + {['Github', 'Sentry', 'Datadog', 'Notion'].map((stack) => ( +
+ ))} +
+); + +type BackupItem = { + id: string; + label: string; + active?: boolean; +}; + +type BackupListProps = { + items: BackupItem[]; +}; + +const backups = [ + { id: '1', label: 'managed database backup' }, + { id: '2', label: 'new database backup', active: true }, + { id: '3', label: 'core database backup' }, +]; + +export const BackupList = ({ items }: BackupListProps) => { + return ( +
+ {items.map((item) => ( +
+
+ + {item.label} + +
+ ))} +
+ ); +}; + +function IncidentsCard1() { + return ( +
+
+ + Incidents +
+
+
+ + allpine.com/status + +

+ Up.Checked every 25 sec +

+
+
+ +
+
+ Response + + Screenshot + + Monitor +
+
+
+ ); +} + +const BentoGrid9 = () => { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +}; + +function BentoCard({ + title, + description, + children, +}: { + title: string; + description: string; + children: React.ReactNode; +}) { + return ( + + + {children} + + +

{title}

+

{description}

+ + + ); +} + +export default BentoGrid9; From cd0f4f5b5f7783213d95ca9d21cbb962b45d4f37 Mon Sep 17 00:00:00 2001 From: wtfdivyansh Date: Fri, 27 Mar 2026 00:28:00 +0530 Subject: [PATCH 2/5] feat:add bentos --- src/data/contents/blocks/bento-10/demo.tsx | 2 +- src/data/contents/blocks/bento-11/demo.tsx | 2 +- src/data/contents/blocks/bento-12/demo.tsx | 2 +- src/data/contents/blocks/bento-13/demo.tsx | 2 +- src/data/contents/blocks/bento-13/index.tsx | 3 +-- src/data/contents/blocks/bento-15/demo.tsx | 2 +- src/data/contents/blocks/bento-15/index.tsx | 2 +- src/data/contents/blocks/bento-17/demo.tsx | 2 +- src/data/contents/blocks/bento-8/demo.tsx | 2 +- src/data/contents/blocks/bento-9/demo.tsx | 2 +- 10 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/data/contents/blocks/bento-10/demo.tsx b/src/data/contents/blocks/bento-10/demo.tsx index 158d6c4a..73001bac 100644 --- a/src/data/contents/blocks/bento-10/demo.tsx +++ b/src/data/contents/blocks/bento-10/demo.tsx @@ -1,4 +1,4 @@ -import React from 'react'; + import BentoGrid10 from '.'; export default function BentoGrid10Demo() { diff --git a/src/data/contents/blocks/bento-11/demo.tsx b/src/data/contents/blocks/bento-11/demo.tsx index eb5ecdb2..8444bb96 100644 --- a/src/data/contents/blocks/bento-11/demo.tsx +++ b/src/data/contents/blocks/bento-11/demo.tsx @@ -1,4 +1,4 @@ -import React from 'react'; + import BentoGrid11 from '.'; export default function BentoGrid11Demo() { diff --git a/src/data/contents/blocks/bento-12/demo.tsx b/src/data/contents/blocks/bento-12/demo.tsx index 683fd36b..91415999 100644 --- a/src/data/contents/blocks/bento-12/demo.tsx +++ b/src/data/contents/blocks/bento-12/demo.tsx @@ -1,4 +1,4 @@ -import React from 'react' + import BentoGrid12 from '.' export default function BentoGrid12Demo () { diff --git a/src/data/contents/blocks/bento-13/demo.tsx b/src/data/contents/blocks/bento-13/demo.tsx index 26fd7dd7..b8f74132 100644 --- a/src/data/contents/blocks/bento-13/demo.tsx +++ b/src/data/contents/blocks/bento-13/demo.tsx @@ -1,4 +1,4 @@ -import React from 'react'; + import BentoGrid13 from '.'; export default function BentoGrid13Demo() { diff --git a/src/data/contents/blocks/bento-13/index.tsx b/src/data/contents/blocks/bento-13/index.tsx index 909cff4f..e389d0f3 100644 --- a/src/data/contents/blocks/bento-13/index.tsx +++ b/src/data/contents/blocks/bento-13/index.tsx @@ -1,9 +1,8 @@ -import React, { useMemo, useState } from 'react'; +import {useState } from 'react'; import { cn } from '@/lib/utils'; import { motion, MotionConfig, - type SpringOptions, useSpring, useTransform, type Variants, diff --git a/src/data/contents/blocks/bento-15/demo.tsx b/src/data/contents/blocks/bento-15/demo.tsx index 3f5a42ad..5e6f3244 100644 --- a/src/data/contents/blocks/bento-15/demo.tsx +++ b/src/data/contents/blocks/bento-15/demo.tsx @@ -1,4 +1,4 @@ -import React from 'react'; + import BentoGrid15 from '.'; export default function BentoGrid15Demo() { diff --git a/src/data/contents/blocks/bento-15/index.tsx b/src/data/contents/blocks/bento-15/index.tsx index 276f0752..12576334 100644 --- a/src/data/contents/blocks/bento-15/index.tsx +++ b/src/data/contents/blocks/bento-15/index.tsx @@ -1,5 +1,5 @@ 'use client'; -import React, { useMemo, useState } from 'react'; +import React, { useState } from 'react'; import { motion } from 'framer-motion'; import { FiMail } from 'react-icons/fi'; import { Check, ChevronRight } from 'lucide-react'; diff --git a/src/data/contents/blocks/bento-17/demo.tsx b/src/data/contents/blocks/bento-17/demo.tsx index 2a1766e1..294571ac 100644 --- a/src/data/contents/blocks/bento-17/demo.tsx +++ b/src/data/contents/blocks/bento-17/demo.tsx @@ -1,4 +1,4 @@ -import React from 'react'; + import BentoGrid17 from '.'; export default function BentoGrid17Demo() { diff --git a/src/data/contents/blocks/bento-8/demo.tsx b/src/data/contents/blocks/bento-8/demo.tsx index 49ee6940..df0476af 100644 --- a/src/data/contents/blocks/bento-8/demo.tsx +++ b/src/data/contents/blocks/bento-8/demo.tsx @@ -1,4 +1,4 @@ -import React from 'react'; + import BentoGrid8 from '.'; export default function BentoGrid8Demo() { diff --git a/src/data/contents/blocks/bento-9/demo.tsx b/src/data/contents/blocks/bento-9/demo.tsx index 24d7ea74..ed9592e0 100644 --- a/src/data/contents/blocks/bento-9/demo.tsx +++ b/src/data/contents/blocks/bento-9/demo.tsx @@ -1,4 +1,4 @@ -import React from 'react'; + import BentoGrid9 from '.'; export default function BentoGrid9Demo() { From 2f1c89622b3840996ccf2a4262301b670d22d93f Mon Sep 17 00:00:00 2001 From: wtfdivyansh Date: Fri, 27 Mar 2026 00:30:49 +0530 Subject: [PATCH 3/5] feat:add bentos --- src/data/contents/blocks/bento-12/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/data/contents/blocks/bento-12/index.tsx b/src/data/contents/blocks/bento-12/index.tsx index 2fe388e4..1dc4a8cc 100644 --- a/src/data/contents/blocks/bento-12/index.tsx +++ b/src/data/contents/blocks/bento-12/index.tsx @@ -8,7 +8,7 @@ import { CardContent, } from '@/components/base-ui/card'; import { cn } from '@/lib/utils'; -import { useMemo } from 'react'; + const BASE_DELAY = 0.3; From 8ae1508662c369cadf5fb0426c21e7165bc56109 Mon Sep 17 00:00:00 2001 From: wtfdivyansh Date: Sat, 28 Mar 2026 22:38:56 +0530 Subject: [PATCH 4/5] feat:add and pollish bentos --- src/data/contents/blocks/bento-10/index.tsx | 278 +++++++- src/data/contents/blocks/bento-11/index.tsx | 14 +- src/data/contents/blocks/bento-12/index.tsx | 543 +++++++++++---- src/data/contents/blocks/bento-13/index.tsx | 147 +++-- src/data/contents/blocks/bento-15/index.tsx | 14 +- src/data/contents/blocks/bento-17/index.tsx | 173 ++++- src/data/contents/blocks/bento-8/index.tsx | 124 ++-- src/data/contents/blocks/bento-9/index.tsx | 691 ++++++++++++++++---- 8 files changed, 1607 insertions(+), 377 deletions(-) diff --git a/src/data/contents/blocks/bento-10/index.tsx b/src/data/contents/blocks/bento-10/index.tsx index a499902d..00208498 100644 --- a/src/data/contents/blocks/bento-10/index.tsx +++ b/src/data/contents/blocks/bento-10/index.tsx @@ -3,6 +3,217 @@ import React from 'react'; import { motion } from 'framer-motion'; import { Card, CardContent } from '@/components/base-ui/card'; +import { FaHeart } from 'react-icons/fa6'; +import { IoSearch } from 'react-icons/io5'; +import { FaUserAlt } from 'react-icons/fa'; +import { FaGift } from 'react-icons/fa'; +import { RiMessage2Fill } from 'react-icons/ri'; + + + +type IconProps = { + className?: string; +}; + +const PatternIconLarge = ({ className }: IconProps) => { + return ( + + + + + + + + + + ); +}; +const PatternIconWide = ({ className }: IconProps) => { + return ( + + + + + + + + + + ); +}; + const PatternIconWide2 = ({ className }: IconProps) => { + return ( + + + + + + + + + + ); +}; + const PatternIconWide3 = ({ className }: IconProps) => { + return ( + + + + + + + + + + ); +}; + + +export const PatternIconWide4 = ({ className }: IconProps) => { + return ( + + + + + + + + + + ); +}; + +// type Props = { +// className?: string; +// }; + +// const PatternIcon = ({ className }: Props) => { +// return ( +// +// +// +// +// + +// +// + +// +// +// ); +// }; +const icons = [FaHeart,IoSearch,FaUserAlt,FaGift,RiMessage2Fill,PatternIconLarge] + const container = { hidden: { opacity: 0 }, show: { @@ -31,7 +242,7 @@ export default function BentoGrid10() { /> - +
Got a task in mind?
@@ -39,9 +250,24 @@ export default function BentoGrid10() {
- - - + + +
@@ -49,7 +275,13 @@ export default function BentoGrid10() { - + +
+ {icons.map((Icon, i) => ( + + ))} +
+
@@ -67,11 +299,11 @@ export default function BentoGrid10() {
- - - - - + + + + + @@ -110,9 +342,12 @@ function BentoItem({ children, className }: { children?: React.ReactNode; classN ); } -function WorkerCard({ name, rating, job }: { name: string; rating: string; job: string }) { +function WorkerCard({ name, rating, job, src }: { name: string; rating: string; job: string; src: string }) { return ( -
+
+
+ avatar +

{name} @@ -128,11 +363,24 @@ function WorkerCard({ name, rating, job }: { name: string; rating: string; job: ); } -function TaskTag({ label, count }: { label: string; count: string }) { +type IconType = React.ComponentType<{ className?: string }>; + +function TaskTag({ + label, + count, + Icon, +}: { + label: string; + count: string; + Icon: IconType; +}) { return (
- {label} - +
+ + {label} +
+ {count}
diff --git a/src/data/contents/blocks/bento-11/index.tsx b/src/data/contents/blocks/bento-11/index.tsx index 22c0ef13..137ab51b 100644 --- a/src/data/contents/blocks/bento-11/index.tsx +++ b/src/data/contents/blocks/bento-11/index.tsx @@ -367,7 +367,7 @@ function CardTable() { whileHover="hover" className="col-span-1 h-full" > - +

Multi-users.{' '} @@ -377,7 +377,7 @@ function CardTable() {

- + @@ -409,6 +409,7 @@ function CardTable() { User 2 @@ -416,6 +417,7 @@ function CardTable() { User 1 @@ -435,7 +437,7 @@ const data = [ function DatasetCard() { return ( - +

@@ -448,7 +450,7 @@ function DatasetCard() {

- +

Enter your prompt here @@ -532,7 +534,7 @@ const BentoGrid11 = () => { - +

Long jobs.{' '} @@ -542,7 +544,7 @@ const BentoGrid11 = () => {

- + diff --git a/src/data/contents/blocks/bento-12/index.tsx b/src/data/contents/blocks/bento-12/index.tsx index 1dc4a8cc..e4bfa22c 100644 --- a/src/data/contents/blocks/bento-12/index.tsx +++ b/src/data/contents/blocks/bento-12/index.tsx @@ -1,5 +1,5 @@ 'use client'; -import { motion, type Variants } from 'framer-motion'; +import { AnimatePresence, motion, type Variants } from 'framer-motion'; import { Card, CardHeader, @@ -8,7 +8,11 @@ import { CardContent, } from '@/components/base-ui/card'; import { cn } from '@/lib/utils'; - +import { useEffect, useState } from 'react'; +import { GiJumpingRope } from 'react-icons/gi'; +import { TbTreadmill } from 'react-icons/tb'; +import { GrYoga } from 'react-icons/gr'; +import { GiMeditation } from 'react-icons/gi'; const BASE_DELAY = 0.3; @@ -32,10 +36,10 @@ const BentoCard = ({ {...props} > {(title || description) && ( - + {title && {title}} {description && ( - + {description} )} @@ -48,66 +52,340 @@ const BentoCard = ({ ); - const dots = [ - { x: '50%', y: '10%' }, - { x: '50%', y: '90%' }, - { x: '-10%', y: '30%' }, - { x: '-10%', y: '70%' }, - { x: '15%', y: '50%' }, - { x: '110%', y: '30%' }, - { x: '110%', y: '70%' }, - { x: '85%', y: '50%' }, - ]; - const delays = dots.map(() => BASE_DELAY + Math.random() * 0.8); -const BentoGrid12 = () => { - - const cardVariants: Variants = { - hidden: { opacity: 0, y: 20 }, - visible: { - opacity: 1, - y: 0, - transition: { duration: 0.6, delay: 0.2, ease: [0.22, 1, 0.36, 1] }, - }, - }; +const PatternIcon10 = ({ className }: IconProps) => { + return ( + + - const lineVariants: Variants = { - hidden: { pathLength: 0, opacity: 0 }, - visible: { - pathLength: 1, - opacity: 1, - transition: { duration: 1.6, ease: 'easeInOut' }, - }, - }; + + + + - const containerVariants: Variants = { - hidden: {}, - visible: { transition: { staggerChildren: 0.12 } }, - }; + + + + ); +}; - const avatarVariants: Variants = { - hidden: { x: 60, opacity: 0 }, - visible: (i) => ({ - x: 0, - opacity: 1, - transition: { - delay: BASE_DELAY + i * 0.07, - duration: 0.5, - ease: [0.22, 1, 0.36, 1], - }, - }), - }; +type IconProps = { + className?: string; +}; - const barVariants: Variants = { - hidden: { height: 0, opacity: 0 }, - visible: (height: number) => ({ - height, - opacity: 1, - transition: { duration: 0.6, ease: [0.65, 0, 0.35, 1] }, - }), - }; - +const PatternIconSmall = ({ className }: IconProps) => { + return ( + + + + + + + + + + ); +}; +const PatternIconSmall2 = ({ className }: IconProps) => { + return ( + + + + + + + + + + ); +}; +const PatternIconSmall3 = ({ className }: IconProps) => { + return ( + + + + + + + + + + ); +}; +const SmallIcons = [ + GiJumpingRope, + TbTreadmill, + GrYoga, + GiMeditation, + PatternIconSmall, + PatternIconSmall2, + PatternIconSmall3, + PatternIconSmall3, +]; +const yearlyData = [140, 170, 110, 80, 135, 190, 135]; +const monthlyData = [80, 120, 70, 50, 95, 140, 100]; +const CHART_HEIGHT = 220; +const BAR_WIDTH = 50; +const GAP = 14; +const labelsYear = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL']; +const BarGraphCard = () => { + const [isYear, setIsYear] = useState(true); + + useEffect(() => { + const interval = setInterval(() => { + setIsYear((prev) => !prev); + }, 3000); + + return () => clearInterval(interval); + }, []); + + const data = isYear ? yearlyData : monthlyData; + const labels = labelsYear; + + return ( + + Outwork Yesterday + + } + description={ + + Track your stats and see how you stack up. + + } + > +
+
+ + Monthly Graph + + + + + + {isYear ? '2026' : '2025'} + + + +
+ + {/* CHART */} +
+ + + + + + + + + {data.map((height, i) => { + const x = i * (BAR_WIDTH + GAP); + + return ( + + ); + })} + + + {/* LABELS */} +
+ {labels.map((label, i) => ( + + {label} + + ))} +
+
+
+ + ); +}; +const dots = [ + { x: '50%', y: '10%', icon: PatternIconSmall3 }, + { x: '50%', y: '90%', icon: PatternIconSmall2 }, + { x: '-10%', y: '30%', icon: PatternIconSmall }, + { x: '-10%', y: '70%', icon: GiJumpingRope }, + { x: '15%', y: '50%', icon: TbTreadmill }, + { x: '110%', y: '30%', icon: GrYoga }, + { x: '110%', y: '70%', icon: GiMeditation }, + { x: '85%', y: '50%', icon: GiJumpingRope }, +]; +const delays = dots.map(() => BASE_DELAY + Math.random() * 0.8); +const cardVariants: Variants = { + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] }, + }, + hover: { + scale: 1.02, + }, +}; + +const lineVariants: Variants = { + hidden: { pathLength: 0, opacity: 0 }, + visible: { + pathLength: 0.5, + opacity: 1, + transition: { duration: 1.6, ease: 'easeInOut' }, + }, + hover: { + pathLength: 1, + opacity: 1, + transition: { duration: 1, ease: 'easeInOut' }, + }, +}; + +const containerVariants: Variants = { + hidden: {}, + visible: { transition: { staggerChildren: 0.12 } }, +}; + +const avatarVariants: Variants = { + hidden: { x: 60, opacity: 0 }, + visible: (i) => ({ + x: 0, + opacity: 1, + transition: { + delay: BASE_DELAY + i * 0.07, + duration: 0.5, + ease: [0.22, 1, 0.36, 1], + }, + }), +}; +const images = [ + 'https://randomuser.me/api/portraits/men/32.jpg', + 'https://randomuser.me/api/portraits/women/44.jpg', + 'https://randomuser.me/api/portraits/men/78.jpg', + 'https://randomuser.me/api/portraits/women/40.jpg', +]; +const BentoGrid12 = () => { return (
@@ -130,7 +408,9 @@ const BentoGrid12 = () => {
@@ -166,17 +446,18 @@ const BentoGrid12 = () => { > + {
- - - Outwork Yesterday - - } - description={ - - Track your stats and see how you stack up. Consistent effort - deserves to be recognized. - - } - > -
-
-
-
- - Monthly Graph - - - This Year - -
- - {[140, 170, 110, 80, 135, 190, 135].map((height, i) => ( -
- - - {['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL'][i]} - -
- ))} - -
-
- +
{ >
+ {/* CENTER NODE */}
- {dots.map((dot, i) => { - return ( - - ); - })} + + {dots.map((dot, i) => ( + + + + ))}
- + + + + + + + + +

Never the Same Workout Twice

@@ -315,17 +575,30 @@ const BentoGrid12 = () => { - {[1, 2, 3, 4].map((i) => ( + {images.map((img, i) => ( -
+
+ avatar +
))} diff --git a/src/data/contents/blocks/bento-13/index.tsx b/src/data/contents/blocks/bento-13/index.tsx index e389d0f3..11192ad2 100644 --- a/src/data/contents/blocks/bento-13/index.tsx +++ b/src/data/contents/blocks/bento-13/index.tsx @@ -1,4 +1,4 @@ -import {useState } from 'react'; +import { useState } from 'react'; import { cn } from '@/lib/utils'; import { motion, @@ -16,6 +16,8 @@ import { CardTitle, } from '@/components/base-ui/card'; +import { AiOutlineDollarCircle } from 'react-icons/ai'; +import { FaLock } from 'react-icons/fa6'; type AnimatedNumberProps = { value: number; @@ -113,6 +115,15 @@ const barVariants: Variants = { }, }; +const images = [ + 'https://randomuser.me/api/portraits/men/32.jpg', + 'https://randomuser.me/api/portraits/women/44.jpg', + 'https://randomuser.me/api/portraits/men/78.jpg', + 'https://randomuser.me/api/portraits/women/40.jpg', + 'https://randomuser.me/api/portraits/men/13.jpg', + 'https://randomuser.me/api/portraits/women/17.jpg', +]; + const FinancialWellnessCard = () => { const [isHovering, setIsHovering] = useState(false); @@ -372,6 +383,20 @@ const barVariants2: Variants = { scaleY: 1, }, }; +const trophyVariants: Variants = { + hover: { + rotate: [0, -12, 12, -10, 10, -6, 6, 0], + scale: 1.15, + transition: { + scale:{ + duration:0.2, + ease: 'easeInOut' + }, + duration: 0.7, + ease: 'easeInOut', + }, + }, +}; const InvestmentGrowthCard = () => { const data = [140, 230, 205, 290, 245, 220, 170]; @@ -399,7 +424,9 @@ const InvestmentGrowthCard = () => {
- Leaderboard + + Leaderboard + Last 28 days @@ -437,48 +464,59 @@ const InvestmentGrowthCard = () => { const BentoGrid13 = () => { const [value, setValue] = useState(0); - const containerVariants = { - hidden: { opacity: 0 }, - visible: { - opacity: 1, - transition: { staggerChildren: 0.1 }, - }, - }; const itemVariants = { - hidden: { y: 20, opacity: 0 }, - visible: { y: 0, opacity: 1 }, + hidden: { }, + visible: { }, + + }; + + const TrophyItemVariants = { + hidden: {}, + visible: {}, + hoveer: {} }; - useEffect(() => { - const timer = setTimeout(() => { - setValue(250); - }, 500); - return () => clearTimeout(timer); - }, []); return (
- - - + + watermelon-logo + + + trophy + + + + Financial Planning - + Set goals and receive strategies for a secure future. @@ -487,22 +525,29 @@ const BentoGrid13 = () => { - - - {[1, 2, 3, 4, 5, 6].map((i) => ( -
+ + {images.map((i) => ( +
+ whileHover={{ scale: 1.05, zIndex: 50 }} + className="relative size-12 rounded-full border-4 border-indigo-300 bg-indigo-300 p-4 md:size-16" + > + avatar + ))} - + Community Support - + Visit and share money to your friends instantly! @@ -511,10 +556,15 @@ const BentoGrid13 = () => { - + + + Expand & Save @@ -527,13 +577,17 @@ const BentoGrid13 = () => { setValue(250)} + className="col-span-1 flex flex-col items-center relative justify-center gap-1 rounded-3xl border border-white/5 bg-[#1a1a1a] p-8 text-center md:col-span-2 " > - - - + + + + $ { K - - - Expert Advice + + + Secure Transaction - - Access tailored financial recommendations! - @@ -558,7 +609,7 @@ const BentoGrid13 = () => { className="col-span-1 flex flex-col items-center rounded-3xl border border-white/5 bg-[#1a1a1a] p-8 text-center md:col-span-2" > - + { className="col-span-12 md:col-span-6" > - + {COMPANIES.map((Logo, i) => ( - + ))} @@ -570,9 +573,12 @@ const BentoGrid15 = () => { className="col-span-12 md:col-span-6" > - + {LOGOS.map((Logo, i) => ( - + ))} diff --git a/src/data/contents/blocks/bento-17/index.tsx b/src/data/contents/blocks/bento-17/index.tsx index c6073e29..b7371ec6 100644 --- a/src/data/contents/blocks/bento-17/index.tsx +++ b/src/data/contents/blocks/bento-17/index.tsx @@ -9,6 +9,9 @@ import { CardHeader, CardTitle, } from '@/components/base-ui/card'; +import { IoIosSearch } from 'react-icons/io'; +import { TbBellRingingFilled } from 'react-icons/tb'; +import { IoChatbubbleEllipsesSharp } from 'react-icons/io5'; import type { SVGProps } from 'react'; @@ -123,7 +126,9 @@ function ChartsCard() {
-
+
+ +
Monthly Growth Report @@ -218,7 +223,9 @@ function NewsletterCard({ itemVariants }: { itemVariants: Variants }) {
-
+
+ +
Customize Newsletter @@ -252,14 +259,14 @@ function NewsletterCard({ itemVariants }: { itemVariants: Variants }) {
- + Monthly updates {[ @@ -276,13 +283,17 @@ function NewsletterCard({ itemVariants }: { itemVariants: Variants }) { /> ))}
-
-
+
+
Font: Plus Jakarta Sans -
-
+
+
+ + + +
@@ -329,7 +340,9 @@ function IntegrationCard({ itemVariants }: { itemVariants: Variants }) {
-
+
+ +
Awesome Integration @@ -392,9 +405,9 @@ const BentoGrid17 = () => { }; return ( -
+
{
-
+
+ +
Community Support @@ -424,8 +439,10 @@ const BentoGrid17 = () => { - -
+ +
+ watermelon-logo +
Hey! there i am here to help. 👋
@@ -439,6 +456,134 @@ const BentoGrid17 = () => {
); }; +type IconProps = { + className?: string; +}; + +const PatternIcon = ({ className }: IconProps) => { + return ( + + + + + + + + + + + ); +}; + +const PatternIcon2 = ({ className }: IconProps) => { + return ( + + + + + + + + + + + ); +}; + + +const PatternIcon3 = ({ className }: IconProps) => { + return ( + + + + + + + + + + + ); +}; + +const PatternIcon4 = ({ className }: IconProps) => { + return ( + + + + + + + + + + + ); +}; const Notion = (props: SVGProps) => ( diff --git a/src/data/contents/blocks/bento-8/index.tsx b/src/data/contents/blocks/bento-8/index.tsx index e6a888c7..8aa9d4cd 100644 --- a/src/data/contents/blocks/bento-8/index.tsx +++ b/src/data/contents/blocks/bento-8/index.tsx @@ -3,16 +3,16 @@ import React from 'react'; import { motion } from 'framer-motion'; import { clsx, type ClassValue } from 'clsx'; import { twMerge } from 'tailwind-merge'; -import { Card, CardContent, CardFooter } from '@/components/base-ui/card'; +import { Card, CardContent, CardFooter } from '@/components/ui/card'; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } -const BentoCard = ({ children, className, title, description }: { children?: React.ReactNode; className?: string; title: string; description: string }) => ( +const BentoCard = ({ children, className, title, description }: any) => ( @@ -25,7 +25,7 @@ const BentoCard = ({ children, className, title, description }: { children?: Rea {title} -

+

{description}

@@ -75,7 +75,7 @@ const GlowingOrb = ({ }} /> -
+
{ .map((_, i) => (
@@ -105,7 +105,7 @@ const KeysList = () => { export default function BentoGrid8() { return ( -
+
- -
-
-
-
-
-
-
- -
-
-
- -
-
-
- -
- -
- Kyle -
-
-
-
-
- + { return (
-
@@ -199,6 +170,79 @@ const GetInfoButton = () => { ); }; +const BentoSource = () => { + const [isHovering, setIsHovering] = React.useState(false); + + return ( + setIsHovering(true)} + onMouseLeave={() => setIsHovering(false)} + > + +
+
+
+
+
+
+
+ +
+
+
+ +
+
+
+ + + + + + + Kyle + + +
+
+
+ + + +

+ Become the Source +

+ +

+ AI-distilled insights, ready to share. Elevate your voice in any + conversation. +

+ + + ); +}; + const interests1 = [ 'Developer', 'Founder', @@ -296,8 +340,8 @@ const Row = ({ className={cn( 'flex items-center rounded-full border px-6 py-3 text-sm whitespace-nowrap', item === 'Designer' - ? ' bg-gradient-to-r from-blue-600/40 to-blue-300/50 border-white/10 text-white' - : ' border-white/10bg-neutral-800/80 text-neutral-400', + ? 'border-white/10 bg-gradient-to-r from-blue-600/40 to-blue-300/50 text-white' + : 'border-white/10 bg-neutral-800/80 text-neutral-400', )} > diff --git a/src/data/contents/blocks/bento-9/index.tsx b/src/data/contents/blocks/bento-9/index.tsx index 8a6cc17d..88c8d7a6 100644 --- a/src/data/contents/blocks/bento-9/index.tsx +++ b/src/data/contents/blocks/bento-9/index.tsx @@ -1,8 +1,66 @@ 'use client'; -import React from 'react'; -import { motion } from 'framer-motion'; +import { + useEffect, + useState, + type ReactElement, + type SVGProps, +} from 'react'; +import { + animate, + AnimatePresence, + motion, + stagger, + useAnimate, + useMotionValue, +} from 'framer-motion'; import { Card, CardContent, CardFooter } from '@/components/base-ui/card'; +import { FaLongArrowAltDown } from 'react-icons/fa'; +import { FaCircleChevronDown } from 'react-icons/fa6'; +import { MdOutlineBarChart } from 'react-icons/md'; +import { IoMdGlobe } from 'react-icons/io'; + const DoubleCheck = ({className}: {className?: string}) => { + return ( + + + + + + + + + + + + + + + + ); +}; const colors = { bg: 'bg-zinc-950', cardBg: 'bg-zinc-900', @@ -42,26 +100,111 @@ type ChatIncidentProps = { }; export const ChatIncident = ({ text, incidents }: ChatIncidentProps) => { + const [typed, setTyped] = useState(''); + const [scope, animate] = useAnimate(); + + useEffect(() => { + let isMounted = true; + + const run = async () => { + while (isMounted) { + // reset + setTyped(''); + + + for (let i = 0; i <= text.length; i++) { + await new Promise((r) => setTimeout(r,40)); + if (!isMounted) return; + setTyped(text.slice(0, i)); + } + + + await new Promise((r) => setTimeout(r, 500)); + + + await animate( + '[data-item]', + { opacity: [0, 1], y: [-20, 0], filter: ['blur(4px)', 'blur(0px)'] }, + { + duration: 0.3, + delay: stagger(0.15), + + }, + ); + + + await new Promise((r) => setTimeout(r, 5000)); + + + await animate( + '[data-item]', + { opacity: [1, 0], filter: ['blur(0px)', 'blur(4px)'] }, + { + duration: 0.3, + delay: stagger(0.15, { from: 'last' }), + }, + ); + + setTyped(''); + + await new Promise((r) => setTimeout(r, 500)); + } + }; + + run(); + + return () => { + isMounted = false; + }; + }, [text, animate]); + return ( -
+
-
+
+ monkey-face-avatar +
+ +
+ {typed} -
- {text} + {typed.length < text.length && ( + + | + + )}
{incidents.map((item) => ( -
+
+

{item.message}

- + + {item.region}
@@ -71,9 +214,13 @@ export const ChatIncident = ({ text, incidents }: ChatIncidentProps) => {
); }; - const Card3_BrowserMock = () => ( -
+
@@ -85,6 +232,7 @@ const Card3_BrowserMock = () => ( +
+
@@ -98,6 +246,7 @@ const Card3_BrowserMock = () => ( www.corestack.com
+
connection is secure

@@ -106,149 +255,461 @@ const Card3_BrowserMock = () => (

-
+ ); -const Card4_IncidentsMock = () => ( -
-
-
-
-
-
-
-
-

- 10 similar incidents -

-

- 15 may 2025 at 06:04am -

-
-
-
-
- {[ - { name: 'tesla.com', type: 'Peer certificate cannot be authenticated' }, - { name: 'around.co', type: 'Peer certificate cannot be authenticated' }, - ].map((item) => ( -
-
+const data = [ + { name: 'tesla.com', type: 'Peer certificate cannot be authenticated' }, + { name: 'around.co', type: 'Peer certificate cannot be authenticated' }, +]; + +export const Card4_IncidentsMock = () => { + const [visible, setVisible] = useState(true); -
-

{item.name}

-

- {item.type} + useEffect(() => { + const interval = setInterval(() => { + setVisible(false); + setTimeout(() => setVisible(true), 1200); + }, 5000); + + return () => clearInterval(interval); + }, []); + + return ( +

+
+
+
+ +
+
+
+
+

+ 10 similar incidents +

+

+ 15 may 2025 at 06:04am

- ))} -
+
+ +
+ + {visible && + data.map((item, i) => ( + +
+ +
+ +
+
+ +
+

+ {item.name} +

+

+ {item.type} +

+
+ + ))} + + +
+
-
+ ); +}; + +const Notion = (props: SVGProps) => ( + + + + ); -const Card5_StackMock = () => ( -
- {['AWS', 'Vercel', 'Slack', 'Linear'].map((stack) => ( -
) => ( + + + - ))} - {['Github', 'Sentry', 'Datadog', 'Notion'].map((stack) => ( -
+ + - ))} -
+ + + + + + + + ); -type BackupItem = { - id: string; - label: string; - active?: boolean; +const Slack = (props: SVGProps) => ( + + + + + + + + +); + +const Paper = (props: SVGProps) => ( + + + +); + +const React = (props: SVGProps) => ( + + + + + + + + + + +); + +const Vercel = (props: SVGProps) => ( + + + +); + +const GitHub = (props: SVGProps) => ( + + + +); + +const Cursor = (props: SVGProps) => ( + + + +); + +type IconType = (props: SVGProps) => ReactElement; + +const stacks1: IconType[] = [Figma, Vercel, Slack, Paper]; +const stacks2: IconType[] = [GitHub, React, Notion, Cursor]; +export const Card5_StackMock = () => { + return ( +
+
+ + +
+
+ ); }; -type BackupListProps = { - items: BackupItem[]; +const Row = ({ + items, + reverse = false, +}: { + items: IconType[]; + reverse?: boolean; +}) => { + const loop = [...items, ...items]; + + return ( +
+ + {loop.map((Icon, i) => ( +
+ +
+ ))} + +
+ ); }; + const backups = [ { id: '1', label: 'managed database backup' }, - { id: '2', label: 'new database backup', active: true }, + { id: '2', label: 'new database backup' }, { id: '3', label: 'core database backup' }, ]; +type Item = { + id: string; + label: string; +}; + +type BackupListProps = { + items: Item[]; +}; + + + export const BackupList = ({ items }: BackupListProps) => { + const ITEM_HEIGHT = 60; + const VISIBLE = 3; + + const loop = [...items, ...items, ...items]; + + const [index, setIndex] = useState(items.length); + + const y = useMotionValue(-index * ITEM_HEIGHT); + + useEffect(() => { + const interval = setInterval(() => { + setIndex((prev) => prev + 1); + }, 3000); + + return () => clearInterval(interval); + }, []); + + useEffect(() => { + const controls = animate(y, -index * ITEM_HEIGHT, { + type: 'spring', + bounce: 0, + duration: 1, + onComplete: () => { + if (index >= items.length * 2) { + setIndex(items.length); + y.set(-items.length * ITEM_HEIGHT); + } + }, + }); + + return () => controls.stop(); + }, [index, items.length, y]); + + const centerOffset = Math.floor(VISIBLE / 2); + const centerIndex = (index + centerOffset) % items.length; + return ( -
- {items.map((item) => ( -
-
- - {item.label} - -
- ))} +
+
+ + + {loop.map((item, i) => { + const realIndex = i % items.length; + const active = realIndex === centerIndex; + + return ( + +
+ +
+ + + {item.label} + + + ); + })} +
); }; + +const tabs = ['Response', 'Screenshot', 'Monitor']; + function IncidentsCard1() { + const [active, setActive] = useState(0); + + useEffect(() => { + const interval = setInterval(() => { + setActive((prev) => (prev + 1) % tabs.length); + }, 3000); + + return () => clearInterval(interval); + }, []); + return (
-
+
+ + + + Incidents - Incidents
-
+
+ +
- + allpine.com/status -

+

Up.Checked every 25 sec

-
-
- Response - - Screenshot - - Monitor + {/* tabs */} +
+
+ {tabs.map((tab, i) => ( +
+ + {active === i && ( + + )} + + {tab} +
+ ))}
@@ -280,9 +741,9 @@ const BentoGrid9 = () => { From a66d149f62553f93cf6b222963792b850f3b20d5 Mon Sep 17 00:00:00 2001 From: wtfdivyansh Date: Sat, 28 Mar 2026 23:21:59 +0530 Subject: [PATCH 5/5] feat:add and polish bentos --- src/data/contents/blocks/bento-12/index.tsx | 11 +-- src/data/contents/blocks/bento-8/index.tsx | 4 +- src/data/contents/blocks/bento-9/index.tsx | 79 +++++++++------------ 3 files changed, 37 insertions(+), 57 deletions(-) diff --git a/src/data/contents/blocks/bento-12/index.tsx b/src/data/contents/blocks/bento-12/index.tsx index e4bfa22c..874b5d3e 100644 --- a/src/data/contents/blocks/bento-12/index.tsx +++ b/src/data/contents/blocks/bento-12/index.tsx @@ -182,16 +182,7 @@ const PatternIconSmall3 = ({ className }: IconProps) => { ); }; -const SmallIcons = [ - GiJumpingRope, - TbTreadmill, - GrYoga, - GiMeditation, - PatternIconSmall, - PatternIconSmall2, - PatternIconSmall3, - PatternIconSmall3, -]; + const yearlyData = [140, 170, 110, 80, 135, 190, 135]; const monthlyData = [80, 120, 70, 50, 95, 140, 100]; const CHART_HEIGHT = 220; diff --git a/src/data/contents/blocks/bento-8/index.tsx b/src/data/contents/blocks/bento-8/index.tsx index 8aa9d4cd..36fcfb80 100644 --- a/src/data/contents/blocks/bento-8/index.tsx +++ b/src/data/contents/blocks/bento-8/index.tsx @@ -3,13 +3,13 @@ import React from 'react'; import { motion } from 'framer-motion'; import { clsx, type ClassValue } from 'clsx'; import { twMerge } from 'tailwind-merge'; -import { Card, CardContent, CardFooter } from '@/components/ui/card'; +import { Card, CardContent, CardFooter } from '@/components/base-ui/card'; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } -const BentoCard = ({ children, className, title, description }: any) => ( +const BentoCard = ({ children, className, title, description }: { children?: React.ReactNode; className?: string; title: string; description: string }) => ( { +const DoubleCheck = ({ className }: { className?: string }) => { return ( { // reset setTyped(''); - for (let i = 0; i <= text.length; i++) { - await new Promise((r) => setTimeout(r,40)); + await new Promise((r) => setTimeout(r, 40)); if (!isMounted) return; setTyped(text.slice(0, i)); } - await new Promise((r) => setTimeout(r, 500)); - await animate( '[data-item]', { opacity: [0, 1], y: [-20, 0], filter: ['blur(4px)', 'blur(0px)'] }, { duration: 0.3, delay: stagger(0.15), - }, ); - await new Promise((r) => setTimeout(r, 5000)); - await animate( '[data-item]', { opacity: [1, 0], filter: ['blur(0px)', 'blur(4px)'] }, @@ -170,7 +159,6 @@ export const ChatIncident = ({ text, incidents }: ChatIncidentProps) => { alt="monkey-face-avatar" height={32} width={32} - />
@@ -280,7 +268,7 @@ export const Card4_IncidentsMock = () => {
@@ -335,8 +323,8 @@ export const Card4_IncidentsMock = () => { ease: 'easeOut', }} /> -
- +
+
@@ -533,7 +521,7 @@ const Row = ({ key={i} className="flex aspect-square w-20 items-center justify-center rounded-lg bg-[#303847] text-xs text-white/70" > - +
))} @@ -541,7 +529,6 @@ const Row = ({ ); }; - const backups = [ { id: '1', label: 'managed database backup' }, { id: '2', label: 'new database backup' }, @@ -557,17 +544,15 @@ type BackupListProps = { items: Item[]; }; - - export const BackupList = ({ items }: BackupListProps) => { const ITEM_HEIGHT = 60; const VISIBLE = 3; const loop = [...items, ...items, ...items]; - const [index, setIndex] = useState(items.length); + const [index, setIndex] = useState(0); - const y = useMotionValue(-index * ITEM_HEIGHT); + const y = useMotionValue(0); useEffect(() => { const interval = setInterval(() => { @@ -578,19 +563,13 @@ export const BackupList = ({ items }: BackupListProps) => { }, []); useEffect(() => { - const controls = animate(y, -index * ITEM_HEIGHT, { + const normalizedIndex = index % items.length; + + animate(y, -normalizedIndex * ITEM_HEIGHT, { type: 'spring', bounce: 0, duration: 1, - onComplete: () => { - if (index >= items.length * 2) { - setIndex(items.length); - y.set(-items.length * ITEM_HEIGHT); - } - }, }); - - return () => controls.stop(); }, [index, items.length, y]); const centerOffset = Math.floor(VISIBLE / 2); @@ -650,7 +629,6 @@ export const BackupList = ({ items }: BackupListProps) => { ); }; - const tabs = ['Response', 'Screenshot', 'Monitor']; function IncidentsCard1() { @@ -666,15 +644,15 @@ function IncidentsCard1() { return (
-
- - +
Incidents
-
- +
+
@@ -692,9 +670,8 @@ function IncidentsCard1() { {tabs.map((tab, i) => (
- {active === i && ( )} @@ -741,9 +718,21 @@ const BentoGrid9 = () => {