new hero section

Author: StackOverflowIsBetterThanAnyAI

src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import Feed from '@/components/feed/Feed'
 import Footer from '@/components/footer/Footer'
+import Hero from '@/components/hero/Hero'
 import Navigation from '@/components/navigation/Navigation'
 import { useFocusTrap } from '@/hooks/useFocusTrap'
 import { useSetWindowScrollY } from '@/hooks/useSetWindowScrollY'
@@ -13,7 +14,7 @@ export default function Home() {
     return (
         <div className="min-h-svh flex flex-col items-center justify-start bg-gradient-to-b from-stone-700 to-stone-800">
             <Navigation />
-            <p>Hero Section</p>
+            <Hero />
             <Feed />
             <Footer />
         </div>

src/components/hero/Hero.tsx

@@ -0,0 +1,90 @@
+import Link from 'next/link'
+import { Button } from '../ui/button'
+import heroLogo from '@/assets/hero_logo.webp'
+import Image from 'next/image'
+
+const Hero = () => {
+    return (
+        <div className="w-full flex flex-col items-center gap-8 max-w-7xl relative isolate bg-stone-100 text-stone-950 p-3 sm:p-4 lg:p-6 my-6 lg:my-8">
+            <h1 className="text-extremely-large font-mono font-semibold">
+                Infinite Scroll Feed
+            </h1>
+            <div className="flex justify-center gap-16 text-normal">
+                <div className="max-w-xl">
+                    <p className="pb-4 border-b-2 border-stone-400">
+                        This website serves as a{' '}
+                        <strong className="font-mono px-0.5 text-large">
+                            Landing Page
+                        </strong>{' '}
+                        for implementing an infinite scroll feed based on fake
+                        API data from
+                        <Button asChild variant="link">
+                            <Link
+                                href="https://jsonplaceholder.typicode.com/"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="underline text-normal"
+                                aria-label="Link to JSON Placeholder (opens in a new tab)"
+                                title="Link to JSON Placeholder (opens in a new tab)"
+                            >
+                                JSON Placeholder
+                            </Link>
+                        </Button>
+                        and using UI elements from the React component library
+                        <Button asChild variant="link">
+                            <Link
+                                href="https://ui.shadcn.com/"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="underline text-normal"
+                                aria-label="Link to shadcn (opens in a new tab)"
+                                title="Link to shadcn (opens in a new tab)"
+                            >
+                                shadcn
+                            </Link>
+                        </Button>
+                    </p>
+                    <p className="py-4 border-b-2 border-stone-400">
+                        It makes use of the{' '}
+                        <strong className="font-mono px-0.5 text-large">
+                            /comments
+                        </strong>{' '}
+                        and{' '}
+                        <strong className="font-mono px-0.5 text-large">
+                            /users
+                        </strong>{' '}
+                        routes from JSON Placeholder to fetch and display
+                        comments along with user information in a card format.
+                    </p>
+                    <p className="text-center p-4 mt-4 bg-stone-300 rounded-lg">
+                        Check out the top 10 posts of the week right now!
+                        <Button
+                            asChild
+                            variant="outline"
+                            className="flex m-auto mt-4 px-8 w-fit"
+                        >
+                            <Link
+                                href=""
+                                className="text-normal"
+                                aria-label="Link to Top 10 Posts (scrolls to section)"
+                                title="Link to Top 10 Posts"
+                            >
+                                Top 10 Posts
+                            </Link>
+                        </Button>
+                    </p>
+                </div>
+                <div className="hidden min-[864px]:flex flex-col gap-2 self-center justify-center items-center p-4 h-fit bg-stone-300 outline-4 outline-stone-600 rounded-lg">
+                    <Image
+                        src={heroLogo}
+                        alt="Infinite Scroll Feed Logo"
+                        width={192}
+                        height={192}
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Hero