antstackio · Kuldeep2814 · Dec 11, 2023 · Dec 12, 2023 · Dec 12, 2023
diff --git a/new-docs/.gitignore b/new-docs/.gitignore
@@ -0,0 +1,2 @@
+build/
+.cache/
diff --git a/new-docs/app/root.tsx b/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>
+    );
+  }
+
diff --git a/new-docs/app/src/Components/HomePage.css.ts b/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",
+});
+
+
+
+
+
+
+
+
diff --git a/new-docs/app/src/Components/HomePage.tsx b/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
diff --git a/new-docs/app/src/Logo/logo.png b/new-docs/app/src/Logo/logo.png
diff --git a/new-docs/app/src/index.tsx b/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;
+
+
+
+
+
+
+