From b2ed91936c0d19bfc9abedc8a1fe6ed48a9a74f1 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Wed, 15 Oct 2025 15:20:38 +0200
Subject: [PATCH] docs: update project documentation and add download page

---
 README.md               | 2 +-
 src/components/Hero.tsx | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index eded3e4..599b281 100644
--- a/README.md
+++ b/README.md
@@ -107,7 +107,7 @@ This project follows a modular, component-based architecture. Pages are assemble
 
 ### Homepage Structure
 
-The homepage (`src/app/(main)/page.tsx`) is composed of the following components:
+The homepage (`src/app/(main)/page.tsx`) is composed of the following components, wrapped in `<AnimatedSection>`:
 
 - `Hero`
 - `About`
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 66de473..bdd243c 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -4,6 +4,7 @@ import clsx from 'clsx'
 
 import { DownloadLink } from '@/components/DownloadLink'
 import { Button } from '@/components/Button'
+import phoneFrame from '@/images/phoneframe.png'
 import { Container } from '@/components/Container'
 import logoBbc from '@/images/logos/bbc.svg'
 import logoCbs from '@/images/logos/cbs.svg'
@@ -129,7 +130,7 @@ export function Hero() {
             <BackgroundIllustration className="absolute top-4 left-1/2 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12  ml-0" />
             <div className="mx-auto h-[448px] mask-[linear-gradient(to_bottom,white_60%,transparent)]  lg:px-0 lg:absolute lg:-inset-x-10 lg:-top-24  lg:h-auto lg:pt-10 xl:-bottom-32">
               <Image
-                src="/images/phoneframe.png"
+                src={phoneFrame}
                 alt="Mycelium application demo"
                 className="mx-auto max-w-[366px]"
                 width={366}