Merge pull request #634 from kcmikee/main

feat: [MarginFrontend] Home page

margin_frontend/package.json

@@ -12,6 +12,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",
@@ -22,6 +23,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",
+    "@playwright/test": "^1.50.1",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",

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,97 @@
 @import "tailwindcss";
 
+@font-face {
+  font-family: "InstrumentSans";
+  src: url("./assets/fonts/Instrument_Sans/static/InstrumentSans-Regular.ttf")
+    format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "InstrumentSans";
+  src: url("./assets/fonts/Instrument_Sans/static/InstrumentSans-Medium.ttf")
+    format("truetype");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "InstrumentSans";
+  src: url("./assets/fonts/Instrument_Sans/static/InstrumentSans-SemiBold.ttf")
+    format("truetype");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "InstrumentSans";
+  src: url("./assets/fonts/Instrument_Sans/static/InstrumentSans-Bold.ttf")
+    format("truetype");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "BricolageGrotesque";
+  src: url("./assets/fonts/Bricolage_Grotesque/static/BricolageGrotesque-Regular.ttf")
+    format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "BricolageGrotesque";
+  src: url("./assets/fonts/Bricolage_Grotesque/static/BricolageGrotesque-Medium.ttf")
+    format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "BricolageGrotesque";
+  src: url("./assets/fonts/Bricolage_Grotesque/static/BricolageGrotesque-SemiBold.ttf")
+    format("truetype");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "BricolageGrotesque";
+  src: url("./assets/fonts/Bricolage_Grotesque/static/BricolageGrotesque-Bold.ttf")
+    format("truetype");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "PilotCommandSpaced";
+  src: url("./assets/fonts/Pilot-Command-Spaced/pilotcommandspaced.ttf")
+    format("truetype");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@theme {
+  /* Fonts */
+  --font-instrumentsans: "InstrumentSans";
+  --font-bricolageGrotesque: "BricolageGrotesque";
+  --font-pilotCommandSpaced: "PilotCommandSpaced";
+
+  /* Colors */
+  --color-baseWhite: #fffcfc;
+  --color-navLinkColor: #b4b4b4;
+  --color-navSeperatorColor: #252525;
+  --color-btnBorderColor: #4f4f4f;
+  --color-headerText: #e5e5e5;
+
+  --color-navbg: #161616;
+  --color-pageBg: #0e0e0e;
+
+  /* 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,45 @@
+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-pageBg 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-baseWhite">
+        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]">
+          Launch app
+        </Button>
+      </div>
+    </div>
+  );
+}

margin_frontend/src/ui/core/button.tsx

@@ -0,0 +1,54 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { ReactNode } from "react";
+import { cn } from "../../utils/cn";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center uppercase 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:
+          "text-baseWhite border border-btnBorderColor text-baseWhite bg-transparent font-normal",
+        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-12 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={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

margin_frontend/src/ui/layout/footer.tsx

@@ -0,0 +1,33 @@
+const socials = [
+  {
+    icon: "src/assets/img/DiscordLogo.png",
+    link: "https://discord.com/",
+    title: "Discord",
+  },
+  {
+    icon: "src/assets/img/XLogo.png",
+    link: "https://twitter.com/SpotNet_123",
+    title: "X",
+  },
+  {
+    icon: "src/assets/img/TelegramLogo.png",
+    link: "https://t.me/djeck_vorobey1",
+    title: "Telegram",
+  },
+];
+export function Footer() {
+  return (
+    <div className="hidden md:w-11/12 xl:w-[1280px] px-10 rounded-t-4xl lg:bg-navbg pb-10 pt-6 mx-auto h-[88px] md:flex  justify-between">
+      <h4 className="font-bold uppercase font-instrumentsans text-baseWhite 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="size-6" />
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}

margin_frontend/src/ui/layout/header.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+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] rounded-b-4xl lg:bg-navbg flex items-center justify-between px-4 md:px-14 lg:px-20 w-full">
+      <h4 className="font-bold uppercase font-instrumentsans text-baseWhite text-logo leading-logo">
+        Margin
+      </h4>
+      <nav className="items-center hidden gap-4 md:flex">
+        {navlink.map((link, index) => (
+          <React.Fragment key={index}>
+            <a
+              href={link.link}
+              className="text-sm font-normal text-navLinkColor font-bricolageGrotesque"
+            >
+              {link.title}
+            </a>
+            {index === 0 && (
+              <div className="w-[2px] h-[18px] bg-navSeperatorColor" />
+            )}
+          </React.Fragment>
+        ))}
+      </nav>
+      <Button variant={"outline"} className="w-[164px]" size={"md"}>
+        Connect Wallet
+      </Button>
+    </div>
+  );
+}

margin_frontend/vite.config.ts

@@ -8,8 +8,9 @@ export default defineConfig({
     name: "react",
     browser: {
       enabled: true,
-      name: "chromium",
       provider: "playwright",
+      headless: true,
     },
+    exclude: ["test/browser/**/*"],
   },
 });