Added a new section

app/page.tsx

@@ -127,7 +127,7 @@ export default function Home() {
   return (
     <>
       <Header />
-      <main className="flex-grow px-4 pb-4">
+      <main className="flex-grow">
         {!showResult && (
           <Hero
             promptValue={promptValue}

components/Hero.tsx

@@ -2,6 +2,8 @@ import Image from "next/image";
 import { FC } from "react";
 import InputArea from "./InputArea";
 import mainImg from "../public/new-hero.png";
+import sectionBg from "../public/section-bg.png";
+import SectionBg from "./NewSection";
 
 type THeroProps = {
   promptValue: string;
@@ -19,7 +21,7 @@ const Hero: FC<THeroProps> = ({
   };
 
   return (
-    <div className="mx-auto flex max-w-2xl flex-col items-center justify-center">
+    <div className="mx-auto flex flex-col items-center justify-center ">
       <a
         className="mb-4 inline-flex h-7 shrink-0 items-center gap-[9px] rounded-[50px] border-[0.5px] border-solid border-[#E6E6E6] bg-[rgba(234,238,255,0.65)] bg-white px-5 py-4 shadow-[0px_1px_1px_0px_rgba(0,0,0,0.25)]"
         href="https://www.together.ai/"
@@ -42,13 +44,13 @@ const Hero: FC<THeroProps> = ({
           Tutor
         </span>
       </h2>
-      <p className="mt-4 text-balance text-center">
+      <p className="mt-4 max-w-2xl text-balance text-center">
         Enter a topic you want to learn about along with the education level you
         want to be taught at and generate a personalized tutor tailored to you!
       </p>
 
       {/* input section */}
-      <div className="mt-4 w-full pb-6">
+      <div className="mt-6 max-w-3xl w-full pb-6">
         <InputArea
           promptValue={promptValue}
           setPromptValue={setPromptValue}
@@ -93,7 +95,9 @@ const Hero: FC<THeroProps> = ({
         </span>
       </p> */}
       <Image src={mainImg} alt="hero" className="my-32 max-w-7xl" />
+      <SectionBg />
     </div>
+
   );
 };
 

components/NewSection.tsx

@@ -0,0 +1,58 @@
+import Image from "next/image";
+import sectionBg from "../public/section-bg.png";
+import arrowIcon from "../public/arrow-icon.png";
+import { FC } from "react";
+import githubIcon from "../public/github-icon.png"
+
+const NewSection: FC = () => {
+  return (
+    <div className="relative w-full h-[770px] m-0 p-0">
+      <Image
+        src={sectionBg}
+        alt="section background"
+        layout="fill"
+        objectFit="cover"
+        objectPosition="center"
+        className="-z-10"
+      />
+      <div className="text-white relative flex flex-col items-center justify-center h-full p-10 text-center">
+        <h2 className="text-[52px] mb-4">
+          Powered by <b>Llama 3.1 405B</b> and <b>Llama Guard</b>
+        </h2>
+        <p className="w-[758px] mb-8">
+          This app leverages the new 405B Llama model to deliver personalized educational content to everyone and Llama Guard to keep the content safe for everyone, all powered through the Together AI inference engine 2.0.
+        </p>
+        <div className="flex gap-4">
+          <button className="bg-white flex w-[151px] h-[48px] cursor-pointer items-center justify-center gap-[5px] rounded border px-2.5 py-2 transition hover:bg-gray-200">
+            <Image
+              unoptimized
+              src={arrowIcon}
+              alt="Try it out!"
+              width={14}
+              height={14}
+              className="w-[14px]"
+            />
+            <span className="text-sm font-light leading-[normal] text-[#1B1B16]">
+              Try it now!
+            </span>
+          </button>
+          <button className="bg-[#075BC6] flex w-[194px] h-[48px] cursor-pointer items-center justify-center gap-[5px] rounded border border-[#252525] px-2.5 py-2 transition hover:bg-[#1064CF]">
+            <Image
+              unoptimized
+              src={githubIcon}
+              alt="Star on Github"
+              width={14}
+              height={14}
+              className="w-[16px] color-"
+            />
+            <span className="text-sm font-light leading-[normal] text-[#ffffff]">
+              Star on Github
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NewSection;