+1 -1

apps/web/src/index.css

reviewed

··· 4 4 5 5 @layer base { 6 6 :root { 7 7 - --background: 0 0% 100%; 7 7 + --background: 0 0% 96.1%; 8 8 --foreground: 0 0% 3.9%; 9 9 --card: 0 0% 100%; 10 10 --card-foreground: 0 0% 3.9%;

+6 -2

apps/web/src/routes/_.(app)/index.lazy.tsx

reviewed

··· 41 41 </Breadcrumb> 42 42 </div> 43 43 </header> 44 44 - <div className="flex flex-1 flex-col gap-4 p-4 pt-0"> 45 45 - <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4"> 44 44 + <div className="flex flex-col gap-4 p-4 pt-6 items-center"> 45 45 + <h1 className="text-4xl font-black">Community Recipes!</h1> 46 46 + <p className="text-lg">See what the community's been cooking.</p> 47 47 + </div> 48 48 + <div className="flex-1 flex flex-col items-center p-4"> 49 49 + <div className="flex flex-col gap-4 max-w-2xl w-full items-center"> 46 50 <QueryPlaceholder query={query} cards cardsCount={12}> 47 51 {query.data?.recipes.map((recipe, idx) => ( 48 52 <RecipeCard

+4 -3

apps/web/src/screens/Recipes/RecipeCard.tsx

reviewed

··· 1 1 - import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; 1 1 + import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; 2 2 import { Link } from "@tanstack/react-router"; 3 3 import { Clock, CookingPot, ListIcon } from "lucide-react"; 4 4 ··· 18 18 19 19 export const RecipeCard = ({ rkey, author, ...recipe }: RecipeCardProps) => { 20 20 return ( 21 21 - <Link to="/recipes/$author/$rkey" params={{ author, rkey }}> 22 22 - <Card> 21 21 + <Link to="/recipes/$author/$rkey" params={{ author, rkey }} className="w-full"> 22 22 + <Card className="w-full"> 23 23 <CardHeader> 24 24 <CardTitle>{recipe.title}</CardTitle> 25 25 + <CardDescription>By <Link href="#">@{author}</Link></CardDescription> 25 26 </CardHeader> 26 27 <CardContent> 27 28 <p>{recipe.description}</p>