v1

frontend/src/components/NavBarItem.tsx

@@ -1,6 +1,5 @@
-import React, {useEffect, useRef} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import Link from 'next/link'
-import { useState } from 'react'
 import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
 import BaseDivider from './BaseDivider'
 import BaseIcon from './BaseIcon'
@@ -129,4 +128,4 @@ export default function NavBarItem({ item }: Props) {
   }
 
   return <div className={componentClass} ref={excludedRef}>{NavBarItemComponentContents}</div>
-}
+}

frontend/src/components/PremiumOverview.tsx

@@ -0,0 +1,137 @@
+
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import * as icon from '@mdi/js';
+import BaseIcon from './BaseIcon';
+import { useAppSelector } from '../stores/hooks';
+import dynamic from 'next/dynamic';
+
+const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
+
+export const PremiumOverview = () => {
+  const [trades, setTrades] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
+  const corners = useAppSelector((state) => state.style.corners);
+
+  useEffect(() => {
+    const fetchTrades = async () => {
+      try {
+        const response = await axios.get('/trades');
+        setTrades(response.data.rows || []);
+      } catch (error) {
+        console.error('Error fetching trades:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchTrades();
+  }, []);
+
+  const stats = React.useMemo(() => {
+    if (!trades.length) return { pnl: 0, winRate: 0, profitFactor: 0, avgRR: 0, equity: [] };
+
+    let totalPnL = 0;
+    let wins = 0;
+    let grossProfit = 0;
+    let grossLoss = 0;
+    let totalRR = 0;
+    const equityData = [];
+    let runningPnL = 0;
+
+    trades.forEach((trade) => {
+      const pnl = parseFloat(trade.pnl_amount) || 0;
+      totalPnL += pnl;
+      runningPnL += pnl;
+      equityData.push(runningPnL);
+
+      if (trade.is_win) {
+        wins++;
+        grossProfit += pnl;
+      } else {
+        grossLoss += Math.abs(pnl);
+      }
+      totalRR += parseFloat(trade.rr_ratio) || 0;
+    });
+
+    return {
+      pnl: totalPnL,
+      winRate: (wins / trades.length) * 100,
+      profitFactor: grossLoss === 0 ? grossProfit : grossProfit / grossLoss,
+      avgRR: totalRR / trades.length,
+      equity: equityData,
+    };
+  }, [trades]);
+
+  const chartOptions: any = {
+    chart: {
+      type: 'area',
+      height: 350,
+      toolbar: { show: false },
+      animations: { enabled: true },
+      background: 'transparent',
+    },
+    colors: ['#0ea5e9'],
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shadeIntensity: 1,
+        opacityFrom: 0.45,
+        opacityTo: 0.05,
+        stops: [20, 100, 100, 100],
+      },
+    },
+    dataLabels: { enabled: false },
+    stroke: { curve: 'smooth', width: 3 },
+    grid: { borderColor: 'rgba(255,255,255,0.05)', strokeDashArray: 4 },
+    xaxis: {
+      labels: { show: false },
+      axisBorder: { show: false },
+      axisTicks: { show: false },
+    },
+    yaxis: {
+      labels: {
+        style: { colors: '#64748b' },
+        formatter: (val) => `$${val.toFixed(0)}`,
+      },
+    },
+    tooltip: { theme: 'dark' },
+  };
+
+  const series = [{ name: 'Equity', data: stats.equity }];
+
+  if (loading) return <div className="p-6 text-gray-500 animate-pulse">Analyzing performance...</div>;
+
+  return (
+    <div className="space-y-6 mb-10">
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+        {[
+          { label: 'Net P&L', value: `$${stats.pnl.toLocaleString()}`, icon: icon.mdiCurrencyUsd, color: stats.pnl >= 0 ? 'text-green-400' : 'text-red-400' },
+          { label: 'Win Rate', value: `${stats.winRate.toFixed(1)}%`, icon: icon.mdiChartPie, color: 'text-[#0ea5e9]' },
+          { label: 'Profit Factor', value: stats.profitFactor.toFixed(2), icon: icon.mdiTrendingUp, color: 'text-purple-400' },
+          { label: 'Avg RR', value: stats.avgRR.toFixed(2), icon: icon.mdiScaleBalance, color: 'text-yellow-400' },
+        ].map((item, i) => (
+          <div key={i} className={`${corners} ${cardsStyle} p-6 relative overflow-hidden group`}>
+            <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
+               <BaseIcon path={item.icon} size={48} />
+            </div>
+            <div className="text-sm text-gray-400 mb-1 font-medium">{item.label}</div>
+            <div className={`text-3xl font-bold tracking-tight ${item.color}`}>{item.value}</div>
+          </div>
+        ))}
+      </div>
+
+      <div className={`${corners} ${cardsStyle} p-6`}>
+        <div className="flex justify-between items-center mb-6">
+          <h3 className="text-lg font-bold text-white">Equity Curve</h3>
+          <div className="flex space-x-2">
+             <span className="text-xs bg-[#0ea5e9]/10 text-[#0ea5e9] px-2 py-1 rounded">All Accounts</span>
+          </div>
+        </div>
+        <div className="h-80 w-full">
+           <Chart options={chartOptions} series={series} type="area" height="100%" />
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/layouts/Authenticated.tsx

@@ -1,5 +1,4 @@
-import React, { ReactNode, useEffect } from 'react'
+import React, { ReactNode, useEffect, useState } from 'react'
-import { useState } from 'react'
 import jwt from 'jsonwebtoken';
 import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
 import menuAside from '../menuAside'
@@ -126,4 +125,4 @@ export default function LayoutAuthenticated({
       </div>
     </div>
   )
-}
+}

frontend/src/pages/dashboard.tsx

@@ -14,6 +14,7 @@ import { hasPermission } from "../helpers/userPermissions";
 import { fetchWidgets } from '../stores/roles/rolesSlice';
 import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
 import { SmartWidget } from '../components/SmartWidget/SmartWidget';
+import { PremiumOverview } from '../components/PremiumOverview';
 
 import { useAppDispatch, useAppSelector } from '../stores/hooks';
 const Dashboard = () => {
@@ -118,6 +119,8 @@ const Dashboard = () => {
             main>
           {''}
         </SectionTitleLineWithButton>
+
+        <PremiumOverview />
         
         {hasPermission(currentUser, 'CREATE_ROLES') && <WidgetCreator
             currentUser={currentUser}
@@ -958,4 +961,4 @@ Dashboard.getLayout = function getLayout(page: ReactElement) {
   return <LayoutAuthenticated>{page}</LayoutAuthenticated>
 }
 
-export default Dashboard
+export default Dashboard

frontend/src/pages/index.tsx

@@ -1,166 +1,198 @@
-
+import React from 'react';
-import React, { useEffect, useState } from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
-import BaseButton from '../components/BaseButton';
+import * as icon from '@mdi/js';
-import CardBox from '../components/CardBox';
+import BaseIcon from '../components/BaseIcon';
-import SectionFullScreen from '../components/SectionFullScreen';
 import LayoutGuest from '../layouts/Guest';
-import BaseDivider from '../components/BaseDivider';
-import BaseButtons from '../components/BaseButtons';
 import { getPageTitle } from '../config';
-import { useAppSelector } from '../stores/hooks';
-import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
-import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
-
-
-export default function Starter() {
-    const [illustrationImage, setIllustrationImage] = useState({
-        src: undefined,
-        photographer: undefined,
-        photographer_url: undefined,
-    })
-    const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
-    const [contentType, setContentType] = useState('image');
-    const [contentPosition, setContentPosition] = useState('background');
-    const textColor = useAppSelector((state) => state.style.linkColor);
-
-    const title = 'Premium Trading Journal'
-
-    // Fetch Pexels image/video
-    useEffect(() => {
-        async function fetchData() {
-            const image = await getPexelsImage();
-            const video = await getPexelsVideo();
-            setIllustrationImage(image);
-            setIllustrationVideo(video);
-        }
-        fetchData();
-    }, []);
-
-    const imageBlock = (image) => (
-        <div
-            className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
-            style={{
-                backgroundImage: `${
-                    image
-                        ? `url(${image?.src?.original})`
-                        : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                }`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'left center',
-                backgroundRepeat: 'no-repeat',
-            }}
-        >
-            <div className='flex justify-center w-full bg-blue-300/20'>
-                <a
-                    className='text-[8px]'
-                    href={image?.photographer_url}
-                    target='_blank'
-                    rel='noreferrer'
-                >
-                    Photo by {image?.photographer} on Pexels
-                </a>
-            </div>
-        </div>
-    );
-
-    const videoBlock = (video) => {
-        if (video?.video_files?.length > 0) {
-            return (
-                <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
-                    <video
-                        className='absolute top-0 left-0 w-full h-full object-cover'
-                        autoPlay
-                        loop
-                        muted
-                    >
-                        <source src={video?.video_files[0]?.link} type='video/mp4'/>
-                        Your browser does not support the video tag.
-                    </video>
-                    <div className='flex justify-center w-full bg-blue-300/20 z-10'>
-                        <a
-                            className='text-[8px]'
-                            href={video?.user?.url}
-                            target='_blank'
-                            rel='noreferrer'
-                        >
-                            Video by {video.user.name} on Pexels
-                        </a>
-                    </div>
-                </div>)
-        }
-    };
 
+export default function LandingPage() {
   return (
-      <div
+    <div className="bg-[#0a0a0a] min-h-screen text-white selection:bg-[#0ea5e9]/30 font-sans">
-          style={
-              contentPosition === 'background'
-                  ? {
-                      backgroundImage: `${
-                          illustrationImage
-                              ? `url(${illustrationImage.src?.original})`
-                              : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                      }`,
-                      backgroundSize: 'cover',
-                      backgroundPosition: 'left center',
-                      backgroundRepeat: 'no-repeat',
-                  }
-                  : {}
-          }
-      >
       <Head>
-        <title>{getPageTitle('Starter Page')}</title>
+        <title>{getPageTitle('Ultra-Premium Trading Journal')}</title>
       </Head>
 
-      <SectionFullScreen bg='violet'>
+      {/* Navigation */}
-      <div
+      <nav className="fixed top-0 w-full z-50 bg-[#0a0a0a]/80 backdrop-blur-xl border-b border-white/10">
-          className={`flex ${
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-              contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
+          <div className="flex justify-between h-16 items-center">
-          } min-h-screen w-full`}
+            <div className="flex items-center space-x-2">
-      >
+              <div className="w-8 h-8 bg-gradient-to-br from-[#0ea5e9] to-[#3b82f6] rounded-lg flex items-center justify-center shadow-lg shadow-blue-500/20">
-          {contentType === 'image' && contentPosition !== 'background'
+                <BaseIcon path={icon.mdiChartLine} size={20} className="text-white" />
-              ? imageBlock(illustrationImage)
+              </div>
-              : null}
+              <span className="text-xl font-bold tracking-tight">TradeLog<span className="text-[#0ea5e9]">Pro</span></span>
-          {contentType === 'video' && contentPosition !== 'background'
-              ? videoBlock(illustrationVideo)
-              : null}
-          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
-        <CardBox className='w-full md:w-3/5 lg:w-2/3'>
-            <CardBoxComponentTitle title="Welcome to your Premium Trading Journal app!"/>
-        
-            <div className="space-y-3">
-                <p className='text-center '>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
-                <p className='text-center '>For guides and documentation please check
-                    your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
             </div>
-        
+            <div className="hidden md:flex items-center space-x-8 text-sm font-medium text-gray-400">
-            <BaseButtons>
+              <a href="#features" className="hover:text-white transition-colors">Features</a>
-                <BaseButton
+              <a href="#pricing" className="hover:text-white transition-colors">Pricing</a>
-                    href='/login'
+              <Link href="/login" className="hover:text-white transition-colors">Login</Link>
-                    label='Login'
+              <Link href="/register" className="bg-[#0ea5e9] hover:bg-[#0ea5e9]/90 text-white px-5 py-2 rounded-full transition-all shadow-lg shadow-blue-500/25">
-                    color='info'
+                Get Started
-                    className='w-full'
+              </Link>
-                />
+            </div>
-
+          </div>
-            </BaseButtons>
-        </CardBox>
         </div>
-      </div>
+      </nav>
-      </SectionFullScreen>
-      <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
-        <p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
-        <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
-            Privacy Policy
-        </Link>
-      </div>
 
+      {/* Hero Section */}
+      <section className="pt-32 pb-20 px-4 overflow-hidden relative">
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[500px] bg-[#0ea5e9]/10 blur-[120px] rounded-full -z-10"></div>
+        <div className="max-w-5xl mx-auto text-center">
+          <div className="inline-flex items-center space-x-2 bg-white/5 border border-white/10 px-3 py-1 rounded-full mb-6 backdrop-blur-sm">
+            <span className="flex h-2 w-2 rounded-full bg-[#0ea5e9] animate-pulse"></span>
+            <span className="text-xs font-medium text-gray-300 tracking-wide uppercase">New: AI-Powered Trade Insights</span>
+          </div>
+          <h1 className="text-5xl md:text-7xl font-bold tracking-tight mb-6 bg-gradient-to-b from-white to-gray-400 bg-clip-text text-transparent leading-tight">
+            Master Your Edge with <br /> Precision Analytics.
+          </h1>
+          <p className="text-lg md:text-xl text-gray-400 max-w-2xl mx-auto mb-10 leading-relaxed">
+            The ultra-premium trading journal designed for high-performance traders. Track performance, analyze psychology, and unlock AI insights to reach your goals.
+          </p>
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+            <Link href="/register" className="w-full sm:w-auto bg-[#0ea5e9] hover:bg-[#0ea5e9]/90 text-white px-8 py-4 rounded-xl font-semibold transition-all shadow-xl shadow-blue-500/25 flex items-center justify-center">
+              Start Free Journaling
+              <BaseIcon path={icon.mdiArrowRight} size={20} className="ml-2" />
+            </Link>
+            <a href="#features" className="w-full sm:w-auto bg-white/5 hover:bg-white/10 border border-white/10 px-8 py-4 rounded-xl font-semibold transition-all flex items-center justify-center">
+              Explore Features
+            </a>
+          </div>
+        </div>
+
+        {/* Dashboard Preview */}
+        <div className="max-w-6xl mx-auto mt-20 relative">
+          <div className="absolute inset-0 bg-gradient-to-t from-[#0a0a0a] via-transparent to-transparent z-10"></div>
+          <div className="bg-[#121212] border border-white/10 rounded-2xl p-4 shadow-2xl relative overflow-hidden group">
+             <div className="flex items-center justify-between mb-8 border-b border-white/5 pb-4">
+                <div className="flex items-center space-x-2">
+                    <div className="w-3 h-3 rounded-full bg-red-500/50"></div>
+                    <div className="w-3 h-3 rounded-full bg-yellow-500/50"></div>
+                    <div className="w-3 h-3 rounded-full bg-green-500/50"></div>
+                </div>
+                <div className="text-xs text-gray-500 font-mono">dashboard.tradelogpro.ai</div>
+             </div>
+             <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+                {[
+                  { label: 'Total PnL', value: '+$12,450.00', color: 'text-green-400', icon: icon.mdiCurrencyUsd },
+                  { label: 'Win Rate', value: '68.5%', color: 'text-[#0ea5e9]', icon: icon.mdiChartPie },
+                  { label: 'Profit Factor', value: '2.4', color: 'text-purple-400', icon: icon.mdiTrendingUp }
+                ].map((stat, i) => (
+                  <div key={i} className="bg-white/5 border border-white/5 p-6 rounded-xl">
+                    <div className="flex justify-between items-start mb-2">
+                      <span className="text-sm text-gray-500">{stat.label}</span>
+                      <BaseIcon path={stat.icon} size={18} className="text-gray-600" />
+                    </div>
+                    <div className={`text-2xl font-bold ${stat.color}`}>{stat.value}</div>
+                  </div>
+                ))}
+             </div>
+             <div className="h-64 bg-white/5 rounded-xl border border-white/5 flex items-end justify-between p-6 overflow-hidden">
+                {[40, 60, 45, 70, 85, 65, 90, 110, 95, 130, 150].map((h, i) => (
+                  <div key={i} className="w-[6%] bg-gradient-to-t from-[#0ea5e9]/20 to-[#0ea5e9] rounded-t-sm transition-all duration-1000 group-hover:opacity-80" style={{ height: `${h}%` }}></div>
+                ))}
+             </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Pricing Section */}
+      <section id="pricing" className="py-20 px-4">
+        <div className="max-w-7xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold mb-4">Choose Your Plan</h2>
+            <p className="text-gray-400">Scale your trading with tools built for your success level.</p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {/* Free Tier */}
+            <div className="bg-[#121212] border border-white/10 p-8 rounded-2xl flex flex-col hover:border-[#0ea5e9]/30 transition-all">
+              <div className="mb-8">
+                <h3 className="text-xl font-bold mb-2">Free</h3>
+                <div className="text-4xl font-bold mb-4">$0<span className="text-lg text-gray-500 font-normal">/mo</span></div>
+                <p className="text-gray-400 text-sm leading-relaxed">Perfect for beginners tracking their first steps in the market.</p>
+              </div>
+              <ul className="space-y-4 mb-10 flex-grow">
+                {['Manual trade entry', 'Basic dashboard', 'Win Rate, PnL, Total Trades', 'Last 30 days history', 'Single account'].map((feat, i) => (
+                  <li key={i} className="flex items-center text-sm text-gray-300">
+                    <BaseIcon path={icon.mdiCheck} size={16} className="text-green-500 mr-2" />
+                    {feat}
+                  </li>
+                ))}
+              </ul>
+              <Link href="/register" className="w-full bg-white/5 hover:bg-white/10 py-3 rounded-xl font-semibold text-center transition-all text-white">
+                Get Started
+              </Link>
+            </div>
+
+            {/* $1 Tier */}
+            <div className="bg-[#121212] border-2 border-[#0ea5e9] p-8 rounded-2xl flex flex-col relative shadow-2xl shadow-blue-500/10 scale-105">
+              <div className="absolute top-0 right-8 -translate-y-1/2 bg-[#0ea5e9] text-white text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">Most Popular</div>
+              <div className="mb-8">
+                <h3 className="text-xl font-bold mb-2">Pro</h3>
+                <div className="text-4xl font-bold mb-4">$1<span className="text-lg text-gray-500 font-normal">/mo</span></div>
+                <p className="text-gray-400 text-sm leading-relaxed">Comprehensive analytics for serious individual traders.</p>
+              </div>
+              <ul className="space-y-4 mb-10 flex-grow">
+                {['CSV bulk import', 'Full dashboard metrics', 'Equity curve visualization', 'Performance breakdowns', 'Trade duration analytics', 'Screenshot attachments', 'Mood/emotions tracker', 'Economic calendar'].map((feat, i) => (
+                  <li key={i} className="flex items-center text-sm text-gray-300">
+                    <BaseIcon path={icon.mdiCheck} size={16} className="text-[#0ea5e9] mr-2" />
+                    {feat}
+                  </li>
+                ))}
+              </ul>
+              <Link href="/register" className="w-full bg-[#0ea5e9] hover:bg-[#0ea5e9]/90 py-3 rounded-xl font-semibold text-center transition-all shadow-lg shadow-blue-500/25 text-white">
+                Go Pro Now
+              </Link>
+            </div>
+
+            {/* $10 Tier */}
+            <div className="bg-[#121212] border border-white/10 p-8 rounded-2xl flex flex-col hover:border-[#0ea5e9]/30 transition-all">
+              <div className="mb-8">
+                <h3 className="text-xl font-bold mb-2">AI Elite</h3>
+                <div className="text-4xl font-bold mb-4">$10<span className="text-lg text-gray-500 font-normal">/mo</span></div>
+                <p className="text-gray-400 text-sm leading-relaxed">The ultimate edge with AI pattern recognition and insights.</p>
+              </div>
+              <ul className="space-y-4 mb-10 flex-grow">
+                {['Everything in Pro', 'AI-powered trade analysis', 'AI pattern recognition', 'Weakness identification', 'Risk size recommendations', 'Market condition classifier', 'Broker API auto-sync'].map((feat, i) => (
+                  <li key={i} className="flex items-center text-sm text-gray-300">
+                    <BaseIcon path={icon.mdiCheck} size={16} className="text-purple-500 mr-2" />
+                    {feat}
+                  </li>
+                ))}
+              </ul>
+              <Link href="/register" className="w-full bg-white/5 hover:bg-white/10 py-3 rounded-xl font-semibold text-center transition-all text-white">
+                Unlock Elite AI
+              </Link>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t border-white/10 py-12 px-4 bg-[#0a0a0a]">
+        <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center">
+            <div className="flex items-center space-x-2 mb-8 md:mb-0">
+              <div className="w-6 h-6 bg-[#0ea5e9] rounded flex items-center justify-center">
+                <BaseIcon path={icon.mdiChartLine} size={14} className="text-white" />
+              </div>
+              <span className="font-bold">TradeLogPro</span>
+            </div>
+            <div className="flex space-x-8 text-sm text-gray-500">
+              <Link href="/privacy-policy" className="hover:text-white transition-colors">Privacy</Link>
+              <Link href="/terms-of-use" className="hover:text-white transition-colors">Terms</Link>
+              <a href="#" className="hover:text-white transition-colors">Twitter</a>
+              <a href="#" className="hover:text-white transition-colors">Support</a>
+            </div>
+            <div className="mt-8 md:mt-0 text-sm text-gray-600 font-mono">
+              © 2026 TRADELOGPRO. ALL RIGHTS RESERVED.
+            </div>
+        </div>
+      </footer>
     </div>
   );
 }
 
-Starter.getLayout = function getLayout(page: ReactElement) {
+LandingPage.getLayout = function getLayout(page: ReactElement) {
   return <LayoutGuest>{page}</LayoutGuest>;
-};
+};
-

frontend/src/stores/styleSlice.ts

@@ -32,30 +32,30 @@ interface StyleState {
 
 
 const initialState: StyleState = {
-  asideStyle: styles.midnightBlueTheme.aside,
+  asideStyle: styles.onyx.aside,
-  asideScrollbarsStyle: styles.white.asideScrollbars,
+  asideScrollbarsStyle: styles.onyx.asideScrollbars,
-  asideBrandStyle: styles.white.asideBrand,
+  asideBrandStyle: styles.onyx.asideBrand,
-  asideMenuItemStyle: styles.midnightBlueTheme.asideMenuItem,
+  asideMenuItemStyle: styles.onyx.asideMenuItem,
-  asideMenuItemActiveStyle: styles.midnightBlueTheme.asideMenuItemActive,
+  asideMenuItemActiveStyle: styles.onyx.asideMenuItemActive,
-  activeLinkColor: styles.midnightBlueTheme.activeLinkColor,
+  activeLinkColor: styles.onyx.activeLinkColor,
-  asideMenuDropdownStyle: styles.white.asideMenuDropdown,
+  asideMenuDropdownStyle: styles.onyx.asideMenuDropdown,
-  navBarItemLabelStyle: styles.midnightBlueTheme.navBarItemLabel,
+  navBarItemLabelStyle: styles.onyx.navBarItemLabel,
-  navBarItemLabelHoverStyle: styles.midnightBlueTheme.navBarItemLabelHover,
+  navBarItemLabelHoverStyle: styles.onyx.navBarItemLabelHover,
-  navBarItemLabelActiveColorStyle: styles.midnightBlueTheme.navBarItemLabelActiveColor,
+  navBarItemLabelActiveColorStyle: styles.onyx.navBarItemLabelActiveColor,
-  overlayStyle: styles.midnightBlueTheme.overlay,
+  overlayStyle: styles.onyx.overlay,
-  darkMode: false,
+  darkMode: true, // Force dark mode for premium feel
-  bgLayoutColor: styles.midnightBlueTheme.bgLayoutColor,
+  bgLayoutColor: styles.onyx.bgLayoutColor,
-  iconsColor: styles.midnightBlueTheme.iconsColor,
+  iconsColor: styles.onyx.iconsColor,
-  cardsColor: styles.midnightBlueTheme.cardsColor,
+  cardsColor: styles.onyx.cardsColor,
-  focusRingColor: styles.midnightBlueTheme.focusRingColor,
+  focusRingColor: styles.onyx.focusRingColor,
-  corners: styles.midnightBlueTheme.corners,
+  corners: styles.onyx.corners,
-  cardsStyle: styles.midnightBlueTheme.cardsStyle,
+  cardsStyle: styles.onyx.cardsStyle,
-  linkColor: styles.midnightBlueTheme.linkColor,
+  linkColor: styles.onyx.linkColor,
-  websiteHeder: styles.midnightBlueTheme.websiteHeder,
+  websiteHeder: styles.onyx.websiteHeder,
-  borders: styles.midnightBlueTheme.borders,
+  borders: styles.onyx.borders,
-  shadow: styles.midnightBlueTheme.shadow,
+  shadow: styles.onyx.shadow,
-  websiteSectionStyle: styles.midnightBlueTheme.websiteSectionStyle,
+  websiteSectionStyle: styles.onyx.websiteSectionStyle,
-  textSecondary: styles.midnightBlueTheme.textSecondary,
+  textSecondary: styles.onyx.textSecondary,
 };
 
 
@@ -100,4 +100,4 @@ export const styleSlice = createSlice({
 // Action creators are generated for each case reducer function
 export const { setDarkMode, setStyle } = styleSlice.actions
 
-export default styleSlice.reducer
+export default styleSlice.reducer

frontend/src/styles.ts

@@ -108,6 +108,32 @@ export const dataGridStyles = {
   },
 };
 
+export const onyx: StyleObject = {
+  aside: "bg-[#121212] text-white",
+  asideScrollbars: "aside-scrollbars-gray",
+  asideBrand: "bg-[#0a0a0a] text-white",
+  asideMenuItem: "text-gray-400 hover:text-white hover:bg-[#1e1e1e]",
+  asideMenuItemActive: "font-bold text-white bg-[#0ea5e9]",
+  asideMenuDropdown: "bg-[#1e1e1e]",
+  navBarItemLabel: "text-white",
+  navBarItemLabelHover: "hover:text-[#0ea5e9]",
+  navBarItemLabelActiveColor: "text-[#0ea5e9]",
+  overlay: "bg-black/80",
+  activeLinkColor: "bg-[#0ea5e9]",
+  bgLayoutColor: "bg-[#0a0a0a]",
+  iconsColor: "text-[#0ea5e9]",
+  cardsColor: "bg-[#121212]",
+  focusRingColor: "focus:ring focus:ring-[#0ea5e9] focus:border-[#0ea5e9] focus:outline-none",
+  corners: "rounded-xl",
+  cardsStyle: "bg-[#121212] border border-white/10 shadow-2xl backdrop-blur-md",
+  linkColor: "text-[#0ea5e9]",
+  websiteHeder: "bg-[#0a0a0a]/80 backdrop-blur-md border-b border-white/10",
+  borders: "border-white/10",
+  shadow: "shadow-2xl",
+  websiteSectionStyle: "bg-[#0a0a0a] text-white",
+  textSecondary: "text-gray-400",
+}
+
 export const basic: StyleObject = {
     aside: 'bg-gray-800',
     asideScrollbars: 'aside-scrollbars-gray',