Merge pull request #11 from syncosaurus/additional-home-section

Additional home section

src/components/Benefits/FadeInSection.jsx

@@ -0,0 +1,20 @@
+import { useRef } from 'react';
+import useIsVisible from '@site/src/hooks/useIsVisible'
+
+const FadeInSection = ({ children }) => {
+  const sectionRef = useRef();
+  const isVisible = useIsVisible(sectionRef);
+
+  return (
+    <div
+      ref={sectionRef}
+      className={`transition-opacity ease-in duration-700 ${
+        isVisible ? 'opacity-100' : 'opacity-0'
+      }`}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default FadeInSection;

src/components/Benefits/index.js

@@ -0,0 +1,48 @@
+import clsx from 'clsx'
+import Heading from '@theme/Heading'
+import styles from './styles.module.css'
+import FadeInSection from './FadeInSection'
+
+export default function HomepageBenefits() {
+  return (
+    <FadeInSection>
+      <section className="font-sans rounded-3xl lg:rounded-tl-2xl lg:rounded-bl-2xl overflow-hidden m-1 pb-14 pl-6 pr-6 flex flex-col text-center items-center bg-gray-200">
+        <article className="flex flex-col justify-center gap-8">
+          <div className="flex flex-col justify-center gap-40 md:flex-row pt-10">
+            <div className="flex flex-col items-center md:items-center">
+              <p className="tracking-tight text-3xl font-bold text-syncoBlue p-override">
+                Ready to Scale
+              </p>
+              <object data="/img/icons/cloudflare.svg" className="size-28" />
+              <p className="text-2xl text-pretty p-override pt-6">
+                Scalable infrastructure <br /> built with Cloudflare
+              </p>
+            </div>
+
+            <div className="flex flex-col items-center md:items-center">
+              <p className="tracking-tight text-3xl font-bold text-syncoBlue p-override">
+                Quick to Integrate
+              </p>
+              <object data="/img/icons/React_Logo.svg" className="size-24" />
+              <p className="text-2xl text-pretty p-override pt-10">
+                React SDK to quickly add <br />
+                new features to your app
+              </p>
+            </div>
+
+            <div className="flex flex-col items-center md:items-center">
+              <p className="tracking-tight text-3xl font-bold text-syncoBlue p-override">
+                Easy to Configure
+              </p>
+              <object data="/img/icons/file_icon.svg" className="size-24" />
+              <p className="text-2xl text-pretty p-override pt-10">
+                Config file to customize <br />
+                default syncing behavior
+              </p>
+            </div>
+          </div>
+        </article>
+      </section>
+    </FadeInSection>
+  )
+}

src/components/Benefits/styles.module.css

@@ -0,0 +1,12 @@
+.features {
+  display: flex;
+  align-items: center;
+  vertical-align: middle;
+  padding: 2rem 2rem;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}

src/components/HomepageFeatures/index.js

@@ -8,11 +8,13 @@ export default function HomepageFeatures() {
   return (
     <>
       <FadeInSection>
-        <div className="text-center mt-6 pt-10 pb-2">
-          <h1 className="text-5xl text-syncoGreen">Key Features</h1>
+        <div className="text-center mt-5 pt-10 pb-2">
+          <h1 className="text-5xl text-syncoBlue">Key Features</h1>
+          <div className="mt-5">
+            <div className="mx-auto h-[2px] max-w-md bg-gradient-to-r from-transparent via-syncoGreen to-transparent"></div>
+          </div>
         </div>
       </FadeInSection>
-
       <FadeInSection>
         <div className="w-9/12 h-30 py-10 my-20 mx-auto md:px-6">
           <section className="mb-27">
@@ -34,11 +36,11 @@ export default function HomepageFeatures() {
                       real-time, collaborative web applications. But what
                       happens when multiple clients make conflicting changes
                       simultaneously? <br></br> <br></br>
-                      Synocusaurus provides the backbone for
-                      both performant state synchronization <i>and</i> flexible
-                      conflict resolution logic using client-side prediction and
-                      server reconcilliation, techniques developed originally
-                      for multi-player video games.
+                      Synocusaurus provides the backbone for both performant
+                      state synchronization <i>and</i> flexible conflict
+                      resolution logic using client-side prediction and server
+                      reconcilliation, techniques developed originally for
+                      multi-player video games.
                     </p>
                   </div>
                 </div>
@@ -56,8 +58,8 @@ export default function HomepageFeatures() {
                   Easy Development and Deployment
                 </h2>
                 <p className="text-2xl text-pretty">
-                  Seamlessly create, iterate, deploy, and manage your Syncosaurus
-                  applications with our convenient CLI tool.
+                  Seamlessly create, iterate, deploy, and manage your
+                  Syncosaurus applications with our convenient CLI tool.
                 </p>
               </div>
               <div className="w-full shrink-0 grow-0 basis-auto lg:w-8/12 align-center">
@@ -95,8 +97,9 @@ export default function HomepageFeatures() {
                       Built-in Analytics
                     </h2>
                     <p className="text-2xl text-pretty">
-                      Monitor your collaborative application's usage metrics, in aggregate or on a
-                      per-room basis, with our beautiful dashboard application.
+                      Monitor your collaborative application's usage metrics, in
+                      aggregate or on a per-room basis, with our beautiful
+                      dashboard application.
                     </p>
                   </div>
                 </div>

src/pages/case-study.mdx

@@ -56,7 +56,7 @@ Broadly, real-time collaboration is a term used to describe software or technolo
 
 With the rise of [remote work and distributed teams](https://medium.com/@anupamr/distributed-teams-are-the-new-cloud-for-startups-14240a9822d7), apps like these [are becoming critical in the modern work environment](https://northzone.com/2023/06/20/perspectives-the-rise-of-multiplayer-software/). Well-known examples include Google Docs, Figma, and Notion among others:
 
-[TODO graphic here]
+<img src="/img/screenshots/collaboration_tools_logos.png" />
 
 While [a broader definition](https://www.microsoft.com/en-us/microsoft-365/business-insights-ideas/resources/real-time-collaboration-what-it-is-and-how-it-helps-your-business) of real-time collaboration applications can include video conferencing and messaging software, those types of applications have different technical requirements and will be excluded from the scope of this case study.
 
@@ -69,11 +69,11 @@ At a fundamental level when multiple users are “collaborating” on the same a
 
 <Centralized />
 
-- **Centralized** includes the client-server architecture where client machines send resource requests to a backend server. In the client-server architecture, the server is generally [authoritative](https://medium.com/mighty-bear-games/what-are-server-authoritative-realtime-games-e2463db534d1), meaning it is the source of truth.
+**Centralized** includes the client-server architecture where client machines send resource requests to a backend server. In the client-server architecture, the server is generally [authoritative](https://medium.com/mighty-bear-games/what-are-server-authoritative-realtime-games-e2463db534d1), meaning it is the source of truth.
 
 <P2P />
 
-- **Decentralized** such as the peer-to-peer architecture where every machine (known as a node) is treated equally and responsible for sending and responding to requests for resources. In the peer-to-peer architecture, every machine has equal authority and a consensus must usually be reached to determine the truth.
+**Decentralized** such as the peer-to-peer architecture where every machine (known as a node) is treated equally and responsible for sending and responding to requests for resources. In the peer-to-peer architecture, every machine has equal authority and a consensus must usually be reached to determine the truth.
 
 Though [it is possible](https://www.tag1consulting.com/blog/yjs-webrtc-part-1) to build decentralized real-time collaboration web apps, decentralized architectures are notoriously complex. Instead [many existing real-time collaborative apps use a form of the client-server architecture](https://www.figma.com/blog/how-figmas-multiplayer-technology-works/) due to their comparative [efficiency and ease of maintenance](https://fwx.finance/learn/article/centralized-app-vs-dapp). Therefore, we will assume that any application considering Syncosaurus will be using a form of centralized architecture.
 

src/pages/index.js

@@ -2,6 +2,7 @@ import Link from '@docusaurus/Link'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import Layout from '@theme/Layout'
 import HomepageFeatures from '@site/src/components/HomepageFeatures'
+import HomepageBenefits from '@site/src/components/Benefits'
 import Puzzle from '@site/src/components/Puzzle'
 import { useRef } from 'react'
 
@@ -48,6 +49,7 @@ export default function Home() {
       </div>
     </div>
       <main ref={featureRef}>
+        <HomepageBenefits />
         <HomepageFeatures />
       </main>
     </Layout>

src/theme/MDXPage/index.js

@@ -47,7 +47,7 @@ export default function MDXPage(props) {
                 />
               </div>
             )}
-            <div className={clsx('col', !hideTableOfContents && 'col--8')}>
+            <div className={clsx('col', !hideTableOfContents && 'col')}>
               {unlisted && <Unlisted />}
               <article>
                 <MDXContent>