Update landing

static/src/app/page.tsx

@@ -1,6 +1,7 @@
 import { styled } from "@kuma-ui/core"
 import { Metadata } from "next"
 import { FeatureList } from "../components/FeatureList/FeatureList"
+import { Footer } from "../components/Footer/Footer"
 import Localized from "../components/Localized"
 import { Navigation } from "../components/Navigation/Navigation"
 import githubIcon from "./images/github-icon.svg"
@@ -225,6 +226,12 @@ const SupportRow = styled.div`
   }
 `
 
+const CarbonAd = styled.div`
+  position: fixed;
+  right: 0;
+  bottom: 0;
+`
+
 export default function Home() {
   return (
     <>
@@ -283,20 +290,6 @@ export default function Home() {
             </SectionTitle>
             <FeatureList />
           </div>
-
-          <div
-            className="right"
-            dangerouslySetInnerHTML={{
-              __html: `
-                <script
-                  async
-                  type="text/javascript"
-                  src="https://cdn.carbonads.com/carbon.js?serve=CESI52QY&placement=signalvercelapp"
-                  id="_carbonads_js"
-                ></script>
-            `,
-            }}
-          />
         </SectionContent>
       </Features>
 
@@ -345,6 +338,22 @@ export default function Home() {
           </SupportRow>
         </SectionContent>
       </section>
+
+      <Footer />
+
+      <CarbonAd
+        className="right"
+        dangerouslySetInnerHTML={{
+          __html: `
+      <script
+        async
+        type="text/javascript"
+        src="https://cdn.carbonads.com/carbon.js?serve=CESI52QY&placement=signalvercelapp"
+        id="_carbonads_js"
+      ></script>
+  `,
+        }}
+      />
     </>
   )
 }

static/src/app/privacy/page.tsx

@@ -1,5 +1,6 @@
 import { styled } from "@kuma-ui/core"
 import { Metadata } from "next"
+import { Footer } from "../../components/Footer/Footer"
 import Localized from "../../components/Localized"
 import { Navigation } from "../../components/Navigation/Navigation"
 import { LocaleDate } from "./LocaleDate"
@@ -22,6 +23,11 @@ const Section = styled.section`
   margin: 3rem 0;
 `
 
+const SectionTitle = styled.h2`
+  font-size: 1.25rem;
+  margin-top: 2rem;
+`
+
 const SectionContent = styled.div`
   margin-top: 1rem;
 `
@@ -39,9 +45,9 @@ export default function Page() {
         </p>
 
         <Section>
-          <h2>
+          <SectionTitle>
             <Localized name="privacy-data-title" />
-          </h2>
+          </SectionTitle>
           <SectionContent>
             <p>
               <Localized name="privacy-data-description" />
@@ -50,9 +56,9 @@ export default function Page() {
         </Section>
 
         <Section>
-          <h2>
+          <SectionTitle>
             <Localized name="privacy-analytics-title" />
-          </h2>
+          </SectionTitle>
           <SectionContent>
             <p>
               <Localized name="privacy-analytics-description" />
@@ -65,6 +71,8 @@ export default function Page() {
           <LocaleDate date={new Date("2024/05/03")} />
         </p>
       </Content>
+
+      <Footer />
     </>
   )
 }

static/src/components/FeatureList/Feature.tsx

@@ -7,25 +7,8 @@ const FeatureWrapper = styled.div`
   background: #ffffff0d;
   padding: 2rem;
   border-radius: 1rem;
-  margin-right: 2rem;
-  margin-bottom: 2rem;
   box-shadow: 0 1rem 3rem 0 #0000000e;
 
-  .icon {
-    display: inline-flex;
-    width: 4rem;
-    border-radius: 2rem;
-    height: 4rem;
-    overflow: hidden;
-    background: white;
-    align-items: center;
-    justify-content: center;
-
-    img {
-      width: 2rem;
-    }
-  }
-
   .title {
     font-size: 1.1rem;
     font-weight: bold;
@@ -42,6 +25,22 @@ const FeatureWrapper = styled.div`
   }
 `
 
+const Icon = styled.div`
+  display: inline-flex;
+  width: 4rem;
+  border-radius: 2rem;
+  height: 4rem;
+  overflow: hidden;
+  background: white;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0.5rem 3rem 0 #0000000e;
+
+  img {
+    width: 2rem;
+  }
+`
+
 interface FeatureProps {
   backgroundColor: string
   iconBackgroundColor: string
@@ -61,9 +60,9 @@ export const Feature: FC<FeatureProps> = ({
 }) => {
   return (
     <FeatureWrapper style={{ background: backgroundColor }}>
-      <div className="icon" style={{ background: iconBackgroundColor }}>
+      <Icon style={{ background: iconBackgroundColor }}>
         <img src={iconSrc} style={{ width: iconWidth }} />
-      </div>
+      </Icon>
       <div className="title">
         <Localized name={titleKey} />
       </div>

static/src/components/FeatureList/FeatureList.tsx

@@ -1,3 +1,4 @@
+import { styled } from "@kuma-ui/core"
 import { FC } from "react"
 import { Feature } from "./Feature"
 import chartIcon from "./images/iconmonstr-chart-21.svg"
@@ -7,9 +8,15 @@ import soundFontIcon from "./images/soundfont-icon.svg"
 import synthesizerKeyboard from "./images/synthesizer-keyboard-svgrepo-com.svg"
 import wavFile from "./images/wav-file.svg"
 
+const Container = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  gap: 2rem;
+`
+
 export const FeatureList: FC = () => {
   return (
-    <>
+    <Container>
       <Feature
         backgroundColor="#3c2fd740"
         iconBackgroundColor="#3c2fd7"
@@ -55,6 +62,6 @@ export const FeatureList: FC = () => {
         titleKey="feature-pwa"
         descriptionKey="feature-pwa-description"
       />
-    </>
+    </Container>
   )
 }

static/src/components/Footer/Footer.tsx

@@ -2,6 +2,8 @@ import { styled } from "@kuma-ui/core"
 import Localized from "../Localized"
 
 const Content = styled.div`
+  display: flex;
+  gap: 1rem;
   padding: 2rem 0;
   display: flex;
   justify-content: center;
@@ -12,16 +14,23 @@ const Content = styled.div`
 `
 
 const Link = styled.a`
-  font-size: 0.9rem;
+  font-size: 0.8rem;
   color: white;
-  opacity: 0.6;
+  opacity: 0.5;
   text-decoration: none;
+
+  &:hover {
+    opacity: 1;
+  }
 `
 
 export const Footer = () => {
   return (
     <footer>
       <Content>
+        <Link href="/support">
+          <Localized name="support" />
+        </Link>
         <Link href="/privacy">
           <Localized name="privacy-policy-title" />
         </Link>

static/src/components/Navigation/Navigation.tsx

@@ -1,5 +1,6 @@
 import { styled } from "@kuma-ui/core"
 import Localized from "../Localized"
+import discordIcon from "./images/discord-icon.svg"
 import githubIcon from "./images/github-icon.svg"
 import logoWhite from "./images/logo-white.svg"
 
@@ -32,12 +33,27 @@ const LogoLink = styled.a`
 const Menu = styled.div`
   display: flex;
   align-items: center;
-  gap: 2rem;
+  gap: 1rem;
 
   & > a {
     color: white;
     text-decoration: none;
     font-size: 0.9rem;
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+`
+
+const IconLink = styled.a`
+  display: inline-flex;
+  align-items: center;
+
+  img {
+    width: 1.5rem;
+    height: 1.5rem;
+    fill: white;
   }
 `
 
@@ -49,12 +65,15 @@ export const Navigation = () => {
           <img src={logoWhite.src} />
         </LogoLink>
         <Menu>
-          <a href="/support">
+          <a href="/support" style={{ marginRight: "1rem" }}>
             <Localized name="support" />
           </a>
-          <a href="https://github.com/ryohey/signal/" id="github-link">
+          <IconLink href="https://discord.com/invite/XQxzNdDJse">
+            <img src={discordIcon.src} />
+          </IconLink>
+          <IconLink href="https://github.com/ryohey/signal/" id="github-link">
             <img src={githubIcon.src} />
-          </a>
+          </IconLink>
         </Menu>
       </Content>
     </Header>