1.0

backend/src/index.js

@@ -94,6 +94,7 @@ require('./auth/auth');
 app.use(bodyParser.json());
 
 app.use('/api/auth', authRoutes);
+app.use('/api/public', require('./routes/public'));
 app.use('/api/file', fileRoutes);
 app.use('/api/pexels', pexelsRoutes);
 app.enable('trust proxy');

backend/src/routes/products.js

@@ -1,9 +1,10 @@
-
 const express = require('express');
 
 const ProductsService = require('../services/products');
 const ProductsDBApi = require('../db/api/products');
 const wrapAsync = require('../helpers').wrapAsync;
+const db = require('../db/models');
+const { Op } = require('sequelize');
 
 
 const router = express.Router();
@@ -65,6 +66,62 @@ router.use(checkCrudPermissions('products'));
  *   description: The Products managing API
  */
 
+router.get('/dashboard-stats', wrapAsync(async (req, res) => {
+    const totalProducts = await db.products.count();
+    
+    const twentyFourHoursAgo = new Date(Date.now() - 24 * 60 * 60 * 1000);
+    const viralAlerts = await db.product_metrics.count({
+        where: {
+            viral_score: { [Op.gt]: 70 },
+            recorded_at: { [Op.gte]: twentyFourHoursAgo }
+        }
+    });
+
+    const trendingProducts = await db.product_metrics.count({
+        where: {
+            trending_rank: { [Op.lte]: 100 },
+            recorded_at: { [Op.gte]: twentyFourHoursAgo }
+        }
+    });
+
+    const newProducts = await db.products.count({
+        where: {
+            createdAt: { [Op.gte]: twentyFourHoursAgo }
+        }
+    });
+
+    res.status(200).send({
+        totalProducts,
+        viralAlerts,
+        trendingProducts,
+        newProducts
+    });
+}));
+
+router.get('/trending', wrapAsync(async (req, res) => {
+    const limit = parseInt(req.query.limit) || 10;
+    const days = parseInt(req.query.days) || 7;
+    const timeAgo = new Date(Date.now() - days * 24 * 60 * 60 * 1000);
+
+    const trending = await db.products.findAll({
+        include: [{
+            model: db.product_metrics,
+            as: 'product_metrics_product',
+            where: {
+                recorded_at: { [Op.gte]: timeAgo }
+            },
+            order: [['trending_rank', 'ASC']],
+            limit: 1
+        }, {
+            model: db.file,
+            as: 'product_images',
+        }],
+        limit: limit
+    });
+
+    res.status(200).send(trending);
+}));
+
 /**
 *  @swagger
 *  /api/products:

backend/src/routes/public.js

@@ -0,0 +1,21 @@
+const express = require('express');
+const db = require('../db/models');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const router = express.Router();
+
+router.get('/stats', wrapAsync(async (req, res) => {
+    const totalProducts = await db.products.count();
+    
+    // Some "realistic" starting numbers if DB is low
+    // But since I should "No dummy data", I'll show the actual count
+    // If it's 0, it's 0.
+    
+    res.status(200).send({
+        totalProducts,
+        viralAlerts: 0, // Need actual data from metrics
+        successfulSellers: 0 // Need actual data
+    });
+}));
+
+module.exports = router;

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'

frontend/src/components/Products/ResearchProductCard.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import { useAppSelector } from '../../stores/hooks';
+import BaseIcon from '../BaseIcon';
+import { mdiChartLine, mdiFire, mdiShoppingOutline } from '@mdi/js';
+import Link from 'next/link';
+
+type Props = {
+  product: any;
+};
+
+const ResearchProductCard = ({ product }: Props) => {
+  const corners = useAppSelector((state) => state.style.corners);
+  const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
+  
+  // Get latest metrics
+  const latestMetrics = product.product_metrics_product?.[0] || {};
+
+  return (
+    <div className={`overflow-hidden ${corners !== 'rounded-full' ? corners : 'rounded-3xl'} ${cardsStyle} border dark:border-dark-700 hover:shadow-xl transition-all group`}>
+      <Link href={`/products/products-view/?id=${product.id}`}>
+        <div className="relative aspect-square overflow-hidden bg-gray-100 dark:bg-dark-800">
+          <ImageField
+            name={'Product Image'}
+            image={product.product_images}
+            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+            imageClassName="w-full h-full object-cover"
+          />
+          <div className="absolute top-4 right-4 flex flex-col gap-2">
+            {latestMetrics.viral_score > 70 && (
+              <div className="bg-red-500 text-white p-2 rounded-xl shadow-lg animate-pulse">
+                <BaseIcon path={mdiFire} size={20} />
+              </div>
+            )}
+            <div className="bg-white/90 dark:bg-dark-900/90 backdrop-blur-md px-3 py-1 rounded-full text-xs font-bold border border-white/20">
+              {product.currency} {product.price}
+            </div>
+          </div>
+        </div>
+        
+        <div className="p-5 space-y-4">
+          <div>
+            <h3 className="font-bold text-gray-900 dark:text-white line-clamp-1 group-hover:text-purple-600 transition-colors">
+              {product.title}
+            </h3>
+            <p className="text-xs text-gray-500 dark:text-dark-600 mt-1 flex items-center">
+              <BaseIcon path={mdiShoppingOutline} size={14} className="mr-1" />
+              {product.shop_name}
+            </p>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="bg-gray-50 dark:bg-dark-800 p-3 rounded-2xl border border-gray-100 dark:border-dark-700">
+              <div className="text-[10px] text-gray-400 uppercase font-bold tracking-wider">Viral Score</div>
+              <div className="text-lg font-black text-purple-600 dark:text-purple-400">
+                {latestMetrics.viral_score || 0}
+              </div>
+            </div>
+            <div className="bg-gray-50 dark:bg-dark-800 p-3 rounded-2xl border border-gray-100 dark:border-dark-700">
+              <div className="text-[10px] text-gray-400 uppercase font-bold tracking-wider">Sales Vel.</div>
+              <div className="text-lg font-black text-blue-600 dark:text-blue-400 flex items-center">
+                {latestMetrics.sales_velocity || 0}
+                <BaseIcon path={mdiChartLine} size={14} className="ml-1" />
+              </div>
+            </div>
+          </div>
+          
+          <div className="pt-2">
+             <div className="w-full bg-purple-600 hover:bg-purple-700 text-white text-center py-2 rounded-xl font-bold text-sm transition-colors">
+                View Deep Analysis
+             </div>
+          </div>
+        </div>
+      </Link>
+    </div>
+  );
+};
+
+export default ResearchProductCard;

frontend/src/layouts/Authenticated.tsx

@@ -1,5 +1,4 @@
-import React, { ReactNode, useEffect } from 'react'
-import { useState } from 'react'
+import React, { ReactNode, useEffect, useState } from 'react'
 import jwt from 'jsonwebtoken';
 import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
 import menuAside from '../menuAside'

frontend/src/menuAside.ts

@@ -4,104 +4,75 @@ import { MenuAsideItem } from './interfaces'
 const menuAside: MenuAsideItem[] = [
   {
     href: '/dashboard',
-    icon: icon.mdiViewDashboardOutline,
-    label: 'Dashboard',
-  },
-  
-  {
-    href: '/users/users-list',
-    label: 'Users',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: icon.mdiAccountGroup ?? icon.mdiTable,
-    permissions: 'READ_USERS'
-  },
-  {
-    href: '/roles/roles-list',
-    label: 'Roles',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: icon.mdiShieldAccountVariantOutline ?? icon.mdiTable,
-    permissions: 'READ_ROLES'
-  },
-  {
-    href: '/permissions/permissions-list',
-    label: 'Permissions',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: icon.mdiShieldAccountOutline ?? icon.mdiTable,
-    permissions: 'READ_PERMISSIONS'
+    icon: icon.mdiChartTimelineVariant,
+    label: 'Discovery Hub',
   },
   {
     href: '/products/products-list',
-    label: 'Products',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiShoppingOutline' in icon ? icon['mdiShoppingOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    label: 'Product Research',
+    icon: icon.mdiShoppingOutline,
     permissions: 'READ_PRODUCTS'
   },
-  {
-    href: '/product_metrics/product_metrics-list',
-    label: 'Product metrics',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiChartLine' in icon ? icon['mdiChartLine' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_PRODUCT_METRICS'
-  },
   {
     href: '/viral_videos/viral_videos-list',
-    label: 'Viral videos',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiVideoOutline' in icon ? icon['mdiVideoOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    label: 'Viral Alerts',
+    icon: icon.mdiVideoOutline,
     permissions: 'READ_VIRAL_VIDEOS'
   },
-  {
-    href: '/supplier_matches/supplier_matches-list',
-    label: 'Supplier matches',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiTruckFastOutline' in icon ? icon['mdiTruckFastOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_SUPPLIER_MATCHES'
-  },
   {
     href: '/user_tracked_products/user_tracked_products-list',
-    label: 'User tracked products',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiBookmarkOutline' in icon ? icon['mdiBookmarkOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    label: 'Tracked Products',
+    icon: icon.mdiBookmarkOutline,
     permissions: 'READ_USER_TRACKED_PRODUCTS'
   },
   {
     href: '/tracked_competitors/tracked_competitors-list',
-    label: 'Tracked competitors',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiStorefrontOutline' in icon ? icon['mdiStorefrontOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    label: 'Competitor Tracking',
+    icon: icon.mdiStorefrontOutline,
     permissions: 'READ_TRACKED_COMPETITORS'
   },
   {
-    href: '/subscriptions/subscriptions-list',
-    label: 'Subscriptions',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiCreditCardOutline' in icon ? icon['mdiCreditCardOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_SUBSCRIPTIONS'
+    href: '/supplier_matches/supplier_matches-list',
+    label: 'Supplier Matching',
+    icon: icon.mdiTruckFastOutline,
+    permissions: 'READ_SUPPLIER_MATCHES'
   },
   {
-    href: '/profile',
-    label: 'Profile',
-    icon: icon.mdiAccountCircle,
-  },
-
- 
-  {
-    href: '/api-docs',
-    target: '_blank',
-    label: 'Swagger API',
-    icon: icon.mdiFileCode,
-    permissions: 'READ_API_DOCS'
-  },
+    label: 'Settings',
+    icon: icon.mdiCogOutline,
+    menu: [
+      {
+        href: '/subscriptions/subscriptions-list',
+        label: 'Subscriptions',
+        icon: icon.mdiCreditCardOutline,
+        permissions: 'READ_SUBSCRIPTIONS'
+      },
+      {
+        href: '/profile',
+        label: 'User Profile',
+        icon: icon.mdiAccountCircle,
+      },
+      {
+        href: '/users/users-list',
+        label: 'Manage Users',
+        icon: icon.mdiAccountGroup,
+        permissions: 'READ_USERS'
+      },
+      {
+        href: '/roles/roles-list',
+        label: 'RBAC Roles',
+        icon: icon.mdiShieldAccountVariantOutline,
+        permissions: 'READ_ROLES'
+      },
+      {
+        href: '/api-docs',
+        target: '_blank',
+        label: 'Swagger API',
+        icon: icon.mdiFileCode,
+        permissions: 'READ_API_DOCS'
+      },
+    ]
+  }
 ]
 
 export default menuAside

frontend/src/pages/dashboard.tsx

@@ -1,6 +1,6 @@
 import * as icon from '@mdi/js';
 import Head from 'next/head'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import axios from 'axios';
 import type { ReactElement } from 'react'
 import LayoutAuthenticated from '../layouts/Authenticated'
@@ -9,431 +9,144 @@ import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton
 import BaseIcon from "../components/BaseIcon";
 import { getPageTitle } from '../config'
 import Link from "next/link";
+import { useAppSelector } from '../stores/hooks';
+import ResearchProductCard from '../components/Products/ResearchProductCard';
+import { mdiChartTimelineVariant, mdiFlash, mdiFire, mdiShoppingOutline, mdiPlus } from '@mdi/js';
 
-import { hasPermission } from "../helpers/userPermissions";
-import { fetchWidgets } from '../stores/roles/rolesSlice';
-import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
-import { SmartWidget } from '../components/SmartWidget/SmartWidget';
-
-import { useAppDispatch, useAppSelector } from '../stores/hooks';
 const Dashboard = () => {
-    const dispatch = useAppDispatch();
-    const iconsColor = useAppSelector((state) => state.style.iconsColor);
+    const { currentUser } = useAppSelector((state) => state.auth);
+    const [stats, setStats] = useState({
+        totalProducts: 0,
+        viralAlerts: 0,
+        trendingProducts: 0,
+        newProducts: 0
+    });
+    const [trending, setTrending] = useState([]);
+    const [loading, setLoading] = useState(true);
+
     const corners = useAppSelector((state) => state.style.corners);
     const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
 
-    const loadingMessage = 'Loading...';
-
-    
-    const [users, setUsers] = React.useState(loadingMessage);
-    const [roles, setRoles] = React.useState(loadingMessage);
-    const [permissions, setPermissions] = React.useState(loadingMessage);
-    const [products, setProducts] = React.useState(loadingMessage);
-    const [product_metrics, setProduct_metrics] = React.useState(loadingMessage);
-    const [viral_videos, setViral_videos] = React.useState(loadingMessage);
-    const [supplier_matches, setSupplier_matches] = React.useState(loadingMessage);
-    const [user_tracked_products, setUser_tracked_products] = React.useState(loadingMessage);
-    const [tracked_competitors, setTracked_competitors] = React.useState(loadingMessage);
-    const [subscriptions, setSubscriptions] = React.useState(loadingMessage);
-
-    
-    const [widgetsRole, setWidgetsRole] = React.useState({
-        role: { value: '', label: '' },
-    });
-    const { currentUser } = useAppSelector((state) => state.auth);
-    const { isFetchingQuery } = useAppSelector((state) => state.openAi);
-    
-    const { rolesWidgets, loading } = useAppSelector((state) => state.roles);
-    
-    
-    async function loadData() {
-        const entities = ['users','roles','permissions','products','product_metrics','viral_videos','supplier_matches','user_tracked_products','tracked_competitors','subscriptions',];
-        const fns = [setUsers,setRoles,setPermissions,setProducts,setProduct_metrics,setViral_videos,setSupplier_matches,setUser_tracked_products,setTracked_competitors,setSubscriptions,];
-
-        const requests = entities.map((entity, index) => {
-          
-          if(hasPermission(currentUser, `READ_${entity.toUpperCase()}`)) {
-            return axios.get(`/${entity.toLowerCase()}/count`);
-          } else {
-            fns[index](null);
-            return Promise.resolve({data: {count: null}});
-          }
-          
-        });
-
-        Promise.allSettled(requests).then((results) => {
-            results.forEach((result, i) => {
-                if (result.status === 'fulfilled') {
-                    fns[i](result.value.data.count);
-                } else {
-                    fns[i](result.reason.message);
-                }
-            });
-        });
-    }
-  
-    async function getWidgets(roleId) {
-        await dispatch(fetchWidgets(roleId));
-    }
-    React.useEffect(() => {
+    useEffect(() => {
         if (!currentUser) return;
-        loadData().then();
-        setWidgetsRole({ role: { value: currentUser?.app_role?.id, label: currentUser?.app_role?.name } });
+
+        const fetchData = async () => {
+            try {
+                const [statsRes, trendingRes] = await Promise.all([
+                    axios.get('/products/dashboard-stats'),
+                    axios.get('/products/trending?limit=8')
+                ]);
+                setStats(statsRes.data);
+                setTrending(trendingRes.data);
+            } catch (error) {
+                console.error('Error fetching dashboard data:', error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchData();
     }, [currentUser]);
 
-    React.useEffect(() => {
-        if (!currentUser || !widgetsRole?.role?.value) return;
-        getWidgets(widgetsRole?.role?.value || '').then();
-    }, [widgetsRole?.role?.value]);
-  
-  return (
-    <>
-      <Head>
-        <title>
-            {getPageTitle('Overview')}
-        </title>
-      </Head>
-      <SectionMain>
-        <SectionTitleLineWithButton
-            icon={icon.mdiChartTimelineVariant}
-            title='Overview'
-            main>
-          {''}
-        </SectionTitleLineWithButton>
-        
-        {hasPermission(currentUser, 'CREATE_ROLES') && <WidgetCreator
-            currentUser={currentUser}
-            isFetchingQuery={isFetchingQuery}
-            setWidgetsRole={setWidgetsRole}
-            widgetsRole={widgetsRole}
-        />}
-        {!!rolesWidgets.length &&
-            hasPermission(currentUser, 'CREATE_ROLES') && (
-                <p className='  text-gray-500 dark:text-gray-400 mb-4'>
-                    {`${widgetsRole?.role?.label || 'Users'}'s widgets`}
-                </p>
-            )}
-
-        <div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-6 grid-flow-dense'>
-            {(isFetchingQuery || loading) && (
-                <div className={` ${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 text-lg leading-tight   text-gray-500 flex items-center ${cardsStyle} dark:border-dark-700 p-6`}>
-                    <BaseIcon
-                        className={`${iconsColor} animate-spin mr-5`}
-                        w='w-16'
-                        h='h-16'
-                        size={48}
-                        path={icon.mdiLoading}
-                    />{' '}
-                    Loading widgets...
-                </div>
-            )}
-
-            { rolesWidgets &&
-                rolesWidgets.map((widget) => (
-                    <SmartWidget
-                        key={widget.id}
-                        userId={currentUser?.id}
-                        widget={widget}
-                        roleId={widgetsRole?.role?.value || ''}
-                        admin={hasPermission(currentUser, 'CREATE_ROLES')}
-                    />
-            ))}
-        </div>
-
-        {!!rolesWidgets.length && <hr className='my-6  ' />}
-        
-        <div id="dashboard" className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'>
-        
-          
-            {hasPermission(currentUser, 'READ_USERS') && <Link href={'/users/users-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+    return (
+        <>
+            <Head>
+                <title>{getPageTitle('Discovery Hub')}</title>
+            </Head>
+            <SectionMain>
+                <SectionTitleLineWithButton
+                    icon={mdiChartTimelineVariant}
+                    title='Discovery Hub'
+                    main
                 >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Users
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {users}
-                            </div>
+                    <Link href="/products/products-new">
+                        <div className="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-xl flex items-center font-bold text-sm transition-all shadow-lg hover:scale-105">
+                            <BaseIcon path={mdiPlus} size={20} className="mr-2" />
+                            Add Product
                         </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={icon.mdiAccountGroup || icon.mdiTable}
-                            />
+                    </Link>
+                </SectionTitleLineWithButton>
+
+                {/* Stat Cards */}
+                <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 mb-10">
+                    <div className={`${corners !== 'rounded-full' ? corners : 'rounded-3xl'} ${cardsStyle} p-6 border dark:border-dark-700 relative overflow-hidden group`}>
+                        <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:scale-110 transition-transform">
+                            <BaseIcon path={mdiShoppingOutline} size={64} />
                         </div>
+                        <div className="text-sm font-bold text-gray-400 uppercase tracking-widest mb-1">Total Products</div>
+                        <div className="text-3xl font-black text-gray-900 dark:text-white">{stats.totalProducts}</div>
+                    </div>
+
+                    <div className={`${corners !== 'rounded-full' ? corners : 'rounded-3xl'} ${cardsStyle} p-6 border dark:border-dark-700 relative overflow-hidden group border-l-4 border-l-red-500`}>
+                        <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:scale-110 transition-transform">
+                            <BaseIcon path={mdiFlash} size={64} className="text-red-500" />
+                        </div>
+                        <div className="text-sm font-bold text-gray-400 uppercase tracking-widest mb-1">Viral Alerts (24h)</div>
+                        <div className="text-3xl font-black text-red-500">{stats.viralAlerts}</div>
+                    </div>
+
+                    <div className={`${corners !== 'rounded-full' ? corners : 'rounded-3xl'} ${cardsStyle} p-6 border dark:border-dark-700 relative overflow-hidden group border-l-4 border-l-yellow-500`}>
+                        <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:scale-110 transition-transform">
+                            <BaseIcon path={mdiFire} size={64} className="text-yellow-500" />
+                        </div>
+                        <div className="text-sm font-bold text-gray-400 uppercase tracking-widest mb-1">Trending Products</div>
+                        <div className="text-3xl font-black text-yellow-500">{stats.trendingProducts}</div>
+                    </div>
+
+                    <div className={`${corners !== 'rounded-full' ? corners : 'rounded-3xl'} ${cardsStyle} p-6 border dark:border-dark-700 relative overflow-hidden group border-l-4 border-l-blue-500`}>
+                        <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:scale-110 transition-transform">
+                            <BaseIcon path={icon.mdiPlusCircleOutline} size={64} className="text-blue-500" />
+                        </div>
+                        <div className="text-sm font-bold text-gray-400 uppercase tracking-widest mb-1">New Today</div>
+                        <div className="text-3xl font-black text-blue-500">{stats.newProducts}</div>
                     </div>
                 </div>
-            </Link>}
 
-            {hasPermission(currentUser, 'READ_ROLES') && <Link href={'/roles/roles-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Roles
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {roles}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={icon.mdiShieldAccountVariantOutline || icon.mdiTable}
-                            />
-                        </div>
+                {/* Trending Section */}
+                <div className="space-y-6">
+                    <div className="flex items-center justify-between">
+                        <h2 className="text-2xl font-black dark:text-white flex items-center">
+                            <BaseIcon path={mdiFire} size={28} className="text-red-500 mr-2" />
+                            Trending Now
+                        </h2>
+                        <Link href="/products/products-list" className="text-purple-600 font-bold hover:underline text-sm">
+                            View All Analysis →
+                        </Link>
                     </div>
+
+                    {loading ? (
+                        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+                            {[1, 2, 3, 4].map((i) => (
+                                <div key={i} className="animate-pulse bg-gray-200 dark:bg-dark-800 h-80 rounded-3xl" />
+                            ))}
+                        </div>
+                    ) : (
+                        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+                            {trending.length > 0 ? (
+                                trending.map((product) => (
+                                    <ResearchProductCard key={product.id} product={product} />
+                                ))
+                            ) : (
+                                <div className="col-span-full py-20 text-center space-y-4">
+                                    <div className="text-gray-400 dark:text-dark-600">
+                                        <BaseIcon path={mdiShoppingOutline} size={64} className="mx-auto" />
+                                    </div>
+                                    <h3 className="text-xl font-bold dark:text-white">No trending products yet</h3>
+                                    <p className="text-gray-500 max-w-xs mx-auto">
+                                        As soon as we detect significant market movement, they&apos;ll appear here.
+                                    </p>
+                                </div>
+                            )}
+                        </div>
+                    )}
                 </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_PERMISSIONS') && <Link href={'/permissions/permissions-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Permissions
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {permissions}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={icon.mdiShieldAccountOutline || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_PRODUCTS') && <Link href={'/products/products-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Products
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {products}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiShoppingOutline' in icon ? icon['mdiShoppingOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_PRODUCT_METRICS') && <Link href={'/product_metrics/product_metrics-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Product metrics
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {product_metrics}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiChartLine' in icon ? icon['mdiChartLine' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_VIRAL_VIDEOS') && <Link href={'/viral_videos/viral_videos-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Viral videos
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {viral_videos}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiVideoOutline' in icon ? icon['mdiVideoOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_SUPPLIER_MATCHES') && <Link href={'/supplier_matches/supplier_matches-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Supplier matches
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {supplier_matches}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiTruckFastOutline' in icon ? icon['mdiTruckFastOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_USER_TRACKED_PRODUCTS') && <Link href={'/user_tracked_products/user_tracked_products-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              User tracked products
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {user_tracked_products}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiBookmarkOutline' in icon ? icon['mdiBookmarkOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_TRACKED_COMPETITORS') && <Link href={'/tracked_competitors/tracked_competitors-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Tracked competitors
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {tracked_competitors}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiStorefrontOutline' in icon ? icon['mdiStorefrontOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_SUBSCRIPTIONS') && <Link href={'/subscriptions/subscriptions-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Subscriptions
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {subscriptions}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiCreditCardOutline' in icon ? icon['mdiCreditCardOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-          
-        </div>
-      </SectionMain>
-    </>
-  )
+            </SectionMain>
+        </>
+    )
 }
 
 Dashboard.getLayout = function getLayout(page: ReactElement) {
-  return <LayoutAuthenticated>{page}</LayoutAuthenticated>
+    return <LayoutAuthenticated>{page}</LayoutAuthenticated>
 }
 
 export default Dashboard

frontend/src/pages/index.tsx

@@ -1,166 +1,169 @@
-
 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 CardBox from '../components/CardBox';
-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';
+import BaseButton from '../components/BaseButton';
+import { mdiChartTimelineVariant, mdiFlash, mdiTrophy, mdiVideo } from '@mdi/js';
+import BaseIcon from '../components/BaseIcon';
+import axios from 'axios';
 
+export default function Landing() {
+  const [stats, setStats] = useState({
+    totalProducts: 0,
+    viralAlerts: 0,
+    successfulSellers: 0,
+  });
 
-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('video');
-    const [contentPosition, setContentPosition] = useState('left');
-    const textColor = useAppSelector((state) => state.style.linkColor);
-
-    const title = 'TikTokScout'
-
-    // 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>)
+  useEffect(() => {
+    const fetchPublicStats = async () => {
+        try {
+            const res = await axios.get('/public/stats');
+            setStats(res.data);
+        } catch (error) {
+            console.error('Error fetching public stats:', error);
         }
     };
+    fetchPublicStats();
+  }, []);
 
   return (
-      <div
-          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',
-                  }
-                  : {}
-          }
-      >
+    <div className="min-h-screen bg-white dark:bg-dark-900 overflow-hidden">
       <Head>
-        <title>{getPageTitle('Starter Page')}</title>
+        <title>{getPageTitle('TikTokScout - TikTok Shop Product Research')}</title>
       </Head>
 
-      <SectionFullScreen bg='violet'>
-      <div
-          className={`flex ${
-              contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
-          } min-h-screen w-full`}
-      >
-          {contentType === 'image' && contentPosition !== 'background'
-              ? imageBlock(illustrationImage)
-              : null}
-          {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 TikTokScout app!"/>
-        
-            <div className="space-y-3">
-                <p className='text-center text-gray-500'>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 text-gray-500'>For guides and documentation please check
-                    your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
+      {/* Hero Section */}
+      <div className="relative overflow-hidden bg-gradient-to-br from-[#667eea] to-[#764ba2] text-white py-20 px-6 lg:px-20">
+        <div className="max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-between relative z-10">
+          <div className="lg:w-1/2 space-y-8 animate-fade-in">
+            <h1 className="text-5xl lg:text-7xl font-extrabold tracking-tight leading-tight">
+              Scale Your TikTok Shop with <span className="text-yellow-300">Data</span>
+            </h1>
+            <p className="text-xl opacity-90 max-w-lg leading-relaxed">
+              Find winning products, track viral trends, and spy on competitors with the world&apos;s most advanced TikTok Shop research tool.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4">
+              <BaseButton
+                href="/register"
+                label="Start Free Trial"
+                color="white"
+                className="px-8 py-4 text-lg font-bold text-purple-700 shadow-xl hover:scale-105 transition-transform"
+              />
+              <BaseButton
+                href="/login"
+                label="Login to Dashboard"
+                className="px-8 py-4 text-lg font-bold bg-white/10 backdrop-blur-md border border-white/20 hover:bg-white/20 transition-all"
+              />
             </div>
+          </div>
+          <div className="lg:w-1/2 mt-16 lg:mt-0 relative flex justify-center lg:justify-end">
+            <div className="relative w-full max-w-md aspect-square bg-white/10 backdrop-blur-2xl rounded-[3rem] p-8 shadow-2xl border border-white/20 animate-fade-in-up">
+              <div className="absolute -top-6 -right-6 bg-yellow-400 p-4 rounded-2xl shadow-lg animate-bounce">
+                <BaseIcon path={mdiFlash} size={32} className="text-purple-900" />
+              </div>
+              <div className="space-y-6">
+                 <div className="h-4 w-3/4 bg-white/20 rounded-full" />
+                 <div className="grid grid-cols-2 gap-4">
+                    <div className="h-24 bg-white/20 rounded-2xl" />
+                    <div className="h-24 bg-white/20 rounded-2xl" />
+                 </div>
+                 <div className="h-32 bg-white/20 rounded-2xl" />
+                 <div className="flex items-center space-x-4">
+                    <div className="h-10 w-10 bg-white/30 rounded-full" />
+                    <div className="h-4 w-1/2 bg-white/20 rounded-full" />
+                 </div>
+              </div>
+            </div>
+          </div>
+        </div>
         
-            <BaseButtons>
-                <BaseButton
-                    href='/login'
-                    label='Login'
-                    color='info'
-                    className='w-full'
-                />
+        {/* Background shapes */}
+        <div className="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 w-[600px] h-[600px] bg-white/5 rounded-full blur-3xl pointer-events-none" />
+        <div className="absolute bottom-0 left-0 translate-y-1/2 -translate-x-1/2 w-[400px] h-[400px] bg-purple-900/20 rounded-full blur-3xl pointer-events-none" />
+      </div>
 
-            </BaseButtons>
-        </CardBox>
+      {/* Stats Section */}
+      <div className="py-20 px-6 max-w-7xl mx-auto">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-12 text-center">
+          <div className="space-y-4">
+            <div className="text-4xl font-black text-purple-600 dark:text-purple-400">{stats.totalProducts > 0 ? stats.totalProducts : 'Join us today'}</div>
+            <div className="text-gray-500 font-medium">Products Tracked</div>
+          </div>
+          <div className="space-y-4">
+            <div className="text-4xl font-black text-purple-600 dark:text-purple-400">Viral Detection</div>
+            <div className="text-gray-500 font-medium">Real-time alerts enabled</div>
+          </div>
+          <div className="space-y-4">
+            <div className="text-4xl font-black text-purple-600 dark:text-purple-400">Winning Products</div>
+            <div className="text-gray-500 font-medium">Research Hub Ready</div>
+          </div>
         </div>
       </div>
-      </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>
+
+      {/* Features Section */}
+      <div className="bg-gray-50 dark:bg-dark-800 py-24 px-6">
+        <div className="max-w-7xl mx-auto">
+          <div className="text-center mb-16 space-y-4">
+            <h2 className="text-4xl font-bold dark:text-white">Why TikTokScout?</h2>
+            <p className="text-gray-500 max-w-2xl mx-auto text-lg">
+              We provide the tools you need to stay ahead of the curve in the fast-paced world of TikTok commerce.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div className="bg-white dark:bg-dark-900 p-8 rounded-3xl shadow-sm border border-gray-100 dark:border-dark-700 hover:shadow-xl transition-all group">
+              <div className="bg-purple-100 dark:bg-purple-900/30 w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-purple-600 transition-colors">
+                <BaseIcon path={mdiChartTimelineVariant} size={32} className="text-purple-600 group-hover:text-white" />
+              </div>
+              <h3 className="text-xl font-bold mb-4 dark:text-white">Real-time Analytics</h3>
+              <p className="text-gray-500 leading-relaxed">
+                Track sales velocity, revenue estimates, and inventory levels in real-time.
+              </p>
+            </div>
+            <div className="bg-white dark:bg-dark-900 p-8 rounded-3xl shadow-sm border border-gray-100 dark:border-dark-700 hover:shadow-xl transition-all group">
+              <div className="bg-yellow-100 dark:bg-yellow-900/30 w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-yellow-500 transition-colors">
+                <BaseIcon path={mdiVideo} size={32} className="text-yellow-600 group-hover:text-white" />
+              </div>
+              <h3 className="text-xl font-bold mb-4 dark:text-white">Viral Detection</h3>
+              <p className="text-gray-500 leading-relaxed">
+                Our AI detects products before they go viral, giving you a massive head start.
+              </p>
+            </div>
+            <div className="bg-white dark:bg-dark-900 p-8 rounded-3xl shadow-sm border border-gray-100 dark:border-dark-700 hover:shadow-xl transition-all group">
+              <div className="bg-blue-100 dark:bg-blue-900/30 w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-blue-600 transition-colors">
+                <BaseIcon path={mdiTrophy} size={32} className="text-blue-600 group-hover:text-white" />
+              </div>
+              <h3 className="text-xl font-bold mb-4 dark:text-white">Competitor Insights</h3>
+              <p className="text-gray-500 leading-relaxed">
+                See exactly what shops are selling and how they are marketing their top products.
+              </p>
+            </div>
+          </div>
+        </div>
       </div>
 
+      {/* Footer */}
+      <footer className="py-12 px-6 border-t border-gray-100 dark:border-dark-700">
+        <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-8">
+          <div className="flex items-center space-x-2">
+            <div className="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center">
+              <BaseIcon path={mdiFlash} size={18} className="text-white" />
+            </div>
+            <span className="text-xl font-black dark:text-white tracking-tight">TikTokScout</span>
+          </div>
+          <div className="flex gap-8 text-gray-500 font-medium">
+            <Link href="/privacy-policy" className="hover:text-purple-600">Privacy</Link>
+            <Link href="/terms-of-use" className="hover:text-purple-600">Terms</Link>
+            <Link href="/login" className="hover:text-purple-600">Dashboard</Link>
+          </div>
+          <p className="text-gray-400 text-sm">© 2026 TikTokScout. Built for scale.</p>
+        </div>
+      </footer>
     </div>
   );
 }
 
-Starter.getLayout = function getLayout(page: ReactElement) {
+Landing.getLayout = function getLayout(page: ReactElement) {
   return <LayoutGuest>{page}</LayoutGuest>;
 };
-