feat: full landing page redesign with GSAP animations and dark docs t…#9
Merged
vitabaks merged 24 commits intoMay 8, 2026
Merged
Conversation
…heme - Replace old Costs/Features sections with 12 new sections: Hero, About, Problem, CloudProviders, Video, WhatYouGet, WhatIsAutobase, Explain, HowItWorks, Featured, Sponsors, Pricing, Comparison - Apple Liquid Glass navbar with hideOnScroll and mobile sidebar glass - GSAP scroll reveal with blur/fade-up (expo.out) on every section - Hero headline: PostgreSQL scales in, "without chaos" types with cursor - Pricing section: 4 cards, hover border reveal, notes row, Stripe badge - Sponsors: GSAP infinite marquee at 80px/s, pause/drag-to-scrub - Responsive section spacing system via --section-pt/--section-pb vars (120px → 80px → 60px across breakpoints) - Image lazy loading + decoding=async on all below-fold images - Docs dark theme with orange brand colors replacing hardcoded blues; --ifm-color-primary, --ifm-link-color, --ifm-tabs-color-active all set to var(--color-primary) on docs pages - Add gsap, bootstrap, swiper dependencies Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Member
|
@Erneydaiquiri Hi! The build failed, please take a look at this https://github.com/autobase-tech/docs/actions/runs/25548668716/job/74998279950#step:6:1 |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR redesigns the marketing landing experience and site chrome for the Docusaurus site, introducing a new multi-section homepage, custom Navbar/Footer, GSAP-based scroll animations, and refreshed styling (including a docs-focused dark theme override).
Changes:
- Replaces the old homepage sections (and legacy Costs/Features) with a new composed homepage made of multiple new section components.
- Adds custom themed
Navbar/Footerimplementations plus substantial global styling updates (fonts, spacing system, docs theme overrides). - Introduces new assets and dependencies (notably GSAP, Bootstrap grid, Swiper) to support the redesigned UI/animations.
Reviewed changes
Copilot reviewed 39 out of 86 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
| static/img/whatyouget/icon-check.svg | New SVG icon asset for “What you get” list items. |
| static/img/whatisautobase/icon-check.svg | New SVG icon asset for “What is Autobase” list items. |
| static/img/video/icon-deploy.svg | New SVG icon asset for Video section feature items. |
| static/img/video/icon-control.svg | New SVG icon asset for Video section feature items. |
| static/img/video/icon-architecture.svg | New SVG icon asset for Video section feature items. |
| static/img/problem/warning-icon.svg | New SVG icon asset for Problem section list items. |
| static/img/pricing/icon-info.svg | New SVG icon asset for Pricing notes row. |
| static/img/pricing/icon-check.svg | New SVG icon asset for Pricing feature lists. |
| static/img/navbar/telegram.svg | New SVG icon asset for Navbar social link. |
| static/img/navbar/logo-icon.svg | New SVG logo asset for Navbar brand. |
| static/img/navbar/github.svg | New SVG icon asset for Navbar GitHub link. |
| static/img/howitworks/icon-warn.svg | New SVG icon asset for How-it-works comparison table. |
| static/img/howitworks/icon-cross.svg | New SVG icon asset for How-it-works comparison table. |
| static/img/howitworks/icon-check.svg | New SVG icon asset for How-it-works comparison table. |
| static/img/howitworks/icon-check-alt.svg | New SVG icon asset variant for How-it-works comparison table. |
| static/img/hero/telegram.svg | New SVG icon asset for Hero CTA. |
| static/img/hero/grid-dots-sm.svg | New decorative SVG asset for Hero background. |
| static/img/hero/grid-dots-lg.svg | New decorative SVG asset for Hero background. |
| static/img/footer/logo-icon.svg | New SVG logo asset for Footer brand. |
| static/img/footer/icon-x.svg | New SVG icon asset for Footer social link. |
| static/img/footer/icon-telegram.svg | New SVG icon asset for Footer CTA. |
| static/img/footer/icon-email.svg | New SVG icon asset for Footer contact link. |
| static/img/featured/icon-star.svg | New SVG icon asset for Featured stats. |
| static/img/featured/icon-production.svg | New SVG icon asset for Featured trust card. |
| static/img/featured/icon-github-sm.svg | New SVG icon asset for Featured stats. |
| static/img/featured/icon-github-lg.svg | New SVG icon asset for Featured trust card. |
| static/img/featured/icon-docker.svg | New SVG icon asset for Featured stats. |
| static/img/featured/icon-ansible.svg | New SVG icon asset for Featured stats. |
| static/img/about/arrow-next.svg | New SVG icon asset for About section arrows. |
| src/theme/Navbar/styles.module.css | New custom Navbar styling (glass/dark aesthetic, responsive layout). |
| src/theme/Navbar/index.js | New custom Navbar component markup/links. |
| src/theme/Footer/styles.module.css | New custom Footer styling and layout. |
| src/theme/Footer/index.js | New custom Footer component and navigation/social links. |
| src/pages/pricing.js | Adds a dedicated Pricing page rendering the Pricing section component. |
| src/pages/index.js | Replaces old homepage with new section composition and adds GSAP scroll reveal + navbar scroll class behavior. |
| src/css/custom.css | Global styling overhaul: fonts, spacing variables, liquid-glass navbar styles, docs-page dark overrides. |
| src/components/WhatYouGetSection/styles.module.css | Styling for new “What you get” section. |
| src/components/WhatYouGetSection/index.js | New “What you get” section component. |
| src/components/WhatIsAutobaseSection/styles.module.css | Styling for new “What is Autobase” section. |
| src/components/WhatIsAutobaseSection/index.js | New “What is Autobase” section component. |
| src/components/VideoSection/styles.module.css | Styling for new Video section. |
| src/components/VideoSection/index.js | New Video section component (YouTube embed + feature items). |
| src/components/Sponsors/styles.module.css | Styling for new animated Sponsors marquee. |
| src/components/Sponsors/index.js | Replaces Sponsors layout with GSAP-driven infinite marquee + drag/pause behavior. |
| src/components/ProblemSection/styles.module.css | Styling for new Problem section card layout. |
| src/components/ProblemSection/index.js | New Problem section component. |
| src/components/PricingSection/styles.module.css | Styling for new Pricing cards layout. |
| src/components/PricingSection/index.js | New Pricing section component (cards + billing toggle UI + notes row). |
| src/components/HowItWorksSection/styles.module.css | Styling for new How-it-works tabs + comparison table. |
| src/components/HowItWorksSection/index.js | New How-it-works section component. |
| src/components/HeroSection/styles.module.css | Styling for new Hero section (typewriter cursor, layout, decorations). |
| src/components/HeroSection/index.js | New Hero section component with GSAP entrance + typewriter effect. |
| src/components/Features/styles.module.css | Removes legacy Features styling. |
| src/components/Features/index.js | Removes legacy Features component. |
| src/components/FeaturedSection/styles.module.css | Styling for new Featured section (stats, cards, placeholder). |
| src/components/FeaturedSection/index.js | New Featured section component. |
| src/components/ExplainSection/styles.module.css | Styling for new Explain section card layout. |
| src/components/ExplainSection/index.js | New Explain section component (sprite-based icons). |
| src/components/Costs/styles.module.css | Removes legacy Costs styling. |
| src/components/Costs/index.js | Removes legacy Costs component. |
| src/components/ComparisonSection/styles.module.css | Styling for new Comparison section. |
| src/components/ComparisonSection/index.js | New Comparison section component with GSAP-triggered result animation. |
| src/components/CloudProviders/styles.module.css | Updates CloudProviders styling to match new design system. |
| src/components/CloudProviders/index.js | Updates CloudProviders markup (adds lazy-loading to provider logos + new heading). |
| src/components/AboutSection/styles.module.css | Styling for new About section. |
| src/components/AboutSection/index.js | New About section component. |
| package.json | Adds dependencies for GSAP, Bootstrap, Swiper. |
| docusaurus.config.js | Enables hideOnScroll for the navbar and removes config footer (using theme override instead). |
| .gitignore | Ignores .mcp.json and .claude/. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Standardize branding and correct a spelling mistake: change "Github" to "GitHub" in FeaturedSection and Footer, and fix "infrastracture" to "infrastructure" in PricingSection to improve copy consistency.
Change the 'Support Packages' footer link from /support to /docs/support to point users to the updated documentation path (reflects docs URL restructure).
Update the Footer nav group so the 'Introduction' link points to the docs root ('/docs/') instead of '/docs/intro', aligning the footer with the current docs index route and preventing an outdated link.
Make custom Navbar and Footer render only on the homepage: add useLocation/useBaseUrl, normalizePath helper, and fall back to the original theme components for non-home pages. Refactor custom.css: consolidate and rename CSS variables (typography tokens, colors, font-weights/sizes), simplify and scope navbar styles, adjust dark background, and remove large legacy/dark-theme rule blocks to streamline styling for the landing page.
Read theme config and enable hide-on-scroll behavior for the homepage navbar. Adds useThemeConfig and useHideableNavbar to conditionally attach a navbarRef and toggle visibility classes (navbarHideable, navbarHidden) when navbar.hideOnScroll is enabled and the current page is the homepage. Non-homepage routes continue to render the original navbar. CSS adds a smooth transform transition and translates the navbar off-screen when hidden.
Remove the client-side navbar transparency effect and scroll listener from the home page, eliminating the useEffect that toggled navbar classes. Update Navbar CSS to use a darker static background (rgba(0,0,0,0.96)), remove the backdrop-filter, and tighten spacing — reduce overall navbar and inner heights, scale down logo/icon sizes, and tweak CTA dimensions. Also add responsive size adjustments for ≤768px to better fit mobile. These changes simplify behavior and refine visual rhythm across breakpoints.
Reorders the CloudProviders component in the Home page to render after FeaturedSection, adjusting the main layout section order for improved content flow.
Replace the SVG/video placeholder with an embedded demo GIF (/img/autobase_create_cluster_demo.gif) in HowItWorksSection. Update styles: add .demoPreview (full-bleed, object-fit: cover), enable overflow: hidden on the placeholder, and comment out the old play icon/label markup and styles. This surfaces an actual demo preview instead of a static placeholder.
Replace the placeholder graphic with an inline SVG-based Git clone chart. Adds clone data, layout math (width/height/padding), helpers to map data to SVG coordinates, area/line plot, grid/axis ticks, a highlighted data point with tooltip and total count. Introduces corresponding styles for the chart card, grid lines, axes, area/line, highlights, tooltip, and responsive adjustments.
Add getDisplayedPrice and getBillingLabel helpers in PricingSection to compute the shown price and billing copy from the monthly state. Replace direct uses of plan.price and plan.billing with these functions so the UI shows either the monthly amount or the computed yearly amount (price * 11) and the appropriate billing label.
Replace placeholder '#' hrefs in pricing plans with real targets (Free -> GitHub repo, others -> /docs). Add target="_blank" and rel="noreferrer" to CTA anchors so links open in a new tab and reduce referrer leakage.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
…heme