Improvement feedback

This commit is contained in:
Faisal Amir 2024-03-15 20:05:29 +07:00
parent d7247b433c
commit 9026f5405a
12 changed files with 320 additions and 35 deletions

View File

@ -5,6 +5,7 @@ import { useAppRelease } from '@site/src/hooks/useAppRelease'
import { AiOutlineGithub, AiOutlineTwitter } from 'react-icons/ai'
import { BiLogoDiscordAlt } from 'react-icons/bi'
import { FaLinkedin } from 'react-icons/fa'
const socials = [
{
@ -19,6 +20,10 @@ const socials = [
icon: <AiOutlineGithub className="text-lg text-white" />,
href: 'https://github.com/janhq/jan',
},
{
icon: <FaLinkedin className="text-lg text-white" />,
href: 'https://www.linkedin.com/company/janframework/',
},
]
export default function AnnoncementBanner() {

View File

@ -34,25 +34,34 @@ const socials = [
const menus = [
{
name: 'For Developers',
name: 'Product',
child: [
{
menu: 'Documentation',
path: '/developer',
},
{
menu: 'Hardware',
path: '/hardware',
menu: 'Changelog',
path: 'https://github.com/janhq/jan/releases',
external: true,
},
],
},
{
name: 'For Developers',
child: [
{
menu: 'Guides',
path: '/guides',
},
{
menu: 'Developer',
path: '/developer',
},
{
menu: 'API Reference',
path: '/api-reference',
},
{
menu: 'Changelog',
path: 'https://github.com/janhq/jan/releases',
external: true,
},
],
},
{
@ -149,12 +158,12 @@ export default function Footer() {
<footer className="flex-shrink-0 relative overflow-hidden py-10">
<div className="container">
<div className="grid grid-cols-2 gap-8 md:grid-cols-2 lg:grid-cols-6">
<div className="lg:col-span-3 col-span-2">
<div className="col-span-2">
<div className="flex items-center space-x-2 mb-3">
<img alt="Jan Logo" src="/img/logo.svg" />
<h2 className="h6">Jan</h2>
<h2 className="h5">Jan</h2>
</div>
<div className="w-full lg:w-1/2 mt-2">
<div className="w-full lg:w-3/4 mt-2">
<h6>The Soul of a New Machine</h6>
<p className="dark:text-gray-400 text-gray-600 mt-2">
Subscribe to our newsletter on AI{' '}
@ -166,7 +175,7 @@ export default function Footer() {
<form className="relative" onSubmit={handleSubmit(onSubmit)}>
<input
type="email"
className="w-full h-12 p-4 pr-14 rounded-xl border dark:border-gray-600 border-gray-300 dark:bg-[#252525]"
className="w-full h-12 p-4 pr-14 rounded-xl border dark:border-gray-600 dark:bg-[#252525] border-[#F0F0F0]"
placeholder="Enter your email"
{...register('email')}
/>

View File

@ -82,14 +82,185 @@ const Testimonial = () => {
<h1 className="text-5xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
People say nice things
</h1>
<p className="leading-relaxed mt-2 text-black/60 dark:text-white/60">
...despite our bugs and fast moving releases
<p className="leading-relaxed mt-2 text-black/60 dark:text-white/60 flex gap-x-2 justify-center">
...despite our bugs and fast moving releases{' '}
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_1810_7276)">
<path
d="M24.0001 11.4301H22.8601V19.4326H24.0001V11.4301Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M22.8599 19.4325H21.7124V20.5725H22.8599V19.4325Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M22.8599 9.14246H21.7124V11.43H22.8599V9.14246Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M21.7125 20.5725H20.5725V21.72H21.7125V20.5725Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M21.7125 6.86255H20.5725V9.14255H21.7125V6.86255Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M20.5726 21.72H19.4326V22.86H20.5726V21.72Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M20.5726 5.71497H19.4326V6.86247H20.5726V5.71497Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M19.4324 2.28748H18.2849V5.71498H19.4324V2.28748Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M12.5701 22.86V21.72H14.8576V20.5725H11.4301V21.72H5.71509V22.86H11.4301V24H19.4326V22.86H12.5701Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M18.285 1.14746H17.145V2.28746H18.285V1.14746Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M17.1449 11.4301H14.8574V12.5701H17.1449V11.4301Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M16.0049 19.4325H14.8574V20.5725H16.0049V19.4325Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M17.145 0H13.7175V1.1475H17.145V0Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M14.8575 18.285H13.7175V19.4325H14.8575V18.285Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M14.8575 12.5699H13.7175V13.7174H14.8575V12.5699Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M16.005 2.28748H13.7175V4.57498H16.005V2.28748Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M13.7176 13.7175H12.5701V18.285H13.7176V13.7175Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M13.7176 1.14746H12.5701V2.28746H13.7176V1.14746Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M12.5699 2.28748H11.4299V4.57498H12.5699V2.28748Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M11.43 19.4325H10.29V20.5725H11.43V19.4325Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M10.2901 16.005H9.14258V19.4325H10.2901V16.005Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M11.4301 4.57495H9.14258V5.71495H11.4301V4.57495Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M9.14244 14.8575H8.00244V16.005H9.14244V14.8575Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M9.14244 6.86255H8.00244V8.00255H9.14244V6.86255Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M9.14244 2.28748H8.00244V4.57498H9.14244V2.28748Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M8.00255 1.14746H6.86255V2.28746H8.00255V1.14746Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M8.00245 8.00244H4.57495V9.14244H8.00245V8.00244Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M5.71495 20.5725H4.57495V21.72H5.71495V20.5725Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M6.86249 0H3.42749V1.1475H6.86249V0Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M1.1475 22.86V21.72H0V24H5.715V22.86H1.1475Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M8.0026 13.7175H2.2876V14.8575H8.0026V13.7175Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M5.71499 2.28748H3.42749V4.57498H5.71499V2.28748Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M3.42746 20.5725H4.57496V19.4325H2.28746V20.5725H1.14746V21.72H3.42746V20.5725Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M3.4276 5.71497H2.2876V8.00247H3.4276V5.71497Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M3.4276 1.14746H2.2876V2.28746H3.4276V1.14746Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M2.28746 18.285H1.14746V19.4325H2.28746V18.285Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M2.28746 8.00244H1.14746V10.2899H2.28746V8.00244Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M2.28746 2.28748H1.14746V5.71498H2.28746V2.28748Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M2.2875 16.005V14.8575H1.1475V10.29H0V18.285H1.1475V16.005H2.2875Z"
className="fill-black/60 dark:fill-white/60"
/>
</g>
<defs>
<clipPath id="clip0_1810_7276">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
</p>
</div>
<div className="w-full xl:w-3/4 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 text-left">
<div className="space-y-4">
<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">
{firstColumn.map((item, i) => {
if (item.type === 'tweet')
return (
@ -114,7 +285,7 @@ const Testimonial = () => {
)
})}
</div>
<div className="space-y-4">
<div className="space-y-4 lg:space-y-8">
{secondColumn.map((item, i) => {
if (item.type === 'tweet')
return (
@ -139,7 +310,7 @@ const Testimonial = () => {
)
})}
</div>
<div className="space-y-4">
<div className="space-y-4 lg:space-y-8">
{thirdColumn.map((item, i) => {
if (item.type === 'tweet')
return (
@ -164,7 +335,7 @@ const Testimonial = () => {
)
})}
</div>
<div className="space-y-4">
<div className="space-y-4 lg:space-y-8">
{fourthColumn.map((item, i) => {
if (item.type === 'tweet')
return (

View File

@ -210,7 +210,7 @@ export default function Home() {
<a
href="https://github.com/janhq/jan"
target="_blank"
className="card-wrapper dark:card-wrapper-dark p-4 inline-flex px-4 py-3 rounded-lg cursor-pointer justify-center items-start space-x-4 "
className="card-wrapper dark:card-wrapper-dark p-4 inline-flex px-4 py-3 rounded-lg cursor-pointer justify-center items-start space-x-4 min-h-28"
>
<span>
<FaGithub className="text-3xl" />
@ -218,8 +218,8 @@ export default function Home() {
<div className="flex-col">
<div className="flex items-center gap-2">
<h6 className="text-base">Github</h6>
<div className="text-sm text-black dark:text-white flex items-center space-x-1 py-1 px-2 rounded-md bg-[#E9E9E9] dark:bg-[#484748]">
<RiStarSFill className="text-lg text-[#FEC928]" />
<div className="text-sm text-black/60 dark:text-white/60 flex items-center space-x-1 py-1 px-2 rounded-md bg-[#E9E9E9] dark:bg-[#484748]">
<RiStarSFill className="text-lg text-[#CA8A04]" />
<span className="font-semibold">
{stargazers.count} stars
</span>
@ -233,7 +233,7 @@ export default function Home() {
<a
href="https://discord.gg/FTk2MvZwJH"
target="_blank"
className="card-wrapper dark:card-wrapper-dark p-4 inline-flex px-4 py-3 rounded-lg cursor-pointer justify-center items-start space-x-4 "
className="card-wrapper dark:card-wrapper-dark p-4 inline-flex px-4 py-3 rounded-lg cursor-pointer justify-center items-start space-x-4 min-h-28"
>
<span>
<FaDiscord className="text-3xl" />
@ -241,7 +241,7 @@ export default function Home() {
<div className="flex-col">
<div className="flex items-center gap-2">
<h6 className="text-base">Discord</h6>
<div className="text-sm text-black dark:text-white flex items-center space-x-1 py-1 px-2 rounded-md bg-[#E9E9E9] dark:bg-[#484748]">
<div className="text-sm text-black/60 dark:text-white/60 flex items-center space-x-1 py-1 px-2 rounded-md bg-[#E9E9E9] dark:bg-[#484748]">
<div className="w-2 h-2 bg-green-500 rounded-full" />
<span className="font-semibold">
{data.presence_count} online
@ -257,7 +257,7 @@ export default function Home() {
<a
href="https://github.com/orgs/janhq/projects/5/views/16"
target="_blank"
className="card-wrapper dark:card-wrapper-dark p-4 inline-flex px-4 py-3 rounded-lg cursor-pointer justify-center items-start space-x-4 "
className="card-wrapper dark:card-wrapper-dark p-4 inline-flex px-4 py-3 rounded-lg cursor-pointer justify-center items-start space-x-4 min-h-28"
>
<span>
<IoMapOutline className="text-3xl" />
@ -278,7 +278,7 @@ export default function Home() {
<Testimonial />
{/* Feature */}
<div className="w-full xl:w-10/12 mx-auto relative py-8">
<div className="w-full xl:w-10/12 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">
@ -313,7 +313,7 @@ export default function Home() {
isActive && 'items-start'
)}
>
<h1 className="dark:text-[#4C4C4C] text-[#C4C4C4]">
<h1 className="dark:text-[#4C4C4C] text-[#C4C4C4] text-[32px]">
0{i + 1}
</h1>
<div>
@ -375,13 +375,89 @@ export default function Home() {
</div>
{/* Philosophy */}
<div className="px-4 lg:px-8 mt-10 lg:mt-20 border-y border-gray-300 dark:border-gray-800">
<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">
<h1 className="text-5xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
Our Philosophy
</h1>
<p className="leading-relaxed mt-2 text-black/60 dark:text-white/60">
Jan is opinionated software on what AI should be
<p className="leading-relaxed mt-2 text-black/60 dark:text-white/60 flex gap-x-2 justify-center">
Jan is opinionated software on what AI should be{' '}
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.5 0H15V1.5H13.5V3H18V4.5H16.5V6H15V7.5H13.5V9H12V10.5H13.5V12H15V13.5H10.5V16.5H9V12H7.5V10.5H6V9H7.5V7.5H9V6H10.5V4.5H12V1.5H10.5V0Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M21 0H22.5V1.5H21V0Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M9 1.5H10.5V4.5H9V1.5Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M18 1.5H21V3H18V1.5Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M4.5 10.5H6V12H4.5V10.5Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M3 12H4.5V13.5H3V12Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M0 13.5H3V15H0V13.5Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M15 13.5H16.5V15H21V16.5H15V13.5Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M7.5 16.5H9V18H12V19.5H7.5V21H3V19.5H6V18H7.5V16.5Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M12 16.5H15V18H12V16.5Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M21 16.5H22.5V18H21V16.5Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M15 18H16.5V19.5H15V18Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M19.5 18H21V19.5H19.5V18Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M16.5 19.5H19.5V21H16.5V19.5Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M1.5 21H3V22.5H1.5V21Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M7.5 21H9V22.5H12V24H3V22.5H7.5V21Z"
className="fill-black/60 dark:fill-white/60"
/>
<path
d="M12 21H16.5V22.5H12V21Z"
className="fill-black/60 dark:fill-white/60"
/>
</svg>
</p>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 text-left mt-16">
@ -649,8 +725,8 @@ export default function Home() {
className="w-28 mx-auto h-auto"
alt="App screenshots"
sources={{
light: useBaseUrl('/img/homepage/mac-system-black.webp'),
dark: useBaseUrl('/img/homepage/mac-system-white.webp'),
light: useBaseUrl('/img/homepage/mac-system-black.svg'),
dark: useBaseUrl('/img/homepage/mac-system-white.svg'),
}}
/>
<h1 className="text-5xl lg:text-7xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
@ -667,7 +743,7 @@ export default function Home() {
>
<input
type="email"
className="w-full h-16 p-4 pr-14 rounded-xl border border-gray-600 dark:bg-white/10"
className="w-full h-16 p-4 pr-14 rounded-xl border border-[#F0F0F0] dark:bg-white/10 dark:border-gray-600"
placeholder="Enter your email"
{...register('email')}
/>

View File

@ -167,3 +167,7 @@
margin-top: 10px;
}
}
.font-serif {
letter-spacing: -4px;
}

View File

@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Arapey&family=Inter:wght@100..900&display=swap');
@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';

Binary file not shown.

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 201 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 214 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.1 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 77 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 77 KiB

View File

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