feat: ✨ updated ui for all the pages

WasiqB · Sep 28, 2024 · 92436d3 · 92436d3
1 parent f33d052
commit 92436d3
Show file tree

Hide file tree

Showing 23 changed files with 719 additions and 171 deletions.
diff --git a/app/(app)/globals.css b/app/(app)/globals.css
@@ -11,62 +11,78 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --foreground: 240 10% 3.9%;
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 72.22% 50.59%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5% 64.9%;
+
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
+
     --passed: 141.7 76.6% 73.1%;
     --failed: 0 84.2% 60.2%;
     --skipped: 50.4 97.8% 63.5%;
+
     --radius: 0.5rem;
+
+    --color-1: 0 100% 63%;
+    --color-2: 270 100% 63%;
+    --color-3: 210 100% 63%;
+    --color-4: 195 100% 63%;
+    --color-5: 90 100% 63%;
   }
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+
     --passed: 141.7 76.6% 73.1%;
     --failed: 0 84.2% 60.2%;
     --skipped: 50.4 97.8% 63.5%;
+    --color-1: 0 100% 63%;
+    --color-2: 270 100% 63%;
+    --color-3: 210 100% 63%;
+    --color-4: 195 100% 63%;
+    --color-5: 90 100% 63%;
   }
 }
 
@@ -78,3 +94,22 @@
     @apply bg-background text-foreground;
   }
 }
+
+.gradient-text {
+  background: linear-gradient(45deg, #f31890, #0574f3, #04f85d, #f41a51);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  background-size: 300% 300%;
+  animation: gradient-shift 5s ease-in-out infinite;
+}
+
+@keyframes gradient-shift {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx
@@ -1,19 +1,7 @@
 import type { Metadata } from 'next';
-// import localFont from 'next/font/local';
 import './globals.css';
 import { DetailedHTMLProps, HtmlHTMLAttributes } from 'react';
-// import { ThemeProvider } from '@/components/theme-provider';
-
-// const geistSans = localFont({
-//   src: './fonts/GeistVF.woff',
-//   variable: '--font-geist-sans',
-//   weight: '100 900',
-// });
-// const geistMono = localFont({
-//   src: './fonts/GeistMonoVF.woff',
-//   variable: '--font-geist-mono',
-//   weight: '100 900',
-// });
+import { Footer } from '@/components/home/footer';
 
 export const metadata: Metadata = {
   title: 'Ultra Reporter',
@@ -33,15 +21,9 @@ const RootLayout = ({
       <head>
         <link rel='icon' href='/favicon.png' sizes='any' type='image/png' />
       </head>
-      <body className={'bg-gradient-to-b from-blue-200 to-white antialiased'}>
-        {/* <ThemeProvider
-          attribute='class'
-          defaultTheme='system'
-          enableSystem
-          disableTransitionOnChange
-        > */}
+      <body className={'antialiased'}>
         {children}
-        {/* </ThemeProvider> */}
+        <Footer />
       </body>
     </html>
   );

diff --git a/app/(app)/page.tsx b/app/(app)/page.tsx
@@ -1,34 +1,36 @@
-import Image from 'next/image';
 import { FileUpload } from '@/components/utils/file-upload';
+import { OpenSource } from '@/components/home/open-source';
+import { NavBar } from '@/components/home/nav-bar';
+import { Features } from '@/components/home/feature';
+import Link from 'next/link';
+import { StarIcon } from 'lucide-react';
+import { RainbowButton } from '@/components/ui/rainbow-button';
 
 const LandingPage = (): JSX.Element => {
   return (
-    <div className='min-h-screen'>
-      <main className='container mx-auto px-4 py-16'>
-        <div className='flex flex-col items-center text-center'>
-          <Image
-            src='/favicon.png'
-            alt='Ultra Reporter Logo'
-            width={100}
-            height={100}
-            className='mb-8'
-          />
-          <h1 className='mb-4 text-4xl font-bold'>Ultra Reporter</h1>
-          <p className='mb-8 max-w-2xl text-xl'>
-            Upload your Test result XML file and let our advanced reporter
-            system analyze and display the data for you.
-          </p>
+    <>
+      <NavBar />
+      <main className='container mx-auto flex-grow px-4 py-16'>
+        <div className='flex flex-col items-center pt-16 text-center'>
+          <Link href='https://github.com/WasiqB/ultra-reporter-app' passHref>
+            <RainbowButton>
+              <StarIcon className='mr-2 h-4 w-4 fill-current' /> Star us on
+              GitHub
+            </RainbowButton>
+          </Link>
+          <h1 className='mb-16 mt-16 text-center text-5xl font-bold leading-tight md:text-7xl'>
+            <span className='text-gray-700'>Convert your Test results to</span>
+            <br />
+            <span className='gradient-text'>Beautiful Report</span>
+            <br />
+            <span className='text-gray-700'>in one click</span>
+          </h1>
           <FileUpload />
-          <div className='mt-8'>
-            <h2 className='mb-4 text-2xl font-semibold'>Key Features</h2>
-            <ul className='list-inside list-disc text-left'>
-              <li>Display TestNG results in beautiful dashboard</li>
-              <li>See the Tests insights charts</li>
-            </ul>
-          </div>
         </div>
+        <Features />
+        <OpenSource />
       </main>
-    </div>
+    </>
   );
 };