Skip to content

Commit e50a11c

Browse files
ObaidNadeemObaidNadeem
authored
👌 IMPROVE: Grid Layout and Merged WebGL Code (#18)
* webgl-interaction * webgl-interaction * basing * webgl-interaction * build-error-fix * build-error-fix * 👌 IMPROVE: grid layout and merged webgl code * rebasing * font-issue-fix * font-fix * 🐛 FIX: font-fix * 🐛 FIX: webgl text center * 🐛 FIX: text center * 🐛 FIX: text center * 📦 NEW: Socials on landing page * darker-socials * 🐛 FIX: Darker Socials * webgl-interaction * webgl-interaction * basing * webgl-interaction * build-error-fix * build-error-fix * 👌 IMPROVE: grid layout and merged webgl code * rebasing * font-issue-fix * 🐛 FIX: webgl text center * 🐛 FIX: Correct Dicord Link * 🐛 FIX: Docs page double logo fix * webgl-interaction * webgl-interaction * basing * webgl-interaction * build-error-fix * build-error-fix * 👌 IMPROVE: grid layout and merged webgl code * rebasing * font-issue-fix * 🐛 FIX: webgl text center * 🐛 FIX: Darker Socials * webgl-interaction * webgl-interaction * basing * webgl-interaction * build-error-fix * build-error-fix * 👌 IMPROVE: grid layout and merged webgl code * rebasing * font-issue-fix * 🐛 FIX: webgl text center * 🐛 FIX: Correct Dicord Link * Rebasing * 🐛 FIX: GitHub Link
1 parent 0515f14 commit e50a11c

File tree

7 files changed

+282
-139
lines changed

7 files changed

+282
-139
lines changed

‎apps/baseai.dev/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
"tailwindcss": "^3.4.1",
6262
"tailwindcss-animate": "^1.0.7",
6363
"three": "^0.168.0",
64+
"html2canvas": "^1.4.1",
6465
"typescript": "^5.3.3",
6566
"unist-util-filter": "^5.0.1",
6667
"unist-util-visit": "^5.0.0",

‎apps/baseai.dev/public/texture/panoenv9.jpg

47.9 KB
Loading

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

Lines changed: 121 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,13 @@ import '../../styles/global.css';
77
import { Anchor } from '../ui/anchor';
88
import { IconDocs } from '../ui/iconists/icon-docs';
99
import WebGLInitializer from './webgl';
10+
import Link from 'next/link';
1011
const inter = Inter({ subsets: ['latin'] });
1112

1213
export default function Hero({}) {
1314
return (
1415
<div className="align-center flex flex h-screen flex-col items-center justify-center justify-center">
15-
<div className="xmin-h-screen absolute absolute -top-[10vh] flex w-full sm:top-0">
16+
<div className="xmin-h-screen webgl absolute absolute -top-[10vh] flex w-full sm:top-0">
1617
<WebGLInitializer />
1718
</div>
1819
<Content />
@@ -22,60 +23,78 @@ export default function Hero({}) {
2223

2324
function Content() {
2425
return (
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-24 sm:min-h-[77.5vh] sm:w-[76vw]'
28-
)}
29-
>
30-
<div className={cn(' flex justify-between', inter.className)}>
31-
<div className="flex items-center">
26+
<div className="z-10 mt-24 grid min-h-[75vh] w-[90vw] grid-rows-[auto_1fr_auto] gap-4 p-6 sm:mt-28 sm:min-h-[85vh] sm:w-[76vw]">
27+
<div className="col-span-2 flex items-center justify-between">
28+
<div className={cn('flex items-center', inter.className)}>
3229
<div className="mr-4 hidden size-4 rounded-full bg-muted-foreground/70 sm:block"></div>
3330
<span className="text-sm text-muted-foreground/70 2xl:text-[1vw] 2xl:leading-[1vw]">
3431
dev local-first
3532
</span>
3633
</div>
37-
<div className="flex items-center">
34+
35+
<div className={cn('flex items-center', inter.className)}>
3836
<span className="text-sm text-muted-foreground/70 2xl:text-[1vw] 2xl:leading-[1vw]">
3937
deploy serverless
4038
</span>
4139
<div className="ml-4 hidden size-4 rounded-full bg-muted-foreground/70 sm:block"></div>
4240
</div>
4341
</div>
4442

45-
<div
46-
className={cn(
47-
'mt-[16rem] flex flex-col items-center sm:mt-[22rem] lg:mt-[28rem] lg:mt-[28rem] 2xl:mt-[40rem]'
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-
<div className="flex items-center justify-center lg:justify-start">
59-
<div className="mr-4 hidden size-4 rounded-full bg-muted-foreground/70 sm:block"></div>
60-
<span className="text-sm text-muted-foreground/70 2xl:text-[1vw] 2xl:leading-[1vw]">
61-
<strong className="mr-2 text-white">
62-
Base AI
63-
</strong>{' '}
64-
<span className="text-muted-foreground/90">
65-
The first Web AI Framework.
66-
</span>
43+
<div className="col-span-2"></div>
44+
45+
<div className="col-span-2 flex w-full flex-col-reverse items-center justify-between lg:flex-row lg:items-start">
46+
<div className={cn('self-end lg:max-w-[60%]', inter.className)}>
47+
<div
48+
className="text-center text-sm text-sm lg:text-left lg:text-left
49+
50+
2xl:text-[1vw] 2xl:text-[1vw] 2xl:leading-[1.5vw] 2xl:leading-[1.5vw]"
51+
>
52+
<div className="flex items-center justify-center lg:justify-start">
53+
<div className="mr-4 hidden size-4 rounded-full bg-muted-foreground/70 sm:block"></div>
54+
<span className="text-sm text-muted-foreground/70 2xl:text-[1vw] 2xl:leading-[1vw]">
55+
<strong className="mr-2 text-white">
56+
Base AI
57+
</strong>
58+
<span className="text-muted-foreground/90">
59+
The first Web AI Framework.
6760
</span>
68-
</div>
69-
<p className="mr-4 mt-4 text-muted-foreground/90 md:max-w-[500px] lg:max-w-full">
70-
The easiest way to build serverless autonomous
71-
AI agents with memory. Start building
72-
local-first, agentic pipes, tools, and memory.
73-
Deploy serverless with one command.
74-
</p>
61+
</span>
7562
</div>
63+
<p className="mt-4 text-sm text-muted-foreground/90 2xl:text-[1vw] 2xl:leading-[1.5vw]">
64+
The easiest way to build serverless autonomous AI
65+
agents with memory. Start building local-first,
66+
agentic pipes, tools, and memory. Deploy serverless
67+
with one command.
68+
</p>
7669
</div>
77-
<div className="flex h-max items-center">
78-
<span className="mb-5 text-sm text-muted-foreground/70 lg:mb-0 2xl:text-[1vw] 2xl:leading-[1vw]">
70+
71+
<div className="mt-4 flex justify-center space-x-2 lg:justify-start ">
72+
<Anchor
73+
variant="default"
74+
href="/docs"
75+
aria-label="Get Started"
76+
>
77+
<IconDocs className="size-4" />
78+
<span className={inter.className}>Get Started</span>
79+
</Anchor>
80+
<Anchor
81+
variant="secondary"
82+
href="/learn"
83+
aria-label="Learn BaseAI"
84+
>
85+
Learn BaseAI
86+
</Anchor>
87+
</div>
88+
89+
<CopyableCommand command="npx baseai@latest init" />
90+
<div className="text-md flex w-full items-center justify-center text-muted-foreground/70 lg:hidden">
91+
<Socials />
92+
</div>
93+
</div>
94+
95+
<div className="mb-5 flex w-full flex-col items-center justify-center lg:mb-0 lg:min-h-full lg:w-[40%] lg:justify-between">
96+
<div className="flex w-full items-center justify-center lg:mb-0 lg:justify-end">
97+
<span className="text-sm text-muted-foreground/70 2xl:text-[1vw] 2xl:leading-[1vw]">
7998
agentic{' '}
8099
<span className="text-muted-foreground/20">(</span>{' '}
81100
pipes{' '}
@@ -87,30 +106,10 @@ function Content() {
87106
</span>
88107
<div className="ml-4 hidden size-4 rounded-full bg-muted-foreground/70 lg:block"></div>
89108
</div>
109+
<div className="hidden w-full items-center justify-center text-lg text-muted-foreground/70 lg:mb-5 lg:flex lg:justify-end">
110+
<Socials />
111+
</div>
90112
</div>
91-
92-
<div
93-
className={cn(
94-
'mx-auto mt-8 flex w-full items-center justify-center space-x-2 lg:items-start lg:justify-start'
95-
)}
96-
>
97-
<Anchor
98-
variant={'default'}
99-
href={`/docs`}
100-
aria-label="Get Started"
101-
>
102-
<IconDocs className="size-4" />
103-
<span className={inter.className}>Get Started</span>
104-
</Anchor>
105-
<Anchor
106-
variant={'secondary'}
107-
href={`/learn`}
108-
aria-label="Learn BaseAI"
109-
>
110-
Learn BaseAI
111-
</Anchor>
112-
</div>
113-
<CopyableCommand command="npx baseai@latest init" />
114113
</div>
115114
</div>
116115
);
@@ -120,6 +119,64 @@ interface CopyableCommandProps {
120119
command: string;
121120
}
122121

122+
function Socials() {
123+
return (
124+
<>
125+
<Link
126+
href={'https://github.com/LangbaseInc/BaseAI'}
127+
target="_blank"
128+
rel="noopener noreferrer"
129+
>
130+
<svg
131+
className="mr-4 h-[1em] w-[1em] cursor-pointer"
132+
viewBox="0 0 19 18"
133+
fill="none"
134+
xmlns="http://www.w3.org/2000/svg"
135+
>
136+
<path
137+
d="M9.5 0C8.25244 0 7.0171 0.238571 5.86451 0.702093C4.71191 1.16561 3.66464 1.84501 2.78249 2.70148C1.00089 4.43122 0 6.77723 0 9.22344C0 13.3002 2.7265 16.759 6.498 17.9857C6.973 18.0595 7.125 17.7736 7.125 17.5245V15.9658C4.4935 16.5192 3.933 14.7298 3.933 14.7298C3.496 13.6599 2.8785 13.374 2.8785 13.374C2.014 12.8021 2.945 12.8206 2.945 12.8206C3.895 12.8851 4.3985 13.7706 4.3985 13.7706C5.225 15.1726 6.6215 14.7575 7.163 14.5361C7.2485 13.9366 7.4955 13.5308 7.7615 13.3002C5.6525 13.0696 3.439 12.2764 3.439 8.76227C3.439 7.73847 3.8 6.91758 4.4175 6.26272C4.3225 6.03213 3.99 5.07289 4.5125 3.82773C4.5125 3.82773 5.3105 3.5787 7.125 4.76852C7.8755 4.5656 8.6925 4.46415 9.5 4.46415C10.3075 4.46415 11.1245 4.5656 11.875 4.76852C13.6895 3.5787 14.4875 3.82773 14.4875 3.82773C15.01 5.07289 14.6775 6.03213 14.5825 6.26272C15.2 6.91758 15.561 7.73847 15.561 8.76227C15.561 12.2856 13.338 13.0604 11.2195 13.291C11.5615 13.5769 11.875 14.1395 11.875 14.9973V17.5245C11.875 17.7736 12.027 18.0687 12.5115 17.9857C16.283 16.7498 19 13.3002 19 9.22344C19 8.0122 18.7543 6.81282 18.2769 5.69378C17.7994 4.57474 17.0997 3.55796 16.2175 2.70148C15.3354 1.84501 14.2881 1.16561 13.1355 0.702093C11.9829 0.238571 10.7476 0 9.5 0Z"
138+
fill="currentColor"
139+
/>
140+
</svg>
141+
</Link>
142+
<Link
143+
href={'https://langbase.com/discord'}
144+
target="_blank"
145+
rel="noopener noreferrer"
146+
>
147+
<svg
148+
className="mr-4 h-[1em] w-[1em] cursor-pointer"
149+
viewBox="0 0 20 16"
150+
fill="none"
151+
xmlns="http://www.w3.org/2000/svg"
152+
>
153+
<path
154+
d="M16.9225 1.32966C15.6558 0.709816 14.2844 0.259933 12.8557 0C12.8306 0.000375608 12.8067 0.0111559 12.7891 0.0299924C12.6176 0.359907 12.4176 0.789795 12.2843 1.11971C10.769 0.879923 9.22804 0.879923 7.71275 1.11971C7.57941 0.779798 7.37941 0.359907 7.19845 0.0299924C7.18893 0.00999762 7.16035 0 7.13178 0C5.70317 0.259933 4.34123 0.709816 3.065 1.32966C3.05548 1.32966 3.04595 1.33965 3.03643 1.34965C0.445883 5.4186 -0.268423 9.37757 0.0839681 13.2966C0.0839681 13.3166 0.0934922 13.3365 0.11254 13.3465C1.82687 14.6662 3.47454 15.466 5.10315 15.9959C5.13173 16.0059 5.1603 15.9959 5.16982 15.9759C5.55078 15.426 5.89365 14.8462 6.1889 14.2363C6.20795 14.1963 6.1889 14.1563 6.1508 14.1463C5.60793 13.9264 5.09363 13.6665 4.58885 13.3665C4.55076 13.3465 4.55076 13.2866 4.57933 13.2566C4.68409 13.1766 4.78886 13.0866 4.89362 13.0066C4.91267 12.9866 4.94124 12.9866 4.96029 12.9966C8.23657 14.5662 11.77 14.5662 15.0082 12.9966C15.0272 12.9866 15.0558 12.9866 15.0749 13.0066C15.1796 13.0966 15.2844 13.1766 15.3891 13.2666C15.4272 13.2966 15.4272 13.3565 15.3796 13.3765C14.8844 13.6865 14.3606 13.9364 13.8177 14.1563C13.7796 14.1663 13.7701 14.2163 13.7796 14.2463C14.0844 14.8562 14.4272 15.436 14.7987 15.9859C14.8272 15.9959 14.8558 16.0059 14.8844 15.9959C16.5225 15.466 18.1702 14.6662 19.8845 13.3465C19.9036 13.3365 19.9131 13.3166 19.9131 13.2966C20.3321 8.76773 19.2178 4.83875 16.9606 1.34965C16.9511 1.33965 16.9416 1.32966 16.9225 1.32966ZM6.68415 10.9072C5.70317 10.9072 4.8841 9.95742 4.8841 8.78773C4.8841 7.61803 5.68412 6.66827 6.68415 6.66827C7.6937 6.66827 8.49372 7.62803 8.4842 8.78773C8.4842 9.95742 7.68418 10.9072 6.68415 10.9072ZM13.3224 10.9072C12.3414 10.9072 11.5224 9.95742 11.5224 8.78773C11.5224 7.61803 12.3224 6.66827 13.3224 6.66827C14.332 6.66827 15.132 7.62803 15.1225 8.78773C15.1225 9.95742 14.332 10.9072 13.3224 10.9072Z"
155+
fill="currentColor"
156+
/>
157+
</svg>
158+
</Link>
159+
<Link
160+
href={'https://x.com/langbaseinc'}
161+
target="_blank"
162+
rel="noopener noreferrer"
163+
>
164+
<svg
165+
className="h-[1em] w-[1em] cursor-pointer"
166+
viewBox="0 0 18 16"
167+
fill="none"
168+
xmlns="http://www.w3.org/2000/svg"
169+
>
170+
<path
171+
d="M14.3819 0.417969H16.9932L11.289 6.95414L18.0003 15.8499H12.746L8.62778 10.4557L3.92087 15.8499H1.30713L7.40788 8.85637L0.972656 0.419185H6.36068L10.0776 5.34868L14.3819 0.417969ZM13.4636 14.2833H14.911L5.57011 1.90302H4.01817L13.4636 14.2833Z"
172+
fill="currentColor"
173+
/>
174+
</svg>
175+
</Link>
176+
</>
177+
);
178+
}
179+
123180
function CopyableCommand({ command }: CopyableCommandProps) {
124181
const [copied, setCopied] = useState(false);
125182

@@ -144,7 +201,7 @@ function CopyableCommand({ command }: CopyableCommandProps) {
144201
aria-label={`Copy command: ${command}`}
145202
>
146203
<div className="group flex items-center space-x-2 transition-colors group-hover:text-indigo-400">
147-
<span className="text-muted-foreground/50 group-hover:text-indigo-400 sm:text-sm 2xl:leading-[1.5vw]">
204+
<span className="text-muted-foreground/50 group-hover:text-indigo-400 sm:text-sm 2xl:text-[1vw] 2xl:leading-[1.5vw]">
148205
<span className="xtext-indigo-400">⌘</span>
149206
<span className="group-hover:text-muted-foreground/50">
150207
{' '}

0 commit comments

Comments
 (0)