Added search section to the homepage

app/components/Home/HomeCollaborateSection.tsx

@@ -5,8 +5,11 @@ import { HomeSection } from "./HomeSection";
 
 export function HomeCollaborateSection() {
   return (
-    <HomeSection containerClassName="py-10 px-6 bg-black md:py-36 lg:py-20">
-      <div className="w-full md:pr-10 md:w-1/2">
+    <HomeSection
+      containerClassName="py-10 px-6 bg-black md:py-36 lg:py-20"
+      reversed
+    >
+      <div className="w-full md:pl-10 md:w-1/2">
         <ExtraLargeTitle className="text-white mb-4">
           Collaborate with the whole world (and yourself)
         </ExtraLargeTitle>

app/components/Home/HomeSearchSection.tsx

@@ -0,0 +1,24 @@
+import { AutoplayVideo } from "../AutoplayVideo";
+import { ExtraLargeTitle } from "../Primitives/ExtraLargeTitle";
+import { SmallSubtitle } from "../Primitives/SmallSubtitle";
+import { HomeSection } from "./HomeSection";
+
+export function HomeSearchSection() {
+  return (
+    <HomeSection containerClassName="py-10 px-6 bg-black md:py-36 lg:py-20">
+      <div className="w-full md:pr-10 md:w-1/2">
+        <ExtraLargeTitle className="text-white mb-4">
+          Quickly search your whole JSON file
+        </ExtraLargeTitle>
+        <SmallSubtitle className="mb:6 md:mb-10">
+          Search for absolutely anything in your JSON file with blistering
+          speed. Use keyboard shortcuts to make navigating your files even
+          faster.
+        </SmallSubtitle>
+      </div>
+      <div className="w-full md:w-1/2">
+        <AutoplayVideo src="/home/JsonHeroSearch.mp4" />
+      </div>
+    </HomeSection>
+  );
+}

app/routes/index.tsx

@@ -4,6 +4,7 @@ import { HomeFeatureGridSection } from "~/components/Home/HomeFeatureGridSection
 import { HomeHeader } from "~/components/Home/HomeHeader";
 import { HomeHeroSection } from "~/components/Home/HomeHeroSection";
 import { HomeInfoBoxSection } from "~/components/Home/HomeInfoBoxSection";
+import { HomeSearchSection } from "~/components/Home/HomeSearchSection";
 import { HomeFooter } from "~/components/Home/HomeFooter";
 
 export default function Index() {
@@ -13,6 +14,7 @@ export default function Index() {
       <HomeHeroSection />
       <HomeInfoBoxSection />
       <HomeEdgeCasesSection />
+      <HomeSearchSection />
       <HomeCollaborateSection />
       <HomeFeatureGridSection />
       <HomeFooter />