Change font style of intro page

samchon · Jan 24, 2024 · e52ed0d · e52ed0d
1 parent e5f3557
commit e52ed0d
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 70 deletions.
diff --git a/website/public/sitemap-0.xml b/website/public/sitemap-0.xml
@@ -1,23 +1,23 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://typia.io/</loc><lastmod>2024-01-24T13:18:53.379Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://typia.io/docs/</loc><lastmod>2024-01-24T13:18:53.380Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://typia.io/docs/json/parse/</loc><lastmod>2024-01-24T13:18:53.380Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://typia.io/docs/json/schema/</loc><lastmod>2024-01-24T13:18:53.380Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://typia.io/docs/json/stringify/</loc><lastmod>2024-01-24T13:18:53.380Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://typia.io/docs/misc/</loc><lastmod>2024-01-24T13:18:53.380Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://typia.io/docs/protobuf/decode/</loc><lastmod>2024-01-24T13:18:53.380Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://typia.io/docs/protobuf/encode/</loc><lastmod>2024-01-24T13:18:53.380Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://typia.io/docs/protobuf/message/</loc><lastmod>2024-01-24T13:18:53.380Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://typia.io/docs/pure/</loc><lastmod>2024-01-24T13:18:53.380Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://typia.io/docs/random/</loc><lastmod>2024-01-24T13:18:53.380Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://typia.io/docs/setup/</loc><lastmod>2024-01-24T13:18:53.380Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://typia.io/docs/utilization/nestjs/</loc><lastmod>2024-01-24T13:18:53.380Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://typia.io/docs/utilization/prisma/</loc><lastmod>2024-01-24T13:18:53.380Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://typia.io/docs/utilization/trpc/</loc><lastmod>2024-01-24T13:18:53.380Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://typia.io/docs/validators/assert/</loc><lastmod>2024-01-24T13:18:53.380Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://typia.io/docs/validators/is/</loc><lastmod>2024-01-24T13:18:53.380Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://typia.io/docs/validators/tags/</loc><lastmod>2024-01-24T13:18:53.380Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://typia.io/docs/validators/validate/</loc><lastmod>2024-01-24T13:18:53.380Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://typia.io/playground/</loc><lastmod>2024-01-24T13:18:53.380Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://typia.io/</loc><lastmod>2024-01-24T15:59:46.238Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://typia.io/docs/</loc><lastmod>2024-01-24T15:59:46.239Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://typia.io/docs/json/parse/</loc><lastmod>2024-01-24T15:59:46.239Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://typia.io/docs/json/schema/</loc><lastmod>2024-01-24T15:59:46.239Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://typia.io/docs/json/stringify/</loc><lastmod>2024-01-24T15:59:46.239Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://typia.io/docs/misc/</loc><lastmod>2024-01-24T15:59:46.239Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://typia.io/docs/protobuf/decode/</loc><lastmod>2024-01-24T15:59:46.239Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://typia.io/docs/protobuf/encode/</loc><lastmod>2024-01-24T15:59:46.239Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://typia.io/docs/protobuf/message/</loc><lastmod>2024-01-24T15:59:46.239Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://typia.io/docs/pure/</loc><lastmod>2024-01-24T15:59:46.239Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://typia.io/docs/random/</loc><lastmod>2024-01-24T15:59:46.239Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://typia.io/docs/setup/</loc><lastmod>2024-01-24T15:59:46.239Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://typia.io/docs/utilization/nestjs/</loc><lastmod>2024-01-24T15:59:46.239Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://typia.io/docs/utilization/prisma/</loc><lastmod>2024-01-24T15:59:46.239Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://typia.io/docs/utilization/trpc/</loc><lastmod>2024-01-24T15:59:46.239Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://typia.io/docs/validators/assert/</loc><lastmod>2024-01-24T15:59:46.239Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://typia.io/docs/validators/is/</loc><lastmod>2024-01-24T15:59:46.239Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://typia.io/docs/validators/tags/</loc><lastmod>2024-01-24T15:59:46.239Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://typia.io/docs/validators/validate/</loc><lastmod>2024-01-24T15:59:46.239Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://typia.io/playground/</loc><lastmod>2024-01-24T15:59:46.239Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
 </urlset>
diff --git a/website/src/components/home/HomeCodeBlock.tsx b/website/src/components/home/HomeCodeBlock.tsx
@@ -7,23 +7,24 @@ const HomeCodeBlock = (props: {
   namespace?: string;
   method: string;
   color?: string;
+  inputColor?: string;
 }) => (
   <React.Fragment>
     <span style={{ color: BRIGHT_BLUE }}>typia</span>
-    <span style={{ color: "gray" }}>{"."}</span>
+    <span style={{ color: props.inputColor ?? "gray" }}>{"."}</span>
     {props.namespace ? (
       <React.Fragment>
         <span style={{ color: BRIGHT_BLUE }}>{props.namespace}</span>
-        <span style={{ color: "gray" }}>{"."}</span>
+        <span style={{ color: props.inputColor ?? "gray" }}>{"."}</span>
       </React.Fragment>
     ) : null}
     <span style={{ color: props?.color ?? "yellow" }}>{props.method}</span>
     <span style={{ color: BRIGHT_BLUE }}>{"<"}</span>
     <span style={{ color: CYAN }}>T</span>
     <span style={{ color: BRIGHT_BLUE }}>{">("}</span>
-    <span style={{ color: "gray" }}>{"input"}</span>
+    <span style={{ color: props.inputColor ?? "gray" }}>{"input"}</span>
     <span style={{ color: BRIGHT_BLUE }}>{")"}</span>
-    <span style={{ color: "gray" }}>{";"}</span>
+    <span style={{ color: props.inputColor ?? "gray" }}>{";"}</span>
   </React.Fragment>
 );
 export default HomeCodeBlock;
diff --git a/website/src/movies/home/HomeHeroMovie.tsx b/website/src/movies/home/HomeHeroMovie.tsx
@@ -2,10 +2,33 @@ import ComputerIcon from "@mui/icons-material/Computer";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import MenuBookIcon from "@mui/icons-material/MenuBook";
 import { Button, Grid, Typography } from "@mui/material";
+import { ReactNode } from "react";
 
 import HomeCodeBlock from "../../components/home/HomeCodeBlock";
 import ProductHeroLayout from "../../components/home/ProductHeroLayout";
 
+const QuickButton = (props: {
+  title: string;
+  href: string;
+  icon: ReactNode;
+  color: "info" | "warning" | "success";
+}) => (
+  <Grid item xs={12} md={4}>
+    <Button
+      color={props.color}
+      variant="outlined"
+      size="large"
+      component="a"
+      href={props.href}
+      startIcon={props.icon}
+      fullWidth
+      style={{ fontFamily: "unset", fontWeight: "bold" }}
+    >
+      {props.title}
+    </Button>
+  </Grid>
+);
+
 const HomeHeroMovie = () => (
   <ProductHeroLayout
     sxBackground={{
@@ -14,65 +37,54 @@ const HomeHeroMovie = () => (
       backgroundPosition: "center",
     }}
   >
-    <Typography color="inherit" align="center" variant="h3">
+    <Typography
+      color="inherit"
+      align="center"
+      variant="h2"
+      fontFamily="fantasy"
+    >
       One Line Magic
     </Typography>
     <Typography
       color="inherit"
       align="center"
-      variant="h6"
+      variant="h5"
+      fontFamily="serif"
       sx={{ mb: 4, mt: { xs: 4, sm: 10 } }}
     >
       No extra schema required.
       <br />
       <br />
       Just fine with pure TypeScript type.
-      <br />
-      <br />
-      <HomeCodeBlock method="assert" />
     </Typography>
     <br />
     <br />
+    <Typography align="center" variant="h5" fontFamily="cursive">
+      <HomeCodeBlock method="assert" inputColor="#CFCFCF" />
+    </Typography>
+    <br />
+    <br />
+    <br />
+    <br />
     <Grid container spacing={2}>
-      <Grid item xs={12} md={4}>
-        <Button
-          color="info"
-          variant="contained"
-          size="large"
-          component="a"
-          href="/docs"
-          startIcon={<MenuBookIcon />}
-          fullWidth
-        >
-          Guide Documents
-        </Button>
-      </Grid>
-      <Grid item xs={12} md={4}>
-        <Button
-          color="warning"
-          variant="contained"
-          size="large"
-          component="a"
-          href="/playground"
-          startIcon={<ComputerIcon />}
-          fullWidth
-        >
-          Playground (Online IDE)
-        </Button>
-      </Grid>
-      <Grid item xs={12} md={4}>
-        <Button
-          color="success"
-          variant="contained"
-          size="large"
-          component="a"
-          href="https://github.com/samchon/typia"
-          startIcon={<GitHubIcon />}
-          fullWidth
-        >
-          Github Repository
-        </Button>
-      </Grid>
+      <QuickButton
+        title="Guide Documents"
+        icon={<MenuBookIcon />}
+        href="/docs"
+        color="info"
+      />
+      <QuickButton
+        title="Playground (Online IDE)"
+        icon={<ComputerIcon />}
+        href="/playground"
+        color="warning"
+      />
+      <QuickButton
+        title="Github Repository"
+        icon={<GitHubIcon />}
+        href="https://github.com/samchon/typia"
+        color="success"
+      />
     </Grid>
   </ProductHeroLayout>
 );

diff --git a/website/src/movies/home/HomeStrengthMovie.tsx b/website/src/movies/home/HomeStrengthMovie.tsx
@@ -6,7 +6,7 @@ import HomeStrengthSectionMovie from "./HomeStrengthSectionMovie";
 
 const sections: HomeStrengthSectionMovie.Props[] = [
   {
-    title: "Super-fast Runtime Validtor",
+    title: "Super-fast Runtime Validator",
     subTitle: <HomeCodeBlock method="assert" color="rgb(191, 64, 191)" />,
     description: (
       <React.Fragment>
@@ -88,7 +88,7 @@ const sections: HomeStrengthSectionMovie.Props[] = [
     subTitle: <HomeCodeBlock method="random" color="rgb(191, 64, 191)" />,
     description: (
       <React.Fragment>
-        <p>Universal random generatr.</p>
+        <p>Universal random generator.</p>
         <br />
         <p>The best mock-up data generator with pure TypeScript type.</p>
         <br />