version1

backend/src/index.js

@@ -12,6 +12,7 @@ const swaggerUI = require('swagger-ui-express');
 const swaggerJsDoc = require('swagger-jsdoc');
 
 const authRoutes = require('./routes/auth');
+const publicRoutes = require('./routes/public');
 const fileRoutes = require('./routes/file');
 const searchRoutes = require('./routes/search');
 const sqlRoutes = require('./routes/sql');
@@ -90,6 +91,7 @@ require('./auth/auth');
 app.use(bodyParser.json());
 
 app.use('/api/auth', authRoutes);
+app.use('/api/public', publicRoutes);
 app.use('/api/file', fileRoutes);
 app.use('/api/pexels', pexelsRoutes);
 app.enable('trust proxy');

backend/src/routes/public.js

@@ -0,0 +1,28 @@
+
+const express = require('express');
+const router = express.Router();
+const db = require('../db/models');
+const { wrapAsync } = require('../helpers');
+
+router.get('/videos', wrapAsync(async (req, res) => {
+  const rows = await db.videos.findAll({
+    limit: 10,
+    order: [['createdAt', 'DESC']],
+    include: [
+      { model: db.file, as: 'thumbnail' },
+      { model: db.tags, as: 'tags' }
+    ]
+  });
+  res.status(200).send({ rows });
+}));
+
+router.get('/collections', wrapAsync(async (req, res) => {
+  const rows = await db.collections.findAll({
+    include: [
+      { model: db.file, as: 'cover' }
+    ]
+  });
+  res.status(200).send({ rows });
+}));
+
+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/VideoCard.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { mdiPlayCircle } from '@mdi/js';
+import BaseIcon from './BaseIcon';
+
+const VideoCard = ({ video }) => {
+  const thumbnailUrl = video.thumbnail?.[0]?.url || 'https://via.placeholder.com/400x225?text=No+Thumbnail';
+
+  return (
+    <div className="group relative bg-gray-900 rounded-2xl overflow-hidden transition-transform duration-300 hover:scale-105 shadow-xl">
+      <div className="aspect-video relative">
+        <img
+          src={thumbnailUrl}
+          alt={video.title}
+          className="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity"
+        />
+        <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+          <BaseIcon path={mdiPlayCircle} size={64} className="text-white drop-shadow-lg" />
+        </div>
+      </div>
+      <div className="p-4">
+        <h3 className="text-white font-bold text-lg line-clamp-1">{video.title || 'Untitled Video'}</h3>
+        <p className="text-gray-400 text-sm line-clamp-2 mt-1">{video.description || 'No description available.'}</p>
+        <div className="mt-3 flex flex-wrap gap-2">
+          {video.tags?.slice(0, 3).map((tag) => (
+            <span key={tag.id} className="text-[10px] uppercase tracking-wider bg-violet-500/20 text-violet-400 px-2 py-1 rounded-full border border-violet-500/30">
+              {tag.name}
+            </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default VideoCard;

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/pages/index.tsx

@@ -3,164 +3,178 @@ 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 axios from 'axios';
 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 VideoCard from '../components/VideoCard';
+import BaseButton from '../components/BaseButton';
+import { mdiPlay, mdiChevronRight, mdiInformationOutline } from '@mdi/js';
+import BaseIcon from '../components/BaseIcon';
 
+export default function LandingPage() {
+  const [videos, setVideos] = useState([]);
+  const [collections, setCollections] = useState([]);
+  const [loading, setLoading] = useState(true);
 
-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('right');
-    const textColor = useAppSelector((state) => state.style.linkColor);
-
-    const title = 'App Draft'
-
-    // 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 fetchData = async () => {
+      try {
+        const [videosRes, collectionsRes] = await Promise.all([
+          axios.get('/public/videos'),
+          axios.get('/public/collections')
+        ]);
+        setVideos(videosRes.data.rows || []);
+        setCollections(collectionsRes.data.rows || []);
+      } catch (error) {
+        console.error('Failed to fetch public data:', error);
+      } finally {
+        setLoading(false);
+      }
     };
+    fetchData();
+  }, []);
 
   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-[#0a0a0c] text-white selection:bg-violet-500/30">
       <Head>
-        <title>{getPageTitle('Starter Page')}</title>
+        <title>{getPageTitle('The Ultimate Dommelia Archive')}</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 App Draft 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>
-            </div>
-        
-            <BaseButtons>
-                <BaseButton
-                    href='/login'
-                    label='Login'
-                    color='info'
-                    className='w-full'
-                />
-
-            </BaseButtons>
-        </CardBox>
+      {/* Hero Section */}
+      <section className="relative h-[85vh] flex items-center justify-center overflow-hidden">
+        <div className="absolute inset-0 z-0">
+          <div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#0a0a0c]/60 to-[#0a0a0c] z-10" />
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-violet-600/20 via-transparent to-transparent z-10" />
+          <img 
+            src="https://images.pexels.com/photos/7031607/pexels-photo-7031607.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" 
+            alt="Dommelia Archive Cinematic Background"
+            className="w-full h-full object-cover scale-105 blur-[2px]"
+          />
         </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>
-      </div>
 
+        <div className="container mx-auto px-6 relative z-20 text-center">
+          <h1 className="text-5xl md:text-7xl font-black tracking-tight mb-6 animate-fade-in">
+            <span className="bg-clip-text text-transparent bg-gradient-to-r from-violet-400 to-pink-500">
+              DOMMELIA
+            </span>
+            <br />
+            <span className="text-white">ARCHIVE</span>
+          </h1>
+          <p className="text-lg md:text-xl text-gray-300 max-w-2xl mx-auto mb-10 leading-relaxed">
+            Gathering every video from across the web. Organized, curated, and categorized for the ultimate fans.
+          </p>
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+            <Link href="/login">
+              <button className="px-8 py-4 bg-violet-600 hover:bg-violet-700 text-white rounded-full font-bold transition-all shadow-lg shadow-violet-600/25 flex items-center gap-2">
+                <BaseIcon path={mdiPlay} size={20} />
+                Explore Archive
+              </button>
+            </Link>
+            <Link href="/login">
+              <button className="px-8 py-4 bg-white/10 hover:bg-white/20 backdrop-blur-md text-white rounded-full font-bold transition-all flex items-center gap-2">
+                <BaseIcon path={mdiInformationOutline} size={20} />
+                Contribute
+              </button>
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Categories / Collections */}
+      <section className="py-24 container mx-auto px-6">
+        <div className="flex items-end justify-between mb-12">
+          <div>
+            <h2 className="text-3xl font-bold mb-2">Curated Collections</h2>
+            <p className="text-gray-400">Hand-picked categories for easy discovery.</p>
+          </div>
+          <Link href="/login" className="text-violet-400 hover:text-violet-300 flex items-center gap-1 font-medium transition-colors">
+            View all <BaseIcon path={mdiChevronRight} size={20} />
+          </Link>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {collections.length > 0 ? (
+            collections.map((collection) => (
+              <div key={collection.id} className="group relative aspect-[4/5] rounded-3xl overflow-hidden cursor-pointer">
+                <img 
+                  src={collection.cover?.[0]?.url || 'https://via.placeholder.com/800x1000?text=Collection'} 
+                  alt={collection.title || 'Collection Cover'}
+                  className="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent opacity-80" />
+                <div className="absolute bottom-0 left-0 p-8">
+                  <span className="text-[10px] uppercase tracking-widest text-violet-400 font-bold mb-2 block">
+                    {collection.status || 'COLLECTION'}
+                  </span>
+                  <h3 className="text-2xl font-bold text-white mb-2">{collection.title}</h3>
+                  <p className="text-gray-300 text-sm line-clamp-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                    {collection.description}
+                  </p>
+                </div>
+              </div>
+            ))
+          ) : (
+            [1, 2, 3].map((i) => (
+              <div key={i} className="aspect-[4/5] rounded-3xl bg-white/5 animate-pulse flex items-center justify-center text-gray-600">
+                Placeholder Collection {i}
+              </div>
+            ))
+          )}
+        </div>
+      </section>
+
+      {/* Latest Videos Grid */}
+      <section className="py-24 bg-gradient-to-b from-transparent to-violet-900/10">
+        <div className="container mx-auto px-6">
+          <div className="mb-12">
+            <h2 className="text-3xl font-bold mb-2">Recently Gathered</h2>
+            <p className="text-gray-400">The latest additions to our ever-growing archive.</p>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {videos.length > 0 ? (
+              videos.map((video) => (
+                <VideoCard key={video.id} video={video} />
+              ))
+            ) : (
+              [1, 2, 3, 4].map((i) => (
+                <div key={i} className="aspect-video rounded-2xl bg-white/5 animate-pulse" />
+              ))
+            )}
+          </div>
+
+          <div className="mt-16 text-center">
+            <Link href="/login">
+              <button className="px-10 py-4 border border-white/20 hover:border-violet-500 hover:text-violet-400 rounded-full font-bold transition-all">
+                Load More Videos
+              </button>
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="py-12 border-t border-white/5">
+        <div className="container mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-6">
+          <div className="flex items-center gap-2">
+            <span className="text-xl font-black bg-clip-text text-transparent bg-gradient-to-r from-violet-400 to-pink-500">
+              DOMMELIA
+            </span>
+          </div>
+          <p className="text-gray-500 text-sm italic">
+            Gathering history, one video at a time.
+          </p>
+          <div className="flex items-center gap-8 text-sm text-gray-400">
+            <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>
+            <Link href="/login" className="hover:text-white transition-colors font-bold text-violet-400">Admin Access</Link>
+          </div>
+        </div>
+      </footer>
     </div>
   );
 }
 
-Starter.getLayout = function getLayout(page: ReactElement) {
+LandingPage.getLayout = function getLayout(page: ReactElement) {
   return <LayoutGuest>{page}</LayoutGuest>;
 };
-