feat: ✨ updated landing page (#61)

app/(app)/page.tsx

@@ -4,6 +4,8 @@ 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 { Sponsor } from '@/components/home/sponsor';
+import { Feedback } from '@/components/home/feedback';
 
 const LandingPage = (): JSX.Element => {
   return (
@@ -26,6 +28,8 @@ const LandingPage = (): JSX.Element => {
           <FileUpload />
         </div>
         <Features />
+        <Feedback />
+        <Sponsor />
         <OpenSource />
       </main>
     </>

components/home/feedback.tsx

@@ -0,0 +1,22 @@
+import Link from 'next/link';
+import { Button } from '../ui/button';
+import { MessageSquareIcon } from 'lucide-react';
+
+export const Feedback = (): JSX.Element => {
+  return (
+    <section className='bg-gray-50 py-16'>
+      <div className='container mx-auto px-4 text-center'>
+        <h2 className='mb-4 text-3xl font-bold'>We Value Your Feedback</h2>
+        <p className='mb-8 text-xl'>
+          Help us improve Ultra Reporter by sharing your ideas and suggestions!
+        </p>
+        <Link href='https://github.com/WasiqB/ultra-reporter-app/discussions/new/choose'>
+          <Button size='lg'>
+            <MessageSquareIcon className='mr-2 h-5 w-5' />
+            Share Your Feedback
+          </Button>
+        </Link>
+      </div>
+    </section>
+  );
+};

components/home/footer.tsx

@@ -18,8 +18,8 @@ export const Footer = (): JSX.Element => {
         <div>
           <div className='grid-flow-col items-center'>
             <p>
-              Copyright © {new Date().getFullYear()} - Designed and built by
-              Wasiq Bhamla.
+              Copyright © {new Date().getFullYear()} - Designed and built with
+              ❤️ by Wasiq Bhamla.
             </p>
           </div>
           All rights reserved.

components/home/nav-bar.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { Button } from '@/components/ui/button';
 import Image from 'next/image';
@@ -19,24 +18,8 @@ export const NavBar = ({
   cta,
   showFeedback,
 }: 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={`left-0 right-0 top-0 z-50 transition-all duration-300 ${
-        isScrolled
-          ? 'bg-background/80 shadow-md backdrop-blur-md'
-          : 'bg-transparent'
-      }`}
-    >
+    <nav className={'left-0 right-0 top-0 z-50 transition-all duration-300'}>
       <div className='container mx-auto flex items-center justify-between px-4 py-4'>
         <div className='flex items-center'>
           <Image

components/home/sponsor.tsx

@@ -0,0 +1,23 @@
+import Link from 'next/link';
+import { HeartIcon } from 'lucide-react';
+import { RainbowButton } from '../ui/rainbow-button';
+
+export const Sponsor = (): JSX.Element => {
+  return (
+    <section className='bg-gradient-to-r from-purple-500 to-indigo-600 py-16 text-white'>
+      <div className='container mx-auto px-4 text-center'>
+        <h2 className='mb-4 text-3xl font-bold'>Support Ultra Reporter</h2>
+        <p className='mb-8 text-xl'>
+          Help us keep improving and maintaining this project by becoming a
+          sponsor!
+        </p>
+        <Link href='https://github.com/sponsors/WasiqB'>
+          <RainbowButton>
+            <HeartIcon className='mr-2 h-5 w-5 text-red-500' />
+            Become a Sponsor
+          </RainbowButton>
+        </Link>
+      </div>
+    </section>
+  );
+};

package.json

@@ -47,26 +47,26 @@
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
-    "react-hook-form": "^7.53.0",
+    "react-hook-form": "^7.53.1",
     "recharts": "^2.13.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "xml2js": "^0.6.2",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.2.0",
+    "@eslint/compat": "^1.2.1",
     "@next/eslint-plugin-next": "^14.2.15",
     "@release-it-plugins/lerna-changelog": "^7.0.0",
     "@stylistic/eslint-plugin-js": "^2.9.0",
     "@stylistic/eslint-plugin-ts": "^2.9.0",
     "@types/luxon": "^3.4.2",
-    "@types/node": "^22.7.6",
+    "@types/node": "^22.7.7",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18",
     "@types/xml2js": "^0.4.14",
     "daisyui": "^4.12.13",
-    "eslint": "^9.12.0",
+    "eslint": "^9.13.0",
     "eslint-config-next": "14.2.15",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",