finalise doc for 2.0 release

docs/modules/ROOT/pages/Templates/Cybersecurity.adoc

@@ -6,10 +6,15 @@ image::Templates/FeaturedCyberSecurity.png[Cybersecurity,align="center"]
 
 The Cybersecurity dashboard is an interface designed to provide a comprehensive overview of network impacts, illustrating potential vulnerabilities and system statuses within a network infrastructure. This tool leverages a dynamic data visualization approach, rendering interactive charts, graphs, and tables.
 
+https://development.needle-starterkit.graphapp.io/cybersecurity[Link to the live preview]
+https://github.com/neo4j-labs/neo4j-needle-starterkit/blob/2.0/src/templates/cybersecurity[Link to the template code]
+
 == Documentation
 
 === Layout Architecture
 
+image::Templates/CyberSecurityArchitecture.png[CyberSecurityArchitecture,align="center"]
+
 The template is structured around a main `Home.tsx` component that encapsulates the entire dashboard's functionality. It includes a dynamic search bar, a tabbed interface for switching between table and graph views, and modals for establishing connections to a Neo4j database.
 
 === Code Snippets

docs/modules/ROOT/pages/Templates/Foundation.adoc

@@ -1,10 +1,29 @@
 = Foundation Template
 
-image::Templates/FeaturedStarterKit.png[StarterKit,align="center"]
+[cols="1a,1a"]
+|===
+| Desktop | Mobile
+
+| image::Templates/FeaturedFoundation.png[FeaturedFoundation,width=600,height=600]
+| image::Templates/FeaturedFoundationMobile.png[FeaturedFoundationMobile,width=150,height=150]
+|===
 
 == Introduction
 
-The Foundation template provides a generic, simple yet powerful template for developing applications on top of your Neo4j databases. It features a clean and intuitive layout, including a side navigation bar, a central content area, and a connection modal for establishing or disconnecting from Neo4j instances.
+The Foundation template provides a generic, simple yet powerful template for developing applications on top of your Neo4j databases. It features a clean and intuitive layout, including a side navigation bar, a central content area, and a connection modal for connecting or disconnecting from Neo4j instances.
+
+https://development.needle-starterkit.graphapp.io/foundation[Link to the live preview]
+https://github.com/neo4j-labs/neo4j-needle-starterkit/blob/2.0/src/templates/foundation[Link to the template code]
+
+== Pre-requisite
+
+- Ensure you have the `@neo4j-ndl` library installed in your project to use this `Foundation` template.
+
+This template is using the following components and utilities from the shared folders, make sure to import them:
+
+- The Header component from the shared component folder.
+- The ConnectionModal component from the shared component folder.
+- The Driver utility from the shared utils folder.
 
 == Documentation
 

docs/modules/ROOT/pages/Templates/Movie.adoc

@@ -10,10 +10,15 @@ This template is the only one (`currently`) providing not only a static dataset
 
 CAUTION: This feature allowing you to connect and retrieve data from your database into the template is experimental (hence only available in this template). It is designed to work with the https://github.com/neo4j-graph-examples/recommendations[Recommendation dataset]. If you are using a different dataset or data model, you may need to modify the cypher queries and/or the data structure to fit your needs. 
 
+https://development.needle-starterkit.graphapp.io/movie[Link to the live preview]
+https://github.com/neo4j-labs/neo4j-needle-starterkit/blob/2.0/src/templates/movie[Link to the template code]
+
 == Documentation
 
 === Layout Architecture
 
+image::Templates/MovieArchitecture.png[MovieArchitecture,align="center"]
+
 The template entry is in the `Home.tsx` component, which orchestrates the user interactions and data retrieval from the static JSON file or your Neo4j database.
 
 Key components include:

docs/modules/ROOT/pages/contributing.adoc

@@ -1,13 +1,13 @@
 # Contributing
 
 Contributions to the project are highly welcomed.
-If you extend the starter kit with your own (reusable) components, consider creating a Pull Request. Ensure you start from the latest release branch, and set the merge base to this branch as well.
+If you extend the starter kit with your own (reusable) templates/components, consider creating a Pull Request. Ensure you start from the latest release branch, and set the merge base to this branch as well.
 
 For your feature to be accepted, ensure:
 
 - There is a matching https://github.com/neo4j-labs/neo4j-needle-starterkit/issues[issue] on GitHub.
 - Your code is formatted and linted correctly. (See `yarn run lint`).
-- The component is well documented in the documentation portal (if applicable).
+- The template/component is well documented in the documentation portal (if applicable).
 
 
 ## Feature Requests / Bugs

docs/modules/ROOT/pages/index.adoc

@@ -1,12 +1,13 @@
 # Neo4j Needle StarterKit
 
-Reactjs Responsive Starter Kit for building applications using https://www.neo4j.design/[Neo4j Needle] for accelerating TTV of your Neo4j-powered front-end tools.
+Reactjs Responsive Starter Kit for building applications using https://www.neo4j.design/[Neo4j Needle] for accelerating TTV of your Neo4j-powered front-end applications.
+You can access the https://development.needle-starterkit.graphapp.io[online version here].
 
 image::FeaturedImg.jpg[Featured Image]
 
 
 ## Features
-- 📈 Various templates and components focused on uses-cases and industries
+- 📈 Various templates and components focused on specific uses-cases and industries
 - 🚀 Responsive: Adapts to different screen sizes for optimal user experience.
 - 🌚 Dark/Light Mode Theme 🌞: Includes a theme wrapper to switch between light and dark modes without having to reinvent the wheel!
 - ⚙️ Neo4j Integration: A simple example for connecting to a Neo4j database.
@@ -17,8 +18,8 @@ image::FeaturedImg.jpg[Featured Image]
 ## Documentation
 
 - To get started, see the link:quickstart[Quickstart] page.
-- For details on the available templates, see the link:templates[Templates] page.
-- For details on the available components, see the link:components[Components] page.
-- Examples are available for every templates and components.
+- For details on the available templates, see the Templates section.
+- For details on the available components, see the Components section.
+- Examples and documentation are available for every templates and components.
 - If you want to contribute to this project, see link:contributing[Contributing].
 

docs/modules/ROOT/pages/quickstart.adoc

@@ -1,8 +1,11 @@
 # Quickstart
 
+If you want to try it without installing it locally, you can access https://development.needle-starterkit.graphapp.io[our self-hosted] version.
+
+Alternatively, if you want to run it locally or within your self-managed environment, please follow the steps below.
 
 ## Prerequisites
-Running the starter kit requires you have to have **node.js** and **yarn** installed.
+Running the StarterKit requires you to have **node.js** and **yarn** installed.
 
 If you do not have these installed:
 
@@ -21,6 +24,7 @@ git clone [email protected]:neo4j-labs/neo4j-needle-starterkit.git
 Navigate to the folder you just cloned and run the following commands to install and run the development server:
 
 ```shell
+cd neo4j-needle-starterkit
 yarn install
 yarn run dev
 ```
@@ -36,5 +40,4 @@ If all is successful, you will be shown the following message:
 ```
 
 ## Next steps
-After you have the starter app up-and-running, you can add in your own custom components and logic.
-See link:components[Components] for the different components that can be customized. 
+After you have the StarterKit app up-and-running, you can explore the different templates and components (see the relevant section for further details and documentation) or implement your own custom components, templates and logic.

src/templates/movie/Content.tsx

@@ -18,7 +18,7 @@ export default function Content({
   return (
     <div className='w-full flex justify-center'>
       <div className='n-bg-palette-neutral-bg-default p-5 flex flex-col'>
-        {/* Featured Product */}
+        {/* Featured Movie */}
         {loadingStates.loadingMain ? (
           <div className='w-screen h-[33vh] flex justify-center'>
             <LoadingSpinner size='large' />
@@ -59,7 +59,7 @@ export default function Content({
           </div>
         )}
 
-        {/* Similar Products */}
+        {/* Similar Genre */}
         {loadingStates.loadingSimilarGenre ? (
           <div className='w-screen h-[33vh] flex justify-center'>
             <LoadingSpinner size='large' />
@@ -79,7 +79,7 @@ export default function Content({
           </div>
         )}
 
-        {/* Frequently Bought Together */}
+        {/* User who watched this, also watched this */}
         {loadingStates.loadingOtherUsers ? (
           <div className='w-screen h-[33vh] flex justify-center'>
             <LoadingSpinner size='large' />