fix: update font serif and wrap section with container

docs/src/containers/DownloadApp/index.js

@@ -133,7 +133,7 @@ export default function DownloadApp() {
   }
 
   return (
-    <div className="w-full lg:w-3/5 mx-auto px-4">
+    <div className="w-full lg:w-3/4 mx-auto px-4">
       <div className="grid grid-cols-1 lg:grid-cols-3 py-10 gap-8">
         {groupTemnplate.map((item, i) => {
           return (

docs/src/containers/Testimonial/index.js

@@ -78,7 +78,8 @@ const Testimonial = () => {
 
   return (
     <div className="bg-[#F0F0F0] dark:bg-[#242424] p-8 mt-10 pb-20">
-      <div className="w-full xl:w-3/5 mx-auto relative py-8 text-center">
+      <div className="container">
+        <div className="w-full mx-auto relative py-8 text-center">
           <h1 className="text-5xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
             People say nice things
           </h1>
@@ -257,7 +258,7 @@ const Testimonial = () => {
             </svg>
           </p>
         </div>
-      <div className="w-full xl:w-3/4 mx-auto relative text-center">
+        <div className="w-full mx-auto relative text-center">
           <div data-theme={colorMode} className="mt-10">
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-8 text-left">
               <div className="space-y-4 lg:space-y-8">
@@ -364,6 +365,7 @@ const Testimonial = () => {
           </div>
         </div>
       </div>
+    </div>
   )
 }
 

docs/src/pages/download.js

@@ -18,6 +18,7 @@ export default function Download() {
       >
         <main>
           {/* Hero */}
+          <div className="container">
             <div className="text-center px-4 py-20">
               <h1 className="text-6xl lg:text-7xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
                 Download Jan for your desktop
@@ -46,6 +47,7 @@ export default function Download() {
                 </a>
               </div>
             </div>
+          </div>
         </main>
       </Layout>
     </>

docs/src/pages/index.js

@@ -148,13 +148,12 @@ export default function Home() {
   return (
     <>
       <Banner />
-      <Layout
+      <Layout description="Jan turns your computer into an AI machine by running LLMs locally on your computer. It's a privacy-focus, local-first, open-source solution.">
-        description="Jan turns your computer into an AI machine by running LLMs locally on your computer. It's a privacy-focus, local-first, open-source solution."
-      >
         <main>
           {/* Hero */}
+          <div className="container">
             <div className="text-center px-4 py-16">
-            <h1 className="text-6xl lg:text-8xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
+              <h1 className="text-6xl lg:text-[80px] !font-normal leading-tight lg:leading-tight mt-2 font-serif">
                 Rethink the Computer
               </h1>
               <p className="text-2xl -mt-1 leading-relaxed text-black/60 dark:text-white/60">
@@ -187,9 +186,11 @@ export default function Home() {
                 />
               </div>
             </div>
+          </div>
 
           {/* Build with Love */}
-          <div className="w-full px-4 xl:w-3/5 mx-auto relative py-8">
+          <div className="container">
+            <div className="w-full px-4 xl:w-3/4 mx-auto relative py-8">
               <div className="text-center">
                 <h1 className="text-5xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
                   Built with love
@@ -268,12 +269,14 @@ export default function Home() {
                 </a>
               </div>
             </div>
+          </div>
 
           {/* Wall of love */}
           <Testimonial />
 
           {/* Feature */}
-          <div className="w-full xl:w-10/12 mx-auto relative py-8 lg:pt-24">
+          <div className="container">
+            <div className="w-full mx-auto relative py-8 lg:pt-24">
               <div className="flex p-4 lg:px-0 lg:justify-between flex-col lg:flex-row items-end">
                 <div className="w-full">
                   <h1 className="text-5xl lg:text-7xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
@@ -368,10 +371,12 @@ export default function Home() {
                 </div>
               </div>
             </div>
+          </div>
 
           {/* Philosophy */}
           <div className="px-4 lg:px-8 mt-10 lg:mt-20 border-y border-[#F0F0F0] dark:border-gray-800">
-            <div className="w-full xl:w-3/4 mx-auto relative pt-8 text-center">
+            <div className="container">
+              <div className="w-full mx-auto relative pt-8 text-center">
                 <h1 className="text-5xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
                   Our Philosophy
                 </h1>
@@ -491,9 +496,9 @@ export default function Home() {
                     </svg>
                     <h5 className="mt-4 mb-2">Local-first</h5>
                     <p className="text-black/60 dark:text-white/60">
-                    We believe your conversations and files should remain yours
+                      We believe your conversations and files should remain
-                    alone. That's why we prioritize local-first AI, running
+                      yours alone. That's why we prioritize local-first AI,
-                    open-source models directly on your computer.
+                      running open-source models directly on your computer.
                     </p>
                   </div>
                   <div>
@@ -555,9 +560,9 @@ export default function Home() {
                     </svg>
                     <h5 className="mt-4 mb-2">User-owned</h5>
                     <p className="text-black/60 dark:text-white/60">
-                    Your data, your rules. Jan stores everything on your device
+                      Your data, your rules. Jan stores everything on your
-                    in universal formats, giving you total freedom to move your
+                      device in universal formats, giving you total freedom to
-                    data without tricks or traps.
+                      move your data without tricks or traps.
                     </p>
                   </div>
                   <div>
@@ -710,9 +715,11 @@ export default function Home() {
                 </div>
               </div>
             </div>
+          </div>
 
           {/* CTA email newsletter */}
           <div className="bg-[#F0F0F0] dark:bg-[#242424] text-center py-16">
+            <div className="container">
               <div className="w-full xl:w-10/12 mx-auto relative">
                 <div className="flex p-4 lg:justify-between flex-col lg:flex-row items-end">
                   <div className="w-full">
@@ -757,9 +764,11 @@ export default function Home() {
                 </div>
               </div>
             </div>
+          </div>
 
           {/* Location and statistic */}
           <div className="lg:w-4/5 w-full px-4 mx-auto py-10 lg:pb-20 lg:pt-32">
+            <div className="container">
               <div className="w-full lg:w-3/4 mx-auto pb-20">
                 <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
                   <div className="text-center">
@@ -797,9 +806,11 @@ export default function Home() {
                 }}
               />
             </div>
+          </div>
 
           {/* CTA Bottom */}
           <div className="w-full xl:w-10/12 mx-auto relative py-8">
+            <div className="container">
               <div className="flex p-4 lg:justify-between flex-col lg:flex-row">
                 <div className="w-full">
                   <h1 className="text-5xl lg:text-7xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
@@ -824,6 +835,7 @@ export default function Home() {
                 </div>
               </div>
             </div>
+          </div>
         </main>
       </Layout>
     </>

docs/src/styles/components/base.scss

@@ -169,5 +169,5 @@
 }
 
 .font-serif {
-  letter-spacing: -4px;
+  letter-spacing: -1.6px;
 }

docs/src/styles/components/font.scss

@@ -0,0 +1,41 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+
+@font-face {
+  font-family: 'PPEditorialNew';
+  src: url('/static/font/PPEditorialNew-Regular.otf') format('opentype');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: 'PPEditorialNew';
+  src: url('/static/font/PPEditorialNew-RegularItalic.otf') format('opentype');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'PPEditorialNew';
+  src: url('/static/font/PPEditorialNew-Ultrabold.otf') format('opentype');
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: 'PPEditorialNew';
+  src: url('/static/font/PPEditorialNew-UltraboldItalic.otf') format('opentype');
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'PPEditorialNew';
+  src: url('/static/font/PPEditorialNew-Ultralight.otf') format('opentype');
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: 'PPEditorialNew';
+  src: url('/static/font/PPEditorialNew-UltralightItalic.otf')
+    format('opentype');
+  font-weight: 300;
+  font-style: italic;
+}

docs/src/styles/main.scss

@@ -1,9 +1,8 @@
-@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap&family=Inter:wght@100..900&display=swap');
-
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
+@import './components/font.scss';
 @import './components/base.scss';
 @import './components/typography.scss';
 @import './components/card.scss';

docs/tailwind.config.js

@@ -56,7 +56,7 @@ module.exports = {
         'Helvetica',
         'sans-serif',
       ],
-      serif: ['Josefin Sans'],
+      serif: ['PPEditorialNew'],
     },
     extend: {
       backgroundImage: {