Initial commit

src/templates/FeaturesPage/Hero/index.tsx

@@ -0,0 +1,38 @@
+import Heading from "@/components/Heading";
+import Image from "@/components/Image";
+import Section from "@/components/Section";
+
+type HeroProps = {};
+
+const Hero = ({}: HeroProps) => (
+    <Section className="overflow-hidden md:-mb-10 xl:-mb-20">
+        <div className="container relative z-2 md:grid md:grid-cols-2 md:items-center md:gap-10 lg:gap-48">
+            <Heading
+                className="md:mt-12 lg:max-w-[30rem] lg:mt-20"
+                textAlignClassName="md:text-left"
+                titleLarge="Main features of Brainwave"
+                textLarge="Here are some of the core features of Brainwavethat make it stand out from other chat applications"
+            />
+            <div className="relative">
+                <Image
+                    className="w-full md:min-w-[125%] xl:min-w-full"
+                    src="/images/features/features.png"
+                    width={547}
+                    height={588}
+                    alt="Features"
+                />
+                <div className="absolute top-0 left-1/2 w-full">
+                    <Image
+                        className="w-full"
+                        src="/images/grid.png"
+                        width={550}
+                        height={550}
+                        alt="Grid"
+                    />
+                </div>
+            </div>
+        </div>
+    </Section>
+);
+
+export default Hero;