From f99e0d80eb9d08eecd47baff08fbb8b64d57b951 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 8 Mar 2026 08:39:37 +0000
Subject: [PATCH] Add src/app/dashboard/page.tsx

---
 src/app/dashboard/page.tsx | 263 +++++++++++++++++++++++++++++++++++++
 1 file changed, 263 insertions(+)
 create mode 100644 src/app/dashboard/page.tsx

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
new file mode 100644
index 0000000..07dd02d
--- /dev/null
+++ b/src/app/dashboard/page.tsx
@@ -0,0 +1,263 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import FeatureBento from '@/components/sections/feature/FeatureBento';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Video, Upload, Edit3, Trash2, Eye, Settings } from "lucide-react";
+import { useState } from "react";
+
+interface DashboardVideo {
+  id: string;
+  title: string;
+  thumbnail: string;
+  duration: string;
+  uploadDate: string;
+  views: string;
+  status: 'published' | 'draft' | 'processing';
+}
+
+export default function Dashboard() {
+  const [videos, setVideos] = useState<DashboardVideo[]>([
+    {
+      id: '1',
+      title: 'Michelin-Star Pasta Carbonara Masterclass',
+      thumbnail: 'http://img.b2bpic.net/free-photo/woman-applying-moisturizer-her-beauty-routine_23-2150166464.jpg',
+      duration: '12:45',
+      uploadDate: 'Jan 15, 2025',
+      views: '2.4K',
+      status: 'published'
+    },
+    {
+      id: '2',
+      title: 'Advanced Plating Techniques for Fine Dining',
+      thumbnail: 'http://img.b2bpic.net/free-photo/model-career-kit-still-life-flat-lay_23-2150218023.jpg',
+      duration: '18:30',
+      uploadDate: 'Jan 12, 2025',
+      views: '1.8K',
+      status: 'published'
+    },
+    {
+      id: '3',
+      title: 'Sustainable Sourcing for Restaurant Kitchens',
+      thumbnail: 'http://img.b2bpic.net/free-photo/people-working-elegant-cozy-office-space_23-2149548692.jpg',
+      duration: '15:20',
+      uploadDate: 'Jan 10, 2025',
+      views: '892',
+      status: 'draft'
+    }
+  ]);
+
+  const handleEdit = (id: string) => {
+    console.log('Edit video:', id);
+  };
+
+  const handleDelete = (id: string) => {
+    setVideos(videos.filter(v => v.id !== id));
+  };
+
+  const handleUpload = () => {
+    console.log('Upload new video');
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-bubble"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="small"
+      sizing="largeSmallSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "My Videos", id: "/dashboard" },
+            { name: "Analytics", id: "#" },
+            { name: "Settings", id: "#" },
+            { name: "Support", id: "#" }
+          ]}
+          button={{ text: "Upload Video", href: "#" }}
+          brandName="Chef Studio"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroLogoBillboard
+          logoText="Chef Studio"
+          description="Manage your culinary videos with professional tools. Upload, edit, and share your cooking expertise with the world."
+          buttons={[
+            { text: "Upload New Video", onClick: handleUpload },
+            { text: "View Analytics", href: "#" }
+          ]}
+          background={{ variant: "sparkles-gradient" }}
+          imageSrc="http://img.b2bpic.net/free-photo/model-career-kit-still-life-flat-lay_23-2150218023.jpg"
+          imageAlt="Chef Studio Dashboard"
+          mediaAnimation="slide-up"
+          frameStyle="card"
+          buttonAnimation="blur-reveal"
+        />
+      </div>
+
+      <div id="features" data-section="features">
+        <FeatureBento
+          title="Powerful Video Management Tools"
+          description="Everything you need to create, manage, and grow your culinary content library."
+          features={[
+            {
+              title: "Upload & Organize",              description: "Upload videos in multiple formats with automatic processing and organization",              bentoComponent: "icon-info-cards",              items: [
+                { icon: Upload, label: "Formats", value: "4K Ready" },
+                { icon: Video, label: "Duration", value: "Unlimited" },
+                { icon: Settings, label: "Quality", value: "Auto-Optimize" }
+              ]
+            },
+            {
+              title: "Edit & Customize",              description: "Built-in editing tools to trim, add captions, and personalize your videos",              bentoComponent: "icon-info-cards",              items: [
+                { icon: Edit3, label: "Trim", value: "Frame-Precise" },
+                { icon: Video, label: "Effects", value: "50+ Built-in" },
+                { icon: Eye, label: "Preview", value: "Real-Time" }
+              ]
+            },
+            {
+              title: "Track Analytics",              description: "Monitor views, engagement, and audience growth with detailed metrics",              bentoComponent: "animated-bar-chart"
+            },
+            {
+              title: "Publish & Share",              description: "Share your videos across multiple platforms with one click",              bentoComponent: "icon-info-cards",              items: [
+                { icon: Video, label: "Platforms", value: "10+" },
+                { icon: Settings, label: "Scheduling", value: "Auto-Post" },
+                { icon: Eye, label: "Analytics", value: "Real-Time" }
+              ]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="videos" data-section="videos" className="py-20">
+        <div className="container mx-auto px-4 max-w-6xl">
+          <div className="mb-12">
+            <h2 className="text-4xl font-bold mb-4">Your Video Library</h2>
+            <p className="text-lg text-gray-600">Manage and monitor your uploaded culinary content</p>
+          </div>
+
+          <div className="grid gap-6">
+            {videos.map((video) => (
+              <div
+                key={video.id}
+                className="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow"
+              >
+                <div className="flex flex-col md:flex-row">
+                  {/* Thumbnail */}
+                  <div className="md:w-48 flex-shrink-0 relative group">
+                    <img
+                      src={video.thumbnail}
+                      alt={video.title}
+                      className="w-full h-48 object-cover"
+                    />
+                    <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-all flex items-center justify-center">
+                      <Video className="w-12 h-12 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
+                    </div>
+                    <div className="absolute bottom-2 right-2 bg-black bg-opacity-75 text-white text-sm px-2 py-1 rounded">
+                      {video.duration}
+                    </div>
+                  </div>
+
+                  {/* Content */}
+                  <div className="flex-1 p-6 flex flex-col justify-between">
+                    <div>
+                      <div className="flex items-start justify-between mb-2">
+                        <h3 className="text-xl font-bold">{video.title}</h3>
+                        <span
+                          className={`px-3 py-1 rounded-full text-xs font-semibold ${
+                            video.status === 'published'
+                              ? 'bg-green-100 text-green-800'
+                              : video.status === 'draft'
+                              ? 'bg-yellow-100 text-yellow-800'
+                              : 'bg-blue-100 text-blue-800'
+                          }`}
+                        >
+                          {video.status.charAt(0).toUpperCase() + video.status.slice(1)}
+                        </span>
+                      </div>
+                      <div className="flex gap-6 text-sm text-gray-600">
+                        <span>📅 {video.uploadDate}</span>
+                        <span>👁️ {video.views} views</span>
+                      </div>
+                    </div>
+
+                    {/* Actions */}
+                    <div className="flex gap-2 mt-4">
+                      <button
+                        onClick={() => handleEdit(video.id)}
+                        className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+                      >
+                        <Edit3 size={16} />
+                        Edit
+                      </button>
+                      <button
+                        onClick={() => handleDelete(video.id)}
+                        className="flex items-center gap-2 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
+                      >
+                        <Trash2 size={16} />
+                        Delete
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="Chef Studio"
+          columns={[
+            {
+              title: "Dashboard",              items: [
+                { label: "My Videos", href: "/dashboard" },
+                { label: "Analytics", href: "#" },
+                { label: "Settings", href: "#" },
+                { label: "Upload", href: "#" }
+              ]
+            },
+            {
+              title: "Resources",              items: [
+                { label: "Help Center", href: "#" },
+                { label: "Guidelines", href: "#" },
+                { label: "Best Practices", href: "#" },
+                { label: "FAQ", href: "#" }
+              ]
+            },
+            {
+              title: "Account",              items: [
+                { label: "Profile", href: "#" },
+                { label: "Preferences", href: "#" },
+                { label: "Billing", href: "#" },
+                { label: "Logout", href: "#" }
+              ]
+            },
+            {
+              title: "Connect",              items: [
+                { label: "Twitter", href: "https://twitter.com" },
+                { label: "Instagram", href: "https://instagram.com" },
+                { label: "YouTube", href: "https://youtube.com" },
+                { label: "TikTok", href: "https://tiktok.com" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Chef Studio. All rights reserved."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}