Skip to content

Commit b05ee94

Browse files
ahmadawaisahmadawais
committed
👌 IMPROVE: fonts
1 parent 8f3addf commit b05ee94

File tree

4 files changed

+95
-65
lines changed

4 files changed

+95
-65
lines changed

‎apps/baseai.dev/src/app/layout.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { Providers } from '@/app/providers';
2-
import { type Metadata } from 'next';
32
import '@/styles/tailwind.css';
3+
import { type Metadata } from 'next';
4+
import { Inter } from 'next/font/google';
5+
const inter = Inter({ subsets: ['latin'] });
46

57
export const metadata: Metadata = {
68
title: {
@@ -40,10 +42,8 @@ export default async function RootLayout({
4042
}) {
4143
return (
4244
<html lang="en" className="h-full" suppressHydrationWarning>
43-
<body>
44-
<Providers>
45-
{children}
46-
</Providers>
45+
<body className={`${inter.className}`}>
46+
<Providers>{children}</Providers>
4747
</body>
4848
</html>
4949
);

‎apps/baseai.dev/src/components/home/hero.tsx

Lines changed: 76 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
'use client';
22

3-
import Link from 'next/link';
3+
import cn from 'mxcn';
4+
import { Inter } from 'next/font/google';
45
import { useState } from 'react';
56
import '../../styles/global.css';
7+
import { Anchor } from '../ui/anchor';
8+
import { IconDocs } from '../ui/iconists/icon-docs';
69
import WebGLInitializer from './webgl';
10+
const inter = Inter({ subsets: ['latin'] });
711

812
export default function Hero({}) {
913
return (
@@ -18,73 +22,89 @@ export default function Hero({}) {
1822

1923
function Content() {
2024
return (
21-
<div className="hero-content z-10 mt-10 flex min-h-[65vh] w-[90vw] flex-col justify-between p-6 text-white sm:mt-28 sm:min-h-[77.5vh] sm:w-[76vw]">
22-
<div className="helvetica flex justify-between">
25+
<div
26+
className={cn(
27+
'hero-content z-10 mt-10 flex min-h-[65vh] w-[90vw] flex-col justify-between p-6 text-white sm:mt-28 sm:min-h-[77.5vh] sm:w-[76vw]'
28+
)}
29+
>
30+
<div className={cn(' flex justify-between', inter.className)}>
2331
<div className="flex items-center">
24-
<div className="mr-[1.5vw] hidden h-2.5 w-2.5 rounded-full bg-white sm:block 2xl:h-[.75vw] 2xl:w-[.75vw]"></div>
25-
<span className="text-sm 2xl:text-[1vw] 2xl:leading-[1vw]">
26-
Deploy Serverless
32+
<div className="mr-4 hidden size-4 rounded-full bg-muted-foreground/70 sm:block"></div>
33+
<span className="text-sm text-muted-foreground/70 2xl:text-[1vw] 2xl:leading-[1vw]">
34+
dev local-first
2735
</span>
2836
</div>
2937
<div className="flex items-center">
30-
<span className="text-sm 2xl:text-[1vw] 2xl:leading-[1vw]">
31-
Develop Local-first
38+
<span className="text-sm text-muted-foreground/70 2xl:text-[1vw] 2xl:leading-[1vw]">
39+
deploy serverless
3240
</span>
33-
<div className="ml-[1.5vw] hidden h-2.5 w-2.5 rounded-full bg-white sm:block 2xl:h-[.75vw] 2xl:w-[.75vw]"></div>
41+
<div className="ml-4 hidden size-4 rounded-full bg-muted-foreground/70 sm:block"></div>
3442
</div>
3543
</div>
3644

37-
<div className="flex flex-col items-center sm:items-start">
38-
<div className="helvetica flex w-full flex-col-reverse items-center justify-between sm:flex-row sm:items-start">
39-
<div className="text-left sm:max-w-[40%]">
40-
<div className="text-center text-sm sm:text-left 2xl:text-[1vw] 2xl:leading-[1.5vw]">
41-
<strong> Base AI: </strong> The Web AI Framework.
42-
<p>
43-
Built for developers who want to build
44-
AI-powered web applications. Local-first,
45-
agentic pipes, tools, and memory.
45+
<div
46+
className={cn(
47+
'mt-[16rem] flex flex-col items-center sm:mt-[22rem] lg:mt-[28rem] lg:mt-[28rem] 2xl:mt-[42rem]'
48+
)}
49+
>
50+
<div
51+
className={cn(
52+
'flex w-full flex-col-reverse items-center justify-between lg:flex-row lg:items-start',
53+
inter.className
54+
)}
55+
>
56+
<div className="text-left lg:max-w-[60%]">
57+
<div className="text-center text-sm lg:text-left 2xl:text-[1vw] 2xl:leading-[1.5vw]">
58+
<span className="mr-4 hidden size-4 rounded-full bg-muted-foreground/70 lg:inline-block" />
59+
<strong> Base AI </strong>{' '}
60+
<span className="text-muted-foreground/90">
61+
The first Web AI Framework.
62+
</span>
63+
<p className="mr-4 mt-4 text-muted-foreground/90 md:max-w-[500px] lg:max-w-full">
64+
The easiest way to build serverless autonomous
65+
AI agents with memory. Start building
66+
local-first, agentic pipes, tools, and memory.
67+
Deploy serverless with one command.
4668
</p>
4769
</div>
4870
</div>
4971
<div className="flex h-max items-center">
50-
<span className="mb-5 text-sm sm:mb-0 2xl:text-[1vw] 2xl:leading-[1vw]">
51-
Agentic Pipes, Tools, Memory
72+
<span className="mb-5 text-sm text-muted-foreground/70 lg:mb-0 2xl:text-[1vw] 2xl:leading-[1vw]">
73+
agentic{' '}
74+
<span className="text-muted-foreground/20">(</span>{' '}
75+
pipes{' '}
76+
<span className="text-muted-foreground/20">|</span>{' '}
77+
tools{' '}
78+
<span className="text-muted-foreground/20">|</span>{' '}
79+
memory{' '}
80+
<span className="text-muted-foreground/20">)</span>
5281
</span>
53-
<div className="ml-[1.5vw] hidden h-2.5 w-2.5 rounded-full bg-white sm:block 2xl:h-[.75vw] 2xl:w-[.75vw]"></div>
82+
<div className="ml-4 hidden size-4 rounded-full bg-muted-foreground/70 lg:block"></div>
5483
</div>
5584
</div>
5685

57-
<div className="sm:justify-left flex space-x-4">
58-
<Link
86+
<div
87+
className={cn(
88+
'mx-auto mt-8 flex w-full items-center justify-center space-x-2 lg:items-start lg:justify-start'
89+
)}
90+
>
91+
<Anchor
92+
variant={'default'}
5993
href={`/docs`}
60-
className="flex items-center rounded-full bg-gray-200 px-4 py-2 text-xs text-black outline-1 outline-[#2A2A2A] transition-colors hover:bg-[#282828] hover:text-white hover:outline 2xl:px-[1vw] 2xl:py-[.65vw] 2xl:text-[.85vw] 2xl:leading-[1vw]"
61-
aria-label="Visit Github"
94+
aria-label="Get Started"
6295
>
63-
Get Started
64-
<svg
65-
xmlns="http://www.w3.org/2000/svg"
66-
className="ml-2 h-4 w-4"
67-
fill="none"
68-
viewBox="0 0 24 24"
69-
stroke="currentColor"
70-
>
71-
<path
72-
strokeLinecap="round"
73-
strokeLinejoin="round"
74-
strokeWidth={2}
75-
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
76-
/>
77-
</svg>
78-
</Link>
79-
<Link
96+
<IconDocs className="size-4" />
97+
<span className={inter.className}>Get Started</span>
98+
</Anchor>
99+
<Anchor
100+
variant={'secondary'}
80101
href={`/learn`}
81-
className="hover:bg-black-200 rounded-full bg-[#0E0E0E] px-4 py-2 text-xs text-white outline outline-1 outline-[#2A2A2A] transition-colors hover:bg-[#282828] 2xl:px-[1vw] 2xl:py-[.65vw] 2xl:text-[.85vw] 2xl:leading-[1vw]"
82-
aria-label="Learn BaseAi"
102+
aria-label="Learn BaseAI"
83103
>
84104
Learn BaseAI
85-
</Link>
105+
</Anchor>
86106
</div>
87-
<CopyableCommand command="npx baseai@latest" />
107+
<CopyableCommand command="npx baseai@latest init" />
88108
</div>
89109
</div>
90110
);
@@ -109,22 +129,26 @@ function CopyableCommand({ command }: CopyableCommandProps) {
109129

110130
return (
111131
<div
112-
className="group mb-4 mt-4 flex w-max cursor-pointer items-center justify-between font-mono text-sm transition-colors"
132+
className="group mx-auto mb-4 mt-4 flex w-max cursor-pointer items-center justify-center font-mono text-sm transition-colors lg:mx-0"
113133
onClick={copyToClipboard}
114134
role="button"
115135
tabIndex={0}
116136
onKeyDown={e => e.key === 'Enter' && copyToClipboard()}
117137
aria-label={`Copy command: ${command}`}
118138
>
119-
<div className="flex items-center space-x-2">
120-
<span className="text-gray-400 sm:text-sm 2xl:text-[1vw] 2xl:leading-[1.5vw]">
121-
~
139+
<div className="group flex items-center space-x-2 transition-colors group-hover:text-indigo-400">
140+
<span className="text-muted-foreground/50 group-hover:text-indigo-400 sm:text-sm 2xl:leading-[1.5vw]">
141+
<span className="xtext-indigo-400">⌘</span>
142+
<span className="group-hover:text-muted-foreground/50">
143+
{' '}
144+
~
145+
</span>
122146
</span>
123-
<span className="font-mono text-gray-300 sm:text-sm 2xl:text-[1vw] 2xl:leading-[1.5vw]">
147+
<span className="font-mono text-muted-foreground/50 transition-colors group-hover:text-indigo-400 sm:text-sm 2xl:leading-[1.5vw] ">
124148
{command}
125149
</span>
126150
</div>
127-
<div className="ml-2 text-gray-400 transition-colors group-hover:text-gray-300 sm:text-sm 2xl:text-[1vw] 2xl:leading-[1.5vw]">
151+
<div className="ml-2 text-muted-foreground/50 transition-colors group-hover:text-indigo-400 sm:text-sm 2xl:leading-[1.5vw]">
128152
{copied ? (
129153
<svg
130154
xmlns="http://www.w3.org/2000/svg"

‎apps/baseai.dev/src/components/home/webgl.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
import { useEffect, useRef, useState } from 'react';
44
import * as THREE from 'three';
5-
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
65

76
const WebGLInitializer = () => {
87
const mountRef = useRef<HTMLDivElement | null>(null);
@@ -119,7 +118,7 @@ const WebGLInitializer = () => {
119118
metalness: { value: 5 },
120119
color: { value: new THREE.Color(0x3366ff) },
121120
u_mouse: { value: new THREE.Vector3() },
122-
u_lightDirection: { value: new THREE.Vector3(0, 1, 1) }, // Light from front
121+
u_lightDirection: { value: new THREE.Vector3(0, 1, 1) } // Light from front
123122
},
124123
// change noise functions to perlin noise
125124
vertexShader: `

‎apps/baseai.dev/src/styles/global.css

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,9 @@
6969
* {
7070
@apply border-border;
7171
}
72+
html {
73+
font-family: var(--font-inter);
74+
}
7275
body {
7376
@apply bg-background text-foreground;
7477
}
@@ -99,21 +102,25 @@
99102
}
100103
}
101104

105+
html {
106+
font-family: var(--font-inter);
107+
}
108+
102109
.prose table {
103110
@apply w-full whitespace-normal;
104111
}
105112

106113
@font-face {
107-
font-family: "Grotesk";
108-
src: url("/AlteHaasGroteskBold.ttf") format("truetype");
114+
font-family: 'Grotesk';
115+
src: url('/AlteHaasGroteskBold.ttf') format('truetype');
109116
font-weight: normal;
110117
font-style: normal;
111118
}
112119

113-
.hero-content{
114-
font-family: "Grotesk";
120+
.hero-content {
121+
font-family: 'Grotesk';
115122
}
116123

117-
.helvetica{
118-
font-family: "Helvetica";
124+
.helvetica {
125+
font-family: 'Helvetica';
119126
}

0 commit comments

Comments
 (0)