fix: update font serif and wrap section with container (#2443)

fix: update font serif and wrap section with container
This commit is contained in:
Henry 2024-03-22 14:51:30 +09:00 committed by GitHub
commit 680620ac9c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 1025 additions and 969 deletions

View File

@ -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 (

View File

@ -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>
)
}

View File

@ -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>
</>

View File

@ -148,13 +148,12 @@ export default function Home() {
return (
<>
<Banner />
<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."
>
<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.">
<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
alone. That's why we prioritize local-first AI, running
open-source models directly on your computer.
We believe your conversations and files should remain
yours alone. That's why we prioritize local-first AI,
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
in universal formats, giving you total freedom to move your
data without tricks or traps.
Your data, your rules. Jan stores everything on your
device in universal formats, giving you total freedom to
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>
</>

View File

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

View File

@ -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;
}

View File

@ -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';

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

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