feat: update index page

sadmann7 · Apr 26, 2024 · 4683bf9 · 4683bf9
1 parent cbb94f4
commit 4683bf9
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 22 deletions.
diff --git a/src/app/(lobby)/_components/lobby-skeleton.tsx b/src/app/(lobby)/_components/lobby-skeleton.tsx
@@ -18,18 +18,18 @@ import { CategoryCardSkeleton } from "./category-card-skeleton"
 
 export function LobbySkeleton() {
   return (
-    <Shell className="max-w-6xl">
+    <Shell className="max-w-6xl gap-0">
       <PageHeader
         as="section"
-        className="mx-auto gap-2 text-center"
+        className="mx-auto items-center gap-2 text-center"
         withPadding
       >
         <Skeleton className="h-7 w-44" />
         <PageHeaderHeading
           className="animate-fade-up"
           style={{ animationDelay: "0.20s", animationFillMode: "both" }}
         >
-          Build your commerce platforms
+          Foundation for your commerce platform
         </PageHeaderHeading>
         <PageHeaderDescription
           className="max-w-[46.875rem] animate-fade-up"
@@ -63,7 +63,7 @@ export function LobbySkeleton() {
         description="Explore products from around the world"
         href="/products"
         linkText="View all products"
-        className="pt-8 md:pt-10 lg:pt-12"
+        className="pt-14 md:pt-20 lg:pt-24"
       >
         {Array.from({ length: 8 }).map((_, i) => (
           <ProductCardSkeleton key={i} />
@@ -74,7 +74,7 @@ export function LobbySkeleton() {
         description="Explore stores from around the world"
         href="/stores"
         linkText="View all stores"
-        className="py-8 md:py-10 lg:py-12"
+        className="py-14 md:py-20 lg:py-24"
       >
         {Array.from({ length: 4 }).map((_, i) => (
           <StoreCardSkeleton key={i} />

diff --git a/src/app/(lobby)/_components/lobby.tsx b/src/app/(lobby)/_components/lobby.tsx
@@ -43,10 +43,10 @@ export async function Lobby({
   ])
 
   return (
-    <Shell className="max-w-6xl">
+    <Shell className="max-w-6xl gap-0">
       <PageHeader
         as="section"
-        className="mx-auto gap-2 text-center"
+        className="mx-auto items-center gap-2 text-center"
         withPadding
       >
         <Link
@@ -69,7 +69,7 @@ export async function Lobby({
           className="animate-fade-up"
           style={{ animationDelay: "0.20s", animationFillMode: "both" }}
         >
-          Build your commerce platforms
+          Foundation for your commerce platform
         </PageHeaderHeading>
         <PageHeaderDescription
           className="max-w-[46.875rem] animate-fade-up"
@@ -106,7 +106,7 @@ export async function Lobby({
         description="Explore products from around the world"
         href="/products"
         linkText="View all products"
-        className="pt-8 md:pt-10 lg:pt-12"
+        className="pt-14 md:pt-20 lg:pt-24"
       >
         {products.map((product) => (
           <ProductCard key={product.id} product={product} />
@@ -117,7 +117,7 @@ export async function Lobby({
         description="Explore stores from around the world"
         href="/stores"
         linkText="View all stores"
-        className="py-8 md:py-10 lg:py-12"
+        className="py-14 md:py-20 lg:py-24"
       >
         {stores.map((store) => (
           <StoreCard

diff --git a/src/components/cards/product-card.tsx b/src/components/cards/product-card.tsx
@@ -43,7 +43,7 @@ export function ProductCard({
 
   return (
     <Card
-      className={cn("size-full overflow-hidden rounded-sm", className)}
+      className={cn("size-full overflow-hidden rounded-md", className)}
       {...props}
     >
       <Link aria-label={product.name} href={`/product/${product.id}`}>

diff --git a/src/components/cards/store-card.tsx b/src/components/cards/store-card.tsx
@@ -20,8 +20,7 @@ interface StoreCardProps {
 export function StoreCard({ store, href }: StoreCardProps) {
   return (
     <Link href={href}>
-      <span className="sr-only">{store.name}</span>
-      <Card className="h-full overflow-hidden transition-colors hover:bg-muted/50">
+      <Card className="h-full overflow-hidden rounded-md transition-colors hover:bg-muted/50">
         <AspectRatio ratio={21 / 9}>
           <div className="absolute inset-0 bg-gradient-to-t from-transparent to-zinc-950/50" />
           <Badge
@@ -35,11 +34,11 @@ export function StoreCard({ store, href }: StoreCardProps) {
             {store.stripeAccountId ? "Active" : "Inactive"}
           </Badge>
           <div
-            className="h-full rounded-t-md border-b"
+            className="h-full border-b"
             style={getRandomPatternStyle(String(store.id))}
           />
         </AspectRatio>
-        <CardHeader className="space-y-2">
+        <CardHeader className="p-4">
           <CardTitle className="line-clamp-1">{store.name}</CardTitle>
           <CardDescription className="line-clamp-1">
             {store.description?.length

diff --git a/src/components/content-section.tsx b/src/components/content-section.tsx
@@ -30,12 +30,12 @@ export function ContentSection({
   return (
     <section className={cn("space-y-6", className)} {...props}>
       <div className="flex items-center justify-between gap-4">
-        <div className="max-w-[58rem] flex-1 space-y-1">
+        <div className="flex max-w-[61.25rem] flex-1 flex-col gap-0.5">
           <h2 className="text-2xl font-bold leading-[1.1] md:text-3xl">
             {title}
           </h2>
           {description ? (
-            <p className="max-w-[46rem] text-balance text-sm leading-normal text-muted-foreground sm:text-base sm:leading-7">
+            <p className="max-w-[46.875rem] text-balance text-sm leading-normal text-muted-foreground sm:text-base sm:leading-7">
               {description}
             </p>
           ) : null}

diff --git a/src/components/page-header.tsx b/src/components/page-header.tsx
@@ -19,7 +19,7 @@ function PageHeader({
   return (
     <Comp
       className={cn(
-        "flex max-w-[61.25rem] flex-col items-center gap-1.5",
+        "flex max-w-[61.25rem] flex-col gap-1",
         withPadding && "py-8 md:py-12 md:pb-8 lg:py-24 lg:pb-20",
         className
       )}
@@ -108,4 +108,4 @@ function PageActions({
   )
 }
 
-export { PageHeader, PageHeaderDescription, PageHeaderHeading, PageActions }
+export { PageActions, PageHeader, PageHeaderDescription, PageHeaderHeading }
diff --git a/src/components/skeletons/product-card-skeleton.tsx b/src/components/skeletons/product-card-skeleton.tsx
@@ -13,7 +13,7 @@ export function ProductCardSkeleton({
 }: ProductCardSkeletonProps) {
   return (
     <Card
-      className={cn("h-full overflow-hidden rounded-sm", className)}
+      className={cn("h-full overflow-hidden rounded-md", className)}
       {...props}
     >
       <CardHeader className="border-b p-0">

diff --git a/src/components/skeletons/store-card-skeleton.tsx b/src/components/skeletons/store-card-skeleton.tsx
@@ -4,13 +4,13 @@ import { Skeleton } from "@/components/ui/skeleton"
 
 export function StoreCardSkeleton() {
   return (
-    <Card className="h-full overflow-hidden">
+    <Card className="h-full overflow-hidden rounded-md">
       <AspectRatio ratio={21 / 9}>
         <div className="absolute inset-0 bg-gradient-to-t from-transparent to-zinc-950/50" />
         <Skeleton className="absolute right-2 top-2 h-6 w-14 rounded-sm px-2 py-1" />
         <Skeleton className="size-full rounded-b-none" />
       </AspectRatio>
-      <CardHeader className="space-y-2">
+      <CardHeader className="space-y-1.5">
         <Skeleton className="h-4 w-1/2" />
         <Skeleton className="h-4 w-1/4" />
       </CardHeader>