🐛 FIX: Logo Overlapping and Content Spacing Fix (#95)

* �  Logo Overlapping and Content Spacing Fix

* 🐛 FIX: WebGL Code Cleanup

Author: ObaidNadeem

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

@@ -45,9 +45,9 @@ function Content() {
 			<div className="col-span-2 flex w-full flex-col-reverse items-center justify-between lg:flex-row lg:items-start">
 				<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
+						className="text-center text-sm lg:text-left
 
-					2xl:text-[1vw] 2xl:text-[1vw] 2xl:leading-[1.5vw] 2xl:leading-[1.5vw]"
+					2xl:text-[1vw] 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>
@@ -245,4 +245,4 @@ function CopyableCommand({ command }: CopyableCommandProps) {
 			</div>
 		</div>
 	);
-}
+}

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

@@ -29,21 +29,6 @@ const WebGLInitializer = () => {
 		canvas.width = window.innerWidth;
 		canvas.height = window.innerHeight;
 
-		// const fontFace = new FontFace(
-		// 	'Grotesk',
-		// 	'url(/AlteHaasGroteskBold.ttf)'
-		// );
-		// document.fonts.add(fontFace);
-
-		// const style = document.createElement('style');
-		// style.innerHTML = `
-		// 	  @import url(/AlteHaasGroteskBold.ttf);
-		// 	  body {
-		// 	    font-family: 'Grotesk', sans-serif;
-		// 	  }
-		// 	`;
-		// document.head.appendChild(style);
-
 		const textDiv = document.createElement('div');
 		textDiv.style.position = 'absolute';
 		textDiv.style.left = '0';
@@ -54,7 +39,6 @@ const WebGLInitializer = () => {
 		textDiv.style.fontFamily = 'Grotesk';
 		textDiv.style.color = 'rgba(255,255,255,1)';
 		textDiv.style.display = 'flex';
-		// textDiv.style.lineHeight = '0px';
 		textDiv.style.justifyContent = 'center';
 		textDiv.style.alignItems = 'center';
 		textDiv.textContent = 'BASE AI';
@@ -73,7 +57,7 @@ const WebGLInitializer = () => {
 			await document.fonts.ready;
 			document.body.appendChild(textDiv);
 
-			const lineHeight = window.getComputedStyle(textDiv).lineHeight; // e.g., "20px"
+			const lineHeight = window.getComputedStyle(textDiv).lineHeight; 
 			const y = parseFloat(lineHeight);
 
 			const canvas = await html2canvas(textDiv, {
@@ -84,7 +68,6 @@ const WebGLInitializer = () => {
 				logging: false,
 				y: y * 0,
 				x: 0,
-				// foreignObjectRendering: true,
 				onclone: document => {
 					Array.from(document.querySelectorAll('*')).forEach(e => {
 						let existingStyle = e.getAttribute('style') || '';
@@ -133,7 +116,6 @@ const WebGLInitializer = () => {
 			}
 		);
 
-		// Custom shader material for the enhanced liquid wavy effect
 		const material = new THREE.ShaderMaterial({
 			transparent: true,
 			uniforms: {
@@ -409,7 +391,6 @@ const WebGLInitializer = () => {
     `
 		});
 
-		// Create a mesh with the geometry and material
 		const sphere = new THREE.Mesh(geometry, material);
 		scene.add(sphere);
 
@@ -418,7 +399,7 @@ const WebGLInitializer = () => {
 		function calculateCameraZ(screenWidth: number, screenHeight: number) {
 			let cameraZ;
 
-			// Breakpoints based on screen width and height
+		
 			if (screenWidth <= 768) {
 				if (screen.availWidth < screen.availHeight) {
 					cameraZ = 4.5;
@@ -427,46 +408,41 @@ const WebGLInitializer = () => {
 				}
 			} else if (screenWidth > 768 && screenWidth <= 1920) {
 				if (screenHeight <= 1080) {
-					cameraZ = 2; // Full HD screens (1920x1080)
+					cameraZ = 2; 
 				} else {
-					cameraZ = 1.9; // Higher aspect ratio or larger height
+					cameraZ = 1.9;
 				}
 			} else if (screenWidth > 1920 && screenWidth <= 2440) {
 				if (screenHeight <= 1080) {
-					cameraZ = 1.75; // Wide screens with Full HD height
+					cameraZ = 1.75;
 				} else {
-					cameraZ = 1.65; // Taller screens with higher resolutions
+					cameraZ = 1.65;
 				}
 			} else if (screenWidth > 2440) {
 				if (screenHeight <= 1440) {
-					cameraZ = 1.5; // Ultra-wide or larger 2K displays
+					cameraZ = 1.5; 
 				} else {
-					cameraZ = 1.4; // 4K and above
+					cameraZ = 1.4; 
 				}
 			}
 
 			return cameraZ;
 		}
 
-		// Get screen width and height
 		const screenWidth = window.innerWidth;
 		const screenHeight = window.innerHeight;
 
-		// Calculate camera Z position based on breakpoints
 		const cameraZ = calculateCameraZ(screenWidth, screenHeight);
 		if (cameraZ) camera.position.z = cameraZ;
 
-		// Raycaster setup
 		const raycaster = new THREE.Raycaster();
 		const mouse = new THREE.Vector2();
 
-		// Animation loop
 		const animate = () => {
 			requestAnimationFrame(animate);
-			material.uniforms.u_time.value += 0.02; // Update time for animation
+			material.uniforms.u_time.value += 0.02; 
 			material.uniforms.u_viewVector.value = camera.position;
 
-			// Update mouse position in the shader
 			raycaster.setFromCamera(mouse, camera);
 			const intersects = raycaster.intersectObject(sphere);
 			if (intersects.length > 0) {
@@ -501,13 +477,6 @@ const WebGLInitializer = () => {
 
 			updateCameraPosition();
 
-			// Update background texture with new dimensions
-			createHighResBackgroundTexture(width, height).then(texture => {
-				scene.background = texture;
-				if (material.uniforms && material.uniforms.u_background) {
-					material.uniforms.u_background.value = texture;
-				}
-			});
 			createHighResBackgroundTexture(width, height).then(texture => {
 				scene.background = texture;
 				if (material.uniforms && material.uniforms.u_background) {
@@ -529,4 +498,4 @@ const WebGLInitializer = () => {
 	return <div ref={mountRef} />;
 };
 
-export default WebGLInitializer;
+export default WebGLInitializer;

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

@@ -75,9 +75,6 @@
 	body {
 		@apply bg-background text-foreground;
 	}
-	img {
-		display: inline-block !important;
-	}
 }
 
 ::selection {