Add animations for page transitions

assets/styles/antd-custom.less

@@ -15,6 +15,12 @@ html {
   --brand-tertiary: @brand-tertiary;
 }
 
+body {
+  // Support animations
+  background: @brand-secondary;
+  overflow-x: hidden;
+}
+
 //
 // Theme
 //

components/layout/base-layout.tsx

@@ -14,7 +14,7 @@ interface Props {
 const BaseLayout = ({ children, showSearch, stickyHeader }: Props) => (
   <Layout style={{ minHeight: '100vh' }}>
     <NavBar showSearch={showSearch} stickyHeader={stickyHeader} />
-    <Content style={{ paddingTop: stickyHeader ? '64px' : 0 }}>{children}</Content>
+    <Content>{children}</Content>
     <Footer />
   </Layout>
 );

components/layout/header/nav-bar.module.scss

@@ -3,7 +3,8 @@
   z-index: 50; // Stay above ant components
 
   &.sticky {
-    position: fixed;
+    position: sticky;
+    top: 0;
   }
 
   .brand {

components/pages/home/section/opening-section.tsx

@@ -18,18 +18,18 @@ const OpeningSection = () => {
 
   return (
     <Section ref={ref} className={styles.openingSection}>
-      <FadeIntoView>
+      <FadeIntoView delay={100}>
         <GameCiLogo className={styles.logo} />
       </FadeIntoView>
 
-      <FadeIntoView delay={250}>
+      <FadeIntoView delay={300}>
         <Title level={1} className={styles.title}>
           The fastest and <strong>easiest</strong> way to automatically test and build your game
           projects
         </Title>
       </FadeIntoView>
 
-      <FadeIntoView delay={500}>
+      <FadeIntoView delay={750}>
         {/* eslint-disable-next-line jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
         <a onClick={scrollToNextSection} style={{ marginTop: '15vh', fontSize: '7vmin' }}>
           ⇩

components/pages/home/section/the-perks-section.tsx

@@ -88,7 +88,7 @@ const cards = [
 ];
 
 const ThePerksSection = () => {
-  const column = { xs: 24, sm: 24, md: 12, lg: 12, xl: 8, xxl: 8 };
+  const column = { xs: 24, sm: 24, md: 12, lg: 12, xl: 8, xxl: 6 };
   return (
     <Section className={styles.thePerksSection}>
       <Title level={2} className={styles.title}>
@@ -97,7 +97,7 @@ const ThePerksSection = () => {
 
       <Row gutter={[24, 16]} align="stretch" justify="space-around">
         {cards.map((card, index) => (
-          <Col {...column}>
+          <Col {...column} key={card.title}>
             <FadeIntoView className={styles.cardAnimator} delay={index * 100}>
               <Card
                 className={styles.card}

core/routing/animated-page-transition.tsx

@@ -0,0 +1,29 @@
+import { useTopLevelRoute } from '@/core/hooks/use-top-level-route';
+import React from 'react';
+import { animated, useTransition, config } from 'react-spring';
+
+interface PageTransitionProps {
+  children: any;
+}
+
+export const AnimatedPageTransition = ({ children }: PageTransitionProps) => {
+  const topLevelRoute = useTopLevelRoute();
+
+  const transitions = useTransition(topLevelRoute, {
+    from: { opacity: 0, transform: 'translate3d(50%, 0%, 0px)' },
+    enter: { opacity: 1, transform: 'translate3d(0%, 0px, 0px)' },
+    config: config.default,
+  });
+
+  return (
+    <>
+      {transitions((animatedStyles, item) => {
+        return (
+          <animated.main key={item} style={{ willChange: 'opacity, transform', ...animatedStyles }}>
+            {children(item)}
+          </animated.main>
+        );
+      })}
+    </>
+  );
+};

pages/_app.tsx

@@ -10,19 +10,28 @@ import { configureStore } from '@reduxjs/toolkit';
 import { reducer } from 'logic';
 import { FirebaseAppProvider } from 'reactfire';
 import config from 'core/config';
+import { AnimatedPageTransition } from '@/core/routing/animated-page-transition';
 
 import '../assets/styles/antd-custom.less';
 import 'highlight.js/styles/dracula.css';
 
 const store = configureStore({ reducer });
 
-export default function App({ Component, pageProps }: AppProps) {
+export default function App({ Component: SsrComponent, pageProps: ssrPageProps }: AppProps) {
   return (
     <Provider store={store}>
       <FirebaseAppProvider firebaseConfig={config.firebase}>
         <InstantSearch searchClient={searchClient} indexName={searchIndex}>
           <IconContext.Provider value={{ className: 'anticon' }}>
-            <Component {...pageProps} />
+            <AnimatedPageTransition>
+              {({ Component, pageProps }) => {
+                return Component ? (
+                  <Component {...pageProps} />
+                ) : (
+                  <SsrComponent {...ssrPageProps} />
+                );
+              }}
+            </AnimatedPageTransition>
           </IconContext.Provider>
         </InstantSearch>
       </FirebaseAppProvider>