Dashboard UI Design
(1) layout.tsx vs page.tsx
(2) What Is A Route (URL)
(3) What Is The Starting Point Of The Project
(4) Edit The “app/layout.tsx” For Global Layout
// app/layout.tsx
'use client';
import { useState, ReactNode } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import './globals.css';
// Navigation items with all services
const navigationItems = [
{
name: 'Dashboard',
path: '/',
icon: '📊',
category: 'main'
},
{
name: 'Kundali',
path: '/kundali',
icon: '🎯',
category: 'services'
},
{
name: 'Dosha Analysis',
path: '/dosha',
icon: '🔮',
category: 'services'
},
{
name: 'Dasha Periods',
path: '/dasha',
icon: '⏳',
category: 'services'
},
{
name: 'Transit',
path: '/transit',
icon: '🌙',
category: 'services'
},
{
name: 'Predictions',
path: '/predictions',
icon: '✨',
category: 'services'
},
{
name: 'Reports',
path: '/reports',
icon: '📄',
category: 'services'
},
{
name: 'Calendar',
path: '/calendar',
icon: '📅',
category: 'services'
},
{
name: 'Matchmaking',
path: '/matchmaking',
icon: '💑',
category: 'services'
},
{
name: 'Muhurat',
path: '/muhurat',
icon: '⏰',
category: 'services'
},
{
name: 'Vastu',
path: '/vastu',
icon: '🏠',
category: 'services'
},
{
name: 'Palmistry',
path: '/palmistry',
icon: '✋',
category: 'services'
},
{
name: 'Numerology',
path: '/numerology',
icon: '🔢',
category: 'services'
},
{
name: 'Gemstone',
path: '/gemstone',
icon: '💎',
category: 'services'
},
{
name: 'Prashna',
path: '/prashna',
icon: '❓',
category: 'services'
},
{
name: 'Remedies',
path: '/remedies',
icon: '🙏',
category: 'services'
},
{
name: 'Griha Shanti Puja',
path: '/griha-shanti-puja',
icon: '🕉️',
category: 'services'
},
{
name: 'Expert Pandits',
path: '/pandits',
icon: '👨🏫',
category: 'connect'
},
{
name: 'AI Chatbot',
path: '/chatbot',
icon: '🤖',
category: 'connect'
},
{
name: 'Consultation',
path: '/consultation',
icon: '💬',
category: 'connect'
},
{
name: 'Community',
path: '/community',
icon: '👥',
category: 'social'
},
{
name: 'Subscription',
path: '/subscription',
icon: '💳',
category: 'account'
},
];
export default function RootLayout({ children }: { children: ReactNode }) {
const [sidebarOpen, setSidebarOpen] = useState(true);
const [userMenuOpen, setUserMenuOpen] = useState(false);
const pathname = usePathname();
const getCategoryTitle = (category: string) => {
switch (category) {
case 'main': return '🏠 Main';
case 'services': return '🌟 Astrology Services';
case 'connect': return '🤝 Connect & Consult';
case 'social': return '👥 Community';
case 'account': return '⚙️ Account';
default: return '';
}
};
const groupedNavigation = navigationItems.reduce((acc, item) => {
if (!acc[item.category]) {
acc[item.category] = [];
}
acc[item.category].push(item);
return acc;
}, {} as Record<string, typeof navigationItems>);
return (
<html lang="en">
<body className="bg-gradient-to-br from-slate-50 via-purple-50 to-indigo-50 min-h-screen">
<div className="flex h-screen overflow-hidden">
{/* Sidebar */}
<aside
className={`${
sidebarOpen ? 'w-72' : 'w-20'
} bg-gradient-to-b from-indigo-900 via-purple-900 to-indigo-800 text-white transition-all duration-300 flex flex-col shadow-2xl relative z-30`}
>
{/* Logo & Toggle */}
<div className="p-6 border-b border-white/10 flex items-center justify-between bg-black/20">
{sidebarOpen ? (
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-xl flex items-center justify-center text-2xl shadow-lg">
🌟
</div>
<div>
<h1 className="text-xl font-bold">AstroServices</h1>
<p className="text-xs text-purple-200">Your Cosmic Guide</p>
</div>
</div>
) : (
<div className="w-10 h-10 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-xl flex items-center justify-center text-2xl shadow-lg mx-auto">
🌟
</div>
)}
<button
onClick={() => setSidebarOpen(!sidebarOpen)}
className="text-white hover:bg-white/10 p-2 rounded-lg transition-colors ml-2"
>
{sidebarOpen ? (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
</svg>
) : (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 5l7 7-7 7M5 5l7 7-7 7" />
</svg>
)}
</button>
</div>
{/* Navigation */}
<nav className="flex-1 overflow-y-auto py-6 px-3 space-y-6 scrollbar-thin scrollbar-thumb-purple-600 scrollbar-track-transparent">
{Object.entries(groupedNavigation).map(([category, items]) => (
<div key={category}>
{sidebarOpen && (
<h3 className="px-3 mb-3 text-xs font-semibold text-purple-200 uppercase tracking-wider">
{getCategoryTitle(category)}
</h3>
)}
<ul className="space-y-1">
{items.map((item) => {
const isActive = pathname === item.path;
return (
<li key={item.path}>
<Link
href={item.path}
className={`flex items-center gap-3 px-3 py-3 rounded-xl transition-all duration-200 group relative ${
isActive
? 'bg-gradient-to-r from-purple-600 to-indigo-600 shadow-lg shadow-purple-500/50'
: 'hover:bg-white/10'
}`}
title={!sidebarOpen ? item.name : ''}
>
<span className={`text-2xl ${isActive ? 'scale-110' : 'group-hover:scale-110'} transition-transform`}>
{item.icon}
</span>
{sidebarOpen && (
<span className={`font-medium ${isActive ? 'text-white' : 'text-gray-200'}`}>
{item.name}
</span>
)}
{isActive && (
<div className="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-yellow-400 rounded-l-full"></div>
)}
</Link>
</li>
);
})}
</ul>
</div>
))}
</nav>
{/* User Profile */}
<div className="p-4 border-t border-white/10 bg-black/20">
{sidebarOpen ? (
<div className="flex items-center gap-3 px-3 py-2 hover:bg-white/10 rounded-lg cursor-pointer transition-colors">
<div className="w-10 h-10 bg-gradient-to-br from-purple-400 to-pink-500 rounded-full flex items-center justify-center text-lg font-bold shadow-lg">
U
</div>
<div className="flex-1">
<p className="font-medium text-sm">User Name</p>
<p className="text-xs text-purple-200">Premium Member</p>
</div>
<svg className="w-4 h-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</div>
) : (
<div className="w-10 h-10 bg-gradient-to-br from-purple-400 to-pink-500 rounded-full flex items-center justify-center text-lg font-bold shadow-lg mx-auto cursor-pointer">
U
</div>
)}
</div>
</aside>
{/* Main Content Area */}
<div className="flex-1 flex flex-col overflow-hidden">
{/* Header - Enhanced Design */}
<header className="bg-gradient-to-r from-purple-600 via-indigo-600 to-purple-700 shadow-lg sticky top-0 z-20">
<div className="px-8 py-5">
<div className="flex items-center justify-between">
{/* Left Section - Greeting with Time */}
<div className="flex items-center gap-4">
<div className="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center shadow-lg">
<span className="text-3xl">👋</span>
</div>
<div>
<h2 className="text-2xl font-bold text-white flex items-center gap-2">
Hello, User Name
<span className="text-yellow-300 text-lg">✨</span>
</h2>
<p className="text-purple-100 text-sm mt-0.5 flex items-center gap-2">
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Saturday, November 22, 2025 • 2:30 PM
</p>
</div>
</div>
{/* Right Section - Actions */}
<div className="flex items-center gap-3">
{/* Today's Horoscope Card */}
<div className="hidden lg:flex items-center gap-3 bg-white/10 backdrop-blur-sm px-4 py-2.5 rounded-xl border border-white/20 hover:bg-white/15 transition-all cursor-pointer">
<div className="w-10 h-10 bg-yellow-400 rounded-lg flex items-center justify-center shadow-md">
<span className="text-xl">♌</span>
</div>
<div>
<p className="text-xs text-purple-100 leading-tight">Today's Sign</p>
<p className="text-sm font-semibold text-white leading-tight">Leo</p>
</div>
</div>
{/* Quick Action Button */}
<button className="hidden md:flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-xl hover:shadow-lg hover:scale-105 transition-all font-medium">
<span>✨</span>
<span>New Reading</span>
</button>
{/* Divider */}
<div className="w-px h-10 bg-white/20 hidden md:block"></div>
{/* Messages */}
<button className="relative p-3 hover:bg-white/10 rounded-xl transition-colors group">
<svg className="w-6 h-6 text-white group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
</svg>
<span className="absolute top-2 right-2 w-2.5 h-2.5 bg-green-400 rounded-full ring-2 ring-purple-600"></span>
</button>
{/* Notifications */}
<button className="relative p-3 hover:bg-white/10 rounded-xl transition-colors group">
<svg className="w-6 h-6 text-white group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
<span className="absolute top-2 right-2 w-2.5 h-2.5 bg-red-400 rounded-full ring-2 ring-purple-600 animate-pulse"></span>
</button>
{/* Profile Dropdown */}
<div className="relative">
<button
onClick={() => setUserMenuOpen(!userMenuOpen)}
className="flex items-center gap-3 bg-white/10 backdrop-blur-sm px-3 py-2 rounded-xl hover:bg-white/15 transition-all border border-white/20"
>
<div className="w-9 h-9 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-lg flex items-center justify-center text-white font-bold text-sm shadow-md">
UN
</div>
<div className="text-left hidden xl:block">
<p className="text-sm font-semibold text-white leading-tight">User Name</p>
<p className="text-xs text-purple-100 leading-tight">Premium Member</p>
</div>
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
{/* Dropdown Menu */}
{userMenuOpen && (
<div className="absolute right-0 mt-2 w-64 bg-white rounded-xl shadow-2xl border border-gray-200 py-2 z-50">
<div className="px-4 py-3 border-b border-gray-100 bg-gradient-to-r from-purple-50 to-indigo-50">
<div className="flex items-center gap-3">
<div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-lg flex items-center justify-center text-white font-bold shadow-md">
UN
</div>
<div>
<p className="text-sm font-bold text-gray-800">User Name</p>
<p className="text-xs text-gray-600">[email protected]</p>
</div>
</div>
<div className="mt-3 flex items-center gap-2">
<span className="px-2 py-1 bg-gradient-to-r from-yellow-400 to-orange-500 text-white text-xs font-semibold rounded-md">
⭐ Premium
</span>
<span className="px-2 py-1 bg-green-100 text-green-700 text-xs font-semibold rounded-md">
✓ Verified
</span>
</div>
</div>
<div className="py-2">
<Link href="/profile" className="flex items-center gap-3 px-4 py-2.5 hover:bg-purple-50 transition-colors group">
<svg className="w-5 h-5 text-gray-600 group-hover:text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
<span className="text-sm text-gray-700 group-hover:text-purple-600 font-medium">My Profile</span>
</Link>
<Link href="/settings" className="flex items-center gap-3 px-4 py-2.5 hover:bg-purple-50 transition-colors group">
<svg className="w-5 h-5 text-gray-600 group-hover:text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span className="text-sm text-gray-700 group-hover:text-purple-600 font-medium">Settings</span>
</Link>
<Link href="/billing" className="flex items-center gap-3 px-4 py-2.5 hover:bg-purple-50 transition-colors group">
<svg className="w-5 h-5 text-gray-600 group-hover:text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
</svg>
<span className="text-sm text-gray-700 group-hover:text-purple-600 font-medium">Billing</span>
</Link>
<Link href="/subscription" className="flex items-center gap-3 px-4 py-2.5 hover:bg-purple-50 transition-colors group">
<svg className="w-5 h-5 text-gray-600 group-hover:text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
</svg>
<span className="text-sm text-gray-700 group-hover:text-purple-600 font-medium">Upgrade Plan</span>
</Link>
</div>
<div className="border-t border-gray-100 mt-2 pt-2">
<button className="flex items-center gap-3 px-4 py-2.5 hover:bg-red-50 transition-colors w-full text-left group">
<svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
<span className="text-sm text-red-600 font-semibold">Logout</span>
</button>
</div>
</div>
)}
</div>
</div>
</div>
</div>
{/* Quick Stats Bar */}
<div className="bg-white/10 backdrop-blur-sm border-t border-white/20 px-8 py-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-8">
<div className="flex items-center gap-2">
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
<span className="text-sm text-white font-medium">Online</span>
</div>
<div className="flex items-center gap-2">
<svg className="w-4 h-4 text-yellow-300" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<span className="text-sm text-purple-100">Premium Member</span>
</div>
<div className="flex items-center gap-2">
<svg className="w-4 h-4 text-purple-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span className="text-sm text-purple-100">Credits: 150</span>
</div>
</div>
<div className="hidden lg:flex items-center gap-2 text-sm text-purple-100">
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
<span>Next consultation in 2 days</span>
</div>
</div>
</div>
</header>
{/* Main Content */}
<main className="flex-1 overflow-y-auto">
<div className="p-8">
{children}
</div>
</main>
</div>
</div>
{/* Overlay for mobile sidebar */}
{sidebarOpen && (
<div
className="fixed inset-0 bg-black/50 backdrop-blur-sm z-20 lg:hidden"
onClick={() => setSidebarOpen(false)}
></div>
)}
</body>
</html>
);
}(5) Edit The “app/global.css” For Global Layout
@import "tailwindcss";
:root {
– background: #ffffff;
– foreground: #171717;
}
@theme inline {
– color-background: var(--background);
– color-foreground: var(--foreground);
– font-sans: var(--font-geist-sans);
– font-mono: var(--font-geist-mono);
}
@media (prefers-color-scheme: dark) {
:root {
– background: #0a0a0a;
– foreground: #ededed;
}
}
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
}
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Smooth scrollbar */
.scrollbar-thin::-webkit-scrollbar {
width: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background: rgba(147, 51, 234, 0.3);
border-radius: 10px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
background: rgba(147, 51, 234, 0.5);
}(6) Edit The “app/page.tsx” For Showing Initial Dashboard
// app/page.tsx - Dashboard Page with New User Form
'use client';
import { useState } from 'react';
import Link from 'next/link';
export default function DashboardPage() {
// Simulating user state - set to false for new user, true for existing user
const [isExistingUser, setIsExistingUser] = useState(false);
const [birthDetails, setBirthDetails] = useState({
name: '',
dateOfBirth: '',
timeOfBirth: '',
placeOfBirth: ''
});
const [isSubmitting, setIsSubmitting] = useState(false);
// Sample existing user data
const userData = {
name: "Rahul Sharma",
birthDate: "March 15, 1990",
birthTime: "10:30 AM",
birthPlace: "Mumbai, India",
zodiacSign: "Pisces",
moonSign: "Cancer",
ascendant: "Gemini"
};
// Services data
const services = [
{
id: 1,
name: "Kundali",
icon: "🎯",
description: "Complete birth chart analysis",
status: "Active",
color: "from-purple-500 to-pink-500",
path: "/kundali",
stats: "Last updated 2 days ago"
},
{
id: 2,
name: "Dosha Analysis",
icon: "🔮",
description: "Planetary dosha detection",
status: "Completed",
color: "from-blue-500 to-cyan-500",
path: "/dosha",
stats: "Mangal Dosha: Not Present"
},
{
id: 3,
name: "Dasha Periods",
icon: "⏳",
description: "Current planetary periods",
status: "Active",
color: "from-orange-500 to-red-500",
path: "/dasha",
stats: "Venus Mahadasha"
},
{
id: 4,
name: "Transit",
icon: "🌙",
description: "Current planetary transits",
status: "Live",
color: "from-indigo-500 to-purple-500",
path: "/transit",
stats: "Jupiter in Aries"
},
{
id: 5,
name: "Predictions",
icon: "✨",
description: "Future predictions & insights",
status: "Available",
color: "from-yellow-500 to-orange-500",
path: "/predictions",
stats: "3 new predictions"
},
{
id: 6,
name: "Reports",
icon: "📄",
description: "Detailed astrology reports",
status: "12 Reports",
color: "from-green-500 to-teal-500",
path: "/reports",
stats: "Download available"
},
{
id: 7,
name: "Calendar",
icon: "📅",
description: "Auspicious dates & events",
status: "Updated",
color: "from-pink-500 to-rose-500",
path: "/calendar",
stats: "5 events this week"
},
{
id: 8,
name: "Matchmaking",
icon: "💑",
description: "Kundali matching for marriage",
status: "Available",
color: "from-red-500 to-pink-500",
path: "/matchmaking",
stats: "36/36 Guna matching"
},
{
id: 9,
name: "Muhurat",
icon: "⏰",
description: "Auspicious timings",
status: "Active",
color: "from-cyan-500 to-blue-500",
path: "/muhurat",
stats: "Today: 10:30 AM - 12:00 PM"
},
{
id: 10,
name: "Vastu",
icon: "🏠",
description: "Home & office Vastu analysis",
status: "Available",
color: "from-amber-500 to-orange-500",
path: "/vastu",
stats: "Get consultation"
},
{
id: 11,
name: "Palmistry",
icon: "✋",
description: "Palm reading & analysis",
status: "New",
color: "from-violet-500 to-purple-500",
path: "/palmistry",
stats: "Upload hand image"
},
{
id: 12,
name: "Numerology",
icon: "🔢",
description: "Number analysis & insights",
status: "Active",
color: "from-emerald-500 to-green-500",
path: "/numerology",
stats: "Life Path: 7"
},
{
id: 13,
name: "Gemstone",
icon: "💎",
description: "Gemstone recommendations",
status: "Recommended",
color: "from-fuchsia-500 to-pink-500",
path: "/gemstone",
stats: "Blue Sapphire suggested"
},
{
id: 14,
name: "Prashna",
icon: "❓",
description: "Ask your questions",
status: "Available",
color: "from-lime-500 to-green-500",
path: "/prashna",
stats: "3 questions remaining"
},
{
id: 15,
name: "Remedies",
icon: "🙏",
description: "Astrological remedies",
status: "Active",
color: "from-orange-500 to-amber-500",
path: "/remedies",
stats: "5 remedies prescribed"
},
{
id: 16,
name: "Griha Shanti Puja",
icon: "🕉️",
description: "Book puja services",
status: "Book Now",
color: "from-rose-500 to-red-500",
path: "/griha-shanti-puja",
stats: "Next available: Sunday"
},
{
id: 17,
name: "Expert Pandits",
icon: "👨🏫",
description: "Connect with astrologers",
status: "Online",
color: "from-blue-500 to-indigo-500",
path: "/pandits",
stats: "15 experts available"
},
{
id: 18,
name: "AI Chatbot",
icon: "🤖",
description: "24/7 AI astrology assistant",
status: "Online",
color: "from-teal-500 to-cyan-500",
path: "/chatbot",
stats: "Ask me anything"
},
{
id: 19,
name: "Consultation",
icon: "💬",
description: "Live consultation booking",
status: "Available",
color: "from-purple-500 to-indigo-500",
path: "/consultation",
stats: "Next: Nov 25, 3:00 PM"
},
{
id: 20,
name: "Community",
icon: "👥",
description: "Join astrology community",
status: "1.2k Members",
color: "from-pink-500 to-purple-500",
path: "/community",
stats: "8 new posts today"
},
{
id: 21,
name: "Subscription",
icon: "💳",
description: "Manage your plan",
status: "Premium",
color: "from-yellow-500 to-amber-500",
path: "/subscription",
stats: "Valid till Dec 31, 2025"
}
];
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setIsSubmitting(true);
// Simulate API call
setTimeout(() => {
console.log('Birth Details Submitted:', birthDetails);
setIsSubmitting(false);
setIsExistingUser(true); // Switch to existing user view after submission
}, 2000);
};
// NEW USER VIEW - Colorful & Interactive Form (Compact)
if (!isExistingUser) {
return (
<div className="py-4 px-4">
<div className="w-full max-w-4xl mx-auto">
{/* Compact Vibrant Header */}
<div className="text-center mb-4">
<h1 className="text-2xl md:text-3xl font-extrabold mb-1">
<span className="bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-600 bg-clip-text text-transparent">
Enter Your Birth Details
</span>
</h1>
<p className="text-gray-700 text-sm font-medium">
Create your personalized cosmic profile ✨
</p>
</div>
{/* Colorful Interactive Form Card */}
<div className="bg-gradient-to-br from-white via-purple-50 to-pink-50 rounded-2xl shadow-2xl border-2 border-purple-200">
{/* Rainbow accent bar */}
<div className="h-1.5 bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 rounded-t-2xl"></div>
<div className="p-5 md:p-6">
<form onSubmit={handleSubmit} className="space-y-4">
{/* Colorful Form Fields */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Full Name - Purple Theme */}
<div className="md:col-span-2 group">
<label className="flex items-center gap-2 text-xs font-bold text-gray-800 mb-1.5">
<div className="w-6 h-6 bg-gradient-to-br from-purple-500 to-purple-700 rounded-lg flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
<span className="text-sm">👤</span>
</div>
<span className="text-sm">Full Name</span>
<span className="text-red-500">*</span>
</label>
<input
type="text"
required
value={birthDetails.name}
onChange={(e) => setBirthDetails({ ...birthDetails, name: e.target.value })}
placeholder="Enter your full name"
className="w-full px-4 py-2.5 bg-gradient-to-r from-purple-50 to-purple-100 border-2 border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-purple-500 focus:shadow-lg transition-all text-gray-900 placeholder:text-purple-400 font-medium text-sm hover:shadow-md"
/>
</div>
{/* Date of Birth - Blue Theme */}
<div className="group">
<label className="flex items-center gap-2 text-xs font-bold text-gray-800 mb-1.5">
<div className="w-6 h-6 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-lg flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
<span className="text-sm">📅</span>
</div>
<span className="text-sm">Date of Birth</span>
<span className="text-red-500">*</span>
</label>
<input
type="date"
required
value={birthDetails.dateOfBirth}
onChange={(e) => setBirthDetails({ ...birthDetails, dateOfBirth: e.target.value })}
className="w-full px-4 py-2.5 bg-gradient-to-r from-blue-50 to-cyan-100 border-2 border-blue-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-500 focus:shadow-lg transition-all text-gray-900 font-medium text-sm hover:shadow-md"
/>
</div>
{/* Time of Birth - Orange Theme */}
<div className="group">
<label className="flex items-center gap-2 text-xs font-bold text-gray-800 mb-1.5">
<div className="w-6 h-6 bg-gradient-to-br from-orange-500 to-red-600 rounded-lg flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
<span className="text-sm">⏰</span>
</div>
<span className="text-sm">Time of Birth</span>
<span className="text-red-500">*</span>
</label>
<input
type="time"
required
value={birthDetails.timeOfBirth}
onChange={(e) => setBirthDetails({ ...birthDetails, timeOfBirth: e.target.value })}
className="w-full px-4 py-2.5 bg-gradient-to-r from-orange-50 to-red-100 border-2 border-orange-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-orange-500 focus:shadow-lg transition-all text-gray-900 font-medium text-sm hover:shadow-md"
/>
</div>
{/* Place of Birth - Green Theme */}
<div className="md:col-span-2 group">
<label className="flex items-center gap-2 text-xs font-bold text-gray-800 mb-1.5">
<div className="w-6 h-6 bg-gradient-to-br from-green-500 to-emerald-600 rounded-lg flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
<span className="text-sm">📍</span>
</div>
<span className="text-sm">Place of Birth</span>
<span className="text-red-500">*</span>
</label>
<input
type="text"
required
value={birthDetails.placeOfBirth}
onChange={(e) => setBirthDetails({ ...birthDetails, placeOfBirth: e.target.value })}
placeholder="City, State, Country"
className="w-full px-4 py-2.5 bg-gradient-to-r from-green-50 to-emerald-100 border-2 border-green-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400 focus:border-green-500 focus:shadow-lg transition-all text-gray-900 placeholder:text-green-400 font-medium text-sm hover:shadow-md"
/>
</div>
</div>
{/* Compact Info Box */}
<div className="relative bg-gradient-to-r from-yellow-100 via-pink-100 to-purple-100 border-2 border-purple-300 rounded-lg p-3 shadow-md hover:shadow-lg transition-all">
<div className="flex gap-3">
<div className="flex-shrink-0">
<div className="w-8 h-8 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-lg flex items-center justify-center shadow-md">
<span className="text-lg">💡</span>
</div>
</div>
<div className="flex-1">
<h3 className="text-xs font-bold text-gray-900 mb-1 flex items-center gap-2">
Why These Details Matter
<span className="px-2 py-0.5 bg-gradient-to-r from-pink-500 to-purple-500 text-white text-xs font-bold rounded-full shadow-sm">
IMPORTANT
</span>
</h3>
<p className="text-xs text-gray-700 leading-relaxed font-medium">
Your precise birth information creates accurate planetary calculations and personalized cosmic insights! ✨
</p>
</div>
</div>
</div>
{/* Compact Submit Section */}
<div className="flex flex-col sm:flex-row items-center justify-between gap-3 pt-3">
{/* Colorful Security Badges */}
<div className="flex flex-wrap items-center justify-center sm:justify-start gap-2">
<div className="flex items-center gap-1.5 px-3 py-1.5 bg-gradient-to-r from-green-400 to-emerald-500 text-white rounded-lg shadow-md hover:shadow-lg hover:scale-105 transition-all">
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
</svg>
<span className="text-xs font-bold">SSL Secured</span>
</div>
<div className="flex items-center gap-1.5 px-3 py-1.5 bg-gradient-to-r from-blue-400 to-indigo-500 text-white rounded-lg shadow-md hover:shadow-lg hover:scale-105 transition-all">
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
<span className="text-xs font-bold">100% Private</span>
</div>
</div>
{/* Compact Submit Button */}
<button
type="submit"
disabled={isSubmitting}
className="relative w-full sm:w-auto px-6 py-2.5 bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-600 text-white rounded-xl font-bold text-sm shadow-lg hover:shadow-xl hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-all disabled:opacity-50 disabled:cursor-not-allowed overflow-hidden group"
>
<div className="absolute inset-0 bg-gradient-to-r from-pink-600 via-purple-600 to-indigo-700 opacity-0 group-hover:opacity-100 transition-opacity"></div>
<div className="relative flex items-center justify-center gap-2">
{isSubmitting ? (
<>
<svg className="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span>Creating...</span>
</>
) : (
<>
<span>✨</span>
<span>Generate Birth Chart</span>
<svg className="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</>
)}
</div>
</button>
</div>
</form>
</div>
</div>
{/* Compact Footer Link */}
<div className="text-center mt-3">
<button
onClick={() => setIsExistingUser(true)}
className="text-sm font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent hover:from-purple-700 hover:to-pink-700 transition-all inline-flex items-center gap-1 group"
>
Already have an account?
<span className="underline decoration-2 underline-offset-2 group-hover:underline-offset-4 transition-all">Sign in 🚀</span>
</button>
</div>
</div>
</div>
);
}
// EXISTING USER VIEW - Full Dashboard
return (
<div className="space-y-8">
{/* Welcome Section with User Info */}
<div className="bg-gradient-to-r from-purple-600 via-indigo-600 to-purple-700 rounded-3xl p-8 text-white shadow-2xl">
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
<div className="flex items-center gap-6">
<div className="w-24 h-24 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center shadow-xl border-4 border-white/30">
<span className="text-5xl">🌟</span>
</div>
<div>
<h1 className="text-3xl font-bold mb-2">Welcome back, {userData.name}! 👋</h1>
<p className="text-purple-100 mb-3">Your cosmic journey continues...</p>
<div className="flex flex-wrap gap-4 text-sm">
<div className="flex items-center gap-2 bg-white/10 px-3 py-1.5 rounded-lg backdrop-blur-sm">
<span className="text-yellow-300">☀️</span>
<span>{userData.zodiacSign}</span>
</div>
<div className="flex items-center gap-2 bg-white/10 px-3 py-1.5 rounded-lg backdrop-blur-sm">
<span className="text-blue-300">🌙</span>
<span>{userData.moonSign}</span>
</div>
<div className="flex items-center gap-2 bg-white/10 px-3 py-1.5 rounded-lg backdrop-blur-sm">
<span className="text-green-300">⬆️</span>
<span>{userData.ascendant} Rising</span>
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-3">
<Link href="/kundali" className="px-6 py-3 bg-white text-purple-600 rounded-xl font-semibold hover:bg-purple-50 transition-all shadow-lg text-center">
View Full Chart
</Link>
<Link href="/consultation" className="px-6 py-3 bg-white/10 backdrop-blur-sm text-white rounded-xl font-semibold hover:bg-white/20 transition-all border border-white/20 text-center">
Book Consultation
</Link>
</div>
</div>
</div>
{/* Quick Stats */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div className="bg-white rounded-2xl p-6 shadow-lg border border-gray-100 hover:shadow-xl transition-all">
<div className="flex items-center justify-between mb-4">
<div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-indigo-500 rounded-xl flex items-center justify-center text-2xl shadow-md">
📊
</div>
<span className="px-3 py-1 bg-green-100 text-green-700 text-xs font-semibold rounded-full">Active</span>
</div>
<h3 className="text-2xl font-bold text-gray-800 mb-1">12</h3>
<p className="text-gray-600 text-sm">Reports Generated</p>
</div>
<div className="bg-white rounded-2xl p-6 shadow-lg border border-gray-100 hover:shadow-xl transition-all">
<div className="flex items-center justify-between mb-4">
<div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center text-2xl shadow-md">
💬
</div>
<span className="px-3 py-1 bg-blue-100 text-blue-700 text-xs font-semibold rounded-full">Upcoming</span>
</div>
<h3 className="text-2xl font-bold text-gray-800 mb-1">2</h3>
<p className="text-gray-600 text-sm">Consultations Booked</p>
</div>
<div className="bg-white rounded-2xl p-6 shadow-lg border border-gray-100 hover:shadow-xl transition-all">
<div className="flex items-center justify-between mb-4">
<div className="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-500 rounded-xl flex items-center justify-center text-2xl shadow-md">
⏳
</div>
<span className="px-3 py-1 bg-orange-100 text-orange-700 text-xs font-semibold rounded-full">Current</span>
</div>
<h3 className="text-2xl font-bold text-gray-800 mb-1">Venus</h3>
<p className="text-gray-600 text-sm">Mahadasha Period</p>
</div>
<div className="bg-white rounded-2xl p-6 shadow-lg border border-gray-100 hover:shadow-xl transition-all">
<div className="flex items-center justify-between mb-4">
<div className="w-12 h-12 bg-gradient-to-br from-yellow-500 to-amber-500 rounded-xl flex items-center justify-center text-2xl shadow-md">
⭐
</div>
<span className="px-3 py-1 bg-yellow-100 text-yellow-700 text-xs font-semibold rounded-full">Premium</span>
</div>
<h3 className="text-2xl font-bold text-gray-800 mb-1">150</h3>
<p className="text-gray-600 text-sm">Credits Remaining</p>
</div>
</div>
{/* All Services Grid */}
<div>
<div className="flex items-center justify-between mb-6">
<h2 className="text-2xl font-bold text-gray-800">Your Astrology Services</h2>
<button className="text-purple-600 hover:text-purple-700 font-medium text-sm flex items-center gap-1">
View All
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
{services.map((service) => (
<Link
key={service.id}
href={service.path}
className="bg-white rounded-2xl p-6 shadow-lg border border-gray-100 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 group"
>
<div className="flex items-start justify-between mb-4">
<div className={`w-14 h-14 bg-gradient-to-br ${service.color} rounded-xl flex items-center justify-center text-3xl shadow-lg group-hover:scale-110 transition-transform`}>
{service.icon}
</div>
<span className="px-3 py-1 bg-purple-50 text-purple-600 text-xs font-semibold rounded-full">
{service.status}
</span>
</div>
<h3 className="text-lg font-bold text-gray-800 mb-2 group-hover:text-purple-600 transition-colors">
{service.name}
</h3>
<p className="text-gray-600 text-sm mb-3">
{service.description}
</p>
<div className="flex items-center justify-between pt-3 border-t border-gray-100">
<span className="text-xs text-gray-500">{service.stats}</span>
<svg className="w-5 h-5 text-purple-600 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</div>
</Link>
))}
</div>
</div>
{/* Today's Panchang */}
<div className="bg-gradient-to-br from-orange-50 to-amber-50 rounded-2xl p-8 border border-orange-200 shadow-lg">
<div className="flex items-center gap-3 mb-6">
<div className="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-500 rounded-xl flex items-center justify-center text-2xl shadow-md">
🕉️
</div>
<div>
<h2 className="text-2xl font-bold text-gray-800">Today's Panchang</h2>
<p className="text-gray-600 text-sm">Saturday, November 22, 2025</p>
</div>
</div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="bg-white rounded-xl p-4 shadow-md">
<p className="text-gray-600 text-sm mb-1">Tithi</p>
<p className="text-gray-800 font-bold">Shukla Paksha Navami</p>
</div>
<div className="bg-white rounded-xl p-4 shadow-md">
<p className="text-gray-600 text-sm mb-1">Nakshatra</p>
<p className="text-gray-800 font-bold">Ashwini</p>
</div>
<div className="bg-white rounded-xl p-4 shadow-md">
<p className="text-gray-600 text-sm mb-1">Yoga</p>
<p className="text-gray-800 font-bold">Shiva Yoga</p>
</div>
<div className="bg-white rounded-xl p-4 shadow-md">
<p className="text-gray-600 text-sm mb-1">Karana</p>
<p className="text-gray-800 font-bold">Bava</p>
</div>
</div>
</div>
</div>
);
}