style: update website

components/HomePage/GetInvolved.tsx

@@ -7,7 +7,7 @@ const hoverClass =
 export const GetInvolved = () => (
   <section
     id="get-involved"
-    className="flex bg-[radial-gradient(circle_at_50%,#014212,black)] text-center text-white"
+    className="anchor flex bg-[radial-gradient(circle_at_50%,#014212,black)] text-center text-white"
   >
     <div className="flex flex-col gap-4 max-w-[900px] mx-auto my-16 place-items-center max-sm:mx-8">
       <div className={TEXT_MEDIUM_CLASS}>GET INVOLVED</div>

components/HomePage/Hero.tsx

@@ -3,7 +3,9 @@ import { SiteLink } from '../SiteLink';
 export const Hero = () => (
   <section className="flex bg-[url('/images/hero-bg.jpg')] bg-center bg-fixed min-h-[500px] h-[100vh] bg-cover place-items-center">
     <div className="flex flex-col gap-8 mx-auto text-center md:max-w-[600px]">
-      <h1 className="max-sm:text-5xl">Architecting Autonomy</h1>
+      <h1 className="max-sm:text-5xl animate-slide-in-right">
+        Architecting Autonomy
+      </h1>
       <span className="text-xl md:text-2xl max-w-[400px] mx-auto">
         Creating open-source frameworks for co-owned AI
       </span>

components/HomePage/Investors.tsx

@@ -2,8 +2,10 @@ import Image from 'next/image';
 import investors from 'data/investors.json';
 
 export const Investors = () => (
-  <section id="investors" className="max-w-screen-xl mx-auto my-24">
-    <h1 className="mb-8 md:mb-16 text-center max-sm:text-5xl">Investors</h1>
+  <section id="investors" className="anchor max-w-screen-xl mx-auto my-24">
+    <h1 className="mb-8 md:mb-16 text-center max-sm:text-5xl animate-slide-in-right">
+      Investors
+    </h1>
     <div className="grid md:grid-cols-3 gap-4 max-md:mx-12">
       {investors.map((logo, index) => (
         <Image

components/HomePage/LatestNews.tsx

@@ -2,9 +2,9 @@ import Link from 'next/link';
 import { News } from '../Content/News';
 
 export const LatestNews = () => (
-  <section id="news">
+  <section id="news" className="anchor">
     <div className="flex flex-col my-12">
-      <h1 className="mx-auto">News</h1>
+      <h1 className="mx-auto animate-slide-in-right">News</h1>
       <Link href="/post" className="mx-auto mb-8 text-lg underline">
         See all
       </Link>

components/HomePage/MissionStatement.tsx

@@ -1,11 +1,11 @@
 export const MissionStatement = () => (
-  <section id="mission-statement" className="bg-neutral-100">
+  <section id="mission-statement" className="anchor bg-neutral-100">
     <div className="flex flex-col divide-y divide-black gap-6 max-w-screen-2xl mx-auto px-8 lg:px-20 py-24">
-      <h2 className="lg:w-[320px] text-end max-sm:text-4xl">
+      <h2 className="lg:w-[320px] text-end max-sm:text-4xl animate-slide-in-left">
         Mission statement
       </h2>
       <div className="pt-8">
-        <div className="ml-auto md:text-2xl lg:w-[720px]">
+        <div className="ml-auto md:text-2xl lg:max-w-[720px] animate-slide-in-right overflow-hidden">
           To enable communities, organizations and countries to co-own AI
           systems, beginning with decentralized autonomous agents
         </div>

components/HomePage/Products.tsx

@@ -5,7 +5,7 @@ import products from 'data/products.json';
 export const Products = () => (
   <section
     id="products"
-    className="bg-[radial-gradient(circle_at_75%_100%,green,20%,black)]"
+    className="anchor bg-[radial-gradient(circle_at_75%_100%,green,20%,black)]"
   >
     <div className="flex flex-col place-items-center bg-[url('/images/products-bg.png')]">
       <div className={`${TEXT_MEDIUM_CLASS} mt-16 mb-8`}>PRODUCTS</div>

components/HomePage/Research.tsx

@@ -3,9 +3,9 @@ import Image from 'next/image';
 import { SiteLink } from '../SiteLink';
 
 export const Research = () => (
-  <section id="research" className="bg-neutral-200">
+  <section id="research" className="anchor bg-neutral-200">
     <div className="py-8 px-8 md:px-20 max-w-screen-2xl mx-auto">
-      <h1 className="max-sm:text-5xl mb-8">Research</h1>
+      <h1 className="max-sm:text-5xl mb-8 animate-slide-in-left">Research</h1>
       <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
         {research.map((paper) => (
           <div

components/HomePage/Team.tsx

@@ -2,9 +2,11 @@ import team from 'data/team.json';
 import Image from 'next/image';
 
 export const Team = () => (
-  <section id="team" className="bg-[#cddecc]">
+  <section id="team" className="anchor bg-[#cddecc]">
     <div className="max-w-screen-2xl mx-auto">
-      <h1 className="pt-10 text-center max-sm:text-5xl">Team</h1>
+      <h1 className="pt-10 text-center max-sm:text-5xl animate-slide-in-right">
+        Team
+      </h1>
       <div className="grid grid-cols-1 md:grid-cols-3 overflow-auto flex-wrap gap-x-8 xl:gap-x-16 px-12">
         {team.map((member, index) => {
           let finalClass = '';

pages/post/index.tsx

@@ -7,7 +7,7 @@ const NewsPage = () => (
     <Meta />
     <section className="mb-12">
       <div className="bg-neutral-200 flex h-[60vh] -w-full place-content-center">
-        <h1 className="my-auto text-[90px]">News</h1>
+        <h1 className="my-auto text-[90px] animate-slide-in-right">News</h1>
       </div>
 
       <News isMainPage={true} />

styles/globals.css

@@ -13,6 +13,10 @@ html {
   scroll-behavior: smooth;
 }
 
+.anchor {
+  scroll-margin-top: 100px;
+}
+
 :root {
   --background: #ffffff;
   --foreground: #171717;

tailwind.config.ts

@@ -22,6 +22,32 @@ export default {
         helvetica: ["'Helvetica Light'", 'sans-serif'],
         avenir: ["'Avenir LT'", 'sans-serif'],
       },
+      animation: {
+        'slide-in-right': 'slideInRight 1.5s ease-out',
+        'slide-in-left': 'slideInLeft 1.5s ease-out',
+      },
+      keyframes: {
+        slideInRight: {
+          '0%': {
+            transform: 'translateX(50%)',
+            opacity: '0',
+          },
+          '100%': {
+            transform: 'translateX(0)',
+            opacity: '1',
+          },
+        },
+        slideInLeft: {
+          '0%': {
+            transform: 'translateX(-50%)',
+            opacity: '0',
+          },
+          '100%': {
+            transform: 'translateX(0)',
+            opacity: '1',
+          },
+        },
+      },
     },
   },
   plugins: [daisyui],