From 95df27082147ea04770f95b8e2ac81229e7f6c2f Mon Sep 17 00:00:00 2001
From: neodk2004 <barac.daniel@gmail.com>
Date: Wed, 12 Aug 2026 18:25:20 +0200
Subject: [PATCH] feat(landing): wrap hero preview in an iPhone-style device
 frame
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Gitea #11 follow-up: replaces the plain rounded rectangle around the
mobile screenshot with an actual iPhone mockup — dark bezel, Dynamic
Island, side buttons, and a home indicator bar in its own strip below
the screenshot (kept separate from the image content so it doesn't
overlap the app's own tab bar).
---
 src/app/page.tsx | 33 +++++++++++++++++++++------------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index fafedb4..b982cca 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -125,19 +125,28 @@ export default async function RootPage() {
 
             {/* Phone mockup + floating badges */}
             <div className="relative mx-auto w-full max-w-[320px] lg:mx-0 lg:justify-self-end">
-              <div className="relative overflow-hidden rounded-[2.5rem] border-4 border-white/90 bg-muted shadow-2xl">
-                <div className="flex items-center justify-center border-b border-black/5 bg-white/90 py-2">
-                  <span className="h-1.5 w-16 rounded-full bg-foreground/15" />
+              <div className="relative rounded-[3rem] bg-neutral-900 p-2.5 shadow-2xl ring-1 ring-white/10">
+                <span className="absolute -left-px top-24 h-8 w-[3px] rounded-l-sm bg-neutral-950" aria-hidden="true" />
+                <span className="absolute -left-px top-36 h-12 w-[3px] rounded-l-sm bg-neutral-950" aria-hidden="true" />
+                <span className="absolute -right-px top-32 h-16 w-[3px] rounded-r-sm bg-neutral-950" aria-hidden="true" />
+
+                <div className="relative overflow-hidden rounded-[2.25rem] bg-white">
+                  <div className="flex h-9 items-center justify-center bg-white">
+                    <span className="h-6 w-[88px] rounded-full bg-black" aria-hidden="true" />
+                  </div>
+                  <Image
+                    src="/app-preview-mobile.png"
+                    alt={t("previewAlt")}
+                    width={327}
+                    height={714}
+                    sizes="320px"
+                    className="h-auto w-full"
+                    priority
+                  />
+                  <div className="flex h-7 items-center justify-center bg-white">
+                    <span className="h-1 w-28 rounded-full bg-black/60" aria-hidden="true" />
+                  </div>
                 </div>
-                <Image
-                  src="/app-preview-mobile.png"
-                  alt={t("previewAlt")}
-                  width={327}
-                  height={714}
-                  sizes="320px"
-                  className="h-auto w-full"
-                  priority
-                />
               </div>
 
               <div