landing page and layout fix

Author: StackTheCode

.gitignore

@@ -26,6 +26,7 @@ build/
 *.0
 *.so
 *.dll
+imgui.ini
 
 
 # Node

frontend/public/landing.mp4

@@ -8,6 +8,8 @@ import RegisterPage from './pages/RegisterPage'
 import { AnalyticsPage } from './pages/AnalyticsPage'
 import { SettingsPage } from './pages/SettingsPage'
 import { DownloadPage } from './pages/DownloadPage'
+import { LandingPage } from './pages/LandingPage'
+
 
 
 const queryClient = new QueryClient()
@@ -23,8 +25,15 @@ function App() {
     <QueryClientProvider client={queryClient}>
       <BrowserRouter>
         <Routes>
+             <Route
+           path='/'
+           element={
+            <LandingPage/>
+           }
+           />
           <Route path="/register" element={<RegisterPage/>}/>
           <Route path='/login' element={<LoginPage />} />
+
           <Route path='/dashboard'
             element={
               <PrivateRoute>

frontend/public/poster.jpeg

@@ -2,10 +2,14 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
 
-*{
-    margin: 0;
-    bottom: 0;
-box-sizing: border-box;
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
 }
 
 @theme {
@@ -34,7 +38,7 @@ body::before {
   left: 0;
   width: 100%;
   height: 100%;
-  background: 
+  background:
     radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
     radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.2) 0%, transparent 50%),
     radial-gradient(circle at 40% 20%, rgba(59, 130, 246, 0.15) 0%, transparent 50%);
@@ -58,26 +62,27 @@ body::before {
 }
 
 /* Light Theme */
-.light body{
+.light body {
   background: linear-gradient(to bottom right, #f8fafc, #f3e8ff, #f8fafc);
   color: #0f172a;
 }
 
-.light body::before{
-  background: 
-  radial-gradient(circle at 20% 50% ,rgba(167,139,250,0.15) 0%,transparent 50%),
-  radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
-  radial-gradient(circle at 40% 20%, rgba(96, 165, 250, 0.08) 0%, transparent 50%);
+.light body::before {
+  background:
+    radial-gradient(circle at 20% 50%, rgba(167, 139, 250, 0.15) 0%, transparent 50%),
+    radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 40% 20%, rgba(96, 165, 250, 0.08) 0%, transparent 50%);
 }
 
 /* Glass morphism - LIGHT */
-.light .glass-strong{
+.light .glass-strong {
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(10px);
-  border:1px solid rgba(0,0,0,0.15) ;
-  
+  border: 1px solid rgba(0, 0, 0, 0.15);
+
 }
-body.light .text-slate-400{
+
+body.light .text-slate-400 {
   @apply text-slate-600;
 }
 body.light .text-slate-300 {
@@ -93,8 +98,15 @@ body.light .text-white {
 
 
 @keyframes meshMove {
-  0%, 100% { transform: translate(0, 0) scale(1); }
-  50% { transform: translate(50px, 50px) scale(1.1); }
+
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+
+  50% {
+    transform: translate(50px, 50px) scale(1.1);
+  }
 }
 
 /* Smooth scrollbar */
@@ -111,9 +123,9 @@ body.light ::-webkit-scrollbar-track {
 }
 
 ::-webkit-scrollbar-thumb {
-  @apply bg-purple-500/50 rounded-full;
+  @apply bg-slate-600/50 rounded-full;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  @apply bg-purple-500/70;
-}
+  @apply bg-slate-900/50;
+}

frontend/src/App.tsx

@@ -97,7 +97,8 @@ export const AnalyticsPage = () => {
   ];
 
   return (
-    <div className='min-h-screen p-6 flex flex-col gap-10'>
+    <div className='min-h-screen flex justify-center'>
+         <div className="w-full  px-6 py-6 flex flex-col gap-2">
            <button
           onClick={() => navigate(-1)}
           className="flex items-center gap-2 text-slate-400 hover:text-slate-200 transition-colors mb-8 cursor-pointer"
@@ -227,5 +228,6 @@ export const AnalyticsPage = () => {
         </div>
       </GlassCard>
     </div>
+    </div>
   );
 };

frontend/src/index.css

@@ -38,7 +38,8 @@ export const DashboardPage = () => {
 
 
   return (
-    <div className="min-h-screen p-6 flex flex-col gap-10">
+  <div className="min-h-screen flex justify-center">
+    <div className="w-full  px-6 py-6 flex flex-col gap-5">
       {/* Header with Logout */}
       <motion.div
         initial={{ y: -20, opacity: 0 }}
@@ -173,7 +174,7 @@ export const DashboardPage = () => {
           <PostureTimeline data={analytics.timelineData} />
         ) : (
           <GlassCard >
-            <div className="text-center py-8n text-slate-400">
+            <div className="text-center py-8 text-slate-400">
               <p className="text-sm mt-2">No posture data yet today</p>
               <p>P.S start your desktop application to begin tracking</p>
             </div>
@@ -183,6 +184,7 @@ export const DashboardPage = () => {
         }
 
       </motion.div>
+      </div>
     </div>
   )
 }

frontend/src/pages/AnalyticsPage.tsx

@@ -7,9 +7,10 @@ export const DownloadPage = () => {
     const navigate = useNavigate();
 
     return (
-        <div className="min-h-screen w-full flex justify-center">
+        <div className="min-h-screen flex justify-center">
+
+           <div className="w-full  px-6 py-6 flex flex-col gap-2">
 
-            <div className="w-full p-6 ">
 
                 <button
                     onClick={() => navigate(-1)}