Version 2 aino style

src/components/Header.tsx

@@ -2,18 +2,20 @@ import Navbar from "../components/Navbar";
 import Showcase from "./Showcase";
 function Header() {
   return (
-    <div className="@container bg-hero-pattern flex flex-col h-[130vh]">
+    <div className="@container bg-hero-pattern flex flex-col h-[230vh]">
 
       <Navbar />
 
       <div className="min-h-0 basis-2/5">
         <Showcase />
       </div>
-      <div className="p-10 min-h-0">
+      <div className="p-10 pr-40 pl-40 min-h-0">
         <h1 className="whitespace-nowrap">We are Sprout.</h1>
-        <h2 className=" text-right">
-          Welcome to our universe. A growing ecosystem of collaborationg people,
-          ideas and initiatives
+        <h2 className="text-right">
+          Welcome to our universe. A growing ecosystem
+        </h2>
+        <h2 className="text-right">
+            of collaborating people, ideas and initiatives
         </h2>
       </div>
     </div>

src/components/Intro/AsciiEffect.js

@@ -225,20 +225,30 @@ class AsciiEffect {
 
 					let strThisChar = aCharList[ iCharIdx ];
 
-					if ( strThisChar === undefined || strThisChar == ' ' )
+					if ( strThisChar === undefined || strThisChar === ' ' )
 						strThisChar = ' ';
 
 					if ( bColor ) {
 
+						if(iRed < 29 && x !== 0) {
+							// iRed < 25 means that the object is soo dark that it can be replaced by a
+							// lightweight character. It will not be visible but the width and height will correct.
+							//
+							strChars += 'A';
+						} else {
 						strChars += '<div style=\''
 							+ 'display:inline-block;'
-							+ 'width:17px;'
-							+ 'height:17px;'
+							+ 'width:16px;'
+							+ 'height:16px;'
 							+ 'color:rgb(' + Math.max(29, iRed) + ',' + Math.max(29, iGreen) + ',' + Math.max(29, iBlue) + ');'
 							+ ( bBlock ? 'background-color:rgb(' + iRed + ',' + iGreen + ',' + iBlue + ');' : '' )
 							+ ( bAlpha ? 'opacity:' + ( iAlpha / 255 ) + ';' : '' )
 							+ '\'>' + strThisChar + '</div>';
 
+						}
+
+
+
 					} else {
 
 						strChars += strThisChar;

src/components/Intro/Index.tsx

@@ -64,7 +64,7 @@ const Stuff = (props: ThreeElements['mesh']) => {
                 A
                 <meshStandardMaterial color={"grey"}/>
                 {
-                    <AsciiRenderer fgColor="white" bgColor="#0000"/>
+                    <AsciiRenderer fgColor="#0000" bgColor="#0000"/>
                 }
             </Text3D>
         </>
@@ -76,7 +76,7 @@ function AsciiRenderer({
                            renderIndex = 1,
                            bgColor = 'black',
                            fgColor = 'white',
-                           characters = ' AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', // Don't ask...
+                           characters = 'A',
                            invert = false,
                            color = true,
                            resolution = 0.12,
@@ -130,7 +130,7 @@ function AsciiRenderer({
 
 //
 function Intro() {
-    return <Canvas style={{width: '100%', height: '100%'}} camera={{position: [0, 0, 4.8]}}>
+    return <Canvas style={{width: '800px', height: '700px'}} camera={{position: [0, 0, 4.8]}}>
         <Stuff/>
     </Canvas>
 }

src/components/Layout.tsx

@@ -1,20 +1,21 @@
-import { ReactNode } from "react";
+import {ReactNode} from "react";
 import Footer from "../components/Footer";
 import Header from "../components/Header";
+
 interface Props {
-  children: ReactNode;
+    children: ReactNode;
 }
 
-function Layout({ children }: Props) {
-  return (
-    <div className="flex flex-col w-full gap-12">
-      <Header />
-      <main className="basis-full flex pr-10 pl-10 flex-col gap-12 sm:gap-48 main">
-       {children} 
-      </main>
-      <Footer />
-    </div>
-  );
+function Layout({children}: Props) {
+    return (
+        <main className="flex flex-col gap-12 sm:gap-48 main">
+            <Header/>
+            <div className="basis-full pr-20 pl-20 flex flex-col sm:gap-48">
+                {children}
+            </div>
+            <Footer/>
+        </main>
+    );
 }
 
 export default Layout;

src/index.css

@@ -25,6 +25,9 @@
     a:hover {
         color: #747bff;
     }
+    .main {
+        background-color: white;
+    }
     button {
         background-color: #f9f9f9;
     }