I create a segment of the landing page.

new-docs/.cache/content-v2/sha512/0c/ef/f1efe768e1673e25e16d2d48b11e4b9a705af0bcc958cdb28ed18b998675cb9d84db4f3fe5e6f27913befe9d0938dcb05c4f3857f2e5c01a80d713c34b1a

@@ -0,0 +1 @@
+{"hash":"9f49093e29730d812b731f7925af669053016d44e8fccfeaa317020cc0c15199","exports":["default","links"]}

new-docs/.cache/content-v2/sha512/29/f7/33a108ef7048cefa9013715655458584fe61c8b232b7f653b17754f5991103e85d815250fb4854bf8730d00b9109c4bf066b777d81fe47935b66a1c8fb7c

@@ -0,0 +1 @@
+{"hash":"88d193d2e3fec810df8093c6049c8530412b28a90d657bef4eab4146bf59e608","exports":["default"]}

new-docs/.cache/content-v2/sha512/4c/3d/de911cf9810bc5e7358422e79dfebbe863927b8df9e2a7c7e7fe6cd8b5839ea2064637a7d5b889e1a40d0a92027cedc138e48254cf93409181c1edfabac4

@@ -0,0 +1 @@
+{"hash":"455d597c5df1f07cf750517035adb4d729b8851942a4129ed83310d6cd4dfcae","exports":["default"]}

new-docs/.cache/content-v2/sha512/65/57/6bffed72975b5fe6e9040999db9cb4180824d7d325b6c2b2d68214626d210c90187451a3f34b32b506e39a499993dadca04abee0e0bdad826aabf555ff0d

@@ -0,0 +1 @@
+{"hash":"49cef58a8317c76840dc6c00197a0ba2e4c69ebd6574b27f911045b50f254c45","exports":["default","links"]}

new-docs/.cache/content-v2/sha512/75/62/85a252ba672eb518d4c7f002e68686d586d6387b32962c9d58d9b585e041fbe9d976421d50d7b6ca5155b04684b92c5c23b36c1a1fa9ba72b615f164a740

@@ -0,0 +1 @@
+{"hash":"a1752a8b7aee262db5cfbfb353574afeeaa2b02647edb05db67a6766d6ac3f24","exports":["default"]}

new-docs/.cache/content-v2/sha512/89/31/b45f5df27e03a75643189836778db5335d25a6e8f8f7ce3eb2442cd52c1f19c42d37916fc6cc0ab83a12a4ae2ac4015c40c4e79c3994b6225829276fe47f

@@ -0,0 +1 @@
+{"hash":"4844762d392e5f83d6cacfde09e3bd20c5be950284817561d8086e58077fafac","exports":["default"]}

new-docs/.cache/content-v2/sha512/b0/67/97d4c912eb95fba5ac694f54d0c9b04ac4609276f015cfbb148b6beeabee96df22e85b92fa87553a1b4f1d3468bc86dbbff7833524edb49e2977a598315b

@@ -0,0 +1 @@
+{"hash":"8eb409070653907e9f5a438a18049f1f878e54913d3643570436024b1de83525","exports":["default"]}

new-docs/.cache/content-v2/sha512/cd/0e/467145d8ec55d6f0d73e539ec012e956fd7a68237a61d3f0cf64e834e13553bba85dfb7e740a4606ab83054f3153dfbcb5e241178888d3b7b7ab783ad282

@@ -0,0 +1 @@
+{"hash":"5d1b4fddfcb98b9e6c18a35f7df508bfd087b62aee3a029cdfc3e934ad3ce2fc","exports":["default","links"]}

new-docs/.cache/content-v2/sha512/cf/b0/a7481d84c410ff483fa070225d18e0d76db35199861dc8f5c2bd660379afa0d69b6199065c374cf33935f544efdd8c80fec7ad876e22bcf9ab2f1d465ec2

@@ -0,0 +1 @@
+{"hash":"99fed110699e1ec74f3c3417e358bb7a0b677c86e3359612496f3429b5f01bcf","exports":["default","links"]}

new-docs/.cache/content-v2/sha512/d8/52/b905916908b4907b5422ec53b80802dbe2509756ca71a67ecbc8e72d3b5e8ed3ed7e8f02362a3752f9b6aa8520ccb8605f7f016a6fcdacf5a3572efa4af6

@@ -0,0 +1 @@
+{"hash":"eb85301e788d1f0dae81158d07fa753990a613bd1ffd55550a2773497178cf2b","exports":["default"]}

new-docs/.cache/content-v2/sha512/eb/f0/0d42657da71f9aaf58892407c0920d2ce2f4dc0ceeaadfc51681417ef42a0b8395076e0117fae4bf4f312d81ce36096ac8abf0b52621fa3c1ba103232ef8

@@ -0,0 +1 @@
+{"hash":"94f9b84ee47fe62e80bd1bfa326ace11bee3a1ee6e542f51718d33afc1b4d692","exports":["default","links"]}

new-docs/.cache/index-v5/d0/c4/d960260ece228d28f70e317741b3f3f3df05c53956d870235837ae2b73b4

@@ -0,0 +1,14 @@
+
+f0ac7e350df405243e388a02ee7d2dc140288755	{"key":"root.exports","integrity":"sha512-TD3ekRz5gQvF5zWEIued/rvoY5J7jfnip8fn/mzYtYOeogZGN6fVuInhpA0KkgJ87cE45IJUz5NAkYHB7fq6xA==","time":1700669243264,"size":97}
+6adb2a3af9cb74e0618c8676df45b7f97270bc0c	{"key":"root.exports","integrity":"sha512-2FK5BZFpCLSQe1Qi7FO4CALb4lCXVspxpn7LyOctO16O0+1+jwI2KjdS+baqhSDMuGBffwFqb82s9aNXLvpK9g==","time":1701168645574,"size":97}
+762402b7ef8a66e59abc02e6d717645d7b686491	{"key":"root.exports","integrity":"sha512-dWKFolK6Zy61GNTH8ALmhobVhtY4ezKWLJ1Y2bWF4EH76dl2Qh1Q17bKUVWwRoS5LFwjs2waH6m6crYV8WSnQA==","time":1701168672419,"size":97}
+df37cea07d7daaacbc78c5b87ea9d292f794ccb6	{"key":"root.exports","integrity":"sha512-sGeX1MkS65X7paxpT1TQybBKxGCSdvAVz7sUi2vuq+6W3yLoW5L6h1U6G08dNGi8htu/94M1JO20nil3pZgxWw==","time":1701173962827,"size":97}
+4bf27b65338e12a9716c12bf5131d2bc2ea067df	{"key":"root.exports","integrity":"sha512-KfczoQjvcEjO+pATcVZVRYWE/mHIsjK39lOxd1T1mRED6F2BUlD7SFS/hzDQC5EJxL8Ga3d9gf5Hk1tmocj7fA==","time":1701173992075,"size":97}
+66aaf7af55055b581b5e8da0270f16ff7ef8d1bf	{"key":"root.exports","integrity":"sha512-iTG0X13yfgOnVkMYmDZ3jbUzXSWm6Pj3zj6yRCzVLB8ZxC03kW/GzAq4OhKkrirEAVxAxOecOZS2IlgpJ2/kfw==","time":1701174559860,"size":97}
+958ae5e7a6b2e91f27fb93446eba4aeca99094b4	{"key":"root.exports","integrity":"sha512-KfczoQjvcEjO+pATcVZVRYWE/mHIsjK39lOxd1T1mRED6F2BUlD7SFS/hzDQC5EJxL8Ga3d9gf5Hk1tmocj7fA==","time":1701174569784,"size":97}
+d939e035d235487d32e2a26a287e2a0181b142b4	{"key":"root.exports","integrity":"sha512-6/ANQmV9px+ar1iJJAfAkg0s4vTcDO6q38UWgUF+9CoLg5UHbgEX+uS/TzEtgc42CWrIq/C1JiH6PBuhAyMu+A==","time":1701331337982,"size":105}
+83cc6d03936bdaeb0086efbd18a468da617e0052	{"key":"root.exports","integrity":"sha512-zQ5GcUXY7FXW8Nc+U57AEulW/XpoI3ph0/DPZOg04TVTu6hd+350CkYGq4MFTzFT37y14kEXiIjTt7ereDrSgg==","time":1701331601157,"size":105}
+d0c3fb5f386a34a1619a2f6272fe42fe63162f4a	{"key":"root.exports","integrity":"sha512-z7CnSB2ExBD/SD+gcCJdGODXbbNRmYYdyPXCvWYDea+g1pthmQZcN0zzOTX1RO/djID+x62HbiK8+asvHUZewg==","time":1701681441635,"size":105}
+bdb054ca93870ee81254f467b42701797c98dff6	{"key":"root.exports","integrity":"sha512-DO/x7+do4Wc+JeFtLUixHkuacFrwvMlYzbKO0YuZhnXLnYTbTz/l5vJ5E77+nQk43LBcTzhX8uXAGoDXE8NLGg==","time":1701752438172,"size":105}
+63a052d39a9bd5117b07f28183528f3c94f4bc7b	{"key":"root.exports","integrity":"sha512-z7CnSB2ExBD/SD+gcCJdGODXbbNRmYYdyPXCvWYDea+g1pthmQZcN0zzOTX1RO/djID+x62HbiK8+asvHUZewg==","time":1701752550202,"size":105}
+4a09f5fb0b4bbf5316740ef64a17f50377f83269	{"key":"root.exports","integrity":"sha512-ZVdr/+1yl1tf5ukECZnbnLQYCCTX0yW2wrLWghRibSEMkBh0UaPzSzK1BuOaSZmT2tygSr7g4L2tgmqr9VX/DQ==","time":1702018960193,"size":105}

new-docs/app/root.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { LiveReload } from "@remix-run/react";
+
+import { cssBundleHref } from "@remix-run/css-bundle";
+import type { LinksFunction } from "@remix-run/node";
+import {
+    Links,
+    Meta,
+    Outlet,
+    Scripts,
+  } from "@remix-run/react";
+import Index from "./src";
+
+export const links: LinksFunction = () => [
+  ...(cssBundleHref
+    ? [{ rel: "stylesheet", href: cssBundleHref }]
+    : []),
+  // ...
+];  
+export default function App() {
+    return (
+      <html>
+        <head>
+          <link
+            rel="icon"
+            href="data:image/x-icon;base64,AA"
+          />
+          <link rel="stylesheet" href="https://use.typekit.net/xwa0rlm.css" />
+          <Meta />
+          <Links />
+        </head>
+        <body>
+          <LiveReload />
+          <Index />
+          <Outlet />
+
+          <Scripts />
+        </body>
+      </html>
+    );
+  }
+

new-docs/app/src/Components/HomePage.css.ts

@@ -0,0 +1,152 @@
+import { globalFontFace, globalStyle, style } from "@vanilla-extract/css";
+
+globalFontFace('niveau-grotesk', {
+  src: 'url("https://use.typekit.net/af/b28757/00000000000000007735b52b/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"), url("https://use.typekit.net/af/b28757/00000000000000007735b52b/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"), url("https://use.typekit.net/af/b28757/00000000000000007735b52b/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype")',
+  fontDisplay: 'auto',
+  fontStyle: 'italic',
+  fontWeight: 400,
+  fontStretch: 'normal',
+});
+
+globalStyle("html, body", {
+  margin: 0,
+  padding: 0,
+  boxSizing: 'border-box',
+  backgroundColor: "#0A0C12",
+  overflowX: 'hidden',
+});
+
+
+
+export const landingPage = style({
+  width: "100%",
+  height: "100vh",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+});
+
+export const navbar = style({
+  width: "100%",
+  height: "80px",
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  padding: "0 20px",
+  background: "#0A0C12",
+  color: "white",
+});
+
+export const navigationContainer = style({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  width: "100%",
+});
+
+export const logo = style({
+  width: "106px",
+  height: "auto",
+  paddingLeft: "80px",
+});
+
+export const navLinks = style({
+  display: "flex",
+  justifyContent: "center",
+  gap: "50px",
+  alignItems: "center",
+  fontSize: "16px",
+  fontFamily: "niveau-grotesk",
+  paddingRight: '140px',
+  marginLeft: "auto", 
+  "@media": {
+    "screen and (max-width: 768px)": {
+      flexDirection: "column",
+      gap: "10px",
+      marginLeft: "0",
+    },
+  },
+});
+
+export const searchContainer = style({
+  display: "flex",
+  alignItems: "center",
+  position: "relative",
+  marginRight: '100px',
+  "@media": {
+    "screen and (max-width: 768px)": {
+      marginTop: "10px",
+    },
+  },
+});
+
+export const searchInput = style({
+  padding: "9px",
+  background: "rgba(168, 168, 168, 0.20)",
+  borderRadius: "8px",
+  width: "220px",
+  marginRight: "20px",
+  boxSizing: "border-box",
+  color: "rgba(255, 255, 255, 0.50)",
+  fontSize: "14px",
+  fontFamily: "niveau-grotesk",
+  fontWeight: '400px',
+  lineHeight: "20px",
+  border: "none",
+  outline: "none",
+  "@media": {
+    "screen and (max-width: 768px)": {
+      width: "100%", 
+      marginRight: '0',
+    },
+  },
+});
+
+export const contentContainer = style({
+  color: "white",
+  paddingTop: "35px",
+});
+
+export const contentH1 = style({
+  fontSize: "2rem",
+  fontFamily: "niveau-grotesk",
+});
+
+export const contentPara = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "#A8A8A8",
+  fontFamily: "niveau-grotesk",
+  fontSize: "18px",
+  fontWeight: "400px",
+});
+
+export const exploreButton = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+});
+
+export const exploreButtonInner = style({
+  color: "#FFF",
+  fontFamily: "niveau-grotesk",
+  fontSize: "18px",
+  fontStyle: "normal",
+  fontWeight: "500",
+  lineHeight: "normal",
+  backgroundColor: "#308BDE",
+  border: "none",
+  width: "100px",
+  height: "50px",
+  borderRadius: "5px",
+  marginTop: "35px",
+});
+
+
+
+
+
+
+
+

new-docs/app/src/Components/HomePage.tsx

@@ -0,0 +1,41 @@
+import * as styles from './HomePage.css';
+import Logo from '../Logo/logo.png';
+
+const HomePage = () => {
+  return (
+    <div className={styles.landingPage}>
+      <div className={styles.navbar}>
+        <div className={styles.navigationContainer}>
+          <img className={styles.logo} src={Logo} alt='Logo' />
+          <div className={styles.navLinks}>
+            <div>Docs</div>
+            <div>Components</div>
+            <div>Feedback</div>
+          </div>
+          <div className={styles.searchContainer}>
+            <input type="text" placeholder="Search.." className={styles.searchInput} />
+          </div>
+        </div>
+      </div>
+      <div className={styles.contentContainer}>
+        <div className={styles.contentH1}>
+          <h1>Elevate your project development</h1>
+          <h1 style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+            with&nbsp;<span style={{ color: '#308BDE' }}>Easy to use</span>
+          </h1>
+        </div>
+        <p className={styles.contentPara}>
+          Don't waste any more time struggling with UI coding. Try out our library and
+        </p>
+        <p className={styles.contentPara}>
+          experience the power of fast, effective development for yourself.
+        </p>
+        <div className={styles.exploreButton}>
+          <button className={styles.exploreButtonInner}>Explore</button>
+        </div>
+    </div>
+    </div>
+  )
+}
+
+export default HomePage

new-docs/app/src/index.tsx

@@ -0,0 +1,64 @@
+// import React from 'react';
+// import { Link } from '@remix-run/react';
+// import * as styles from './styles.css';
+// import Logo from './Logo/logo.png';
+
+// const LandingPage: React.FC = () => {
+//   return (
+//     <div className={styles.landingPage}>
+//       <div className={styles.navbar}>
+//         <div className={styles.navigationContainer}>
+//           <img className={styles.logo} src={Logo} alt='Logo' />
+//           <div className={styles.navLinks}>
+//             <div>Docs</div>
+//             <div>Components</div>
+//             <div>Feedback</div>
+//           </div>
+//           <div className={styles.searchContainer}>
+//             <input type="text" placeholder="Search.." className={styles.searchInput} />
+//           </div>
+//         </div>
+//       </div>
+//       <div className={styles.contentContainer}>
+//         <div className={styles.contentH1}>
+//           <h1>Elevate your project development</h1>
+//           <h1 style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+//             with&nbsp;<span style={{ color: '#308BDE' }}>Easy to use</span>
+//           </h1>
+//         </div>
+//         <p className={styles.contentPara}>
+//           Don't waste any more time struggling with UI coding. Try out our library and
+//         </p>
+//         <p className={styles.contentPara}>
+//           experience the power of fast, effective development for yourself.
+//         </p>
+//         <div className={styles.exploreButton}>
+//           <button className={styles.exploreButtonInner}>Explore</button>
+//         </div>
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default LandingPage;
+
+
+import React from 'react';
+import HomePage from './Components/HomePage';
+import { Button } from '@hover-design/react';
+
+const LandingPage: React.FC = () => {
+  return (
+    <>
+     <HomePage />
+    </>
+  );
+}
+export default LandingPage;
+
+
+
+
+
+
+