feat: Update home page layout and add featured guides card

- Changed "Featured Resources" to "Explore Top Resources" on home page
- Added a new section for "Learn the Basics" with relevant content
- Included a featured guides card with highlight information
- Updated button link text on home page from "Getting started" to "Learn"

app/(home)/page.tsx

@@ -1,12 +1,15 @@
 import { cn } from "@/lib/utils"
 import React, { ReactNode } from "react"
 
-import { Footer } from "@/components/shared/footer"
 import AnimatedGridPattern from "@/components/ui/animated-grid-pattern"
-import { Button } from "@/components/ui/button"
 import Link from "next/link"
-import { MarqueeDemo } from "@/components/shared/home/resources-marquee"
+import Image from "next/image"
+
+import { Footer } from "@/components/shared/footer"
+import { Button } from "@/components/ui/button"
 import { Plus } from "lucide-react"
+import { MarqueeDemo } from "@/components/shared/home/resources-marquee"
+import { FeaturedGuides } from "@/components/shared/home/guides-card"
 
 export default function HomePage() {
 	return (
@@ -29,10 +32,17 @@ export default function HomePage() {
 							</div>
 							<div className="relative z-10 mt-8 gap-3 flex justify-center">
 								<Button
-									size={"lg"}
+									size="lg"
+									asChild
+								>
+									<Link href="/resources">Explore</Link>
+								</Button>
+								<Button
+									variant="secondary"
+									size="lg"
 									asChild
 								>
-									<Link href="/resources">Getting started</Link>
+									<Link href="/guides">Learn</Link>
 								</Button>
 							</div>
 						</div>
@@ -52,15 +62,29 @@ export default function HomePage() {
 				</Section>
 				<Section className="p-10">
 					<Plus className="absolute -top-3 -left-3 size-6 text-muted-foreground stroke-1" />
-					<h2 className="text-center text-2xl font-semibold sm:text-3xl">Featured Resources</h2>
+					<h2 className="text-center text-2xl font-semibold sm:text-3xl">Explore Top Resources</h2>
 				</Section>
 				<Section className="md:py-20">
 					<Plus className="absolute -top-3 -right-3 size-6 text-muted-foreground stroke-1" />
 					<MarqueeDemo />
 				</Section>
-				{/* <Section>
-					// Featured Guides Here
-				</Section> */}
+				<Section>
+					<Plus className="absolute -top-3 -left-3 size-6 text-muted-foreground stroke-1" />
+					<h2 className="text-center text-2xl font-semibold sm:text-3xl">Learn the Basics</h2>
+				</Section>
+				<Section className="p-0 md:p-0 border-r-0">
+					<Plus className="absolute -top-3 -right-3 size-6 text-muted-foreground stroke-1" />
+					<div className="absolute w-full h-full overflow-hidden">
+						<Image
+							src="/gradient.png"
+							alt="grad"
+							width={1256}
+							height={671}
+							className="opacity-50 absolute -bottom-[42rem] left-1/2 saturate-0 transform -translate-x-1/2 rotate-90 pointer-events-none"
+						/>
+					</div>
+					<FeaturedGuides />
+				</Section>
 			</div>
 			<Footer />
 		</>

components/shared/footer.tsx

@@ -3,7 +3,7 @@ import React from "react"
 
 export const Footer = () => {
 	return (
-		<footer className="mt-auto border-t bg-fd-card py-12 text-fd-secondary-foreground">
+		<footer className="mt-10 border-t bg-fd-card py-12 text-fd-secondary-foreground">
 			<div className="px-10 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
 				<div>
 					<p className="mb-1 text-sm font-semibold">CA Resources</p>
@@ -13,9 +13,22 @@ export const Footer = () => {
 							href="https://cdrcangulo.vercel.app"
 							rel="noreferrer noopener"
 							target="_blank"
-							className="font-medium"
+							className="font-medium underline"
 						>
-							Cedric
+							Cedric Angulo
+						</Link>
+					</p>
+				</div>
+				<div>
+					<p className="text-xs">
+						Powered by{" "}
+						<Link
+							href="https://fumadocs.vercel.app"
+							target="_blank"
+							rel="noreferrer noopener"
+							className="font-medium underline"
+						>
+							fumadocs
 						</Link>
 					</p>
 				</div>

components/shared/home/guides-card.tsx

@@ -0,0 +1,58 @@
+import { FunctionSquare, Image, Layers3, List, MousePointerClick, Table } from "lucide-react"
+import React from "react"
+
+const guidesHighlights = [
+	{
+		title: "Creating Images",
+		icon: <Image />,
+		description: "Images can improve the design and the appearance of a web page.",
+	},
+	{
+		title: "Lists",
+		icon: <List />,
+		description: "Lists are used to group items in a list of items.",
+	},
+	{
+		title: "Table",
+		icon: <Table />,
+		description: "HTML tables allow web developers to arrange data into rows and columns.",
+	},
+	{
+		title: "Functions",
+		icon: <FunctionSquare />,
+		description: "Understand how to create and use functions in JavaScript.",
+	},
+	{
+		title: "Event Handler",
+		icon: <MousePointerClick />,
+		description: "Learn how event handlers trigger JavaScript actions on user interactions.",
+	},
+	{
+		title: "Document Object Model",
+		icon: <Layers3 />,
+		description: "Understand how to manipulate the Document Object Model (DOM) in JavaScript.",
+	},
+]
+
+export const FeaturedGuides = () => {
+	return (
+		<>
+			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 z-10">
+				{guidesHighlights.map((g) => {
+					return (
+						<div
+							key={g.title}
+							className="px-6 py-12 border-r border-b"
+						>
+							<div className="mb-4 flex flex-row items-center gap-2 text-fd-muted-foreground">
+								{g.icon}
+								<h2 className="text-sm font-medium">{g.title}</h2>
+							</div>
+							<span className="font-medium">{g.description}</span>
+						</div>
+					)
+				})}
+			</div>
+		</>
+	)
+}