An interactive, premium showcase website for LSA (LSAverse) presenting intelligent robotic products under development, including DORO (a quadruped robot) and DUALIS (a bimanual manipulation/dual-arm robot).

1. Project Overview
2. Technology Stack
3. Folder Structure
4. Local Development Setup
5. Environment Variables
6. Database Configuration
7. Deployment Guide
8. API Documentation
9. Authentication Flow
10. Features Checklist
11. Administrator Guide
12. Maintenance Guide
13. Third-Party Services
14. Build & Utility Commands
15. Troubleshooting
16. Security Notes
17. Performance Notes
18. Testing Procedures
19. Backup & Recovery
20. Known Limitations
21. License

• Live Website: https://lsanetic.com
• Repository: https://github.com/KnowerselSA/KnowerselSA

The application is engineered as a static-responsive multi-page website enhanced with client-side state routing, modern transition engines, and external serverless form handlers.

• HTML5 & CSS3: Semantic structure with custom CSS Grid, CSS Flexbox layouts, dynamic media queries, and root variables.
• Vanilla ES6 JavaScript: Document Object Model (DOM) manipulation, URL parsing for dynamic page views, and event hook bindings.

• GSAP (GreenSock Animation Platform) v3.13.0: Orchestrates layout entries, text reveals, scroll-locked animations, and hover scaling.
  • Plugins: ScrollTrigger for scroll-bound animations, ScrollToPlugin for smooth viewport adjustments.
• Lenis Smooth Scroll: Provides a high-fidelity inertia scrolling wrapper, ensuring consistent, pleasant scroll dynamics across all major browsers and devices.

• YouTube Iframe Player API: Powers inline, dynamic embedded playback for research previews.
• Swiper.js v12: Injected carousel navigation framework for mobile responsive video slideshows.

While the site builds as static HTML, a package.json package manager file is available containing core backend tools (available for developers intending to wrap the project in a Node-based framework):

• Express v5.2.1: High-performance routing framework.
• Body-parser v2.2.2 & Cors v2.8.6: Middleware configurations for processing inputs.
• Dotenv v17.3.1: Local environment configurations.
• Nodemailer v8.0.2: Node email-dispatch wrapper.

Below is the directory tree of the project.

KnowerselSA/
├── .github/                   # GitHub action settings and continuous integration configs
├── .vscode/                   # VS Code localized editor and layout configurations
├── src/                       # Master source asset root directory
│   ├── assets/                # Stored graphic materials and icons
│   │   ├── about-us/          # Asset visual assets specific to the About page
│   │   ├── logos/             # Branding logs (TL1.2.png, BL1.1.png, Browser_tab.png)
│   │   ├── social-icons/      # Social media networking graphics (Linkedin, Youtube, etc.)
│   │   ├── dog.PNG            # Product showcase display for DORO
│   │   ├── dog2.png           # Alternating graphic representation for DORO
│   │   ├── dualis-Product-page.png # Dynamic dualis card visual asset
│   │   ├── Dualis-Page.png    # Showcase presentation graphic for DUALIS
│   │   ├── menu.png           # Hamburger menu toggle graphic (dark color scheme)
│   │   ├── menu2.png          # Hamburger menu toggle graphic (light color scheme)
│   │   ├── share.png          # Redirection vector icon
│   │   └── up-arrow.png       # Navigation back / return graphic indicator
│   ├── javascript/            # Client-side script logic files
│   │   ├── ResearchPreviewData.js # Static database / Config file mapping product details
│   │   ├── aboutus.js         # Dedicated validation controls for the About Us views
│   │   ├── animation.js       # Global Lenis scroll and GSAP trigger setups
│   │   ├── contact.js         # AJAX listener validation logic for Web3Forms POST submits
│   │   ├── home.js            # Universal script tracking navigation blur and mobile drawer toggles
│   │   └── subproduct.js
│   └── style/                 # Stylings directory
│       ├── fonts/             # Custom typography packages
│       ├── aboutus.css        # Visual styles for aboutus.html
│       ├── contact.css        # Visual layouts and custom inputs for contact.html
│       ├── content.css        # Styling of Research Preview page
│       ├── home.css           # Intro screens and primary animations for index.html
│       ├── mediaquery.css     # Global responsive breakpoints (max-width: 1024px, 768px, 480px)
│       ├── product.css        # Styling of th
│       └── sub_product.css    # Dynamic flex blocks for Product_details.html
├── index.html                 # App gateway landing page
├── product.html               # Product list overview page
├── Product_details.html       # Dynamic details parser template page
├── content.html               # Dynamic media stack container page
├── aboutus.html               # About page layout
├── contact.html               # Main form input page
├── footer_diff.txt            # Formatting reference patch for layout alignments
├── package.json               # Local environment configurations and dependency lists
├── package-lock.json          # Node dependency lock structure record
├── .gitignore                 # Files excluded from Version Control System tracking
└── README.md                  # System Documentation handbook (This file)

To test, debug, or preview the application locally:

Install Node.js (Version LTS recommended: v18.x or v20.x). This is required to initialize helper serving tools.

Open a terminal, target the desired directory, and fetch the source files:

git clone https://github.com/Molza01/KnowerselSA.git
cd KnowerselSA

Install dependencies declared in the project's configuration (such as development serve wrappers or environment packages):

npm install

Because pages like Product_details.html and content.html fetch parameters using the browser URLSearchParams API, opening pages directly from the filesystem (file:///...) will fail due to security settings. You must serve the files through a local server.

Choose one of the following methods to run the local server:

Run using the fast development utility serve:

# Serves the directory on localhost:3000
npx serve .

If you are developing in VS Code:

1. Open the project folder in VS Code.
2. Install the Live Server extension (by Ritwick Dey).
3. Click Go Live on the status bar in the bottom right corner.

If Python is installed on your local machine, run the built-in HTTP server:

# Python 3
python -m http.server 8000

Open your browser and navigate to http://localhost:8000.

Since this project is served as a pure static web app (GitHub Pages hosting environment), standard Node .env server variables are not read at runtime in the browser.

However, if you choose to implement a custom backend server using the bundled express and dotenv config, create a .env configuration file in the project root:

# =========================================================================
# Local Express Server Configurations (Placeholder config for future development)
# =========================================================================

# Port configuration for Express server
PORT=3000

# API access keys (replace with your secure API keys)
WEB3FORMS_ACCESS_KEY=<YOUR_WEB3FORMS_ACCESS_KEY_HERE>

# Configuration settings if mail services are handled via Node environment (Nodemailer)
SMTP_HOST=<SMTP_HOST_ADDRESS_HERE>
SMTP_PORT=587
SMTP_USER=<SMTP_USER_EMAIL_HERE>
SMTP_PASS=<SMTP_PASSWORD_HERE>

The schema structure in ResearchPreviewData.js maps to each product dynamically:

• Backup: Create a duplicate copy of ResearchPreviewData.js to a safe offline folder or commit version checkpoints using Git.
• Restore: Replace the file in the directory (src/javascript/ResearchPreviewData.js) and commit changes to return the system structure to a previous state.

The production version of this site is configured to compile static HTML/CSS/JS components and deploy easily on GitHub Pages.

The repository follows a two-branch deployment workflow.

1. Develop and test new features in the main branch.
2. Commit and push changes to GitHub.
3. Merge main into production after testing is complete.
4. Deploy the production branch to the production server.

main
   │
   │ Development & Testing
   ▼
production
   │
   │ Deployment
   ▼
Live Website

1. Commit all project developments to your main branch (main).
2. Go to the GitHub repository settings.
3. Select Pages from the left navigation column.
4. Set the build source to Deploy from a branch and select the production branch.
5. Click Save. The website builds automatically and deploys to the GitHub Pages domain.

The production website is deployed from the production branch of this repository.

Deployment process:

1. Complete development in the main branch.
2. Merge the tested changes into the production branch.
3. Push the production branch to GitHub.
4. Hostinger pulls the latest code from the production branch.
5. Verify the live website after deployment.

Repository Branch:

• production

Deployment Directory:

• public_html

Whenever changes are made:

1. Build the latest version.
2. Upload the updated files to public_html.
3. Replace the old files.
4. Clear the browser cache if changes are not immediately visible.

Before replacing any files:

• Download a backup of the existing public_html directory.
• Export the latest database backup (if applicable).
• Store backups securely before deployment.

The website handles input contact emails via a serverless connection request directly to the Web3Forms API.

• Method: POST
• URL: https://api.web3forms.com/submit
• Payload Format: multipart/form-data or application/json

Success Response (Status 200 OK):

{
  "success": true,
  "message": "Form submitted successfully"
}

Failure Response (Status 400 Bad Request / 403 Forbidden):

{
  "success": false,
  "message": "Invalid Access Key or validation failed"
}

• Universal Navigation Header: Sticky bar with dynamic blur on scroll and active class updates.
• Mobile Navigation Drawer: Responsive slide-in drawer layout mapping smooth triggers on tablet and mobile viewports.
• Beyond Horizon Entry Page: GSAP staggered title text animations matching visual parallax components.
• Smooth Inertia Scroll: Integrated Lenis scrolling engine active on container components.
• Responsive Grid Showcase: Adaptive columns rendering product cards with scaling overlays.
• Dynamic Sub-Product Templates: Automatic content population on dynamic load views using window parameters.
• Interactive YouTube Previews: Click-intercept overlay frames allowing remote play controls.
• Global Keyboard Key Hooks: Video play/pause triggers hooked to the spacebar.
• Dynamic Scroll Progress Bar: Side indicator showing scroll depth progress and current slide indicator.
• Validated Contact Panel: Client-side email validation with automatic submission state management.

Since this website is completely static, there is no database admin dashboard panel. Administrators manage content updates by modifying files directly in the codebase:

To update text, descriptions, lists, or names, edit the data manifest:

1. Open the file ResearchPreviewData.js.
2. To edit an existing product, locate the key (e.g., product_1 or product_2) and update the values.
3. To add a new product:
   • Create a new unique identifier block (e.g., product_3).
   • Follow the structured format:

     product_3: {
         pageTitle: "Product Name",
         backLink: "product.html",
         name: "PRODUCT BRAND",
         description: "Short product introduction text.",
         img: "src/assets/new_product.png",
         advantages: [
             "Advantage 1",
             "Advantage 2"
         ],
         applications: [
             "Deployment Sector 1",
             "Deployment Sector 2"
         ],
         sectionHeading: "Research Preview",
         slides: [
             {
                 title: "Demo Video Title",
                 description: "Short description text.",
                 type: "youtube",
                 src: "https://www.youtube.com/embed/VIDEO_ID?&mute=0&controls=1",
             }
         ]
     }

4. Save the file and publish.

• Place new images (PNG, JPG, WebP) in src/assets/.
• Optimize and compress images before uploading to maintain fast page load speeds.
• Keep filename formats simple and lowercase (e.g. dualis-robotic-arm.webp).

Submissions send notifications to the email address registered with Web3Forms.

1. Create a free access key at web3forms.com.
2. Open contact.html and locate the hidden form input:

   <input
     type="hidden"
     name="access_key"
     value="1f07bd32-7ff2-4a19-8e3c-a75892d326fe"
   />

3. Replace the value with your new Web3Forms access key.

Below are the guidelines for future developers maintaining this codebase:

• Duplicate an existing static HTML file (e.g., aboutus.html) to copy the boilerplate structures (head tags, assets imports, navigation, footer, scripts).
• Modify the content within <main class="main-content">.
• Ensure scripts like animation.js and home.js are imported at the end of the body tag to enable smooth scroll and mobile menu support.
• Add your page link to the navigation elements in all HTML pages (both standard desktop navigation and mobile slide-in menus).

• Component styles are separated into files under src/style/ (e.g., home.css, product.css).
• Maintain responsive design styles in src/style/mediaquery.css. Test mobile layouts after modifying styles.

• Install new node packages:

  npm install <PACKAGE_NAME>

• Update dependency versions:

  npm update

Manage local environments with the following commands:

• Install node dependencies:

  npm install

• Format source code (if Prettier is configured):

  npx prettier --write .

• Verify dependencies for vulnerabilities:

  npm audit

• Input Validation: All client inputs on the contact form are verified using regular expressions (Regex) to block invalid emails. Text fields are trimmed of excess whitespaces to prevent blank submissions.
• Access Key Protection: Web3Forms is designed to use public access keys in frontend code, blocking spam via domain restrictions. For added protection, register your production domain under your Web3Forms dashboard to ensure form requests from other websites are rejected.
• HTTPS Security: Keep HTTPS active on your hosting environment (default on GitHub Pages) to encrypt user queries submitted via the contact form.

• Compress image files before uploading. For product visuals, use next-gen file formats like .webp (or target .png with metadata compression to keep high fidelity).
• Avoid loading video assets directly from the server. Host demo videos on external CDNs like YouTube to reduce page load speeds.

• Use CSS will-change properties sparingly on complex animated components to enable GPU hardware acceleration.
• Keep standard layout computations separate from GSAP tick events to prevent scroll lag.

Ensure high quality by verifying the checklist below before deployment:

• Verify that pressing the Spacebar toggles the active video play/pause status correctly on the dynamic preview pages.
• Scroll through the stacked video elements and check if inactive videos pause automatically when scrolled out of view.

• Submit a test contact form query using a valid mock email.
• Verify the browser shows a success message, clears the input fields, and the submission email is successfully delivered to your inbox.

Keep the website secure using simple source control backups:

• Repository Backup: Push code updates regularly to remote cloud hosts (e.g., GitHub, GitLab).

  git add .
  git commit -m "Updates description"
  git push origin main

• Local Backups: Keep offline zip archive copies of the project folder, particularly the config file ResearchPreviewData.js and the assets folder src/assets/.

1. Client-Side Rendering: Product details are populated dynamically via client-side JavaScript. This can limit search engine optimization (SEO) indexing for product sub-pages compared to pre-rendered static sites.
2. Public API Keys: The Web3Forms token is visible in the HTML source code. While protected by domain whitelisting, it can still be copied by users.

• Support Contact: For questions, bug reports, or feature requests, contact info@lsanetic.com.

This project is licensed under the ISC License. Refer to package.json for details.

Copyright (c) 2026, LSAverse
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.