add images and redesign hompeage into sections, fix the dark color

apps/homepage/src/components/app-shell/SiteFooter.tsx

@@ -1,5 +1,5 @@
 import { StatusBadge } from '@/components/foundation/StatusBadge';
-import { DemoTrigger } from '@/components/integrations/DemoTrigger';
+import { accountCreateUrl } from '@/lib/account-urls';
 import { localizedPath, type Locale } from '@/lib/localization/config';
 import type { ShellMessages } from '@/lib/localization/messages';
 import styles from './SiteFooter.module.css';
@@ -11,7 +11,6 @@ function signInUrl(locale: Locale): string {
 interface SiteFooterProps {
   locale: Locale;
   messages: ShellMessages;
-  demoEnabled: boolean;
 }
 
 function HashLink({ locale, hash, children }: { locale: Locale; hash: string; children: string }) {
@@ -46,7 +45,7 @@ function PendingItem({ label, pending }: { label: string; pending: string }) {
   );
 }
 
-export function SiteFooter({ locale, messages, demoEnabled }: SiteFooterProps) {
+export function SiteFooter({ locale, messages }: SiteFooterProps) {
   const footer = messages.footer;
   const year = new Date().getUTCFullYear();
 
@@ -98,12 +97,7 @@ export function SiteFooter({ locale, messages, demoEnabled }: SiteFooterProps) {
                 <PendingItem label={footer.links.contact} pending={footer.pending} />
               </li>
               <li>
-                <DemoTrigger
-                  label={footer.links.demo}
-                  source="footer"
-                  size="small"
-                  disabledReason={demoEnabled ? undefined : messages.header.demoUnavailable}
-                />
+                <a href={accountCreateUrl(locale)}>{footer.links.demo}</a>
               </li>
             </ul>
           </section>