1.0

frontend/src/components/AsideMenuLayer.tsx

@@ -3,10 +3,8 @@ import { mdiLogout, mdiClose } from '@mdi/js'
 import BaseIcon from './BaseIcon'
 import AsideMenuList from './AsideMenuList'
 import { MenuAsideItem } from '../interfaces'
-import { useAppSelector } from '../stores/hooks'
+import { useAppSelector, useAppDispatch } from '../stores/hooks'
 import Link from 'next/link';
-
-import { useAppDispatch } from '../stores/hooks';
 import { createAsyncThunk } from '@reduxjs/toolkit';
 import axios from 'axios';
 
@@ -91,4 +89,4 @@ export default function AsideMenuLayer({ menu, className = '', ...props }: Props
       </div>
     </aside>
   )
-}
+}

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/config.ts

@@ -8,8 +8,8 @@ export const localStorageStyleKey = 'style'
 
 export const containerMaxW = 'xl:max-w-full xl:mx-auto 2xl:mx-20'
 
-export const appTitle = 'created by Flatlogic generator!'
+export const appTitle = 'Social Growth Exchange'
 
 export const getPageTitle = (currentPageTitle: string) => `${currentPageTitle} — ${appTitle}`
 
-export const tinyKey = process.env.NEXT_PUBLIC_TINY_KEY || ''
+export const tinyKey = process.env.NEXT_PUBLIC_TINY_KEY || ''

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'
@@ -126,4 +125,4 @@ export default function LayoutAuthenticated({
       </div>
     </div>
   )
-}
+}

frontend/src/pages/index.tsx

@@ -1,166 +1,141 @@
-
-import React, { useEffect, useState } from 'react';
+import React 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 * as icon from '@mdi/js';
+import BaseIcon from '../components/BaseIcon';
 
 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('left');
-    const textColor = useAppSelector((state) => state.style.linkColor);
+  const title = 'Social Growth Exchange'
 
-    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>)
-        }
-    };
+  const platforms = [
+    { name: 'Facebook', icon: icon.mdiFacebook, color: 'text-blue-600' },
+    { name: 'Instagram', icon: icon.mdiInstagram, color: 'text-pink-600' },
+    { name: 'Twitter', icon: icon.mdiTwitter, color: 'text-blue-400' },
+    { name: 'YouTube', icon: icon.mdiYoutube, color: 'text-red-600' },
+    { name: 'TikTok', icon: icon.mdiMusicNote, color: 'text-cyan-400' },
+    { name: 'LinkedIn', icon: icon.mdiLinkedin, color: 'text-blue-700' },
+    { name: 'Spotify', icon: icon.mdiSpotify, color: 'text-green-500' },
+  ]
 
   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="bg-slate-950 min-h-screen text-slate-100 selection:bg-violet-500/30">
       <Head>
-        <title>{getPageTitle('Starter Page')}</title>
+        <title>{getPageTitle('Home')}</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 '>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>
+      {/* Navigation */}
+      <nav className="fixed w-full z-50 bg-slate-950/80 backdrop-blur-md border-b border-slate-800">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between h-16 items-center">
+            <div className="flex items-center">
+              <span className="text-xl font-bold bg-gradient-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-transparent">
+                {title}
+              </span>
             </div>
-        
-            <BaseButtons>
-                <BaseButton
-                    href='/login'
-                    label='Login'
-                    color='info'
-                    className='w-full'
-                />
-
-            </BaseButtons>
-        </CardBox>
+            <div className="hidden md:flex items-center space-x-8">
+              <a href="#features" className="text-sm font-medium text-slate-300 hover:text-white transition-colors">Features</a>
+              <a href="#platforms" className="text-sm font-medium text-slate-300 hover:text-white transition-colors">Platforms</a>
+              <Link href="/login" className="text-sm font-medium text-slate-300 hover:text-white transition-colors">Login</Link>
+              <BaseButton href="/register" label="Get Started" color="info" roundedFull />
+            </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>
-      </div>
+      </nav>
 
+      {/* Hero Section */}
+      <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10">
+          <div className="absolute top-0 left-1/4 w-96 h-96 bg-violet-600/20 rounded-full blur-3xl opacity-50 animate-pulse"></div>
+          <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-fuchsia-600/20 rounded-full blur-3xl opacity-50 animate-pulse"></div>
+        </div>
+        
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
+            Scale Your <span className="text-violet-400">Social Presence</span> <br />
+            with Fair Value Exchange
+          </h1>
+          <p className="max-w-2xl mx-auto text-xl text-slate-400 mb-10">
+            The first privacy-first exchange for creators and marketers. Earn credits by helping others grow, and spend them to reach your own audience.
+          </p>
+          <div className="flex flex-col sm:flex-row justify-center gap-4">
+            <BaseButton href="/register" label="Join the Exchange" color="info" className="px-8 py-4 text-lg" roundedFull />
+            <BaseButton href="/login" label="Sign In" color="white" className="px-8 py-4 text-lg" outline roundedFull />
+          </div>
+        </div>
+      </section>
+
+      {/* Platforms Section */}
+      <section id="platforms" className="py-20 border-y border-slate-800 bg-slate-900/50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <p className="text-center text-sm font-semibold text-slate-500 uppercase tracking-widest mb-12">
+            Supported Platforms
+          </p>
+          <div className="flex flex-wrap justify-center gap-8 md:gap-16 opacity-70 grayscale hover:grayscale-0 transition-all duration-500">
+            {platforms.map((p) => (
+              <div key={p.name} className="flex flex-col items-center group">
+                <BaseIcon path={p.icon} size={48} className={`${p.color} mb-2 group-hover:scale-110 transition-transform`} />
+                <span className="text-xs font-medium text-slate-400">{p.name}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section id="features" className="py-20 lg:py-32">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid lg:grid-cols-3 gap-12">
+            <div className="p-8 rounded-3xl bg-slate-900 border border-slate-800 hover:border-violet-500/50 transition-colors">
+              <div className="w-12 h-12 bg-violet-500/10 rounded-2xl flex items-center justify-center mb-6">
+                <BaseIcon path={icon.mdiShieldCheckOutline} className="text-violet-400" size={24} />
+              </div>
+              <h3 className="text-xl font-bold mb-4">Privacy First</h3>
+              <p className="text-slate-400 leading-relaxed">
+                We never ask for your passwords. Our exchange relies on verified public actions, keeping your accounts safe and secure.
+              </p>
+            </div>
+            <div className="p-8 rounded-3xl bg-slate-900 border border-slate-800 hover:border-violet-500/50 transition-colors">
+              <div className="w-12 h-12 bg-violet-500/10 rounded-2xl flex items-center justify-center mb-6">
+                <BaseIcon path={icon.mdiSpeedometer} className="text-violet-400" size={24} />
+              </div>
+              <h3 className="text-xl font-bold mb-4">Real-time Growth</h3>
+              <p className="text-slate-400 leading-relaxed">
+                Watch your metrics climb in real-time as users across the globe discover and engage with your content.
+              </p>
+            </div>
+            <div className="p-8 rounded-3xl bg-slate-900 border border-slate-800 hover:border-violet-500/50 transition-colors">
+              <div className="w-12 h-12 bg-violet-500/10 rounded-2xl flex items-center justify-center mb-6">
+                <BaseIcon path={icon.mdiScaleBalance} className="text-violet-400" size={24} />
+              </div>
+              <h3 className="text-xl font-bold mb-4">Fair Value</h3>
+              <p className="text-slate-400 leading-relaxed">
+                Our tiered credit system ensures that effort equals reward. Top contributors get boosted visibility and premium perks.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="py-12 border-t border-slate-800 text-center">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <p className="text-slate-500 text-sm">
+            © 2026 {title}. All rights reserved. Built with precision for the modern web.
+          </p>
+          <div className="mt-4 flex justify-center space-x-6">
+            <Link href="/privacy-policy" className="text-xs text-slate-600 hover:text-slate-400">Privacy Policy</Link>
+            <Link href="/terms" className="text-xs text-slate-600 hover:text-slate-400">Terms of Service</Link>
+          </div>
+        </div>
+      </footer>
     </div>
   );
 }
 
 Starter.getLayout = function getLayout(page: ReactElement) {
   return <LayoutGuest>{page}</LayoutGuest>;
-};
-
+};

frontend/src/pages/search.tsx

@@ -1,10 +1,7 @@
 import React, { ReactElement, useEffect, useState } from 'react';
 import Head from 'next/head';
 import 'react-datepicker/dist/react-datepicker.css';
-import { useAppDispatch } from '../stores/hooks';
-
-import { useAppSelector } from '../stores/hooks';
-
+import { useAppDispatch, useAppSelector } from '../stores/hooks';
 import { useRouter } from 'next/router';
 import LayoutAuthenticated from '../layouts/Authenticated';
 import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
@@ -93,4 +90,4 @@ SearchView.getLayout = function getLayout(page: ReactElement) {
   );
 };
 
-export default SearchView;
+export default SearchView;