discover section

.changeset/friendly-cats-draw.md

@@ -0,0 +1,6 @@
+---
+"@status-im/status-network": patch
+"hub": patch
+---
+
+discover section

apps/hub/src/app/_components/app-card.tsx

@@ -1,36 +1,90 @@
 'use client'
 
-interface AppCardProps {
+import { ExternalIcon } from '@status-im/icons/20'
+import { TwitterIcon } from '@status-im/icons/social'
+import { ButtonLink } from '@status-im/status-network/components'
+import Image from 'next/image'
+
+type Props = {
   name: string
   description: string
-  category: string
-  onLaunch: () => void
+  website: string
+  twitter?: string
+  cover: string
+  icon: string
 }
 
-export function AppCard({
-  name,
-  description,
-  category,
-  onLaunch,
-}: AppCardProps) {
+function AppCard(props: Props) {
+  const { name, description, website, twitter, cover, icon } = props
+
   return (
-    <div className="rounded-16 border border-neutral-20 bg-white-100 p-5 shadow-1 transition-colors hover:border-neutral-30">
-      <div className="mb-4">
-        <div className="mb-2 flex items-center justify-between">
-          <span className="rounded-full bg-customisation-purple-50/10 px-2 py-0.5 text-13 font-medium text-purple">
-            {category}
-          </span>
+    <div className="flex h-full flex-col rounded-28 border border-neutral-20 bg-white-100 p-2 shadow-2 transition-colors hover:border-neutral-30">
+      <div className="relative mb-4">
+        <div className="flex aspect-[12/5] w-full items-center justify-center overflow-hidden rounded-24 bg-neutral-20">
+          <Image
+            src={cover}
+            alt={name}
+            fill
+            className="overflow-hidden rounded-24 object-cover"
+          />
+        </div>
+        <div className="absolute bottom-[-15px] left-2 flex size-20 items-center justify-center overflow-hidden rounded-24 bg-neutral-40 text-11 text-neutral-60">
+          <Image src={icon} alt={name} fill className="object-cover" />
         </div>
-        <h4 className="mb-2 text-19 font-semibold text-neutral-90">{name}</h4>
-        <p className="text-13 leading-relaxed text-neutral-60">{description}</p>
       </div>
 
-      <button
-        onClick={onLaunch}
-        className="w-full rounded-16 bg-neutral-10 px-3 py-2.5 text-13 font-medium text-neutral-90 transition-colors hover:bg-neutral-20"
-      >
-        Launch App
-      </button>
+      <div className="flex flex-1 flex-col gap-1 px-2 pb-2 pt-[10px]">
+        <h3 className="mb-1 text-27 font-semibold text-neutral-90">{name}</h3>
+        <p className="mb-auto text-15 font-400 text-neutral-100">
+          {description}
+        </p>
+        <div className="mt-1 flex items-start gap-2">
+          <ButtonLink
+            href={website}
+            target="_blank"
+            rel="noopener noreferrer"
+            variant="white"
+            size="32"
+          >
+            {website.replace('https://', '')}{' '}
+            <ExternalIcon className="size-4 text-neutral-50" />
+          </ButtonLink>
+          {twitter && (
+            <ButtonLink
+              href={`https://x.com/${twitter}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              variant="white"
+              size="32"
+            >
+              <TwitterIcon className="size-4 text-neutral-50" />
+            </ButtonLink>
+          )}
+        </div>
+      </div>
     </div>
   )
 }
+
+function AppCardSkeleton() {
+  return (
+    <div className="rounded-28 border border-neutral-20 bg-white-100 p-2 shadow-2">
+      <div className="relative mb-4">
+        <div className="aspect-[12/5] w-full animate-skeleton overflow-hidden rounded-24 bg-gradient-to-r from-neutral-10 via-white-100 to-neutral-10 bg-[size:400%_400%]" />
+        <div className="absolute bottom-[-15px] left-2 size-20 animate-skeleton rounded-24 bg-gradient-to-r from-neutral-20 via-white-100 to-neutral-20 bg-[size:400%_400%]" />
+      </div>
+
+      <div className="flex flex-col gap-1 px-2 pb-2 pt-[10px]">
+        <div className="mb-1 h-8 w-3/4 animate-skeleton rounded-12 bg-gradient-to-r from-neutral-10 via-white-100 to-neutral-10 bg-[size:400%_400%]" />
+        <div className="h-5 w-full animate-skeleton rounded-8 bg-gradient-to-r from-neutral-10 via-white-100 to-neutral-10 bg-[size:400%_400%]" />
+        <div className="h-5 w-2/3 animate-skeleton rounded-8 bg-gradient-to-r from-neutral-10 via-white-100 to-neutral-10 bg-[size:400%_400%]" />
+        <div className="mt-1 flex items-start gap-2">
+          <div className="h-8 w-32 animate-skeleton rounded-12 bg-gradient-to-r from-neutral-10 via-white-100 to-neutral-10 bg-[size:400%_400%]" />
+          <div className="size-8 animate-skeleton rounded-12 bg-gradient-to-r from-neutral-10 via-white-100 to-neutral-10 bg-[size:400%_400%]" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export { AppCard, AppCardSkeleton }

apps/hub/src/app/_components/apps.tsx

@@ -1,10 +1,8 @@
-import { Button } from '@status-im/components'
 import { ExternalIcon } from '@status-im/icons/20'
 import { TwitterIcon } from '@status-im/icons/social'
 import { ButtonLink } from '@status-im/status-network/components'
 import {
   CATS_FISHING_URL,
-  HASHVEGAS_URL,
   STATUS_NETWORK_BRIDGE_URL,
 } from '@status-im/status-network/config'
 import { cx } from 'cva'
@@ -23,9 +21,9 @@ const Apps = () => {
             Explore curated Apps and services built on Status Network
           </p>
         </div>
-        <Button variant="outline" size="32">
-          All 254 apps
-        </Button>
+        <ButtonLink href="/discover" variant="outline" size="32">
+          Explore all apps
+        </ButtonLink>
       </div>
       <div className="mb-24 grid gap-6 lg:grid-cols-2 xl:grid-cols-3">
         <GameCard
@@ -44,14 +42,6 @@ const Apps = () => {
           twitter="StatusL2"
           icon="/apps/status-network-bridge-avatar.png"
         />
-        <GameCard
-          title="Hash Vegas"
-          description="Fair and transparent onchain gaming"
-          image="/apps/hashvegas-cover.png"
-          website={HASHVEGAS_URL}
-          twitter="Hashvegas_Offi"
-          icon="/apps/hashvegas-avatar.png"
-        />
       </div>
     </section>
   )