Skip to content

Commit

Permalink
Add docs and quick starts to learn section of nav
Browse files Browse the repository at this point in the history
  • Loading branch information
@tonyhb
tonyhb committed Sep 6, 2022
1 parent 587aedb commit c82f91a
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 39 deletions.
60 changes: 40 additions & 20 deletions pages/features/data-governance.tsx
View file
Expand Up @@ -14,7 +14,7 @@ export default function () {
// This is emptied via onMouseLeave within the parent container.
setHoverVal(str);
}
}
};

return (
<div>
Expand Down Expand Up @@ -47,9 +47,14 @@ export default function () {
<Tag>Feature highlights</Tag>
</div>
</div>
<div className="container mx-auto max-w-4xl grid lg:grid-cols-5 pt-16 text-center lg:px-0 sm:px-6 feature-highlights" onMouseOver={hover} onMouseLeave={() => setHoverVal("")}>
<div className="flex flex-col items-center hover:shadow-xl hover:bg-white rounded-sm p-4"
data-hover="Write custom transforms to adapt data as it's processed"
<div
className="container mx-auto max-w-4xl grid lg:grid-cols-5 pt-16 text-center lg:px-0 sm:px-6 feature-highlights"
onMouseOver={hover}
onMouseLeave={() => setHoverVal("")}
>
<div
className="flex flex-col items-center hover:shadow-xl hover:bg-white rounded-sm p-4"
data-hover="Write custom transforms to adapt data as it's processed"
>
<svg
width="24"
Expand All @@ -66,8 +71,9 @@ export default function () {

<p className="pt-4">Inline JavaScript (ES6+) transforms</p>
</div>
<div className="flex flex-col items-center hover:shadow-xl hover:bg-white rounded-sm p-4"
data-hover="Version each event with its own schema to control your data as it changes over time"
<div
className="flex flex-col items-center hover:shadow-xl hover:bg-white rounded-sm p-4"
data-hover="Version each event with its own schema to control your data as it changes over time"
>
<svg
width="24"
Expand All @@ -83,8 +89,9 @@ export default function () {

<p className="pt-4">Event versioning and&nbsp;management</p>
</div>
<div className="flex flex-col items-center hover:shadow-xl hover:bg-white rounded-sm p-4"
data-hover="Enforce schemas for each event, and store invalid events in quarantine for inspection and post-processing"
<div
className="flex flex-col items-center hover:shadow-xl hover:bg-white rounded-sm p-4"
data-hover="Enforce schemas for each event, and store invalid events in quarantine for inspection and post-processing"
>
<svg
width="24"
Expand All @@ -99,8 +106,9 @@ export default function () {
</svg>
<p className="pt-4">Event schemas with data quarantine</p>
</div>
<div className="flex flex-col items-center hover:shadow-xl hover:bg-white rounded-sm p-4"
data-hover="Enrich data via external APIs using any programming language"
<div
className="flex flex-col items-center hover:shadow-xl hover:bg-white rounded-sm p-4"
data-hover="Enrich data via external APIs using any programming language"
>
<svg
width="24"
Expand All @@ -115,8 +123,9 @@ export default function () {
</svg>
<p className="pt-4">Enrichment via external&nbsp;APIs</p>
</div>
<div className="flex flex-col items-center hover:shadow-xl hover:bg-white rounded-sm p-4"
data-hover="Proactively alert when events become anomalous or have invalid data, without any setup"
<div
className="flex flex-col items-center hover:shadow-xl hover:bg-white rounded-sm p-4"
data-hover="Proactively alert when events become anomalous or have invalid data, without any setup"
>
<svg
width="24"
Expand All @@ -132,7 +141,9 @@ export default function () {
<p className="pt-4">Alerting and error reporting&nbsp;built-in</p>
</div>
</div>
<p className="text-center pt-6 text-xs text-slate-500">{hoverVal || (<>&nbsp;</>)}</p>
<p className="text-center pt-6 text-xs text-slate-500">
{hoverVal || <>&nbsp;</>}
</p>

<div className="container mx-auto grid grid-cols-2 gap-16 pt-44">
<div>
Expand All @@ -153,7 +164,12 @@ export default function () {
</div>

<div className="flex align-center justify-center">
<img src="/assets/overview-simplified.svg" alt="Inngest overview" height="auto" className="self-center" />
<img
src="/assets/overview-simplified.svg"
alt="Inngest overview"
height="auto"
className="self-center"
/>
</div>
</div>

Expand All @@ -177,21 +193,25 @@ export default function () {
<div className="container mx-auto">
<div className="p-20 mt-24 rounded-xl bg-slate-100">
<h2 className="mb-2">Develop faster and safer</h2>
<p>Use our platform to rapidly build functionality driven by events, with zero infrastructure and full end-to-end safety.</p>
<p>
Use our platform to rapidly build functionality driven by events,
with zero infrastructure and full end-to-end safety.
</p>
<div className="grid lg:grid-cols-3 gap-16 mt-20">
<div>
<h3 className="pb-4">Powerful</h3>
<p>
Transform and enrich data on-the-fly, ensuring your data is as clean
and powerful as possible. See an entire overview of what each event
does in your system — no documenting required.
Transform and enrich data on-the-fly, ensuring your data is as
clean and powerful as possible. See an entire overview of what
each event does in your system — no documenting required.
</p>
</div>
<div>
<h3 className="pb-4">Flexible</h3>
<p>
Create unlimited event versions with a full changelog, ensuring your
event registry can adapt to your business needs as you grow.
Create unlimited event versions with a full changelog, ensuring
your event registry can adapt to your business needs as you
grow.
</p>
</div>
<div>
Expand Down
88 changes: 69 additions & 19 deletions shared/nav.tsx
View file
Expand Up @@ -42,25 +42,68 @@ const NavContent: React.FC<Props> = (props: Props) => {
<span className="text-slate-400 px-4">Product</span>
<a href="/product" className="rounded-lg p-4">
<p>Functions</p>
<p className="pt-1 text-slate-400"><small>Event-driven and scheduled serverless step functions</small></p>
<p className="pt-1 text-slate-400">
<small>
Event-driven and scheduled serverless step functions
</small>
</p>
</a>
<a href="/features/data-governance" className="rounded-lg p-4">
<p>Data governance</p>
<p className="pt-1 text-slate-400"><small>The single platform to handle and manage all event data</small></p>
<p className="pt-1 text-slate-400">
<small>
The single platform to handle and manage all event data
</small>
</p>
</a>
</div>

<div className="secondary-links col-span-5 bg-slate-100 pt-6 pb-3 px-2 text-xs">
<span className="text-slate-400 px-4">Use cases</span>
<a href="/uses/serverless-node-background-jobs" className="rounded-lg px-4 py-3">Background and scheduled jobs</a>
<a href="/uses/internal-tools" className="rounded-lg px-4 py-3">Internal tools</a>
<a href="/uses/user-journey-automation" className="rounded-lg px-4 py-3">User journey automation</a>
<a
href="/uses/serverless-node-background-jobs"
className="rounded-lg px-4 py-3"
>
Background and scheduled jobs
</a>
<a href="/uses/internal-tools" className="rounded-lg px-4 py-3">
Internal tools
</a>
<a
href="/uses/user-journey-automation"
className="rounded-lg px-4 py-3"
>
User journey automation
</a>
</div>
</div>
</Hoverable>
<Hoverable>
<StyledLink key="product" href="/docs?ref=nav">
Learn
</StyledLink>
<div className="rounded-lg w-56 ">
<div className="primary-links py-2 px-2">
<a href="/product" className="rounded-lg p-4">
<p>Docs</p>
<p className="pt-1 text-slate-400">
<small>
Everything you need to know about our event-driven
platform
</small>
</p>
</a>
<a href="/features/data-governance" className="rounded-lg p-4">
<p>Quick starts</p>
<p className="pt-1 text-slate-400">
<small>
Example projects to reference when using Inngest
</small>
</p>
</a>
</div>
</div>
</Hoverable>
<StyledLink key="docs" href="/docs?ref=nav">
Docs
</StyledLink>
<StyledLink key="blog" href="/blog?ref=nav">
Blog
</StyledLink>
Expand Down Expand Up @@ -240,16 +283,19 @@ const Container = styled.div<{ sticky?: boolean }>`
grid-template-columns: repeat(10, 1fr);
align-items: stretch;
> a, > div {
> a,
> div {
grid-column: 2 / -2;
}
> div { padding: 0 }
a, > a {
> div {
padding: 0;
}
a,
> a {
display: block;
margin: 0;
padding: 0.5rem 4px;
}
}
align-items: center;
Expand Down Expand Up @@ -277,7 +323,7 @@ const StyledLink = styled.a`
white-space: nowrap;
color: var(--font-color-primary);
transition: all .3s;
transition: all 0.3s;
&:hover {
background: #2f6d9d11;
Expand All @@ -290,7 +336,8 @@ const StyledLink = styled.a`
const Hoverable = styled.div`
position: relative;
&.visible > div, &:hover > div {
&.visible > div,
&:hover > div {
opacity: 1;
pointer-events: all;
transform: translateY(0);
Expand Down Expand Up @@ -329,8 +376,7 @@ const Hoverable = styled.div`
z-index: 3;
background: #fff;
box-sizing: border-box;
box-shadow: 0 0 100px rgba(0, 0, 0, 0.15),
0 10px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 0 100px rgba(0, 0, 0, 0.15), 0 10px 20px rgba(0, 0, 0, 0.08);
}
span {
Expand All @@ -339,18 +385,22 @@ const Hoverable = styled.div`
letter-spacing: 1.5px;
font-size: 12px;
line-height: 1.25;
margin: 0 0 .75rem;
margin: 0 0 0.75rem;
}
.primary-links, .secondary-links {
.primary-links,
.secondary-links {
a {
display: block;
margin: 0;
&:hover {
background: #2f6d9d11;
}
}
p { margin: 0; line-height: 1.05; };
p {
margin: 0;
line-height: 1.05;
}
}
.secondary-links a {
Expand Down

0 comments on commit c82f91a

Please sign in to comment.