adding the landing page

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

src/App.jsx

@@ -1,10 +1,12 @@
-import "./App.css";
+import LandingPage from "./components/LandingPage";
+import Navbar from "./components/Navbar";
 
 function App() {
   return (
-    <>
-      <h1 className="text-3xl font-bold underline">Hello world!</h1>
-    </>
+    <div className="w-full h-screen  text-white">
+      <Navbar />
+      <LandingPage />
+    </div>
   );
 }
 

src/components/LandingPage.jsx

@@ -0,0 +1,45 @@
+import { FaLongArrowAltUp } from "react-icons/fa";
+
+const LandingPage = () => {
+  const titles = ["We Create", "Eye-opening", "presentations"];
+  const below_border = [
+    "For public and private companies",
+    "From the first pitch to IPO",
+  ];
+  return (
+    <div className="w-full h-screen bg-zinc-900 pt-1">
+      <div className="TextStructure mt-52 px-20">
+        {titles.map((title, index) => (
+          <div key={index} className="Masker">
+            <div className="w-fit flex items-center">
+              <h1 className="font-['Test_Founders_Grotesk_X-Condensed'] uppercase text-[138px] leading-[104px]  font-bold tracking-tight">
+                {title}
+              </h1>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="border-t-[1px] border-zinc-800 mt-32 flex justify-between items-center tracking-tight leading-none py-5 px-20">
+        {below_border.map((phrase, index) => (
+          <p key={index} className="text-md font-light ">
+            {phrase}
+          </p>
+        ))}
+
+        <div className="start flex gap-5 items-center">
+          <div className="px-5 py-2 border-[1px] border-zinc-500 rounded-full uppercase font-light text-md  ">
+            start the project
+          </div>
+          <div className="w-10 h-10 rounded-full border-[1px] border-zinc-500 flex items-center justify-center ">
+            <span className="rotate-[45deg]">
+              <FaLongArrowAltUp />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LandingPage;

src/components/Navbar.jsx

@@ -0,0 +1,27 @@
+const Navbar = () => {
+  const links = ["Service", "Our Works", "About us", "Insights", "Contact us"];
+
+  return (
+    <div className="fixed z-[999] px-20 w-full py-8 font-[ 'Neue_Montreal_Regular'] flex justify-between items-center">
+      <div className="logo">
+        <img src="./ochi.svg" alt="ochi" />
+      </div>
+
+      <div className="links flex gap-10">
+        {links.map((item, index) => (
+          <a
+            href="#"
+            key={index}
+            className={`capitalize text-lg font-light ${
+              index === 4 ? "ml-32" : ""
+            }`}
+          >
+            {item}
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Navbar;