Frontend

package.json

@@ -21,6 +21,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.0",
+    "scroll-lock": "^2.1.5",
     "vite-plugin-top-level-await": "^1.3.1",
     "vite-plugin-wasm": "^3.2.2",
     "vite-plugin-wasm-pack": "^0.1.12",
@@ -30,18 +31,18 @@
   "devDependencies": {
     "@babel/core": "^7.22.17",
     "@tauri-apps/cli": "^1.4.0",
-    "eslint-plugin-react": "^7.33.2",
-    "lodash": "^4.17.21",
-    "npm-run-all": "^4.1.5",
-    "tailwindcss": "^3.3.3",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "lodash": "^4.17.21",
+    "npm-run-all": "^4.1.5",
+    "tailwindcss": "^3.3.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }

src/App.tsx

@@ -1,24 +1,41 @@
-import {HashRouter, Route, Routes} from "react-router-dom";
-import Code from "./components/Code.jsx";
-import Home from "./components/Home.jsx";
-import Downloads from "./components/Downloads.jsx";
-import "../dist/output.css";
+import { BrowserRouter, Routes, Route, useNavigate } from "react-router-dom";
+import Header from './components/Header';
+import Code from './components/Code';
+import Contributors from "./components/Contributors";
+import About from "./components/About";
+import Hero from "./components/Hero";
+import Footer from "./components/Footer";
 
 const HOME_PATH = "/";
-const CODE_PATH = "/code/";
-const DOWNLOAD_PATH = "/downloads/";
+const CODE_PATH = "/code";
+const DOWNLOAD_PATH = "/downloads";
 
-function App() {
+const App = () => {
     return (
-        <HashRouter future={{ v7_startTransition: true }}>
+        <BrowserRouter>
             <Routes>
-                <Route path={HOME_PATH} element={<Home />} />
+                <Route 
+                    path={HOME_PATH} 
+                    element={
+                        <div className="pt-[4.75rem] lg:pt-[5.25rem] overflow-hidden">
+                            <Header />
+                            <Hero />
+                            <section id="about">
+                                <About />
+                            </section>
+
+                            <section id="contributions">
+                                <Contributors />
+                            </section>
+                            <Footer />
+                        </div>
+                    } 
+                />
                 <Route path={CODE_PATH} element={<Code />} />
-                <Route path={DOWNLOAD_PATH} element={<Downloads />} />
             </Routes>
-        </HashRouter>
+        </BrowserRouter>
     );
-}
+};
 
 export default App;
 

src/components/About.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import editor from "../assets/editor.png";
+import rust from "../assets/rust.png";
+
+const About = () => {
+  return (
+    <div className="relative bg-black flex justify-center items-center"
+      style={{
+        background: 'radial-gradient(ellipse 50% 90% at center, rgba(0, 102, 250, 0.3), transparent 60%), black',
+        position: 'relative'
+    }}>
+
+      <div className="relative z-10 max-w-[62rem] w-full px-8 md:px-16 text-left mb-[3.875rem] md:mb-20 lg:mb-[6.25rem] text-white mt-4">
+        <h1 className="text-5xl font-bold mb-4 leading-tight">
+          ABOUT
+        </h1>
+
+        <div className="flex flex-col lg:flex-row lg:items-center">
+          <p>
+            EZASM is a small-instruction-set assembly-like programming language interpreter written in Rust. We will ship an IDE-like GUI interface for programming, running code, and inspecting the current 
+            state of the environment. This simple interpreted language would be able to demonstrate the concepts of a lower level assembly language while still being simple to write. The instructions 
+            would be intuitive and simple compared to MIPS (e.g., no system calls or immediate limits) and act upon registers akin to other assembly languages.
+          </p>
+
+          <img src={rust} alt="rust" className="lg:w-6/12 w-full"/>
+
+        </div>
+
+      </div>
+    </div>
+  );
+}
+
+export default About;

src/components/Contributors.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+const Contributors = () => {
+  return (
+    <div className="relative bg-black flex justify-center items-center"
+     style={{
+      background: 'radial-gradient(ellipse 50% 90% at center, rgba(0, 102, 250, 0.3), transparent 60%), black',
+      position: 'relative'
+
+    }}>
+      <div className="relative z-10 max-w-[62rem] w-full px-8 md:px-16 text-left mb-[3.875rem] md:mb-20 lg:mb-[6.25rem] text-white mt-4">
+        <h1 className="text-5xl font-bold mb-4 leading-tight">
+          Contributions
+        </h1>
+
+        <p className="mb-4 text-lg">
+          You can view the list of contributors who have helped build this project. If you would like to contribute yourself, feel free to check out our GitHub repository for more information.
+        </p>
+
+        <a
+          href="https://github.com/ezasm-org/rezasm"
+          target="_blank"
+          className="text-blue-500 underline"
+        >
+          https://github.com/ezasm-org/rezasm
+        </a>
+
+      </div>
+    </div>
+  );
+}
+
+export default Contributors

src/components/Footer.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+const Footer = () => {
+  return (
+    <div className="w-full flex justify-center items-center bg-black py-4">
+      <p className="caption text-n-4 lg:block text-white">
+        © {new Date().getFullYear()}. All rights reserved.
+      </p>
+    </div>
+  );
+};
+
+export default Footer

src/components/Header.jsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { useLocation } from "react-router-dom";
+import { disablePageScroll, enablePageScroll } from "scroll-lock";
+import { navigation } from "../constants";
+import ezasm from "../assets/white.svg";
+import { useState } from "react";
+
+const Header = () => {
+    const pathname = useLocation();
+
+    const [openNavigation, setOpenNavigation] = useState(false);
+
+    const toggleNavigation = () => {
+        if (openNavigation) {
+            setOpenNavigation(false);
+            enablePageScroll();
+        } else {
+            setOpenNavigation(true);
+            disablePageScroll();
+        }
+    }
+
+    const handleClick = () => {
+        if (!openNavigation) {
+            return;
+        }
+        enablePageScroll();
+        setOpenNavigation(false);
+    }
+
+    return (
+        <div 
+            style={{ boxShadow: '0 10px 20px rgba(0, 0, 0, 0.3)' }}
+            className={`fixed top-0 left-0 w-full z-50 border-b lg:bg-n-8/90 lg:backdrop-blur-sm bg-black
+            ${openNavigation ? "bg-n-8" : "bg-n-8/90 backdrop-blur-sm"}`} 
+        >
+            <div className="flex items-center px-6 lg:px-12 xl:px-20 max-lg:py-4">
+                <a className="flex items-center w-[12rem] xl:mr-8 ml-10 lg:ml-16" href="#hero">
+                    <img src={ezasm} width={70} height={40} alt="ezasm" />
+                    <span className="ml-4 text-2xl lg:text-4xl font-bold text-white">
+                        EZASM
+                    </span>
+                </a>
+
+                <nav
+                    className={`${openNavigation ? "flex" : "hidden"} 
+                    fixed top-[5rem] left-0 right-0 bottom-0 bg-black lg:static 
+                    lg:flex lg:bg-transparent w-full justify-end`}
+                >
+                    <div className="relative z-2 flex flex-col items-center justify-center w-full lg:w-auto lg:flex-row lg:ml-auto">
+                        {navigation.map((item) => (
+                            <a 
+                                key={item.id}
+                                href={item.url}
+                                onClick={handleClick}
+                                className={`block relative font-code text-4xl uppercase text-n-1 transition-colors hover:text-color-1
+                                ${item.onlyMobile ? "lg:hidden" : ""}
+                                px-6 py-6 md:py-8 lg:-mr-0.25 lg:text-base lg:font-semibold
+                                ${item.url === pathname.hash ? "z-2 lg:text-n-1" : "lg:text-n-1/50"}
+                                lg:leading-5 lg:hover:text-n-1 xl:px-12`}
+                            >
+                                {item.title}
+                            </a>
+                        ))}
+                    </div>
+                </nav>
+
+                <button  
+                    className="ml-auto lg:hidden p-3 overflow:hidden"
+                    onClick={toggleNavigation}
+                >
+                    {openNavigation ? (
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                            fill="white"
+                            width="30px"
+                            height="30px"
+                        >
+                            <path d="M18.3 5.71a1 1 0 0 0-1.42 0L12 10.59 7.12 5.71a1 1 0 1 0-1.42 1.42L10.59 12 5.7 16.88a1 1 0 1 0 1.42 1.42L12 13.41l4.88 4.88a1 1 0 0 0 1.42-1.42L13.41 12l4.88-4.88a1 1 0 0 0 0-1.42z"/>
+                        </svg>
+                    ) : (
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                            fill="white"
+                            width="30px"
+                            height="30px"
+                        >
+                            <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/>
+                        </svg>
+                    )}
+                </button>
+
+            </div>
+
+        </div>
+    )
+}
+
+export default Header

src/components/Hero.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import {useNavigate} from "react-router-dom";
+import {CODE_PATH} from "../App.tsx";
+import editor from "../assets/editor.png";
+
+const Hero = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="relative bg-black min-h-screen flex justify-center items-center"
+        style={{
+            background: 'radial-gradient(ellipse 50% 90% at center, rgba(0, 102, 250, 0.3), transparent 60%), black',
+            position: 'relative'
+    }}>
+
+      <div className="relative z-10 max-w-[62rem] w-full px-8 md:px-16 text-left mb-[3.875rem] md:mb-20 lg:mb-[6.25rem] text-white mt-10">
+        <h2 className="text-xl font-semibold mb-2">
+          EZASM
+        </h2>
+
+        <h1 className="text-5xl font-bold mb-4 leading-tight">
+           Assembly-like programming language for education
+        </h1>
+
+        <p className="text-lg text-gray-400 mb-8 max-w-3xl">
+          The programming language that makes learning assembly a more enjoyable experience.
+        </p>
+
+        <button 
+          onClick={() => navigate(CODE_PATH)} 
+          className="bg-white text-black rounded-full px-6 py-3 font-semibold shadow-md border-black"
+          style={{ boxShadow: '0 10px 20px rgba(0, 0, 0, 0.3)' }}>
+          Try our Code Playground!
+        </button>
+
+
+        <div className="w-full max-w-[49rem] mt-8">
+          <img src={editor} alt="Editor" className="rounded-lg w-full" />
+        </div>
+
+      </div>
+
+    </div>
+  );
+}
+
+export default Hero;

src/constants/index.js

@@ -0,0 +1,13 @@
+export const navigation = [
+    {
+      id: "0",
+      title: "About",
+      url: "#about",
+    },
+    {
+      id: "1",
+      title: "Contributions",
+      url: "#contributions",
+    },
+
+];

src/main.jsx

@@ -1,10 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import "../dist/output.css";
 import App from "./App.tsx";
+import './styles.css'
+import { BrowserRouter as Router } from 'react-router-dom'
+import '../dist/output.css'; 
 
 ReactDOM.createRoot(document.getElementById("root")).render(
     <React.StrictMode>
-        <App />
+            <App />
     </React.StrictMode>,
 );