Skip to content

feat(docs): implement custom hero animations and visual demo #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Vaishnav88sk merged 4 commits into from
Jun 16, 2026
Merged

feat(docs): implement custom hero animations and visual demo #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
87ad4bd
feat(docs): implement custom hero animations and visual demo (Issue #42)
Vaishnav88sk Jun 16, 2026
a660027
fix(docs): fix invisible terminal mockup and render feature grid
Vaishnav88sk Jun 16, 2026
f5d0591
fix(docs): force explicit browser tab title
Vaishnav88sk Jun 16, 2026
29706f6
style: address coderabbit review comments for accessibility and style…
Vaishnav88sk Jun 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 44 additions & 0 deletions website/src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,3 +66,47 @@
font-size: 1.2rem !important;
}
}

/* Animations */
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.animate-fade-in-up {
opacity: 0;
animation: fade-in-up 0.8s ease-out forwards;
}

.delay-1 {
animation-delay: 0.2s;
}

.delay-2 {
animation-delay: 0.4s;
}

.delay-3 {
animation-delay: 0.6s;
}

.delay-4 {
animation-delay: 0.8s;
}

/* Float Animation for the terminal mockup */
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}

.animate-float {
animation: float 6s ease-in-out infinite;
}
74 changes: 61 additions & 13 deletions website/src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,16 @@ import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import Heading from '@theme/Heading';
import Head from '@docusaurus/Head';

function HomepageHeader() {
const {siteConfig} = useDocusaurusContext();
return (
<header className="hero" style={{ minHeight: '85vh', display: 'flex', alignItems: 'center', background: 'transparent' }}>
<header className="hero" style={{ minHeight: '85vh', display: 'flex', alignItems: 'center', background: 'transparent', padding: '6rem 0' }}>
<div className="container" style={{ textAlign: 'center' }}>
<Heading as="h1" className="hero__title" style={{

{/* Animated Headline */}
<Heading as="h1" className="hero__title animate-fade-in-up" style={{
fontSize: 'clamp(3rem, 8vw, 5rem)',
fontWeight: 800,
letterSpacing: '-0.02em',
Expand All @@ -20,7 +23,9 @@ function HomepageHeader() {
}}>
{siteConfig.title}
</Heading>
<p className="hero__subtitle" style={{

{/* Animated Subtitle */}
<p className="hero__subtitle animate-fade-in-up delay-1" style={{
fontSize: 'clamp(1.2rem, 4vw, 1.6rem)',
opacity: 0.8,
maxWidth: '800px',
Expand All @@ -29,20 +34,58 @@ function HomepageHeader() {
}}>
{siteConfig.tagline}
</p>
<div style={{ marginTop: '3rem', display: 'flex', gap: '1rem', justifyContent: 'center', flexWrap: 'wrap' }}>

{/* Animated Buttons */}
<div className="animate-fade-in-up delay-2" style={{ marginTop: '3rem', display: 'flex', gap: '1rem', justifyContent: 'center', flexWrap: 'wrap' }}>
<Link
className="button button--primary button--lg"
style={{ borderRadius: '50px', padding: '0.8rem 2rem', fontWeight: 600, boxShadow: '0 10px 25px -5px rgba(139, 92, 246, 0.4)' }}
to="/docs/intro">
style={{ borderRadius: '50px', padding: '0.8rem 2rem', fontWeight: 600, boxShadow: '0 10px 25px -5px rgba(139, 92, 246, 0.4)', transition: 'transform 0.2s ease, box-shadow 0.2s ease' }}
to="/docs/intro"
onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 15px 30px -5px rgba(139, 92, 246, 0.6)'; }}
onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 10px 25px -5px rgba(139, 92, 246, 0.4)'; }}
onFocus={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 15px 30px -5px rgba(139, 92, 246, 0.6)'; }}
onBlur={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 10px 25px -5px rgba(139, 92, 246, 0.4)'; }}
>
Get Started
</Link>
<Link
className="button button--secondary button--lg"
style={{ borderRadius: '50px', padding: '0.8rem 2rem', fontWeight: 600 }}
href="https://github.com/Vaishnav88sk/claritty">
style={{ borderRadius: '50px', padding: '0.8rem 2rem', fontWeight: 600, transition: 'transform 0.2s ease' }}
href="https://github.com/Vaishnav88sk/claritty"
onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; }}
onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}
onFocus={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; }}
onBlur={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}
>
View on GitHub
</Link>
</div>

{/* Visual Demo (Terminal Mockup) */}
<div className="animate-fade-in-up delay-3" style={{ marginTop: '5rem', display: 'flex', justifyContent: 'center' }}>
<div className="animate-float" style={{
maxWidth: '900px',
width: '100%',
borderRadius: '12px',
overflow: 'hidden',
boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(139, 92, 246, 0.2)',
background: 'var(--ifm-background-surface-color)'
}}>
{/* Fake Mac Window Controls */}
<div style={{ height: '30px', background: 'rgba(0,0,0,0.2)', display: 'flex', alignItems: 'center', padding: '0 1rem', gap: '6px' }}>
<div style={{ width: '12px', height: '12px', borderRadius: '50%', background: '#FF5F56' }}></div>
<div style={{ width: '12px', height: '12px', borderRadius: '50%', background: '#FFBD2E' }}></div>
<div style={{ width: '12px', height: '12px', borderRadius: '50%', background: '#27C93F' }}></div>
</div>
{/* Terminal Image */}
<img
src="img/claritty-clarctl-1.png"
alt="Claritty CLI Terminal Interface"
style={{ width: '100%', display: 'block' }}
/>
</div>
</div>

</div>
</header>
);
Expand All @@ -58,7 +101,7 @@ function FeatureGrid() {
return (
<section style={{ padding: '4rem 0', background: 'var(--ifm-background-surface-color)' }}>
<div className="container">
<div className="row" style={{ display: 'flex', justifyContent: 'center', gap: '2rem', flexWrap: 'wrap' }}>
<div className="row animate-fade-in-up delay-4" style={{ display: 'flex', justifyContent: 'center', gap: '2rem', flexWrap: 'wrap' }}>
{features.map((f, idx) => (
<div key={idx} style={{
flex: '1 1 300px',
Expand All @@ -67,10 +110,12 @@ function FeatureGrid() {
background: 'var(--ifm-background-color)',
border: '1px solid rgba(139, 92, 246, 0.1)',
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
transition: 'transform 0.2s ease, box-shadow 0.2s ease'
transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
}}
onMouseOver={(e) => { e.currentTarget.style.transform = 'translateY(-5px)'; e.currentTarget.style.boxShadow = '0 20px 25px -5px rgba(139, 92, 246, 0.15)'; }}
onMouseOut={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)'; }}
onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-8px) scale(1.02)'; e.currentTarget.style.boxShadow = '0 20px 25px -5px rgba(139, 92, 246, 0.15), 0 0 0 1px rgba(139, 92, 246, 0.3)'; }}
onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0) scale(1)'; e.currentTarget.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'; }}
onFocus={(e) => { e.currentTarget.style.transform = 'translateY(-8px) scale(1.02)'; e.currentTarget.style.boxShadow = '0 20px 25px -5px rgba(139, 92, 246, 0.15), 0 0 0 1px rgba(139, 92, 246, 0.3)'; }}
onBlur={(e) => { e.currentTarget.style.transform = 'translateY(0) scale(1)'; e.currentTarget.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'; }}
>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
<Heading as="h3" style={{ fontSize: '1.4rem', color: 'var(--ifm-color-primary)', marginBottom: '1rem' }}>{f.title}</Heading>
<p style={{ opacity: 0.8, lineHeight: '1.6', margin: 0 }}>{f.desc}</p>
Expand All @@ -86,8 +131,11 @@ export default function Home(): ReactNode {
const {siteConfig} = useDocusaurusContext();
return (
<Layout
title={`${siteConfig.title} | AI-SRE Platform`}
description="Decentralized AI-SRE observability platform for Kubernetes. Run root cause analysis completely locally with open source LLMs.">
<Head>
<title>Claritty | AI-SRE Platform for Kubernetes</title>
<meta property="og:title" content="Claritty | AI-SRE Platform for Kubernetes" />
</Head>
<HomepageHeader />
<main>
<FeatureGrid />
Expand Down
Binary file added website/static/img/claritty-clarctl-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading