[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import { Activity, BarChart3, Clock, Hexagon, Layers, Octagon, Pentagon, Settings, Triangle, Users } from "lucide-react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { Badge } from "@/components/ui/badge" export default function Dashboard() { const [activeSection, setActiveSection] = useState("dashboard") return (

{/* Unconventional Navigation - Shape-based */}

{/* Asymmetrical Header */}

Unconventional Dashboard

Breaking design principles while maintaining usability

EXPERIMENTAL

{/* Main Content - Asymmetrical Layout */}

{activeSection === "dashboard" && (

{/* Diagonal Card */}

Performance

Revenue 78%

Users 92%

Conversion 64%

{/* Tilted Stats Card */}

Statistics

Total Sales $24,389

New Users 1,284

Conversion Rate 3.2%

{/* Skewed Activity Card */}

Recent Activity

New user registered

2 minutes ago

New order placed

15 minutes ago

{/* Diagonal Card */}

Project Status

Website Redesign

75% completed

Mobile App

45% completed

API Integration

90% completed

Documentation

30% completed

{/* Tilted Card */}

Quick Actions

)} {activeSection === "analytics" && (

Analytics Section

)} {activeSection === "users" && (

Users Section

)} {activeSection === "settings" && (

Settings Section

)}

) } [V0_FILE]typescriptreact:file="components/ui/progress.tsx" "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { indicatorClassName?: string } >(({ className, value, indicatorClassName, ...props }, ref) => ( )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress }

About

Tags

Share

More from scalableb2b

More Templates Like This

About

Tags

Share

About

Tags

Share

More from scalableb2b

More Templates Like This