diff --git a/webpage/docusaurus.config.ts b/webpage/docusaurus.config.ts index 28959309..1eacf430 100644 --- a/webpage/docusaurus.config.ts +++ b/webpage/docusaurus.config.ts @@ -8,7 +8,7 @@ import type * as OpenApiPlugin from "docusaurus-plugin-openapi-docs"; const config: Config = { title: 'n.eko', - tagline: 'A self hosted virtual browser that runs in docker', + tagline: 'A self hosted virtual browser that runs in docker and uses WebRTC.', favicon: 'img/favicon.ico', // Set the production url of your site here @@ -73,6 +73,11 @@ const config: Config = { src: 'img/logo.png', }, items: [ + { + href: '/#features', + label: 'Features', + position: 'left', + }, { type: 'docSidebar', sidebarId: 'docsSidebar', diff --git a/webpage/src/components/HomepageFeatures/index.tsx b/webpage/src/components/HomepageFeatures/index.tsx index f88f09ad..db44e20c 100644 --- a/webpage/src/components/HomepageFeatures/index.tsx +++ b/webpage/src/components/HomepageFeatures/index.tsx @@ -7,78 +7,110 @@ type FeatureItem = { title: string; Svg: React.ComponentType>; description: ReactNode; + isEven: boolean; }; +let i = 1; + const FeatureList: FeatureItem[] = [ { - title: 'Watch Party', - Svg: require('@site/static/img/undraw_video_streaming.svg').default, + isEven: i++ % 2 === 0, + title: 'Ultra Low Latency Streaming', + Svg: require('@site/static/img/undraw_low_latency.svg').default, description: ( <> - Watch video content together with multiple people and react to it in real-time. - Perfect for staying connected with friends and family. + Near real-time streaming with less than 300ms latency thanks to WebRTC.
+ Smooth video playback and synchronized audio for a seamless experience. ), }, { - title: 'Interactive Presentation', - Svg: require('@site/static/img/undraw_usability_testing.svg').default, + isEven: i++ % 2 === 0, + title: 'Multi-Participant Control', + Svg: require('@site/static/img/undraw_miro.svg').default, description: ( <> - Share your screen and allow others to control it. - Ideal for collaborative work and interactive teaching sessions. + Multiple participants in the room can share control with each other.
+ The host has the ability to give control to others or deny control requests. ), }, { - title: 'Collaborative Tool', - Svg: require('@site/static/img/undraw_online_collaboration.svg').default, + isEven: i++ % 2 === 0, + title: 'Live Broadcasting', + Svg: require('@site/static/img/undraw_online_media.svg').default, description: ( <> - Brainstorm ideas, cobrowse, and debug code together. - Enhance team collaboration with real-time synchronization. + Stream room content live via RTMP to platforms like Twitch, YouTube, and more.
+ The host can manage the RTMP URL and stream key, enabling or disabling the broadcast as needed.
+ Broadcasting can continue even without active participants, allowing for 24/7 streaming. ), }, { - title: 'Support/Teaching', - Svg: require('@site/static/img/undraw_instant_support.svg').default, + isEven: i++ % 2 === 0, + title: 'Persistent Browser', + Svg: require('@site/static/img/undraw_safe.svg').default, description: ( <> - Guide people interactively in a controlled environment. - Perfect for providing support or teaching remotely. + Keep your browser session running even after you close the tab or browser. + Resume your session at any time from any device. + Ideal for long-running tasks like downloads, uploads, and monitoring.

+ Own a browser with persistent cookies available anywhere. + No state is left on the host browser after terminating the connection. + Sensitive data like cookies are not transferred - only video is shared. + For your ISP, it looks like you are watching a video or having a video call. ), }, { - title: 'Embed Anything', - Svg: require('@site/static/img/undraw_website_builder.svg').default, + isEven: i++ % 2 === 0, + title: 'Throwaway Browser', + Svg: require('@site/static/img/undraw_throw_away.svg').default, description: ( <> - Embed a virtual browser in your web app. Open any third-party - website or application and synchronize audio and video flawlessly. + Use a disposable browser to access websites without leaving any trace. + The browser is destroyed after the session ends, leaving no history, cookies, or cache. + Ideal for accessing sensitive information or testing websites without affecting your local environment.

+ Mitigates the risk of OS fingerprinting and browser vulnerabilities by running in a container. + Use Tor Browser and VPN for additional anonymity. ), }, { - title: 'Automated Browser', - Svg: require('@site/static/img/undraw_data_processing.svg').default, + isEven: i++ % 2 === 0, + title: 'Jump Host for Internal Resources', + Svg: require('@site/static/img/undraw_software_engineer.svg').default, description: ( <> - Install playwright or puppeteer and automate tasks while being - able to actively intercept them. Enhance productivity with automation. + Access internal resources like servers, databases, and websites from a remote location. + You can record all session activities for auditing and compliance. + Ensuring that no data is left on the client side and minimizing the risk of data leakage. + Making it harder for attackers to pivot to other systems when they compromise the jump host and reducing the attack surface. + + ), + }, + { + isEven: i++ % 2 === 0, + title: 'Protect Your Intellectual Property', + Svg: require('@site/static/img/undraw_security.svg').default, + description: ( + <> + Have you ever wanted to share your website, AI model, or software with someone without giving them access to the code? + With WebRTC, only the video and audio are shared, not the actual data. Nobody can reverse-engineer your code because it is not even running on their machine. + You have full control over who can access your content and can revoke access at any time. ), }, ]; -function Feature({title, Svg, description}: FeatureItem) { +function Feature({title, Svg, description, isEven}: FeatureItem) { return ( -
-
+
+
-
+
{title}

{description}

@@ -90,11 +122,10 @@ export default function HomepageFeatures(): ReactNode { return (
-
- {FeatureList.map((props, idx) => ( - - ))} -
+

Features

+ {FeatureList.map((props, idx) => ( + + ))}
); diff --git a/webpage/src/components/HomepageFeatures/styles.module.css b/webpage/src/components/HomepageFeatures/styles.module.css index b248eb2e..de439841 100644 --- a/webpage/src/components/HomepageFeatures/styles.module.css +++ b/webpage/src/components/HomepageFeatures/styles.module.css @@ -5,7 +5,18 @@ width: 100%; } -.featureSvg { - height: 200px; - width: 200px; +.featureRow { + display: flex; + margin: 2rem 0; + align-items: center; + text-align: left; +} + +.featureRowReverse { + flex-direction: row-reverse; +} + +.featureSvg { + height: 300px; + width: 300px; } diff --git a/webpage/src/components/HomepageUseCases/index.tsx b/webpage/src/components/HomepageUseCases/index.tsx new file mode 100644 index 00000000..2e91d505 --- /dev/null +++ b/webpage/src/components/HomepageUseCases/index.tsx @@ -0,0 +1,101 @@ +import type {ReactNode} from 'react'; +import clsx from 'clsx'; +import Heading from '@theme/Heading'; +import styles from './styles.module.css'; + +type FeatureItem = { + title: string; + Svg: React.ComponentType>; + description: ReactNode; +}; + +const FeatureList: FeatureItem[] = [ + { + title: 'Watch Party', + Svg: require('@site/static/img/undraw_video_streaming.svg').default, + description: ( + <> + Watch video content together with multiple people and react to it in real-time. + Perfect for staying connected with friends and family. + + ), + }, + { + title: 'Interactive Presentation', + Svg: require('@site/static/img/undraw_usability_testing.svg').default, + description: ( + <> + Share your screen and allow others to control it. + Ideal for collaborative work and interactive teaching sessions. + + ), + }, + { + title: 'Collaborative Tool', + Svg: require('@site/static/img/undraw_online_collaboration.svg').default, + description: ( + <> + Brainstorm ideas, co-browse, and debug code together. + Enhance team collaboration with real-time synchronization. + + ), + }, + { + title: 'Support/Teaching', + Svg: require('@site/static/img/undraw_instant_support.svg').default, + description: ( + <> + Guide people interactively in a controlled environment. + Perfect for providing support or teaching remotely. + + ), + }, + { + title: 'Embed Anything', + Svg: require('@site/static/img/undraw_website_builder.svg').default, + description: ( + <> + Embed a virtual browser in your web app. Open any third-party + website or application and synchronize audio and video flawlessly. + + ), + }, + { + title: 'Automated Browser', + Svg: require('@site/static/img/undraw_data_processing.svg').default, + description: ( + <> + Install Playwright or Puppeteer and automate tasks while being + able to actively intercept them. Enhance productivity with automation. + + ), + }, +]; + +function Feature({title, Svg, description}: FeatureItem) { + return ( +
+
+ +
+
+ {title} +

{description}

+
+
+ ); +} + +export default function HomepageUseCases(): ReactNode { + return ( +
+
+
+ {FeatureList.map((props, idx) => ( + + ))} +
+
+
+ ); +} diff --git a/webpage/src/components/HomepageUseCases/styles.module.css b/webpage/src/components/HomepageUseCases/styles.module.css new file mode 100644 index 00000000..7208443b --- /dev/null +++ b/webpage/src/components/HomepageUseCases/styles.module.css @@ -0,0 +1,11 @@ +.useCases { + display: flex; + align-items: center; + padding: 2rem 0; + width: 100%; +} + +.useCaseSvg { + height: 200px; + width: 200px; +} diff --git a/webpage/src/pages/index.tsx b/webpage/src/pages/index.tsx index 5019dc83..019ba0e3 100644 --- a/webpage/src/pages/index.tsx +++ b/webpage/src/pages/index.tsx @@ -19,8 +19,9 @@ import clsx from 'clsx'; import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Layout from '@theme/Layout'; -import HomepageFeatures from '@site/src/components/HomepageFeatures'; +import HomepageUseCases from '@site/src/components/HomepageUseCases'; import HomepageShowcase from '@site/src/components/HomepageShowcase'; +import HomepageFeatures from '@site/src/components/HomepageFeatures'; import Heading from '@theme/Heading'; import styles from './index.module.css'; @@ -67,21 +68,16 @@ export default function Home(): ReactNode { description={siteConfig.tagline}>
- -
-

- Welcome to Neko, a self-hosted virtual browser that runs in Docker and uses WebRTC technology. Neko is a powerful tool that allows you to run a fully-functional browser in a virtual environment, giving you the ability to access the internet securely and privately from anywhere. With Neko, you can browse the web, run applications, and perform other tasks just as you would on a regular browser, all within a secure and isolated environment. Whether you are a developer looking to test web applications, a privacy-conscious user seeking a secure browsing experience, or simply someone who wants to take advantage of the convenience and flexibility of a virtual browser, Neko is the perfect solution. -

-

- In addition to its security and privacy features, Neko offers the ability for multiple users to access it simultaneously. This makes it an ideal solution for teams or organizations that need to share access to a browser, as well as for individuals who want to use multiple devices to access the same virtual environment. With Neko, you can easily and securely share access to a browser with others, without having to worry about maintaining separate configurations or settings. Whether you need to collaborate on a project, access shared resources, or simply want to share access to a browser with friends or family, Neko makes it easy to do so. -

-

- Neko is also a great tool for hosting watch parties and interactive presentations. With its virtual browser capabilities, Neko allows you to host watch parties and presentations that are accessible from anywhere, without the need for in-person gatherings. This makes it easy to stay connected with friends and colleagues, even when you are unable to meet in person. With Neko, you can easily host a watch party or give an interactive presentation, whether it's for leisure or work. Simply invite your guests to join the virtual environment, and you can share the screen and interact with them in real-time. +

+ Welcome to Neko, a self-hosted virtual browser that runs in Docker and uses WebRTC technology. Neko allows you to run a fully-functional browser in a virtual environment, providing secure and private internet access from anywhere. It's perfect for developers, privacy-conscious users, and anyone needing a virtual browser.

+ + +
); diff --git a/webpage/static/img/undraw_low_latency.svg b/webpage/static/img/undraw_low_latency.svg new file mode 100644 index 00000000..0b1e9d1b --- /dev/null +++ b/webpage/static/img/undraw_low_latency.svg @@ -0,0 +1,229 @@ + + + + + season_change + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/webpage/static/img/undraw_miro.svg b/webpage/static/img/undraw_miro.svg new file mode 100644 index 00000000..b93fa47f --- /dev/null +++ b/webpage/static/img/undraw_miro.svg @@ -0,0 +1,343 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/webpage/static/img/undraw_online_media.svg b/webpage/static/img/undraw_online_media.svg new file mode 100644 index 00000000..106bb11f --- /dev/null +++ b/webpage/static/img/undraw_online_media.svg @@ -0,0 +1,233 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/webpage/static/img/undraw_safe.svg b/webpage/static/img/undraw_safe.svg new file mode 100644 index 00000000..4cd2d97d --- /dev/null +++ b/webpage/static/img/undraw_safe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/webpage/static/img/undraw_security.svg b/webpage/static/img/undraw_security.svg new file mode 100644 index 00000000..701f4b1d --- /dev/null +++ b/webpage/static/img/undraw_security.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/webpage/static/img/undraw_software_engineer.svg b/webpage/static/img/undraw_software_engineer.svg new file mode 100644 index 00000000..975a0a17 --- /dev/null +++ b/webpage/static/img/undraw_software_engineer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/webpage/static/img/undraw_throw_away.svg b/webpage/static/img/undraw_throw_away.svg new file mode 100644 index 00000000..abb50407 --- /dev/null +++ b/webpage/static/img/undraw_throw_away.svg @@ -0,0 +1 @@ + \ No newline at end of file