From 2336fceab4d693c9a584f93088d799f22293c290 Mon Sep 17 00:00:00 2001
From: ryohey <info@codingcafe.jp>
Date: Sat, 5 Oct 2024 11:42:51 +0900
Subject: [PATCH 1/3] Fix layout

---
 static/src/app/page.tsx                 | 37 +++++++++++++++----------
 static/src/app/privacy/page.tsx         | 16 ++++++++---
 static/src/components/Footer/Footer.tsx | 13 +++++++--
 3 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/static/src/app/page.tsx b/static/src/app/page.tsx
index 498f8223..c6dea9be 100644
--- a/static/src/app/page.tsx
+++ b/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>
+  `,
+        }}
+      />
     </>
   )
 }
diff --git a/static/src/app/privacy/page.tsx b/static/src/app/privacy/page.tsx
index 264779a5..9ff84bfe 100644
--- a/static/src/app/privacy/page.tsx
+++ b/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 />
     </>
   )
 }
diff --git a/static/src/components/Footer/Footer.tsx b/static/src/components/Footer/Footer.tsx
index 83fa5235..2e8a147b 100644
--- a/static/src/components/Footer/Footer.tsx
+++ b/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>

From 4f88f3d9bc09c1e319112e96d4211b568e0e53e4 Mon Sep 17 00:00:00 2001
From: ryohey <info@codingcafe.jp>
Date: Sat, 5 Oct 2024 11:52:51 +0900
Subject: [PATCH 2/3] Grid FeatureList

---
 static/src/components/FeatureList/Feature.tsx | 37 +++++++++----------
 .../components/FeatureList/FeatureList.tsx    | 11 +++++-
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/static/src/components/FeatureList/Feature.tsx b/static/src/components/FeatureList/Feature.tsx
index f405a8c2..481fd8de 100644
--- a/static/src/components/FeatureList/Feature.tsx
+++ b/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>
diff --git a/static/src/components/FeatureList/FeatureList.tsx b/static/src/components/FeatureList/FeatureList.tsx
index 870b9f46..c46b350a 100644
--- a/static/src/components/FeatureList/FeatureList.tsx
+++ b/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>
   )
 }

From 5b554e2a3ba8f6c24bef36f18487111db5d7a4c3 Mon Sep 17 00:00:00 2001
From: ryohey <info@codingcafe.jp>
Date: Sat, 5 Oct 2024 12:04:45 +0900
Subject: [PATCH 3/3] Add discord icon

---
 .../src/components/Navigation/Navigation.tsx  | 27 ++++++++++++++++---
 .../Navigation/images/discord-icon.svg        |  3 +++
 2 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 static/src/components/Navigation/images/discord-icon.svg

diff --git a/static/src/components/Navigation/Navigation.tsx b/static/src/components/Navigation/Navigation.tsx
index f6ce2961..96ab50d2 100644
--- a/static/src/components/Navigation/Navigation.tsx
+++ b/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>
diff --git a/static/src/components/Navigation/images/discord-icon.svg b/static/src/components/Navigation/images/discord-icon.svg
new file mode 100644
index 00000000..82a3e438
--- /dev/null
+++ b/static/src/components/Navigation/images/discord-icon.svg
@@ -0,0 +1,3 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M256 0C397.385 0 512 114.615 512 256C512 397.385 397.385 512 256 512C114.615 512 0 397.385 0 256C0 114.615 114.615 0 256 0ZM360.932 160.621C341.063 151.533 320.091 145.084 298.549 141.439C295.614 146.711 292.955 152.133 290.583 157.682C279.124 155.953 267.552 155.083 255.964 155.079C244.395 155.079 232.769 155.958 221.342 157.659C219.008 152.15 216.298 146.688 213.356 141.436C191.813 145.117 170.839 151.578 150.959 160.658C111.476 219.066 100.776 276.015 106.126 332.155C129.245 349.232 155.12 362.219 182.628 370.553C188.797 362.226 194.323 353.361 199.014 344.136C190.063 340.8 181.425 336.678 173.201 331.817C175.365 330.248 177.482 328.631 179.526 327.061C203.438 338.292 229.565 344.149 255.999 344.149C282.435 344.149 308.561 338.292 332.474 327.06C334.543 328.748 336.66 330.365 338.799 331.815C330.559 336.685 321.906 340.818 312.939 344.167C317.647 353.412 323.129 362.243 329.326 370.564C356.858 362.256 382.754 349.269 405.879 332.172L405.873 332.179C412.15 267.075 395.148 210.649 360.932 160.621ZM205.78 297.63C190.872 297.63 178.554 284.1 178.554 267.455C178.554 250.81 190.443 237.162 205.732 237.162C221.022 237.162 233.243 250.81 232.982 267.455C232.72 284.1 220.974 297.63 205.78 297.63ZM306.219 297.63C291.286 297.63 279.017 284.1 279.017 267.455C279.017 250.81 290.906 237.162 306.219 237.162C321.532 237.162 333.659 250.81 333.397 267.455C333.136 284.1 321.413 297.63 306.219 297.63Z" fill="white"/>
+</svg>