+
+ {[...items, ...items].map((_, i) => (
+
+ Sale on entire stock
+ ✦
+
+ ))}
+
+
+ );
+}
+function MarqueeCard() {
+ const [isHovered, setIsHovered] = useState(false);
+
+ return (
+
+ |
+ |
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Add your file
+
+
+
+
+
+
+ my_file.mp3
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ {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"
+ }`}
+ />
+
+ 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"
+ }`}
+ />
+
+ setPlaying(!playing)}
+ className="bg-white rounded-full p-2.5 shadow-[0_0_18px_rgba(255,255,255,0.15)] cursor-pointer"
+ >
+ {playing ? (
+
+
+
+
+ );
+};
+
+export default Bento14;
\ No newline at end of file
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 (
+
+
+
+ 
+
+ {dots.map((pos, i) => (
+
+
+
+ {dots.map((pos, i) => (
+
+
+
+
+
+
+
+ Tax credit
+ $100000
+
+
+
+
+
+
+
+
+
+ Tax saving
+ $1200000
+
+
+
+
+
+
+
+
+ Paid
+ $500000
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ );
+};
+
+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 (
+
+
+
+ {/* 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
+
+
+
+
+
+ {/* Bars */}
+ {BARS.map((bar, i) => (
+
+ {/* Badge */}
+
+
+ );
+};
+
+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 (
+
+ );
+};
+
+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 (
+
+ {/* Gray base */}
+
+ {/* Pink overlay */}
+
+ ))}
+
+ {/* Static centered glow */}
+
+
+ {/* Ticker */}
+
+
+ {/* Downward triangle pointer */}
+
+
+ {/* 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)]
+ */}
+
+ );
+};
+
+export default Bento3;
+
+/* ============================
+ SUB-COMPONENTS
+ ============================ */
+
+const BullseyeIcon = ({ className }: { className?: string }) => {
+ return (
+
+ );
+};
+
+const PhoneMockup = () => {
+ return (
+
+ {/* ===== 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 */}
+
+
+
+
+ {/* 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 ===== */}
+ Table
+Status
+Position
+Comments
++ Active Search +
+
+ {/* Left section (rows 2 and 3 stacked) */}
+
+
+
+ {/* Top tags */}
+
+
+
+ {/* User list */}
+
+ {CARD5_USERS.map((user, index) => {
+ const isChecked = index < card5CheckedCount;
+
+ return (
+
+
+ {/* Keyboard */}
+
+
+
+
+
+ {/* Row 2: Success Metric + Kyle */}
+
+
+ {/* Right section: Card 5 - User Management (spans full height of rows 2-3) */}
+
+ {/* Card 3 - Success Metric (+93.6%) — wider */}
+
+
+ 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" }}
+ >
+
+
+
+
+
+
+
+
+
+
+
+ {/* Row 3: Activity Timeline + Work From Anywhere (EQUAL width) */}
+
+
+
+
+ {/* Big percentage */}
+
+
+ Success Metric
+
+
+ Key performance indicators, visualized.
+
+
+
+
+
+ {/* Card 4 - Kyle avatar — narrower */}
+
+ +
+
+
+ {/* Text content */}
+
+
+
+ {card4Name}
+
+
+
+
+ {/* Card 6 - Live Activity Stream (Timeline) */}
+
+
+
+ {/* Activity entries */}
+
+
+ {card6VisibleEntries.map(({ key, item }, index) => (
+
+
+ ))}
+
+
+
+ {/* 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.
+
+
+
+
+
+
+
+
+ + {item.name} +
++ {item.message} +
++ {item.date} +
+
+
+ Change
+
+
+ Edit users
+
+
+
+
+ Current Date
+
+
+ Current Day
+
+
+
+
+
+
+
+
+
+
+ );
+ })}
+
+
+ {user.name}
+
+
+ {user.email}
+
+ );
+};
+
+const KeyboardGraphic = () => {
+ return (
+ 
+ );
+};
+
+const Arrow = () => {
+ return (
+
+ );
+};
+
+const RollingDigit = ({
+ steps,
+ track,
+ shouldStart,
+ durationSeconds,
+}: {
+ steps: number;
+ track: number[];
+ shouldStart: boolean;
+ durationSeconds: number;
+}) => {
+ return (
+
+
+
+ {/* Bento Grid Container */}
+
+ );
+};
+
+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 (
+
+
+
+ {/* Card 1 */}
+
+
+
+ Perfect Prompts, Instantly
+
+
+
+
+
+ 10 days free trial
+
+
+ then – $5/month
+
+
+
+
+ {/* Card 2 */}
+
+
+
+ 
+
+ {/* Card 3 */}
+
+
+
+
+
+ {/* Card 4 */}
+
+
+ 17M+
+
+
+
+ prompts crafted
+
+
+
+ {/* Card 5 */}
+
+
+
+ 21K
+
+
+ satisfied users
+
+
+
+
+
+
+ {/* Card 6 */}
+
+
+
+ {/* Card 7 */}
+
+
+
+ {/* Card 8 */}
+
+
+
+ Prompt templates
+
+
+ Start faster with ready-to-use templates.
+
+
+
+
+
+
+
+ {/* Card 9 */}
+
+
+
+
+
+
+
+
+ Master AI Prompting.
+
+
+
+
+ IdeaFlow
+
+
+
+ {/* Card 3 */}
+
+ 
+
+
+
+
+
+ 
+
+
+
+
+
+ Branching paths
+
+
+ Discover ideas through multiple prompt routes.
+
+
+
+
+ {/* Hidden SVG definitions */}
+
+
+ {/* Clipped container */}
+
+
+
+
+
+
+
+ Precision booster
+
+
+ Sharpen every prompt with keyword boosts.
+
+
+
+
+ {/* Hidden SVG definitions */}
+
+
+ {/* Clipped container */}
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+// GravityStack – matter-js physics, each item falls and stacks on the one below
+const GravityStack = () => {
+ const stackRef = useRef
+ {bursts.map((burst) =>
+ burst.particles.map((particle) => {
+ const x = Math.cos(particle.angle) * particle.distance;
+ const y = Math.sin(particle.angle) * particle.distance;
+
+ return (
+
+
+ );
+ }),
+ )}
+
+
+
+ );
+};
+
+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 (
+
+ );
+};
+
+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 (
+ <>
+
+ 10 days trial
+
+
+
+
+ Rewrite
+
+
+
+
+ PDF
+
+ JPG
+ +PNG
+ +
+
+
+
+ );
+};
+
+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 (
+
+
+
+ {icon}
+
+
+
+
+
+ );
+};
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 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 (
+
+ {/* 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.{" "}
+
+
+
+
+
+
+
+ {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 (
+
+
+
+ );
+};
+
+export default Bento6;
+
+const Card1 = () => {
+ const [activeTab, setActiveTab] = useState<"doc" | "api">("doc");
+
+ return (
+
+
+
+ {/* Background Subtle Effects */}
+
+
+
+
+
+
+
+
+
+ {/* Card 2: Developer forward */}
+
+
+
+
+
+
+
+
+ {/* Card 3: Build for performance */}
+
+
+
+
+
+
+
+ {/* Card 4: Conversion as a priority */}
+
+
+
+
+
+
+
+ {/* Card 5: Effortless funding */}
+
+
+
+
+
+
+
+ + Gorgeous out of the box +
++ Everything you need to start building fast. +
+Developer forward
++ Built for developers with clean and flexible tools. +
+Build for performance
++ Fast, efficient, and optimized for scale and reliability. +
++ Conversion as a priority +
++ Designed to turn visitors into loyal customers. +
+Effortless funding
++ Simple payments and subscription management for your business. +
+
+
+
+
+ setActiveTab("api")}
+ onMouseLeave={() => setActiveTab("doc")}
+ >
+
+ );
+};
+
+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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 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"
+
+ {"}"}
+
+ {/* Header */}
+
+ );
+};
+
+const Card3 = () => {
+ return (
+
+
+
+ {/* Terminal Content */}
+
+
+
+
+
+
+
+
+ {isTemplateOne ? "bash — setup" : "zsh — production"}
+
+
+ Card 2
+
+
+
+
+ {currentLines.map((line, i) => (
+
+ {line.text}
+ {i === currentLines.length - 1 && (
+
+ ))}
+
+
+
+
+ {/* Background Vertical Line */}
+
+
+ {/* Moving Spark on the line */}
+
+ );
+};
+
+const TimelineItem = ({
+ index,
+ title,
+ desc,
+}: {
+ index: number;
+ title: string;
+ desc: string;
+}) => {
+ const syncDelay = index * 2;
+ const syncDuration = 2.5;
+
+ return (
+
+ {items.map((item, i) => (
+
+
+ {/* Node (Dot) */}
+
+ );
+};
+
+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 (
+
+
+
+ {/* Content Card */}
+
+
+
+ {title}
+
+
+ {desc}
+
+
+
+ {/* Background Orbit Paths */}
+
+
+
+ {/* Orbiting Icons */}
+
+ );
+};
+
+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 (
+
+
+
+
+ {/* Decorative Glow */}
+
+
+
+ {/* Main Center Icon with Pulsing Effect */}
+
+ {icons.map((item, i) => (
+
+
+
+
+
+ );
+};
+
+export default Bento7;
+
+const CheckIcon = ({
+ className,
+ status,
+}: {
+ className?: string;
+ status: "loading" | "complete";
+}) => {
+ return (
+
+ );
+};
+
+const Wires = ({ className }: { className?: string }) => {
+ return (
+
+ );
+};
+
+const Star = ({ className }: { className?: string }) => {
+ return (
+
+ );
+};
+
+const StarIcon = ({ className }: { className?: string }) => {
+ return (
+
+ );
+};
+
+const Cognito = ({ className }: { className?: string }) => {
+ return (
+
+ );
+};
\ 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
+ {/* card 1 */}
+
+
+
+
+
+ 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.{" "}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ A
+
+
+ B
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+