Merge pull request #3 from TheNestDevs/dev-falcon

add base UI
TheNestDevs · Mar 25, 2024 · f8ab95f · f8ab95f
2 parents 8de1100 + d499641
commit f8ab95f
Show file tree

Hide file tree

Showing 12 changed files with 140 additions and 90 deletions.
diff --git a/app/index.html b/app/index.html
@@ -1,10 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>SnTx</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/app/src/App.css b/app/src/App.css
@@ -1,78 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: #222831;
-    --foreground: 0 0% 3.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    background: #222831;
-    color: #fff;
-  }
-}

diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -1,10 +1,31 @@
+import { ArrowDown, ArrowUp } from "lucide-react";
 import "./App.css";
+import ActionButton from "./components/atoms/actionButton";
+import Blur from "./components/atoms/blur";
+import Header from "./components/molecules/header";
+import Hero from "./components/molecules/hero";
 
 function App() {
   return (
-    <div>
-      <div className="w-full h-36 flex flex-col justify-center font-noto text-5xl font-semibold text-center mx-auto">
-        SnTx
+    <div className="w-[100vw]">
+      <Blur />
+      <div className="sm:mx-20 mx-6 sm:mt-14 mt-6 font-poppins">
+        <Header />
+        <Hero className="sm:mt-24 mt-20" />
+        <div className="flex sm:flex-row flex-col sm:bg-transparent bg-card rounded-2xl sm:py-0 py-24 sm:px-0 px-11 justify-center sm:mt-24 mt-7 gap-[20vw]">
+          <ActionButton>
+            <div className="flex gap-2">
+              Send
+              <ArrowUp className="sm:group-hover:-translate-y-1 transition-transform ease-in-out" />
+            </div>
+          </ActionButton>
+          <ActionButton>
+            <div className="flex gap-2">
+              Receive
+              <ArrowDown className="sm:group-hover:translate-y-1 transition-transform ease-in-out" />
+            </div>
+          </ActionButton>
+        </div>
       </div>
     </div>
   );

diff --git a/app/src/components/atoms/actionButton.tsx b/app/src/components/atoms/actionButton.tsx
@@ -0,0 +1,11 @@
+import { FCProps } from "../../types";
+
+const ActionButton: FCProps = ({ children }) => {
+  return (
+    <div className="group cursor-pointer transition-colors ease-in-out sm:w-[25vw] w-full sm:h-[20vw] h-20 text-2xl flex flex-col items-center justify-center ring-2 ring-ring sm:rounded-[3vw] rounded-full">
+      {children}
+    </div>
+  );
+};
+
+export default ActionButton;
diff --git a/app/src/components/atoms/blur.tsx b/app/src/components/atoms/blur.tsx
@@ -0,0 +1,9 @@
+const Blur = () => {
+  return (
+    <div className="absolute w-full -z-10 top-0">
+      <div className="mx-auto sm:w-[10vw] w-[20vw] sm:blur-[8vw] blur-[16vw] aspect-square bg-accent translate-y-[-50%]"></div>
+    </div>
+  );
+};
+
+export default Blur;
diff --git a/app/src/components/atoms/githubLogo.tsx b/app/src/components/atoms/githubLogo.tsx
@@ -0,0 +1,25 @@
+import { FCProps } from "../../types";
+
+const GithubLogo: FCProps = ({ className }) => {
+  return (
+    <div className={className}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="35"
+        height="35"
+        fill="none"
+        viewBox="0 0 35 35"
+      >
+        <path
+          transform="scale(1.43)"
+          stroke="#fff"
+          strokeLinejoin="round"
+          d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 006.838 9.488c.5.087.687-.213.687-.475 0-.238-.013-1.026-.013-1.863-2.512.463-3.162-.613-3.362-1.175-.112-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.012-.662.787-.013 1.35.725 1.537 1.025.9 1.512 2.338 1.087 2.913.825.087-.65.35-1.088.637-1.338-2.225-.25-4.55-1.112-4.55-4.937 0-1.088.388-1.988 1.025-2.688-.1-.25-.45-1.275.1-2.65 0 0 .838-.262 2.75 1.025.8-.225 1.65-.337 2.5-.337s1.7.112 2.5.337c1.913-1.3 2.75-1.025 2.75-1.025.55 1.375.2 2.4.1 2.65.637.7 1.025 1.588 1.025 2.688 0 3.837-2.337 4.687-4.563 4.937.363.313.675.913.675 1.85 0 1.338-.012 2.413-.012 2.75 0 .263.188.575.688.475A10.016 10.016 0 0022 12c0-5.525-4.475-10-10-10z"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+    </div>
+  );
+};
+
+export { GithubLogo };
diff --git a/app/src/components/molecules/header.tsx b/app/src/components/molecules/header.tsx
@@ -0,0 +1,34 @@
+import { MenuIcon } from "lucide-react";
+import { GithubLogo } from "../atoms/githubLogo";
+
+const Header = () => {
+  return (
+    <div className="w-full h-10 flex justify-between font-poppins ">
+      <div className="text-3xl flex flex-col justify-center font-semibold">
+        SnTx
+      </div>
+      <div className="flex flex-col justify-center sm:hidden">
+        <MenuIcon size={24} />
+      </div>
+      <div className="h-full hidden sm:flex flex-col justify-center">
+        <div className="flex text-xl gap-16 font-medium">
+          <a
+            href="/about"
+            className="cursor-pointer hover:text-accent transition-colors ease-in-out flex flex-col justify-center"
+          >
+            About
+          </a>
+          <a
+            href="https://github.com/TheNestDevs/SnTx"
+            className="flex flex-col justify-center w-12 h-12 hover:bg-[#ffffff22] transition-colors ease-in-out rounded-full"
+            target="_blank"
+          >
+            <GithubLogo className="mx-auto" />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;
diff --git a/app/src/components/molecules/hero.tsx b/app/src/components/molecules/hero.tsx
@@ -0,0 +1,16 @@
+import { FCProps } from "../../types";
+import { cn } from "../../utils/utils.styles";
+
+const Hero: FCProps = ({ className }) => {
+  return (
+    <div className={cn(className, "w-full text-center sm:text-3xl text-2xl")}>
+      <span className="text-accent">Sync</span> your content,
+      <span className="sm:hidden">
+        <br />
+      </span>{" "}
+      seamlessly across devices.
+    </div>
+  );
+};
+
+export default Hero;
diff --git a/app/src/index.css b/app/src/index.css
@@ -1,14 +1,14 @@
-@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
   :root {
-    --background: #222831;
+    --background: 200, 16%, 22%;
     --foreground: 0 0% 3.9%;
 
-    --card: 0 0% 100%;
+    --card: 217, 18%, 14%;
     --card-foreground: 0 0% 3.9%;
 
     --popover: 0 0% 100%;
@@ -23,15 +23,15 @@
     --muted: 0 0% 96.1%;
     --muted-foreground: 0 0% 45.1%;
 
-    --accent: 0 0% 96.1%;
+    --accent: 189, 74%, 57%;
     --accent-foreground: 0 0% 9%;
 
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
 
-    --border: 0 0% 89.8%;
+    --border: 183, 26%, 57%;
     --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
+    --ring: 183, 26%, 57%;
 
     --radius: 0.5rem;
   }

diff --git a/app/src/types.ts b/app/src/types.ts
@@ -0,0 +1,6 @@
+export type FCProps<T = unknown> = React.FC<
+  {
+    children?: React.ReactNode;
+    className?: string;
+  } & T
+>;
diff --git a/app/src/utils/utils.styles.ts b/app/src/utils/utils.styles.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/app/tailwind.config.js b/app/tailwind.config.js
@@ -19,7 +19,7 @@ module.exports = {
     },
     extend: {
       fontFamily: {
-        noto: ["Noto Sans", "sans-serif"],
+        poppins: ["Poppins", "sans-serif"],
       },
       colors: {
         border: "hsl(var(--border))",