Skip to content

Commit

Permalink
Merge pull request #9 from syncosaurus/home-page-features
Browse files Browse the repository at this point in the history 
Home page features
  • Loading branch information
@jgoteam
jgoteam authored Apr 23, 2024
2 parents 82ab0d2 + 37da151 commit dfc8e8b
Show file tree
Hide file tree
Showing 27 changed files with 342 additions and 694 deletions.
25 changes: 17 additions & 8 deletions docusaurus.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import tailwindPlugin from './plugins/tailwind-config.cjs'
const config = {
title: 'Syncosaurus',
tagline:
"A performant, collaborative, real-time Javascript framework that enables developers to focus on their application's features and business logic, instead of the complexities of state synchronization and conflict resolution.",
'An open-source framework for real-time, collaborative web applications',
favicon: 'img/favicon.ico',

// Set the production url of your site here
Expand Down Expand Up @@ -66,15 +66,18 @@ const config = {
title: 'Syncosaurus',
logo: {
alt: 'Syncosaurus Logo',
src: 'img/logo.svg',
src: 'img/icons/logo_transparent.png',
},
items: [
{ to: '/case-study', label: 'Case Study', position: 'right' },
{ to: '/team', label: 'The Team', position: 'right' },
{ type: 'doc', label: 'Docs', docId: 'index', position: 'right' },
{
to: 'https://github.com/syncosaurus',
label: 'Github',
type: 'html',
value: `
<a className="navbar__item" style={ text-decoration: none, color: black } href=https://github.com/syncosaurus>
Github <svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
</a>`,
position: 'right',
},
],
Expand Down Expand Up @@ -102,14 +105,20 @@ const config = {
label: 'Docs',
to: '/docs',
},
],
},
{
title: 'More',
items: [
{
label: 'GitHub',
to: 'https://github.com/syncosaurus',
html: `
<a className="navbar__item" style={ text-decoration: none, color: black } href=https://github.com/syncosaurus>
Github <svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" className="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
</a>`,
},
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} Syncosaurus`,
]
},
prism: {
theme: prismThemes.github,
Expand Down
113 changes: 66 additions & 47 deletions src/components/HomepageFeatures/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,38 @@ export default function HomepageFeatures() {
return (
<>
<FadeInSection>
<div class="container my-20 mx-auto md:px-6 border-double border-0 border-b border-blue-900">
<section class="mb-27">
<div class="flex flex-wrap">
<div class="mb-12 w-full shrink-0 grow-0 basis-auto lg:mb-0 lg:w-5/12">
<div class="flex lg:py-12">
<img
src={require("@site/static/img/docusaurus-social-card.jpg").default}
class="w-full rounded-lg shadow-lg dark:shadow-black/20 lg:ml-[10px] z-[10]"
alt="image"
/>
</div>
<div className="text-center mt-5 pt-10 pb-2">
<h1 className="text-5xl text-syncoGreen">Key Features</h1>
</div>
</FadeInSection>

<FadeInSection>
<div className="w-9/12 h-30 py-10 my-20 mx-auto md:px-6">
<section className="mb-27">
<div className="flex flex-wrap items-center">
<div className="mb-12 w-full shrink-0 grow-0 basis-auto lg:mb-0 lg:w-5/12 ">
<object
type="image/svg+xml"
data="/img/diagrams/diag-whiteboard-demo-dual.svg"
></object>
</div>
<div class="w-full shrink-0 grow-0 basis-auto lg:w-7/12">
<div class="flex h-full items-center rounded-lg bg-primary p-6 text-center text-black lg:pl-12 lg:text-left">
<div class="lg:pl-12">
<h2 class="mb-6 text-3xl font-bold">
A synchronization engine based on server reconciliation
<div className="w-full shrink-0 grow-0 basis-auto lg:w-7/12 align-middle">
<div className="flex h-full justify-center rounded-lg bg-primary p-6 text-black lg:pl-12 lg:text-left">
<div className="lg:pl-12">
<h2 className="mb-6 text-3xl font-bold text-syncoBlue">
Robust and Flexible Collaboration Engine
</h2>
<p className="text-2xl text-pretty">
Fast and reliable user updates are at the heart of
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.
</p>
</div>
</div>
</div>
Expand All @@ -34,51 +48,56 @@ export default function HomepageFeatures() {
</div>
</FadeInSection>
<FadeInSection>
<div class="container my-20 mx-auto md:px-6 border-solid border-0 border-b border-blue-900">
<section class="mb-27">
<div class="flex flex-wrap">
<div class="mb-12 w-full shrink-0 grow-0 basis-auto lg:mb-0 lg:w-5/12">
<div class="flex h-full items-center rounded-lg bg-primary p-6 text-center text-black lg:pl-12 lg:text-left">
<div class="lg:pl-12">
<h2 class="mb-6 text-3xl font-bold">
A convenient CLI tool to seamlessly create, configure, manage, and deploy your collaborative application
</h2>
</div>
</div>
<div className="grid w-9/12 h-30 py-10 my-20 mx-auto md:px-6">
<section className="mb-27">
<div className="flex flex-wrap items-center">
<div className="mb-12 w-full shrink-0 grow-0 basis-auto lg:mb-0 lg:w-4/12">
<h2 className="mb-6 text-3xl font-bold text-syncoBlue">
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.
</p>
</div>
<div class="w-full shrink-0 grow-0 basis-auto lg:w-7/12">

<div class="flex lg:py-12">
<img
src={require("@site/static/img/syncosaurus-deploy.gif").default}
class="w-full rounded-lg shadow-lg dark:shadow-black/20 lg:ml-[10px] z-[10]"
alt="image"
/>
<div className="w-full shrink-0 grow-0 basis-auto lg:w-8/12 align-center">
<div className="flex h-full rounded-lg bg-primary p-6 text-center text-black lg:pl-12 lg:text-left">
<div className="lg:pl-12">
<img
src="img/screenshots/syncosaurus-deploy.png"
className="w-full rounded-lg shadow-lg dark:shadow-black/20 lg:ml-[10px] z-[10]"
alt="image"
/>
</div>
</div>
</div>
</div>
</section>
</div>
</FadeInSection>
<FadeInSection>
<div class="container my-20 mx-auto md:px-6">
<section class="mb-27">
<div class="flex flex-wrap">
<div class="mb-12 w-full shrink-0 grow-0 basis-auto lg:mb-0 lg:w-6/12">
<div class="flex lg:py-12">
<div className="grid w-9/12 h-30 py-10 my-20 mx-auto md:px-6">
<section className="mb-27">
<div className="flex flex-wrap items-center">
<div className="mb-12 w-full shrink-0 grow-0 basis-auto lg:mb-0 lg:w-8/12">
<div className="flex lg:py-12 w-auto">
<img
src={require("@site/static/img/dashboard_screenshot.png").default}
class="w-full rounded-lg shadow-lg dark:shadow-black/20 lg:ml-[25px] z-[10]"
src="img/screenshots/dashboard_screenshot.png"
className="w-full rounded-lg shadow-lg dark:shadow-black/30 lg:ml-[25px] z-[10]"
alt="image"
/>
</div>
</div>
<div class="w-full shrink-0 grow-0 basis-auto lg:w-6/12">
<div class="flex h-full items-center rounded-lg bg-primary p-6 text-center text-black lg:pl-12 lg:text-left">
<div class="lg:pl-12">
<h2 class="mb-6 text-3xl font-bold">
An analytics dashboard to monitor your collaborative application's usage and error metrics
<div className="w-full shrink-0 grow-0 basis-auto lg:w-4/12">
<div className="flex h-full items-center rounded-lg bg-primary p-6 text-center text-black lg:pl-12 lg:text-left">
<div className="lg:pl-12">
<h2 className="mb-6 text-3xl text-syncoBlue font-bold">
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.
</p>
</div>
</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion src/components/HomepageFeatures/styles.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
.features {
display: flex;
align-items: center;
padding: 2rem 0;
vertical-align: middle;
padding: 2rem 2rem;
width: 100%;
}

Expand Down
101 changes: 96 additions & 5 deletions src/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,18 @@
@tailwind components;
@tailwind utilities;

@layer components {
.filter-syncoGreen {
@apply invert-[.68] sepia-[.92] saturate-[3.21] hue-rotate-[48deg] brightness-[.93] contrast-[.9];
}
}

@layer components {
.filter-syncoBlue {
@apply invert-[.2] sepia-[.11] saturate-[60.63] hue-rotate-[197deg] brightness-[.89] contrast-[.98];
}
}

/* You can override the default Infima variables here. */
:root {
--ifm-color-primary: #243d83;
Expand Down Expand Up @@ -38,20 +50,99 @@
align-self: center;
}

* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.footer {
display: flex;
align-self: center;
align-items: center;
width: 99.5%;
opacity: 92%;
outline: none;
max-height: 180px;
margin-top: auto;
bottom: 0;
background-color: #f9f9f9;
opacity: 92%;
border-top-right-radius: 1.5rem; /* 24px */
border-top-left-radius: 1.5rem; /* 24px */
box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}

.footer__items a {
color: #1d3370;
align-content: center;
}

.footer__items a:hover {
color: #7ed348;
text-decoration: none;
}

.footer__title {
padding-top:0.75rem;
color: #1d3370;
font-size: 1.08rem;
align-self: center;
}

/* .footer__copyright {
color: #1d3370;
font-size: 0.9rem;
padding-bottom: 0.5rem;
} */

.navbar {
display: flex;
align-items: center;
width: 99.5%;
height: 50px;
align-self: center;
background-color: white;
opacity: 90%;
background-color: #f9f9f9;
margin-bottom: 0.25rem;
opacity: 92%;
outline: none;
border-bottom-right-radius: 1.5rem; /* 24px */
border-bottom-left-radius: 1.5rem; /* 24px */
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
font-weight: bold;
z-index: 500;
}

.navbar__inner {
display: flex;
width: 100%;
}

.navbar__items a {
color: #1d3370;
font-weight: 450;
font-size: 1.1rem;
}

.navbar__items {
font-weight: bold;
.navbar__items a:hover {
color: #7ed348;
text-decoration: none;
}

.navbar__title {
font-size: 1.25rem;
font-weight: 900;
color: #1d3370;
}

.navbar__title:hover {
color: #7ed348;
text-decoration: none;
}

.navbar__logo img {
width: 48px; /* Set the desired width */
height: 48px; /* Set the desired height */
margin-top: -15%;
align-self: center;
}

.col--2 {
Expand Down
Loading

0 comments on commit dfc8e8b

Please sign in to comment.