feat: [MarginFrontend] Home page

margin_frontend/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.0.8",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "eslint-plugin-react": "^7.37.4",
     "react": "^19.0.0",

margin_frontend/src/App.tsx

@@ -1,23 +1,8 @@
-import { useState } from 'react'
-import "./index.css"
-import { cn } from "./utils/cn.ts";
+import "./index.css";
+import { Home } from "./routes/index.tsx";
 
 function App() {
-  const [count, setCount] = useState(0)
-
-  return (
-    <div className={cn("flex", "items-center", "justify-center", "min-h-screen", "w-full", "bg-gray-800")}>
-      <div className={cn("flex", "flex-col", "items-center", "justify-center", "gap-4")}>
-        <h1 className={cn("font-bold", "text-3xl", "text-white")}>Margin frontend</h1>
-        <button
-          className={cn("bg-blue-400", "flex", "text-xl", "items-center", "justify-center", "w-full", "hover:shadow-lg hover:shadow-blue-200/20 hover:-translate-y-0.5 transition", "py-2", "rounded-xl", "text-white")}
-          onClick={() => setCount((count) => count + 1)}
-        >
-          count is {count}
-        </button>
-      </div>
-    </div>
-  )
+  return <Home />;
 }
 
-export default App
+export default App;

margin_frontend/src/index.css

@@ -1,2 +1,95 @@
 @import "tailwindcss";
 
+@font-face {
+  font-family: "InstrumentSans";
+  src: url("./assets/fonts/Instrument_Sans/static/InstrumentSans-Regular.ttf")
+    format("truetype");
+  font-weight: 400; /* Regular */
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "InstrumentSans";
+  src: url("./assets/fonts/Instrument_Sans/static/InstrumentSans-Medium.ttf")
+    format("truetype");
+  font-weight: 500; /* Medium */
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "InstrumentSans";
+  src: url("./assets/fonts/Instrument_Sans/static/InstrumentSans-SemiBold.ttf")
+    format("truetype");
+  font-weight: 600; /* Semibold */
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "InstrumentSans";
+  src: url("./assets/fonts/Instrument_Sans/static/InstrumentSans-Bold.ttf")
+    format("truetype");
+  font-weight: 700; /* Bold */
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "BricolageGrotesque";
+  src: url("./assets/fonts/Bricolage_Grotesque/static/BricolageGrotesque-Regular.ttf")
+    format("truetype");
+  font-weight: 400; /* Light */
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "BricolageGrotesque";
+  src: url("./assets/fonts/Bricolage_Grotesque/static/BricolageGrotesque-Medium.ttf")
+    format("truetype");
+  font-weight: 400; /* Regular */
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "BricolageGrotesque";
+  src: url("./assets/fonts/Bricolage_Grotesque/static/BricolageGrotesque-SemiBold.ttf")
+    format("truetype");
+  font-weight: 600; /* Medium */
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "BricolageGrotesque";
+  src: url("./assets/fonts/Bricolage_Grotesque/static/BricolageGrotesque-Bold.ttf")
+    format("truetype");
+  font-weight: 700; /* SemiBold */
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "PilotCommandSpaced";
+  src: url("./assets/fonts/Pilot-Command-Spaced/pilotcommandspaced.ttf")
+    format("truetype");
+  font-weight: 500; /* Light */
+  font-style: normal;
+}
+
+@theme {
+  /* Fonts */
+  --font-instrumentsans: "InstrumentSans";
+  --font-bricolageGrotesque: "BricolageGrotesque";
+  --font-pilotCommandSpaced: "PilotCommandSpaced";
+
+  /* Colors */
+  --color-text: #fffcfc;
+  --color-logo-text: #fff;
+  --color-nav-text: #b4b4b4;
+  --color-seperator: #252525;
+  --color-button-outline-border: #4f4f4f;
+  --color-headerText: #e5e5e5;
+
+  /* Other */
+  --text-logo: 13px;
+  --leading-logo: 15.86px;
+
+  --text-header-text-size: 64px;
+  --leading-header-text-lineheight: 68.35px;
+}

margin_frontend/src/routes/index.tsx

@@ -0,0 +1,49 @@
+import { Button } from "../ui/core/button";
+import { Footer } from "../ui/layout/footer";
+import { Header } from "../ui/layout/header";
+
+export function Home() {
+  return (
+    <div className="flex flex-col w-screen min-h-screen bg-black md:justify-between">
+      <Header />
+      <Content />
+      <Footer />
+    </div>
+  );
+}
+
+function Content() {
+  return (
+    <div className="mt-[100px] md:mt-0 pb-[112px] md:pb-0">
+      <h1 className="hidden text-center uppercase md:block text-header-text-size leading-header-text-lineheight font-pilotCommandSpaced text-headerText">
+        Trade, Earn, Grow
+      </h1>
+      <div className="space-y-8 md:hidden">
+        <h1 className="text-center uppercase  font-pilotCommandSpaced text-header-text-size leading-header-text-lineheight text-headerText">
+          Trade
+        </h1>
+        <div className="h-3.5 w-3.5 rounded-full bg-white mx-auto" />
+        <h1 className="text-center uppercase  font-pilotCommandSpaced text-header-text-size leading-header-text-lineheight text-headerText">
+          Earn
+        </h1>
+        <div className="h-3.5 w-3.5 rounded-full bg-white mx-auto" />
+        <h1 className="text-center uppercase  font-pilotCommandSpaced text-header-text-size leading-header-text-lineheight text-headerText">
+          Grow
+        </h1>
+      </div>
+
+      <p className="w-10/12 mx-auto mt-4 text-sm font-medium text-center font-bricolageGrotesque md:text-base text-text">
+        Trade smarter, earn bigger, and grow your portfolio with confidence.
+      </p>
+      <div className="flex justify-center mt-12">
+        <Button
+          variant={"outline"}
+          size={"lg"}
+          className="w-[219px] text-text uppercase text-sm font-normal "
+        >
+          Launch app
+        </Button>
+      </div>
+    </div>
+  );
+}

margin_frontend/src/ui/core/button.tsx

@@ -0,0 +1,53 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { ReactNode } from "react";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center cursor-pointer rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-button-outline-border text-text bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        sm: "h-8 px-3 text-sm",
+        md: "h-14 text-sm",
+        lg: "h-[72px] text-xl font-normal",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  children: ReactNode;
+}
+
+export function Button({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      className={buttonVariants({ variant, size, className: className ?? "" })}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

margin_frontend/src/ui/layout/footer.tsx

@@ -0,0 +1,30 @@
+const socials = [
+  {
+    icon: "./src/assets/images/DiscordLogo.png",
+    link: "https://discord.com/",
+  },
+  {
+    icon: "./src/assets/images/XLogo.png",
+    link: "https://twitter.com/SpotNet_123",
+  },
+  {
+    icon: "./src/assets/images/TelegramLogo.png",
+    link: "https://t.me/djeck_vorobey1",
+  },
+];
+export function Footer() {
+  return (
+    <div className="hidden md:w-11/12 xl:w-[1280px] px-10 pb-10 pt-6 mx-auto h-[88px] md:flex  justify-between">
+      <h4 className="font-bold uppercase font-instrumentsans text-text text-logo leading-logo">
+        Margin
+      </h4>
+      <div className="flex items-center h-6 gap-6">
+        {socials.map((social, index) => (
+          <a href={social.link} key={index}>
+            <img src={social.icon} alt="" className="w-6 h-6" />
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}

margin_frontend/src/ui/layout/header.tsx

@@ -0,0 +1,42 @@
+import { Button } from "../core/button";
+
+const navlink = [
+  {
+    title: "Pool",
+    link: "/pool",
+  },
+  {
+    title: "Trade",
+    link: "/trade",
+  },
+];
+export function Header() {
+  return (
+    <div className="h-[88px] md:h-[120px] flex items-center justify-between px-4 md:px-14 lg:px-20 w-full">
+      <h4 className="font-bold uppercase font-instrumentsans text-text text-logo leading-logo">
+        Margin
+      </h4>
+      <nav className="items-center hidden gap-4 md:flex">
+        {navlink.map((link, index) => (
+          <>
+            <div key={index}>
+              <a
+                href={link.link}
+                className="text-sm font-normal text-nav-text font-bricolageGrotesque"
+              >
+                {link.title}
+              </a>
+            </div>
+            {index === 0 && <div className="w-[2px] h-[18px] bg-seperator" />}
+          </>
+        ))}
+      </nav>
+      <Button
+        variant={"outline"}
+        className="h-12 w-[161px] text-text uppercase text-sm font-normal mt-1"
+      >
+        Connect Wallet
+      </Button>
+    </div>
+  );
+}