Update index layout

Test website on mobile.

packages/web/src/components/molecules/ContactCtaBanner/index.tsx

@@ -29,6 +29,9 @@ export const ContactCtaBanner: React.FC<ContactCtaBannerProps> = ({
 
 	React.useEffect(() => {
 		window.setTimeout(() => {
+			if (!visible) {
+				return;
+			}
 			autofocusRef.current?.focus();
 		});
 	}, [visible]);
@@ -47,7 +50,7 @@ export const ContactCtaBanner: React.FC<ContactCtaBannerProps> = ({
 				className="relative"
 			>
 				{hasBrand && (
-					<h1 className="text-center mt-0 mb-16 before:text-7xl sm:before:text-8xl before:block before:content-['I_am.'] text-base leading-none">
+					<h1 className="text-center mt-0 mb-16 font-thin before:text-7xl sm:before:text-8xl before:block before:content-['I_am.'] text-base leading-none">
 						<span className="text-4xl">
 							<Brand/>
 						</span>

packages/web/src/components/organisms/IndexLayout/index.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import * as Iceform from '@modal-sh/iceform-next';
 import {Layouts} from '@tesseract-design/viewfinder-react';
-import {MainLandingSection, MainLandingSectionProps} from '@/components/molecules/MainLandingSection';
+import {MainLandingSection} from '@/components/molecules/MainLandingSection';
 import {MakeSection, MakeSectionProps} from '@/components/molecules/MakeSection';
 import {EnvisionSection, EnvisionSectionProps} from '@/components/molecules/EnvisionSection';
 import {Footer} from '@/components/molecules/Footer';
 import {FeaturedProjectSection, FeaturedProjectSectionProps} from '@/components/molecules/FeaturedProjectSection';
 import {ContactCtaBanner} from '@/components/molecules/ContactCtaBanner';
-import {BackgroundGrid} from '@/components/molecules/BackgroundGrid';
+import {BackgroundGrid, BackgroundGridProps} from '@/components/molecules/BackgroundGrid';
 
 export interface IndexLayoutProps {
-	backgroundImages: MainLandingSectionProps['backgroundImages'];
+	backgroundImages: BackgroundGridProps['images'];
 	makeSectionData?: MakeSectionProps['data'];
 	envisionSectionData?: EnvisionSectionProps['data'];
 	featuredProjectData?: FeaturedProjectSectionProps[];
@@ -30,9 +30,10 @@ export const IndexLayout: React.FC<IndexLayoutProps> = ({
 	contactHasBrand = false,
 	iceformProps,
 }) => (
+	// TODO allow mobile to have background grid (improve performance)
 	<Layouts.Basic.Root className="contents">
 		<div
-			className="fixed top-0 left-0 w-full h-full"
+			className="hidden sm:block fixed top-0 left-0 w-full h-full"
 		>
 			<div className="w-[125%] h-[125%] absolute -top-[12.5%] -left-[12.5%] opacity-25">
 				<BackgroundGrid images={backgroundImages} />
@@ -41,9 +42,7 @@ export const IndexLayout: React.FC<IndexLayoutProps> = ({
 		<main className="contents">
 			{hasMainLandingSection && (
 				<>
-					<MainLandingSection
-						backgroundImages={backgroundImages}
-					/>
+					<MainLandingSection />
 					<div id="start" />
 				</>
 			)}