From 92436d38f04f34c77edece80c2e22d3c1a4e88c1 Mon Sep 17 00:00:00 2001
From: WasiqB <wasbhamla2005@gmail.com>
Date: Sat, 28 Sep 2024 19:11:06 +0300
Subject: [PATCH] feat: :sparkles: updated ui for all the pages

---
 app/(app)/globals.css            | 103 ++++++++++++-------
 app/(app)/layout.tsx             |  24 +----
 app/(app)/page.tsx               |  50 +++++-----
 app/(app)/results/page.tsx       | 163 +++++++++++++++----------------
 components/home/feature.tsx      |  57 +++++++++++
 components/home/footer.tsx       |  67 +++++++++++++
 components/home/nav-bar.tsx      |  75 ++++++++++++++
 components/home/open-source.tsx  |  21 ++++
 components/home/user-card.tsx    |  42 ++++++++
 components/icons/github.tsx      |  15 +++
 components/icons/linkedin.tsx    |  15 +++
 components/icons/sponsor.tsx     |  15 +++
 components/icons/x.tsx           |  15 +++
 components/icons/youtube.tsx     |  15 +++
 components/ui/avatar.tsx         |  50 ++++++++++
 components/ui/hover-card.tsx     |  29 ++++++
 components/ui/rainbow-button.tsx |  28 ++++++
 components/utils/file-upload.tsx |  11 ++-
 eslint.config.mjs                |   8 +-
 lib/xml-parser.ts                |   6 +-
 package.json                     |   2 +
 pnpm-lock.yaml                   |  61 ++++++++++++
 tailwind.config.ts               |  18 ++++
 23 files changed, 719 insertions(+), 171 deletions(-)
 create mode 100644 components/home/feature.tsx
 create mode 100644 components/home/footer.tsx
 create mode 100644 components/home/nav-bar.tsx
 create mode 100644 components/home/open-source.tsx
 create mode 100644 components/home/user-card.tsx
 create mode 100644 components/icons/github.tsx
 create mode 100644 components/icons/linkedin.tsx
 create mode 100644 components/icons/sponsor.tsx
 create mode 100644 components/icons/x.tsx
 create mode 100644 components/icons/youtube.tsx
 create mode 100644 components/ui/avatar.tsx
 create mode 100644 components/ui/hover-card.tsx
 create mode 100644 components/ui/rainbow-button.tsx

diff --git a/app/(app)/globals.css b/app/(app)/globals.css
index 6084d22..d657139 100644
--- 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
index a241f4b..b3e1983 100644
--- 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
index 7f75a62..56716f6 100644
--- 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>
+    </>
   );
 };
 
diff --git a/app/(app)/results/page.tsx b/app/(app)/results/page.tsx
index 6611e68..998c838 100644
--- a/app/(app)/results/page.tsx
+++ b/app/(app)/results/page.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import Link from 'next/link';
 import { TestResult } from '@/types/types';
 import {
   ColumnFiltersState,
@@ -13,7 +12,6 @@ import {
   Card,
   CardContent,
   CardDescription,
-  CardFooter,
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
@@ -23,6 +21,7 @@ import { getData, TestResultData } from '@/components/data-table/data';
 import { columns } from '@/components/data-table/columns';
 import { PieComponent } from '@/components/charts/pie-chart';
 import { formatDate, round } from '@/lib/formatting';
+import { NavBar } from '@/components/home/nav-bar';
 
 const chartConfig: ChartConfig = {
   total: {
@@ -99,90 +98,84 @@ const ResultsPage = (): JSX.Element => {
   ];
 
   return (
-    <section className='container mx-auto space-y-6 p-4'>
-      <h1 className='mb-8 text-balance text-center text-3xl font-bold'>
-        Ultra Report for {date}
-      </h1>
-      <div className='grid grid-cols-1 gap-6'>
-        <Card>
-          <CardHeader>
-            <CardTitle className='text-xl'>Test Statistics</CardTitle>
-            <CardDescription>Overall Test execution statistics</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className='grid grid-cols-2 gap-4 md:grid-cols-4'>
-              <Card className='rounded-lg bg-blue-200 p-4'>
-                <CardDescription>Total Tests</CardDescription>
-                <CardTitle>{passed + failed + skipped}</CardTitle>
-              </Card>
-              <Card className='rounded-lg bg-green-200 p-4'>
-                <CardDescription>Passed</CardDescription>
-                <CardTitle>{passed}</CardTitle>
-              </Card>
-              <Card className='rounded-lg bg-red-200 p-4'>
-                <CardDescription>Failed</CardDescription>
-                <CardTitle>{failed}</CardTitle>
-              </Card>
-              <Card className='rounded-lg bg-yellow-200 p-4'>
-                <CardDescription>Skipped</CardDescription>
-                <CardTitle>{skipped}</CardTitle>
-              </Card>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-      <div className='grid grid-cols-1 gap-6 md:grid-cols-2'>
-        <DoughNutComponent
-          title='Test Summary Counts'
-          description='Status based distribution of Test results'
-          config={chartConfig}
-          data={chartCountData}
-          totalValue={totalTests}
-          valueLabel='Test cases'
-        />
-        <PieComponent
-          title='Test Summary %'
-          description='Status based % distribution of Test results'
-          config={chartConfig}
-          data={chartPieData}
-        />
-      </div>
-      {result ? (
-        <Card>
-          <CardHeader>
-            <CardTitle className='text-xl'>Test Details</CardTitle>
-            <CardDescription>
-              List of all the executed test cases
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <DataTable
-              columns={columns}
-              data={result}
-              filterColumn='method_name'
-              columnFilters={columnFilters}
-              columnVisibility={columnVisibility}
-              sorting={sorting}
-              setColumnFilters={setColumnFilters}
-              setColumnVisibility={setColumnVisibility}
-              setSorting={setSorting}
+    <div className='flex min-h-screen flex-col'>
+      <NavBar suffix={`for ${date}`} cta='Generate new Report' />
+      <main className='flex-grow pt-16'>
+        <section className='container mx-auto space-y-6 p-4'>
+          <div className='grid grid-cols-1 gap-6'>
+            <Card>
+              <CardHeader>
+                <CardTitle className='text-xl'>Test Statistics</CardTitle>
+                <CardDescription>
+                  Overall Test execution statistics
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className='grid grid-cols-2 gap-4 md:grid-cols-4'>
+                  <Card className='rounded-lg bg-blue-200 p-4'>
+                    <CardDescription>Total Tests</CardDescription>
+                    <CardTitle>{passed + failed + skipped}</CardTitle>
+                  </Card>
+                  <Card className='rounded-lg bg-green-200 p-4'>
+                    <CardDescription>Passed</CardDescription>
+                    <CardTitle>{passed}</CardTitle>
+                  </Card>
+                  <Card className='rounded-lg bg-red-200 p-4'>
+                    <CardDescription>Failed</CardDescription>
+                    <CardTitle>{failed}</CardTitle>
+                  </Card>
+                  <Card className='rounded-lg bg-yellow-200 p-4'>
+                    <CardDescription>Skipped</CardDescription>
+                    <CardTitle>{skipped}</CardTitle>
+                  </Card>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+          <div className='grid grid-cols-1 gap-6 md:grid-cols-2'>
+            <DoughNutComponent
+              title='Test Summary Counts'
+              description='Status based distribution of Test results'
+              config={chartConfig}
+              data={chartCountData}
+              totalValue={totalTests}
+              valueLabel='Test cases'
             />
-          </CardContent>
-          <CardFooter className='flex justify-end'>
-            <div className='mt-8 items-end text-center'>
-              <Link
-                href='/'
-                className='rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-600'
-              >
-                Process Another XML File
-              </Link>
-            </div>
-          </CardFooter>
-        </Card>
-      ) : (
-        <p className='text-center'>No data available</p>
-      )}
-    </section>
+            <PieComponent
+              title='Test Summary %'
+              description='Status based % distribution of Test results'
+              config={chartConfig}
+              data={chartPieData}
+            />
+          </div>
+          {result ? (
+            <Card>
+              <CardHeader>
+                <CardTitle className='text-xl'>Test Details</CardTitle>
+                <CardDescription>
+                  List of all the executed test cases
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <DataTable
+                  columns={columns}
+                  data={result}
+                  filterColumn='method_name'
+                  columnFilters={columnFilters}
+                  columnVisibility={columnVisibility}
+                  sorting={sorting}
+                  setColumnFilters={setColumnFilters}
+                  setColumnVisibility={setColumnVisibility}
+                  setSorting={setSorting}
+                />
+              </CardContent>
+            </Card>
+          ) : (
+            <p className='text-center'>No data available</p>
+          )}
+        </section>
+      </main>
+    </div>
   );
 };
 
diff --git a/components/home/feature.tsx b/components/home/feature.tsx
new file mode 100644
index 0000000..0f2ede7
--- /dev/null
+++ b/components/home/feature.tsx
@@ -0,0 +1,57 @@
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import {
+  BarChartIcon,
+  CircleAlert,
+  MousePointerClick,
+  Table,
+} from 'lucide-react';
+
+const features = [
+  {
+    title: 'One Click',
+    description: 'Generate your Test execution report in one click',
+    icon: MousePointerClick,
+  },
+  {
+    title: 'Test Visualization',
+    description: 'Generate insightful charts and graphs from your data',
+    icon: BarChartIcon,
+  },
+  {
+    title: 'Detailed Results',
+    description:
+      'Dive deep into your test results with comprehensive details in the Table',
+    icon: Table,
+  },
+  {
+    title: 'View Attachments',
+    description: 'View your tests attachments like Screenshots and Texts',
+    icon: MagnifyingGlassIcon,
+  },
+  {
+    title: 'View Exceptions',
+    description: 'View your tests exceptions and Errors',
+    icon: CircleAlert,
+  },
+];
+
+export const Features = (): JSX.Element => {
+  return (
+    <section className='mb-16 mt-16'>
+      <h2 className='mb-8 text-center text-3xl font-bold text-gray-800'>
+        Features
+      </h2>
+      <div className='grid grid-cols-1 gap-8 md:grid-cols-3'>
+        {features.map((feature, index) => (
+          <div key={index} className='rounded-lg bg-white p-6 shadow-lg'>
+            <feature.icon className='mb-4 h-12 w-12 text-gray-600' />
+            <h3 className='mb-2 text-xl font-semibold text-gray-800'>
+              {feature.title}
+            </h3>
+            <p className='text-gray-600'>{feature.description}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
diff --git a/components/home/footer.tsx b/components/home/footer.tsx
new file mode 100644
index 0000000..edcb4df
--- /dev/null
+++ b/components/home/footer.tsx
@@ -0,0 +1,67 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { UserCard } from './user-card';
+import { GitHub } from '@/components/icons/github';
+import { LinkedIn } from '@/components/icons/linkedin';
+import { X } from '@/components/icons/x';
+import { YouTube } from '@/components/icons/youtube';
+import { Sponsor } from '@/components/icons/sponsor';
+
+export const Footer = (): JSX.Element => {
+  return (
+    <footer className='primary footer footer-center p-10 pb-10 text-primary-content'>
+      <aside>
+        <Image src='/favicon.png' height={24} width={24} alt='Ultra Reporter' />
+        <h3 className='text-xl font-bold'>Ultra Report</h3>
+        <div>
+          <div className='grid-flow-col items-center'>
+            <p>
+              Copyright © {new Date().getFullYear()} - Designed and built by
+              <UserCard />.
+            </p>
+          </div>
+          All right reserved.
+        </div>
+      </aside>
+      <nav>
+        <div className='grid grid-flow-col gap-5 text-gray-500'>
+          <Link
+            className='hover:text-gray-400'
+            href='https://git.new/personal'
+            target='_blank'
+          >
+            <GitHub />
+          </Link>
+          <Link
+            className='hover:text-gray-400'
+            href='https://dub.sh/lnkd'
+            target='_blank'
+          >
+            <LinkedIn />
+          </Link>
+          <Link
+            className='hover:text-gray-400'
+            href='https://dub.sh/x-wasiq'
+            target='_blank'
+          >
+            <X />
+          </Link>
+          <Link
+            className='hover:text-gray-400'
+            href='https://dub.sh/lta-yt'
+            target='_blank'
+          >
+            <YouTube />
+          </Link>
+          <Link
+            className='text-red-500 hover:text-red-400'
+            href='https://dub.sh/sponsor-me'
+            target='_blank'
+          >
+            <Sponsor />
+          </Link>
+        </div>
+      </nav>
+    </footer>
+  );
+};
diff --git a/components/home/nav-bar.tsx b/components/home/nav-bar.tsx
new file mode 100644
index 0000000..f265196
--- /dev/null
+++ b/components/home/nav-bar.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import Image from 'next/image';
+import { GitHub } from '@/components/icons/github';
+import { Sponsor } from '@/components/icons/sponsor';
+
+interface NavBarProps {
+  suffix?: string;
+  cta?: string;
+}
+
+export const NavBar = ({ suffix, cta }: NavBarProps): JSX.Element => {
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = (): void => {
+      setIsScrolled(window.scrollY > 10);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <nav
+      className={`fixed left-0 right-0 top-0 z-50 transition-all duration-300 ${
+        isScrolled
+          ? 'bg-current/80 shadow-md backdrop-blur-md'
+          : 'bg-transparent'
+      }`}
+    >
+      <div className='container mx-auto flex items-center justify-between px-4 py-4'>
+        <div className='flex items-center'>
+          <Image
+            className='m-4'
+            src='/favicon.png'
+            alt='Ultra report'
+            height={24}
+            width={24}
+          />
+          <Link
+            href='/'
+            className='mr-4 flex items-start text-2xl font-bold text-gray-800'
+          >
+            Ultra Report
+          </Link>
+          <span className='text-gray-600'>{suffix}</span>
+        </div>
+        <div className='flex items-center space-x-4'>
+          <Link href='https://github.com/WasiqB/ultra-reporter-app' passHref>
+            <Button variant='ghost' size='sm'>
+              <GitHub />
+            </Button>
+          </Link>
+          <Link href='https://dub.sh/sponsor-me' passHref>
+            <Button
+              className='text-red-500 hover:text-red-400'
+              variant='ghost'
+              size='sm'
+            >
+              <Sponsor />
+            </Button>
+          </Link>
+          {cta && (
+            <Link href='/' passHref>
+              <Button size='sm'>{cta}</Button>
+            </Link>
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+};
diff --git a/components/home/open-source.tsx b/components/home/open-source.tsx
new file mode 100644
index 0000000..7fdb95c
--- /dev/null
+++ b/components/home/open-source.tsx
@@ -0,0 +1,21 @@
+import Link from 'next/link';
+import { CodeIcon } from 'lucide-react';
+import { RainbowButton } from '@/components/ui/rainbow-button';
+
+export const OpenSource = (): JSX.Element => {
+  return (
+    <section className='mb-10 mt-10 text-center'>
+      <h2 className='mb-4 text-3xl font-bold text-gray-800'>
+        We are proudly Open Source ❤️
+      </h2>
+      <p className='mb-6 text-xl text-gray-600'>
+        Our code is open source and available on GitHub
+      </p>
+      <Link href='https://github.com/WasiqB/ultra-reporter-app' passHref>
+        <RainbowButton>
+          <CodeIcon className='mr-2 h-4 w-4' /> View on GitHub
+        </RainbowButton>
+      </Link>
+    </section>
+  );
+};
diff --git a/components/home/user-card.tsx b/components/home/user-card.tsx
new file mode 100644
index 0000000..07bd6df
--- /dev/null
+++ b/components/home/user-card.tsx
@@ -0,0 +1,42 @@
+import { CalendarIcon } from '@radix-ui/react-icons';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/components/ui/hover-card';
+import Link from 'next/link';
+
+export const UserCard = (): JSX.Element => {
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <Link href='https://git.new/personal'>
+          <Button variant='link'>@WasiqB</Button>
+        </Link>
+      </HoverCardTrigger>
+      <HoverCardContent className='w-80'>
+        <div className='flex justify-between space-x-4'>
+          <Avatar>
+            <AvatarImage src='https://github.com/WasiqB.png' />
+            <AvatarFallback>WB</AvatarFallback>
+          </Avatar>
+          <div className='space-y-1'>
+            <h4 className='text-sm font-semibold'>@WasiqB</h4>
+            <p className='text-sm'>
+              Ultra Reporter - Created and maintained by Wasiq Bhamla
+            </p>
+            <div className='flex items-center pt-2'>
+              <CalendarIcon className='mr-2 h-4 w-4 opacity-70' />{' '}
+              <span className='text-xs text-muted-foreground'>
+                Created September, 21st 2024
+              </span>
+            </div>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  );
+};
diff --git a/components/icons/github.tsx b/components/icons/github.tsx
new file mode 100644
index 0000000..7e317ff
--- /dev/null
+++ b/components/icons/github.tsx
@@ -0,0 +1,15 @@
+export const GitHub = (): JSX.Element => {
+  return (
+    <svg
+      role='img'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      className='fill-current'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <title>GitHub</title>
+      <path d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12' />
+    </svg>
+  );
+};
diff --git a/components/icons/linkedin.tsx b/components/icons/linkedin.tsx
new file mode 100644
index 0000000..f453297
--- /dev/null
+++ b/components/icons/linkedin.tsx
@@ -0,0 +1,15 @@
+export const LinkedIn = (): JSX.Element => {
+  return (
+    <svg
+      role='img'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      className='fill-current'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <title>LinkedIn</title>
+      <path d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z' />
+    </svg>
+  );
+};
diff --git a/components/icons/sponsor.tsx b/components/icons/sponsor.tsx
new file mode 100644
index 0000000..94504ba
--- /dev/null
+++ b/components/icons/sponsor.tsx
@@ -0,0 +1,15 @@
+export const Sponsor = (): JSX.Element => {
+  return (
+    <svg
+      role='img'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      className='fill-current'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <title>GitHub Sponsors</title>
+      <path d='M17.625 1.499c-2.32 0-4.354 1.203-5.625 3.03-1.271-1.827-3.305-3.03-5.625-3.03C3.129 1.499 0 4.253 0 8.249c0 4.275 3.068 7.847 5.828 10.227a33.14 33.14 0 0 0 5.616 3.876l.028.017.008.003-.001.003c.163.085.342.126.521.125.179.001.358-.041.521-.125l-.001-.003.008-.003.028-.017a33.14 33.14 0 0 0 5.616-3.876C20.932 16.096 24 12.524 24 8.249c0-3.996-3.129-6.75-6.375-6.75zm-.919 15.275a30.766 30.766 0 0 1-4.703 3.316l-.004-.002-.004.002a30.955 30.955 0 0 1-4.703-3.316c-2.677-2.307-5.047-5.298-5.047-8.523 0-2.754 2.121-4.5 4.125-4.5 2.06 0 3.914 1.479 4.544 3.684.143.495.596.797 1.086.796.49.001.943-.302 1.085-.796.63-2.205 2.484-3.684 4.544-3.684 2.004 0 4.125 1.746 4.125 4.5 0 3.225-2.37 6.216-5.048 8.523z' />
+    </svg>
+  );
+};
diff --git a/components/icons/x.tsx b/components/icons/x.tsx
new file mode 100644
index 0000000..4b03885
--- /dev/null
+++ b/components/icons/x.tsx
@@ -0,0 +1,15 @@
+export const X = (): JSX.Element => {
+  return (
+    <svg
+      role='img'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      className='fill-current'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <title>X</title>
+      <path d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z' />
+    </svg>
+  );
+};
diff --git a/components/icons/youtube.tsx b/components/icons/youtube.tsx
new file mode 100644
index 0000000..c65881a
--- /dev/null
+++ b/components/icons/youtube.tsx
@@ -0,0 +1,15 @@
+export const YouTube = (): JSX.Element => {
+  return (
+    <svg
+      role='img'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      className='fill-current'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <title>YouTube</title>
+      <path d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z' />
+    </svg>
+  );
+};
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
new file mode 100644
index 0000000..1346957
--- /dev/null
+++ b/components/ui/avatar.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+import { cn } from '@/lib/utils';
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('aspect-square h-full w-full', className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'flex h-full w-full items-center justify-center rounded-full bg-muted',
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/components/ui/hover-card.tsx b/components/ui/hover-card.tsx
new file mode 100644
index 0000000..1c9816e
--- /dev/null
+++ b/components/ui/hover-card.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import * as React from 'react';
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+
+import { cn } from '@/lib/utils';
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/components/ui/rainbow-button.tsx b/components/ui/rainbow-button.tsx
new file mode 100644
index 0000000..c8c2f6b
--- /dev/null
+++ b/components/ui/rainbow-button.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { cn } from '@/lib/utils';
+
+interface RainbowButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export function RainbowButton({ children, ...props }: RainbowButtonProps) {
+  return (
+    <button
+      className={cn(
+        'group relative inline-flex h-11 animate-rainbow cursor-pointer items-center justify-center rounded-xl border-0 bg-[length:200%] px-8 py-2 font-medium text-primary-foreground transition-colors [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+
+        // before styles
+        'before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:bg-[length:200%] before:[filter:blur(calc(0.8*1rem))]',
+
+        // light mode colors
+        'bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]',
+
+        // dark mode colors
+        'dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]'
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/components/utils/file-upload.tsx b/components/utils/file-upload.tsx
index a8a1037..31b22db 100644
--- a/components/utils/file-upload.tsx
+++ b/components/utils/file-upload.tsx
@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { UploadIcon } from 'lucide-react';
 
 export const FileUpload = (): JSX.Element => {
   const [file, setFile] = useState<File | null>(null);
@@ -56,7 +57,8 @@ export const FileUpload = (): JSX.Element => {
   return (
     <form onSubmit={handleSubmit} className='w-full max-w-md'>
       <div
-        className='cursor-pointer rounded-lg border-2 border-dashed border-gray-300 p-8 text-center'
+        // eslint-disable-next-line @stylistic/js/max-len
+        className='cursor-pointer rounded-lg border-2 border-dashed border-gray-300 p-8 text-center transition-all hover:border-gray-500 hover:text-gray-500'
         onDragOver={handleDragOver}
         onDrop={handleDrop}
       >
@@ -68,12 +70,15 @@ export const FileUpload = (): JSX.Element => {
           id='file-upload'
         />
         <Label htmlFor='file-upload' className='cursor-pointer'>
-          {file ? file.name : 'Click to select or drag and drop an XML file'}
+          <UploadIcon className='mx-auto mb-4 h-12 w-12' />
+          <p className='text-gray-600'>
+            {file ? file.name : 'Click to select or drag and drop an XML file'}
+          </p>
         </Label>
       </div>
       <Button
         type='submit'
-        className='mt-4 w-full rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-600'
+        className='mt-4 w-full rounded px-4 py-2 font-bold'
         disabled={!file || loading}
       >
         {loading ? 'Generating your Report...' : 'Generate Report'}
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 29db3ee..4e6fd72 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -64,6 +64,12 @@ export default [
     },
   },
   {
-    ignores: ['components/ui/', 'assets/', '.github/', 'hooks/'],
+    ignores: [
+      'components/ui/',
+      'components/icons',
+      'assets/',
+      '.github/',
+      'hooks/',
+    ],
   },
 ];
diff --git a/lib/xml-parser.ts b/lib/xml-parser.ts
index 6c1f0b2..8425836 100644
--- a/lib/xml-parser.ts
+++ b/lib/xml-parser.ts
@@ -127,7 +127,7 @@ const getTestSuites = (suites: any): TestSuite[] => {
   return result;
 };
 
-const errorMessage = 'Error while processing the XML file.';
+const errorMessage = 'Please select valid "testng-results.xml"';
 
 const getTestResults = (jsonData: any): TestResult => {
   const testResult = jsonData['testng-results'];
@@ -144,7 +144,7 @@ const getTestResults = (jsonData: any): TestResult => {
     return mapToResult;
     /* eslint-disable @typescript-eslint/no-unused-vars */
   } catch (error) {
-    throw new Error(errorMessage);
+    throw new Error(`Error while processing the XML file, ${errorMessage}`);
   }
 };
 
@@ -159,7 +159,7 @@ const convertToJson = (data: string): string | null => {
     },
     (error, result) => {
       if (error) {
-        throw new Error(errorMessage);
+        throw new Error(`Invalid file selected, ${errorMessage}`);
       }
       jsonData = result;
     }
diff --git a/package.json b/package.json
index 984976c..d151ccc 100644
--- a/package.json
+++ b/package.json
@@ -14,8 +14,10 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
+    "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bf6aab8..176afcf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,12 +11,18 @@ importers:
       '@hookform/resolvers':
         specifier: ^3.9.0
         version: 3.9.0(react-hook-form@7.53.0(react@18.3.1))
+      '@radix-ui/react-avatar':
+        specifier: ^1.1.0
+        version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-dialog':
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.1.1
         version: 2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-hover-card':
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-icons':
         specifier: ^1.3.0
         version: 1.3.0(react@18.3.1)
@@ -367,6 +373,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-avatar@1.1.0':
+    resolution: {integrity: sha512-Q/PbuSMk/vyAd/UoIShVGZ7StHHeRFYU7wXmi5GV+8cLXflZAEpHL/F697H1klrzxKXNtZ97vWiC0q3RKUH8UA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collection@1.1.0':
     resolution: {integrity: sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==}
     peerDependencies:
@@ -534,6 +553,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-hover-card@1.1.1':
+    resolution: {integrity: sha512-IwzAOP97hQpDADYVKrEEHUH/b2LA+9MgB0LgdmnbFO2u/3M5hmEofjjr2M6CyzUblaAqJdFm6B7oFtU72DPXrA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-icons@1.3.0':
     resolution: {integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==}
     peerDependencies:
@@ -3006,6 +3038,18 @@ snapshots:
       '@types/react': 18.3.10
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-avatar@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.0(@types/react@18.3.10)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.10)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.10)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.10
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-collection@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.10)(react@18.3.1)
@@ -3173,6 +3217,23 @@ snapshots:
       '@types/react': 18.3.10
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-hover-card@1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.10)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.3.10)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.10)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.10
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-icons@1.3.0(react@18.3.1)':
     dependencies:
       react: 18.3.1
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 8442832..ad2dfa7 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -52,12 +52,30 @@ const config: Config = {
           '4': 'hsl(var(--chart-4))',
           '5': 'hsl(var(--chart-5))',
         },
+        'color-1': 'hsl(var(--color-1))',
+        'color-2': 'hsl(var(--color-2))',
+        'color-3': 'hsl(var(--color-3))',
+        'color-4': 'hsl(var(--color-4))',
+        'color-5': 'hsl(var(--color-5))',
       },
       borderRadius: {
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',
         sm: 'calc(var(--radius) - 4px)',
       },
+      animation: {
+        rainbow: 'rainbow var(--speed, 2s) infinite linear',
+      },
+      keyframes: {
+        rainbow: {
+          '0%': {
+            'background-position': '0%',
+          },
+          '100%': {
+            'background-position': '200%',
+          },
+        },
+      },
     },
   },
   plugins: [animate, daisyui],