devxprite
diff --git a/‎.prettierrc
Lines changed: 10 additions & 0 deletions b/‎.prettierrc
Lines changed: 10 additions & 0 deletions
diff --git a/‎app/(home)/page.js
Lines changed: 22 additions & 0 deletions b/‎app/(home)/page.js
Lines changed: 22 additions & 0 deletions
diff --git a/‎app/globals.css
Lines changed: 0 additions & 33 deletions b/‎app/globals.css
Lines changed: 0 additions & 33 deletions
diff --git a/‎app/globals.scss
Lines changed: 46 additions & 0 deletions b/‎app/globals.scss
Lines changed: 46 additions & 0 deletions
diff --git a/‎app/layout.js
Lines changed: 8 additions & 11 deletions b/‎app/layout.js
Lines changed: 8 additions & 11 deletions
diff --git a/‎app/page.js
Lines changed: 0 additions & 113 deletions b/‎app/page.js
Lines changed: 0 additions & 113 deletions
diff --git a/‎package.json
Lines changed: 6 additions & 1 deletion b/‎package.json
Lines changed: 6 additions & 1 deletion
@@ -0,0 +1,10 @@
+{
+    "plugins": [
+        "prettier-plugin-tailwindcss"
+    ],
+    "printWidth": 120,
+    "tabWidth": 4,
+    "singleQuote": true,
+    "arrowParens": "avoid",
+    "experimentalTernaries": true
+}
@@ -0,0 +1,22 @@
+export default function Home() {
+    return (
+        <main className="grid min-h-screen place-items-center">
+            <div className="max-w-screen-md text-center md:-translate-y-1/4">
+                <h1 className="text-gradient text-7xl font-bold">Lorem dolor sit</h1>
+                <p className="text-gradient mt-2 text-3xl font-medium ">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                </p>
+
+                <form className="mx-auto group mt-28 flex max-w-screen-sm items-center gap-3 rounded-full border border-gray-600 px-2 py-2 focus-within:border-2 focus-within:border-gray-400 ">
+                    <input
+                        className="block flex-1 bg-transparent pl-4 text-xl outline-none"
+                        type="text"
+                        placeholder="Enter your github Username"
+                    />
+
+                    <button className="btn text-xl group-focus-within:bg-gray-700 ">Search</button>
+                </form>
+            </div>
+        </main>
+    );
+}
@@ -0,0 +1,46 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    body {
+        @apply min-h-screen bg-gray-900 text-gray-200;
+        @extend .background;
+    }
+}
+
+@layer components {
+    .btn {
+        @apply flex items-center justify-center gap-2 rounded-full border border-gray-600 bg-gray-700/50 px-6 py-1 text-lg transition-all;
+
+        &:hover {
+            @apply bg-gray-600;
+        }
+    }
+}
+
+// .background {
+//     position: absolute;
+//     top: 0;
+//     z-index: -2;
+//     height: 100vh;
+//     width: 100%;
+//     --tw-bg-opacity: 1;
+//     background-color: rgb(9 9 11 / var(--tw-bg-opacity));
+//     background-image: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(120, 119, 198, 0.3), hsla(0, 0%, 100%, 0));
+// }
+
+.background {
+    --tw-bg-opacity: 1;
+    // background-color: rgb(9 9 11 / var(--tw-bg-opacity));
+    // background-image: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(120, 119, 198, 0.3), hsla(0, 0%, 100%, 0));
+    background-image: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(255, 255, 255, 0.13), hsla(0, 0%, 100%, 0));
+
+}
+
+.text-gradient {
+    // background-clip: text;
+    // color: transparent;
+    // background-image: linear-gradient(to bottom, #e5e5e5, #737373);
+    @apply bg-gradient-to-b from-white to-gray-500 bg-clip-text text-transparent;
+}
@@ -1,17 +1,14 @@
-import { Inter } from "next/font/google";
-import "./globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
+import './globals.scss';
 
 export const metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+    title: 'Create Next App',
+    description: 'Generated by create next app',
 };
 
 export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  );
+    return (
+        <html lang="en">
+            <body>{children}</body>
+        </html>
+    );
 }
@@ -9,13 +9,18 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@octokit/graphql": "^8.0.1",
+    "axios": "^1.6.8",
+    "next": "14.1.4",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.1.4"
+    "react-icons": "^5.0.1",
+    "sass": "^1.72.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.0.1",
     "postcss": "^8",
+    "prettier-plugin-tailwindcss": "^0.5.12",
     "tailwindcss": "^3.3.0"
   }
 }