"use client" import Link from "next/link" import { Button } from "@/components/ui/button" import { ArrowRight, ChevronDown, Search, LayoutGrid, Inbox, Star, Users, Map, Folder, Circle, Filter } from "lucide-react" const navLinks = [ { label: "Home", href: "#" }, { label: "Solutions", href: "#", hasDropdown: true }, { label: "Resources", href: "#" }, { label: "Price", href: "#" }, ] const sidebarItems = [ { icon: Inbox, label: "Inbox", badge: "12" }, { icon: Star, label: "My Issues" }, { icon: Inbox, label: "Inbox" }, ] const workspaceItems = [ { icon: LayoutGrid, label: "Views" }, { icon: Map, label: "Roadmaps" }, { icon: Users, label: "Teams" }, ] const tasks = [ { id: "PRD-08", title: "Making Velora's design system", status: "progress", project: "Project: Build in Public", date: "Apr 15" }, { id: "PRD-07", title: "Create a working prototype", status: "progress", project: "Project: Build in Public", date: "Apr 17" }, { id: "PRD-06", title: "Add a landing page for the design system on framer", status: "todo", project: "Project: Build in Public", date: "Apr 17" }, { id: "PRD-05", title: "Add a live preview page on framer", status: "todo", project: "Framer Projects", date: "Apr 17" }, { id: "PRD-04", title: "Make a code version of the project", status: "backlog", project: "Project: Build in Public", date: "Apr 9" }, { id: "PRD-03", title: "Make a framer template", status: "backlog", project: "Framer Projects", date: "Apr 9" }, ] export default function LayouticHero() { return (

{/* Gradient background */}

{/* Navigation */} {/* Hero Content */}

Smart Tools for Smarter
Project Workflows

Streamline tasks, boost collaboration, and achieve goals effortlessly with your AI-driven project management assistant.

{/* 3D Decorative Elements */}

{/* Dashboard Mockup */}

{/* Browser Chrome */}

ulayout.studio

✎

{/* App Content */}

{/* Sidebar */}

Velora

{sidebarItems.map((item, i) => (

{item.label}

{item.badge && {item.badge}}

))}

Workspace

{workspaceItems.map((item, i) => (

{item.label}

))}

Favorites

Build in Public

Framer Portfolio

{/* Main Content */}

Personal

⬇ ☐

Filter

| Display

{/* Task Groups */}

In Progress 2

{tasks.slice(0, 2).map((task) => (

{task.id} {task.title}

{task.project} {task.date}

))}

Todo 2

{tasks.slice(2, 4).map((task) => (

{task.id} {task.title}

{task.project} {task.date}

))}

Backlog 2

) }

Smart Tools for Smarter Project Workflows

Smart Tools for Smarter
Project Workflows

Layoutic Hero