Styling pages WIP

client/src/App.tsx

@@ -5,14 +5,21 @@ import Languages from 'pages/Languages';
 import Typing from 'pages/Typing';
 import NotFound from 'pages/NotFound';
 
+import Footer from 'components/Footer';
+
 function App() {
   return (
+    <>
+      <div className='app'>
         <Routes>
           <Route index element={<Home />} />
           <Route path='languages' element={<Languages />} />
           <Route path='typing/:lang' element={<Typing />} />
           <Route path='*' element={<NotFound />} />
         </Routes>
+      </div>
+      <Footer />
+    </>
   );
 }
 

client/src/components/Code/index.css

@@ -1,5 +1,10 @@
-.code {
-	padding: 1rem;
+.code-container {
+	min-width: 500px;
+	padding: 1.5rem;
+
+  border-radius: 0.75rem;
+
+  background: var(--black);
 }
 
 .pending, .space {

client/src/components/Code/index.tsx

@@ -73,7 +73,7 @@ function Code({ code, loaded }: CodeProps) {
   }, [timer, characters]);
 
   return (
-    <div className='code'>
+    <div className='code-container'>
       {code.split('').map((char, index) => renderCharacter(code, characters, loaded, char, index))}
     </div>
   );

client/src/components/Footer/index.css

@@ -0,0 +1,10 @@
+footer {
+  text-align: center;
+
+	width: 100%;
+	min-height: 5vh;
+}
+
+footer a {
+  color: var(--crimson);
+}

client/src/components/Footer/index.tsx

@@ -0,0 +1,11 @@
+import './index.css';
+
+function Footer() {
+  return (
+    <footer>
+      <p><a href='https://github.com/hazemKrimi/touch-programming' target='_blank' rel="noreferrer">Source code</a> Made by <a href='https://hazemkrimi.tech' target='_blank' rel="noreferrer">Hazem Krimi</a></p>
+    </footer>
+  );
+}
+
+export default Footer;

client/src/components/Stats/index.css

@@ -1,6 +1,12 @@
-.score {
+.stats-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
-	padding: 1rem;
+
+  gap: 2rem;
+  padding: 1.5rem;
+
+  border-radius: 0.75rem;
+
+  background: var(--black);
 }

client/src/components/Stats/index.tsx

@@ -17,7 +17,7 @@ function Stats({ loaded }: StatsProps) {
   if (!loaded) return;
 
   return (
-    <div className='score'>
+    <div className='stats-container'>
       {renderTimer(timer)}
       <p>WPM: {Math.round(score)}</p>
       <p>Accuracy: {Math.round(accuracy)}%</p>

client/src/constants/default.ts

@@ -34,3 +34,31 @@ export const KEYS_TO_DISABLE = [
   'ArrowLeft',
   'ArrowRight',
 ];
+
+export const SUPPORTED_LANGUAGES = [
+  'javascript',
+  'typescript',
+  'python',
+  'rust',
+  'golang',
+  'java',
+  'ruby',
+  'php',
+  'swift',
+  'kotlin',
+  'dart',
+  'scala',
+  'elixir',
+  'haskell',
+  'clojure',
+  'lua',
+  'r',
+  'perl',
+  'bash',
+  'powershell',
+  'pascal',
+  'ocaml',
+  'c',
+  'c++',
+  'fortran'
+];

client/src/index.css

@@ -1,4 +1,9 @@
 :root {
+  --black: #131314;
+  --white: #dddddd;
+  --crimson: #bd1839;
+  --background: #1d1b1b;
+
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
@@ -12,10 +17,52 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-body {
+* {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  padding: 0;
+}
+
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+
+::selection {
+  background: var(--crimson);
+  color: var(--white);
+}
+
+a {
+  text-decoration: none;
+  color: var(--white);
+}
+
+body {
+  background: var(--background);
+  color: var(--white);
+}
+
+body::-webkit-scrollbar {
+  width: 0.5rem;
+}
+
+body::-webkit-scrollbar-thumb {
+  background-color: var(--crimson);
+}
+
+.app {
+	min-height: 95vh;
+}
+
+@media (min-width: 1441px) {
+  .app {
+    width: 1368px;
+
+		margin: 0 auto;
+  }
 }

client/src/pages/Home/index.css

@@ -1,3 +1,99 @@
-.container {
-	text-align: left;
+.home-container {
+	padding: 0rem 3rem;
+	margin-bottom: 1rem;
+}
+
+@media (max-width: 768px) {
+	.home-container {
+		padding: 0rem 1rem;
+	}
+}
+
+header {
+  margin: 0 auto;
+  padding: 2.5rem 1.25rem;
+
+  text-align: center;
+}
+
+header h1 {
+  font-size: 3.5rem;
+  font-weight: bold;
+
+  margin-bottom: 1.5rem;
+
+  color: var(--crimson);
+}
+
+header p {
+  font-size: 1.5rem;
+  font-weight: 400;
+
+	margin-bottom: 2.5rem;
+
+  color: var(--white);
+}
+
+header .cta {
+	all: unset;
+	cursor: pointer;
+
+  background: var(--crimson);
+	color: var(--white);
+
+	border-radius: 0.75rem;
+	box-shadow: none;
+
+	padding: 1rem 2rem;
+	font-size: 1.25rem;
+	font-weight: bold;
+
+	text-decoration: none;
+}
+
+.features {
+  margin-top: 2rem;
+  padding: 2.5rem 1.25rem;
+
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  align-items: stretch;
+  gap: 3rem;
+}
+
+.feature, .benefit {
+  padding: 1.5rem;
+
+  border-radius: 0.75rem;
+
+  background: var(--black);
+}
+
+.feature h3, .benefit h3 {
+  font-size: 1.5rem;
+  font-weight: bold;
+
+  margin-bottom: 1rem;
+}
+
+.benefits {
+  margin-top: 2rem;
+  padding: 2.5rem 1.25rem;
+}
+
+.benefits h2 {
+	font-size: 3.5rem;
+  font-weight: bold;
+	text-align: center;
+
+  margin-bottom: 1.5rem;
+
+  color: var(--crimson);
+}
+
+.benefits-wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  align-items: stretch;
+  gap: 3rem;
 }

client/src/pages/Home/index.tsx

@@ -1,9 +1,56 @@
+import { NavLink } from 'react-router';
 import './index.css';
 
 function Home() {
   return (
-    <div className='container'>
-      <h1>Home</h1>
+    <div className='home-container'>
+      <header>
+        <h1>Touch Programming</h1>
+        <p>Master touch typing with real code snippets from your favorite programming languages, powered by AI.</p>
+        <NavLink to='/languages'>
+          <button className='cta'>
+            Start Typing
+          </button>
+        </NavLink>
+      </header>
+
+      <section className='features'>
+        <div className='feature'>
+          <h3>Real Code Snippets</h3>
+          <p>
+            Practice with actual code examples from popular repositories, making your learning relevant to real-world
+            programming.
+          </p>
+        </div>
+        <div className='feature'>
+          <h3>Multiple Languages</h3>
+          <p>
+            Choose from Python, JavaScript, TypeScript, Rust, and more. Practice with the languages you use daily.
+          </p>
+        </div>
+        <div className='feature'>
+          <h3>AI Powered</h3>
+          <p>
+            Code is generated with the help of the Open Source LLM Models.
+          </p>
+        </div>
+      </section>
+
+      <section className='benefits'>
+        <h2>Why Practice Touch Programming?</h2>
+        <div className='benefits-wrapper'>
+          <div className='benefit'>
+            <h3>Boost Productivity</h3>
+            <p>Increase your coding speed and reduce errors with proper typing technique</p>
+          </div>
+          <div className='benefit'>
+            <h3>Learn Syntax</h3>
+            <p>
+              Familiarize yourself with language syntax while improving your typing speed
+            </p>
+          </div>
+        </div>
+      </section>
     </div>
   );
 }

client/src/pages/Languages/index.css

@@ -1,3 +1,43 @@
-.container {
-	text-align: left;
+.languages-container {
+  padding: 0rem 3rem;
+  margin-bottom: 1rem;
+}
+
+@media (max-width: 768px) {
+  .languages-container {
+    padding: 0rem 1rem;
+  }
+}
+
+header {
+  margin: 0 auto;
+  padding: 2.5rem 1.25rem;
+
+  text-align: center;
+}
+
+header h1 {
+  font-size: 3.5rem;
+  font-weight: bold;
+
+  margin-bottom: 1.5rem;
+
+  color: var(--crimson);
+}
+
+.languages-wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  align-items: stretch;
+  gap: 3rem;
+}
+
+.language {
+  padding: 1.5rem;
+
+  border-radius: 0.75rem;
+
+  background: var(--black);
+
+  text-transform: capitalize;
 }

client/src/pages/Languages/index.tsx

@@ -1,9 +1,24 @@
+import { NavLink } from 'react-router';
+
+import { SUPPORTED_LANGUAGES } from 'constants/default';
+
 import './index.css';
 
 function Languages() {
   return (
-    <div className='container'>
-      <h1>Languages</h1>
+    <div className='languages-container'>
+      <header>
+        <h1>Choose Your Preferred Language</h1>
+      </header>
+      <div className='languages-wrapper'>
+        {SUPPORTED_LANGUAGES.map((lang) => (
+          <NavLink to={`/typing/${lang}`} key={lang}>
+            <div className='language'>
+              <h2>{lang}</h2>
+            </div>
+          </NavLink>
+        ))}
+      </div>
     </div>
   );
 }

client/src/pages/Typing/index.css

@@ -1,5 +1,26 @@
-.container {
+.typing-container {
 	display: flex;
 	flex-direction: column;
-	column-gap: 1rem;
+	align-items: center;
+	gap: 2rem;
+
+	margin-bottom: 1rem;
+}
+
+header {
+  margin: 0 auto;
+  padding: 2.5rem 1.25rem;
+
+  text-align: center;
+}
+
+header h1 {
+  font-size: 3.5rem;
+  font-weight: bold;
+
+  margin-bottom: 1.5rem;
+
+  color: var(--crimson);
+
+	text-transform: capitalize;
 }

client/src/pages/Typing/index.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useParams } from 'react-router';
 
 import TypingContextProvider from 'contexts/typing';
 
@@ -6,7 +7,6 @@ import Code from 'components/Code';
 import Stats from 'components/Stats';
 
 import './index.css';
-import { useParams } from 'react-router';
 
 function Typing() {
   const {lang} = useParams();
@@ -39,11 +39,16 @@ function Typing() {
       setCode((prev) => prev.trim());
       setLoaded(true);
     })();
-  }, []);
+  }, [lang]);
 
   return (
     <TypingContextProvider>
-      <div className='container'>
+      <div className='typing-container'>
+        <header>
+          <h1>
+            Practice Typing in {lang}
+          </h1>
+        </header>
         <Code code={code} loaded={loaded} />
         <Stats loaded={loaded} />
       </div>