👌 IMPROVE: Landing page UI (#91)

* 🐛 FIX: Mobile design

* 👌 IMPROVE: Code

* 👌 IMPROVE: Top

* 👌 IMPROVE: View height

* 👌 IMPROVE: View height

* 👌 IMPROVE: Top

* 🐛 FIX: BaseAI name

* 👌 IMPROVE: Desktop top placement

* 👌 IMPROVE: Code

* 👌 IMPROVE: Code

Author: msaaddev

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

@@ -10,10 +10,10 @@ import WebGLInitializer from './webgl';
 import Link from 'next/link';
 const inter = Inter({ subsets: ['latin'] });
 
-export default function Hero({}) {
+export default function Hero({ }) {
 	return (
-		<div className="align-center flex flex h-screen flex-col items-center justify-center justify-center">
-			<div className="xmin-h-screen webgl absolute absolute -top-[10vh] flex w-full sm:top-0">
+		<div className="flex align-center min-h-[91vh] flex-col items-center justify-center relative">
+			<div className="xmin-h-screen h-full webgl absolute -top-[17vh] flex w-full sm:-top-10">
 				<WebGLInitializer />
 			</div>
 			<Content />
@@ -23,7 +23,7 @@ export default function Hero({}) {
 
 function Content() {
 	return (
-		<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]">
+		<div className="z-10 grid min-h-[75vh] w-[90vw] grid-rows-[auto_1fr_auto] gap-4 px-6 sm:p-6 sm:mt-28 sm:min-h-[85vh] sm:w-[76vw]">
 			<div className="col-span-2 flex items-center justify-between">
 				<div className={cn('flex items-center', inter.className)}>
 					<div className="mr-4 hidden size-4 rounded-full bg-muted-foreground/70 sm:block"></div>
@@ -46,14 +46,14 @@ function Content() {
 				<div className={cn('self-end lg:max-w-[60%]', inter.className)}>
 					<div
 						className="text-center text-sm text-sm lg:text-left lg:text-left
-					
+
 					2xl:text-[1vw] 2xl:text-[1vw] 2xl:leading-[1.5vw] 2xl:leading-[1.5vw]"
 					>
 						<div className="flex items-center justify-center lg:justify-start">
 							<div className="mr-4 hidden size-4 rounded-full bg-muted-foreground/70 sm:block"></div>
 							<span className="text-sm text-muted-foreground/70 2xl:text-[1vw] 2xl:leading-[1vw]">
 								<strong className="mr-2 text-white">
-									Base AI
+									BaseAI
 								</strong>
 								<span className="text-muted-foreground/90">
 									The first Web AI Framework.

apps/baseai.dev/src/mdx/rehype.mjs

@@ -8,7 +8,7 @@ import theme from './themes/shades-of-purple.json' assert { type: 'json' };
 import lang from './languages.mjs';
 
 export function rehypeParseCodeBlocks() {
-	return (tree) => {
+	return tree => {
 		visit(tree, 'element', (node, _nodeIndex, parentNode) => {
 			if (node.tagName === 'code' && node.properties.className) {
 				parentNode.properties.language =
@@ -21,10 +21,10 @@ export function rehypeParseCodeBlocks() {
 let highlighter;
 
 export function rehypeShiki() {
-	return async (tree) => {
+	return async tree => {
 		highlighter =
 			highlighter ??
-			(await shiki.getHighlighter({ theme: theme , langs: lang  }));
+			(await shiki.getHighlighter({ theme: theme, langs: lang }));
 
 		visit(tree, 'element', node => {
 			if (
@@ -56,7 +56,7 @@ export function rehypeShiki() {
 }
 
 export function rehypeSlugify() {
-	return (tree) => {
+	return tree => {
 		let slugify = slugifyWithCounter();
 		visit(tree, 'element', node => {
 			if (node.tagName === 'h2' && !node.properties.id) {
@@ -67,7 +67,7 @@ export function rehypeSlugify() {
 }
 
 export function rehypeAddMDXExports(getExports) {
-	return (tree) => {
+	return tree => {
 		let exports = Object.entries(getExports(tree));
 
 		for (let [name, value] of exports) {
@@ -123,7 +123,7 @@ export const rehypePlugins = [
 	rehypeSlugify,
 	[
 		rehypeAddMDXExports,
-		(tree) => ({
+		tree => ({
 			sections: `[${getSections(tree).join()}]`
 		})
 	]

apps/baseai.dev/src/mdx/themes/index.mjs

@@ -1,3 +1,3 @@
-import shadesOfPurple from './shades-of-purple.json' assert { type: 'json' }
+import shadesOfPurple from './shades-of-purple.json' assert { type: 'json' };
 
-export default { shadesOfPurple }
+export default { shadesOfPurple };

apps/baseai.dev/src/mdx/themes/index.ts

@@ -1,3 +1,3 @@
-import shadesOfPurple from './shades-of-purple.json' assert { type: 'json' }
+import shadesOfPurple from './shades-of-purple.json' assert { type: 'json' };
 
-export default { shadesOfPurple }
+export default { shadesOfPurple };