modula-ui 1.0.2 → 1.0.4

package/README.md

@@ -1,35 +1,98 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Modula UI
 
-## Getting Started
-First, run the development server:
+A library of modern UI patterns and complete interfaces built with [Shadcn](https://ui.shadcn.com/) and [Tailwind CSS](https://tailwindcss.com/). Get beautiful, functional UIs without building from scratch.
+
+## ✨ Features
+
+- 🎨 **Complete UI Patterns** - Full-featured interfaces, not just individual components
+- 🚀 **Easy Integration** - Simple CLI to add entire UI blocks to your project
+- 📦 **Copy & Paste** - Browse interfaces in your browser and copy code directly
+- 🎯 **Modern Stack** - Built with Next.js, React 19, and Tailwind CSS 4
+- 🔧 **Customizable** - Full control over styling and behavior
+- 📱 **Responsive** - Mobile-first design approach
+
+## 🚀 Quick Start
+
+### Browse UI Patterns
+
+Run the library locally to browse all available UI patterns and interfaces:
+
+```bash
+npx modula-ui
+```
+
+This will start a local server at `http://localhost:3177` where you can:
+- Preview all UI patterns
+- Copy interface code
+- See live examples
+
+### Add UI Patterns to Your Project
+
+Use the CLI to add complete interfaces directly to your project:
+
+```bash
+npx modula-ui add <component-name>
+```
+
+The CLI will automatically:
+1. Install required dependencies
+2. Install necessary Shadcn UI components
+3. Copy the complete interface files to your project
+
+## 📦 Available UI Patterns
+
+- **video-conference** - Full-featured video conferencing interface with participant grid, controls, and animations
+- **group-chat** - Modern group chat interface with sidebar, message threads, and real-time feel
+
+
+## 🛠️ Installation
+
+### Prerequisites
+
+- Node.js >= 18.17.0
+- A Next.js or React project with Tailwind CSS configured
+
+### Example: Adding a UI Block
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+# Add the video conference page
+npx modula-ui add video-conference
+
+# Add the group chat interface
+npx modula-ui add group-chat
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+The interface will be added to `src/library/<type>/` (or `library/<type>/` if no `src` folder exists).
 
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+## 🎯 Usage
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+After adding a UI pattern, import and use it in your project:
+
+```jsx
+import VideoConferencePage from '@/library/pages/VideoConferencePage';
+
+export default function MyPage() {
+  return <VideoConferencePage />;
+}
+```
 
-## Learn More
+## 🏗️ Tech Stack
 
-To learn more about Next.js, take a look at the following resources:
+- **Framework:** Next.js 16
+- **UI Library:** React 19
+- **Styling:** Tailwind CSS 4
+- **Components:** Radix UI primitives
+- **Animations:** Framer Motion
+- **Icons:** Lucide React
+- **Charts:** Recharts
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+## 📄 License
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+MIT © Mary Ojo
 
-## Deploy on Vercel
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## 🔗 Links
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+- [npm Package](https://www.npmjs.com/package/modula-ui)
+- [Shadcn UI](https://ui.shadcn.com/)
+- [Tailwind CSS](https://tailwindcss.com/)

package/bin/run.js

@@ -125,26 +125,28 @@ if (command === 'add') {
     process.exit(1);
   }
 
-} else {
-  // Default behavior: Start the Next.js server
-  const port = 3177;
-  const dev = false;
-  const app = next({ dev, dir: packageRoot });
-  const handle = app.getRequestHandler();
-
-  await app.prepare();
-
-  createServer((req, res) => {
-    const parsedUrl = parse(req.url, true);
-    handle(req, res, parsedUrl);
-  }).listen(port, () => {
-    console.log(`
-    Your UI Library is LIVE! 
-    Open → http://localhost:${port}
+} 
+
+// else {
+//   // Default behavior: Start the Next.js server
+//   const port = 3177;
+//   const dev = false;
+//   const app = next({ dev, dir: packageRoot });
+//   const handle = app.getRequestHandler();
+
+//   await app.prepare();
+
+//   createServer((req, res) => {
+//     const parsedUrl = parse(req.url, true);
+//     handle(req, res, parsedUrl);
+//   }).listen(port, () => {
+//     console.log(`
+//     Your UI Library is LIVE! 
+//     Open → http://localhost:${port}
     
-    Click any component → Copy code → Paste into your project!
+//     Click any component → Copy code → Paste into your project!
     
-    Press Ctrl+C to stop
-    `);
-  });
-}
+//     Press Ctrl+C to stop
+//     `);
+//   });
+// }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modula-ui",
-  "version": "1.0.2",
-  "description": "A library of modern interfaces and UI patterns with great UX built with Shadcn",
+  "version": "1.0.4",
+  "description": "A library of beautiful modern UI blocks and patterns built with Shadcn by Mary Ojo",
   "keywords": [
     "tailwind",
     "components",
@@ -28,15 +28,16 @@
     "registry.json"
   ],
   "scripts": {
-    "dev": "next dev -p 3177",
+    "dev": "next dev",
     "build": "next build",
-    "start": "next start -p 3177"
+    "start": "next start"
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-progress": "^1.1.8",
@@ -46,12 +47,14 @@
     "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@tsparticles/react": "^3.0.0",
+    "@tsparticles/slim": "^3.9.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "framer-motion": "^12.23.24",
     "lucide-react": "^0.553.0",
-    "next": "16.0.7",
+    "next": "16.0.10",
     "react": "19.2.0",
     "react-day-picker": "^9.11.2",
     "react-dom": "19.2.0",

package/public/google.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-3 0 262 262" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"/><path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"/><path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"/><path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"/></svg>

package/registry.json

@@ -13,25 +13,23 @@
             "avatar"
         ]
     },
-    "group-chat": {
-        "name": "GroupChat",
-        "type": "pages",
-        "path": "src/library/pages/GroupChat/GroupChat.jsx",
+    "login-page-01": {
+        "name": "Login Page 01",
+        "type": "blocks",
+        "path": "src/components/login-template/page.jsx",
         "files": [
-            "src/library/pages/GroupChat/GroupChat.jsx",
-            "src/library/pages/GroupChat/data.js"
+            "src/components/login-template/page.jsx",
+            "src/components/login-template/particles-background.jsx"
         ],
         "dependencies": [
-            "lucide-react"
+            "@tsparticles/react",
+            "@tsparticles/slim"
         ],
         "registryDependencies": [
-            "sidebar",
-            "avatar",
-            "badge",
-            "scroll-area",
-            "navigation-menu",
+            "button",
+            "card",
             "input",
-            "button"
+            "label"
         ]
     }
 }

package/src/app/globals.css

@@ -1,12 +1,13 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
+
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-lexend);
+  --font-sans: var(--font-dm-sans);
   --font-mono: var(--font-geist-mono);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
@@ -124,3 +125,41 @@
     font-family: var(--font-lexend), sans-serif;
   }
 }
+
+@layer components {
+  .glass {
+    /* Semi-transparent background – usually white or light tint */
+    background: rgba(255, 255, 255, 0.15);   /* 0.1 – 0.25 is most common */
+    
+    /* The magic line – blurs what's behind */
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);     /* Safari support */
+    
+    /* Softer rounded corners */
+    border-radius: 16px;
+    
+    /* Subtle border that looks like glass edge */
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    
+    /* Optional – adds depth & modern feel */
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+    
+    /* Important for readability */
+    color: white;
+    padding: 2rem;
+  }
+
+  .glass-dark {
+    background: rgba(31, 31, 32, 0.75);     /* dark tint */
+    backdrop-filter: blur(25px);
+    -webkit-backdrop-filter: blur(25px);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 20px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
+    color: #f0f0ff;
+  }
+
+  #tsparticles, #tsparticles canvas {
+    pointer-events: none !important;
+}
+}

package/src/app/group-chat/page.jsx

@@ -0,0 +1,6 @@
+
+import GroupChat from "@/library/pages/GroupChat/GroupChat"
+
+export default function Page() {
+    return <GroupChat />
+}

package/src/app/layout.js

@@ -1,8 +1,13 @@
-import { Lexend, Geist_Mono } from "next/font/google";
+import { DM_Sans, Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 
-const lexend = Lexend({
-  variable: "--font-lexend",
+const dmSans = DM_Sans({
+  variable: "--font-dm-sans",
+  subsets: ["latin"],
+});
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
   subsets: ["latin"],
 });
 
@@ -13,14 +18,14 @@ const geistMono = Geist_Mono({
 
 export const metadata = {
   title: "Modula UI",
-  description: "A library of modern interfaces and UI patterns with great UX built with Shadcn",
+  description: "A library of beautiful modern UI blocks and patterns built with care and Shadcn by Mary Ojo",
 };
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body
-        className={`${lexend.variable} ${geistMono.variable} antialiased`}
+        className={`${dmSans.variable} ${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         {children}
       </body>

package/src/app/login-demo/page.jsx

@@ -0,0 +1,5 @@
+import LoginPage from "@/components/login-template/page"
+
+export default function LoginDemoPage() {
+    return <LoginPage />
+}

package/src/app/page.js

@@ -34,7 +34,7 @@ export default function Home() {
         />
 
         <main className="space-y-6 w-full">
-          <PreviewCard>{current?.preview}</PreviewCard>
+          <PreviewCard url={current?.url}>{current?.preview}</PreviewCard>
 
           <CodeCard code={current?.code} />
 

package/src/app/video-conference/page.jsx

@@ -0,0 +1,6 @@
+
+import VideoConferencePage from "@/library/pages/VideoConference/VideoConferencePage"
+
+export default function Page() {
+    return <VideoConferencePage />
+}

package/src/components/Header.jsx

@@ -9,7 +9,7 @@ export default function Header({ sidebarOpen, toggleSidebar }) {
       <div className="mb-8 flex items-center justify-between">
         <div>
           <Logo />
-          <p className="text-gray-600">A library of modern interfaces and UI patterns with great UX built with Shadcn</p>
+          <p className="text-gray-600">A library of beautiful modern UI blocks and patterns built with care and Shadcn by <a href="https://www.linkedin.com/in/mary-ojo/" className='underline'>Mary (a Design Engineer)</a></p>
         </div>
 
         <button

package/src/components/Logo.jsx

@@ -30,7 +30,7 @@ const Logo = ({ className = '' }) => {
                 fill="#111827"
                 letterSpacing="-1"
             >
-                modula ui
+                Modula UI
             </text>
 
             {/* Gradients */}

package/src/components/PreviewCard.jsx

@@ -1,80 +1,20 @@
-import { useState, useEffect, useRef } from "react";
-import { createPortal } from "react-dom";
-
-export default function PreviewCard({ children, title = "Preview" }) {
-  const [externalWindow, setExternalWindow] = useState(null);
-  const [containerElement, setContainerElement] = useState(null);
-
+export default function PreviewCard({ children, title = "Preview", url }) {
   const openFullPreview = () => {
-    if (externalWindow) {
-      externalWindow.focus();
-      return;
+    if (url) {
+      window.open(url, "_blank");
     }
-
-    const newWindow = window.open("", "_blank", "width=1200,height=800,left=200,top=200");
-    if (!newWindow) return;
-
-    const fullPage = `
-      <!DOCTYPE html>
-      <html lang="en">
-        <head>
-          <meta charset="utf-8">
-          <meta name="viewport" content="width=device-width, initial-scale=1">
-          <title>${title}</title>
-          <script src="https://cdn.tailwindcss.com"></script>
-          <style>
-            body { margin: 0; background: #f9fafb; }
-            @media (prefers-color-scheme: dark) { body { background: #111827; } }
-          </style>
-        </head>
-        <body class="min-h-screen flex items-center justify-center">
-          <div id="root" class="w-full mx-auto"></div>
-        </body>
-      </html>
-    `;
-
-    newWindow.document.write(fullPage);
-    newWindow.document.close();
-
-    // Wait for the window to load before trying to access the DOM
-    newWindow.onload = () => {
-      const container = newWindow.document.getElementById("root");
-      setExternalWindow(newWindow);
-      setContainerElement(container);
-    };
-
-    // In case onload fired synchronously or we missed it (rare with open, but good safety)
-    if (newWindow.document.readyState === 'complete') {
-      const container = newWindow.document.getElementById("root");
-      setExternalWindow(newWindow);
-      setContainerElement(container);
-    }
-
-    // Handle window close
-    newWindow.onbeforeunload = () => {
-      setExternalWindow(null);
-      setContainerElement(null);
-    };
   };
 
-  // Close external window when component unmounts
-  useEffect(() => {
-    return () => {
-      if (externalWindow) {
-        externalWindow.close();
-      }
-    };
-  }, [externalWindow]);
-
   return (
     <div className="w-full bg-white rounded-lg shadow-sm border border-gray-200 p-3">
       <div className="flex items-center justify-between mb-4">
         <h2 className="text-xl font-semibold text-gray-900">{title}</h2>
 
         <button
+          type="button"
           onClick={openFullPreview}
           className={`flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md transition
-            text-gray-700 bg-gray-50 hover:bg-gray-100 hover:text-gray-900`}
+            text-gray-700 bg-gray-50 hover:bg-gray-100 hover:text-gray-900 cursor-pointer`}
         >
           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
@@ -86,13 +26,10 @@ export default function PreviewCard({ children, title = "Preview" }) {
       {/* The preview area in the main window */}
       <div
         id="preview-content"
-        className="bg-gray-50 rounded-lg p-4 border border-dashed border-gray-300 min-h-96 w-full"
+        className="bg-gray-50 rounded-lg p-4 border border-dashed border-gray-300 min-h-96 max-h-[600px] w-full overflow-hidden"
       >
         {children}
       </div>
-
-      {/* Render content into the new window if it exists */}
-      {containerElement && createPortal(children, containerElement)}
     </div>
   );
 }

package/src/components/Sidebar.jsx

@@ -15,7 +15,7 @@ export default function Sidebar({ selected, onSelect, open, onClose }) {
       style={{ top: '1.5rem' }}   // matches Header padding
     >
       <div className="flex items-center justify-between mb-4 lg:mb-3">
-        <h2 className="font-semibold text-gray-700">Patterns</h2>
+        <h2 className="font-semibold text-gray-700">Blocks</h2>
         <button
           onClick={onClose}
           className="lg:hidden p-1 hover:bg-gray-100 rounded"

package/src/components/login-template/google.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-3 0 262 262" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"/><path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"/><path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"/><path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"/></svg>

package/src/components/login-template/index.css

@@ -0,0 +1,4 @@
+#tsparticles,
+#tsparticles canvas {
+    pointer-events: none !important;
+}

package/src/components/login-template/index.jsx

@@ -0,0 +1,9 @@
+
+import LoginPage from "./page"
+
+export const LoginDemo = {
+    name: "Login Page 01",
+    code: "npx modula-ui add login-page-01",
+    preview: <LoginPage />,
+    url: "/login-demo"
+}

package/src/components/login-template/page.jsx

@@ -0,0 +1,99 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { ParticlesBackground } from "./particles-background"
+import logo from "../../../public/logo_cloudsync.png"
+import google from "../../../public/google.svg"
+import Image from "next/image"
+
+export default function LoginPage() {
+    return (
+        <div className="dark font-sans w-full min-h-screen flex flex-col lg:flex-row items-center justify-center lg:justify-end overflow-hidden bg-background text-foreground">
+            <ParticlesBackground />
+
+            <div className="w-full z-10 px-10 sm:px-6 lg:px-20 py-12 md:py-12 flex flex-col lg:flex-row items-center justify-center gap-8 lg:gap-28">
+                <div className="hidden lg:block space-y-4 w-full lg:w-1/2">
+                    <div className="flex items-center gap-4 mb-4">
+                        <Image
+                            src={logo}
+                            alt="Logo"
+                            width={65}
+                            height={65}
+                        />
+                    </div>
+                    <h3 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight text-white">Secure, Scalable and Seamless</h3>
+                    <p className="text-sm sm:text-base md:text-lg text-muted-foreground">Empowering businesses with world-class cloud computing infrastructure and 99.9% uptime. Managed, monitored and optimized for your growth.</p>
+                </div>
+                <div className="lg:hidden flex justify-center mb-4">
+                    <Image
+                        src={logo}
+                        alt="Logo"
+                        width={65}
+                        height={65}
+                    />
+                </div>
+                <Card className="w-full md:w-[70%] lg:w-1/2 glass-dark">
+                    <CardHeader className="space-y-1 ">
+                        <CardTitle className="text-xl sm:text-2xl font-bold tracking-tight">Welcome back</CardTitle>
+                        <CardDescription className="text-sm sm:text-base text-muted-foreground/80">
+                            Enter your email to sign in to your account
+                        </CardDescription>
+                    </CardHeader>
+                    <div className="relative my-1">
+                        <div className="absolute inset-0 flex items-center">
+                            <span className="w-full border-t border-muted-foreground/20" />
+                        </div>
+                    </div>
+                    <CardContent className="space-y-4">
+                        <div className="space-y-2">
+                            <Label htmlFor="email" className="text-sm">Email</Label>
+                            <Input id="email" placeholder="m@example.com" required type="email" className="bg-white/5 backdrop-blur-sm border-white/10 focus:bg-white/10 focus:border-white/20 transition-all text-sm" />
+                        </div>
+                        <div className="space-y-2">
+                            <Label htmlFor="password" className="text-sm">Password</Label>
+                            <Input id="password" required placeholder="********" type="password" className="bg-white/5 backdrop-blur-sm border-white/10 focus:bg-white/10 focus:border-white/20 transition-all text-sm" />
+                        </div>
+                        <Button className="w-full bg-cyan-500 shadow-lg shadow-primary/20 hover:shadow-primary/40 transition-shadow text-sm sm:text-base" type="submit">
+                            Sign In
+                        </Button>
+
+                        <div className="relative my-2 mb-3">
+                            <div className="absolute inset-0 flex items-center">
+                                <span className="w-full border-t border-muted-foreground/20" />
+                            </div>
+                            <div className="relative flex justify-center text-xs uppercase">
+                                <span className="bg-transparent px-2 text-muted-foreground">
+                                    Or continue with
+                                </span>
+                            </div>
+                        </div>
+
+                        <Button variant="outline" className="w-full bg-white/5 backdrop-blur-sm border-white/10 hover:bg-white/10 hover:text-white text-sm sm:text-base" onClick={() => { }}>
+                            <Image
+                                src={google}
+                                alt="Google"
+                                width={16}
+                                height={16}
+                            />
+                            Google
+                        </Button>
+                    </CardContent>
+                    <CardFooter className="flex flex-col gap-2 text-center text-xs sm:text-sm text-muted-foreground">
+                        <a href="#" className="hover:text-primary transition-colors hover:underline">
+                            Forgot your password?
+                        </a>
+                        <div className="text-xs">
+                            Don't have an account?{" "}
+                            <a href="#" className="font-medium text-primary hover:underline transition-colors">
+                                Sign up for free
+                            </a>
+                        </div>
+                    </CardFooter>
+                </Card>
+            </div>
+        </div>
+    )
+}

package/src/components/login-template/particles-background.jsx

@@ -0,0 +1,100 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import Particles, { initParticlesEngine } from "@tsparticles/react"
+import { loadSlim } from "@tsparticles/slim"
+
+export function ParticlesBackground() {
+    const [init, setInit] = useState(false)
+
+    useEffect(() => {
+        initParticlesEngine(async (engine) => {
+            await loadSlim(engine)
+        }).then(() => {
+            setInit(true)
+        })
+    }, [])
+
+    if (!init) {
+        return null
+    }
+
+    const options = {
+        particles: {
+            number: {
+                value: 30,
+                density: {
+                    enable: true,
+                    width: 800,
+                    height: 800
+                }
+            },
+            color: {
+                value: "#FFFEE0"
+            },
+            shape: {
+                type: "circle",
+            },
+            opacity: {
+                value: 0.5,
+                animation: {
+                    enable: false
+                }
+            },
+            size: {
+                value: { min: 1, max: 3 },
+            },
+            links: {
+                enable: true,
+                distance: 150,
+                color: "#00FFFF",
+                opacity: 0.2,
+                width: 1
+            },
+            move: {
+                enable: true,
+                speed: 0.1,
+                direction: "none",
+                random: false,
+                straight: false,
+                outModes: {
+                    default: "out"
+                },
+            }
+        },
+        interactivity: {
+            detectsOn: "canvas",
+            events: {
+                onHover: {
+                    enable: false,
+                    mode: "repulse"
+                },
+                onClick: {
+                    enable: false,
+                    mode: "push"
+                },
+                resize: {
+                    enable: false
+                }
+            },
+            modes: {
+                repulse: {
+                    distance: 100,
+                    duration: 0.4
+                },
+                push: {
+                    quantity: 4
+                }
+            }
+        },
+        retina_detect: true
+    }
+
+    return (
+        <Particles
+            id="tsparticles"
+            className="pointer-events-none"
+            options={options}
+        />
+    )
+}

package/src/components/ui/label.jsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+    className,
+    ...props
+}) {
+    return (
+        <LabelPrimitive.Root
+            data-slot="label"
+            className={cn(
+                "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+export { Label }

package/src/data/componentData.js

@@ -2,11 +2,12 @@ import { VideoConference } from "@/library/pages/VideoConference";
 import { ReservationsOverview } from "@/library/pages/ReservationsOverview";
 import { FitnessOverview } from "@/library/pages/FitnessPage";
 import { GroupChat } from "@/library/pages/GroupChat";
-
+import { LoginDemo } from "@/components/login-template";
 
 export const components = {
   VideoConference,
-  GroupChat,
+  // GroupChat,
+  LoginDemo,
   // ReservationsOverview,
   // FitnessOverview
 };

package/src/library/pages/GroupChat/index.jsx

@@ -8,5 +8,6 @@ export const GroupChat = {
   code: "npx modula-ui add group-chat",
   preview: (
     <GroupChatCode />
-  )
+  ),
+  url: "/group-chat"
 }

package/src/library/pages/VideoConference/index.jsx

@@ -8,5 +8,6 @@ export const VideoConference = {
   code: "npx modula-ui add video-conference",
   preview: (
     <VideoConferencePage />
-  )
+  ),
+  url: "/video-conference"
 }