Erstelle eine professionelle, luxuriöse und vollständig interaktive Website für das Unternehmen SaaPro Marketing – سابرو للتسويق. (Hinweis zur Übersetzung: Die Website selbst bleibt vollständig arabisch. Die unten genannten Texte für Überschriften, Menüs und Schaltflächen sind ins Deutsche übersetzt und auf der Seite auf Arabisch umzusetzen.) Die Website soll wirken wie die einer internationalen Marketing- und Kreativagentur, nicht wie eine klassische Firmenvorlage. Der erste Eindruck muss sehr stark und visuell beeindruckend sein, sodass Besucher in den ersten Sekunden spüren: SaaPro ist ein modernes Unternehmen, das Marketing, Kreativität, Content, Technik, künstliche Intelligenz und Videoproduktion verbindet. Gesamtidentität Firmenname: SaaPro Marketing – سابرو للتسويق Bereich: Agentur für Marketing und digitale Kreation mit ganzheitlichen Lösungen zum Aufbau und Wachstum von Marken. Grundidee der Marke: Idee → Erlebnis → Conversion → Wachstum Die Philosophie, die die Website widerspiegeln soll: Wir liefern nicht bloß eine Anzeige oder ein Design, sondern bauen eine durchgängige Reise, die bei der Idee beginnt, zu einem wirkungsvollen Erlebnis wird, dann zu Ergebnissen und Conversions führt und in echtem Wachstum der Marke endet. Verwende eine Premium-/Futuristic-Bildsprache auf Basis des SaaPro-eigenen Türkis/Mint mit Schwarz, dunklem Anthrazit und Weiß, dazu weiche Lichter und Verläufe, die Technik und Luxus vermitteln. Keine vielen Farben, kein überladenes Design. Gefragt ist ein edles, dunkles, filmisches, technisches und kreatives Design. Sprache und Leserichtung Die gesamte Website ist auf Arabisch, mit Leserichtung RTL (von rechts nach links). Große Sorgfalt bei der arabischen Schrift; große, klare und moderne Typografie verwenden. Im Header: Navigationslinks rechts, SaaPro-Logo links. Hauptnavigation: Startseite – Leistungen – Arbeiten – Über uns – Kontakt Dazu ein deutlicher CTA-Button, etwa: Projekt starten Einstieg in die Website Beim Öffnen der Website soll es eine kurze, besondere Eröffnungssequenz geben, keinen klassischen Ladebildschirm. Etwa das SaaPro-Logo oder der Buchstabe S, filmisch inszeniert mit einer einfachen Bewegung, danach ein flüssiger Übergang zur Startseite. Das Intro darf nicht lang oder störend sein; es soll in ein bis zwei Sekunden einen Premium-Eindruck erzeugen. Startseite – Hero Section Ich möchte einen riesigen Hero, der fast den ganzen Bildschirm füllt. Mit einer starken arabischen Überschrift wie: Wir verwandeln Ideen in Wirkung. Dann: Und Wirkung in Wachstum. Oder eine ähnliche kreative Formulierung, die zu einer modernen Marketingagentur passt. Dazu ein kurzer Text über SaaPro: Strategie, Content, Technik und visuelle Kreativität arbeiten zusammen, um Marken aufzubauen, die wachsen. Füge in der Mitte oder seitlich ein zentrales visuelles Element im Stil der SaaPro-Identität ein, etwa eine 3D-Kugel bzw. einen Orb mit dem Buchstaben S oder dem Firmenlogo, der sich leicht mit Mausbewegung und Scrollen bewegt. Um das Element herum erscheinen die vier Bezeichnungen: 01 — Strategie 02 — Content 03 — Technik 04 — Wachstum Diese Wörter müssen groß und sehr gut lesbar sein, nicht klein und schwer lesbar. Außerdem die Zeile: Ganzheitliches Wachstum 360° Und darunter: Scrollen und entdecken Mit einem einfachen visuellen Hinweis, der zum Weiterscrollen einlädt. Bewegung und Interaktion Das ist ein ganz zentraler Punkt. Ich will keine statische Website. Das Surferlebnis selbst soll Teil der Unternehmensidentität sein. Verwende professionelle Scroll-Animationen, Parallax, Reveal-Animationen, Text-Masking, weiche Übergänge, Bild-Parallax, Hover-Effekte, magnetische Buttons, animierte Zähler, Sticky Sections und Elemente, die sich beim Scrollen schrittweise verändern. Manche großen Texte können sich beim Scrollen langsam bewegen, manche Bilder seitlich hereinkommen oder sich allmählich vergrößern. Die Übergänge zwischen den Abschnitten sollen flüssig und filmisch sein, nicht einfach untereinander gestapelte Blöcke. Die Bewegung muss aber edel und durchdacht sein, nicht störend. Sehr wichtig: Keinen großen eigenen Mauszeiger und keinen Kreis verwenden, der über Texten schwebt. Den normalen Systemzeiger verwenden, damit er keine Wörter oder Buttons verdeckt. Abschnitt „Was wir bieten“ Eine große Überschrift: 01 — Was wir bieten Dann ein sehr großes Wort: Wir erschaffen Darum herum oder dazu erscheinen die Bereiche: Strategie Content Technik Wachstum Videoproduktion Künstliche Intelligenz Diese Wörter nicht klein machen. Typografie ist ein Hauptbestandteil des Designs. Beim Überfahren mit der Maus oder beim Scrollen können sich Bildinhalt und Hintergrund je nach Leistung ändern. SaaPro-Leistungen Erstelle einen anspruchsvollen Leistungsbereich mit mindestens: Strategie und Marketingplanung, Betreuung von Social-Media-Kanälen, Content-Erstellung, Corporate Design und visuelle Inhalte, digitale Werbekampagnen, Fotografie und Videoproduktion, Schnitt und Videoproduktion, KI-Lösungen für Content und Werbung, Websites und digitale Erlebnisse sowie Performance- und Wachstumsanalyse. Die Leistungen nicht nur als langweiliges klassisches Raster zeigen. Möglich sind große interaktive Karten oder Sticky Panels, sodass der Bildschirm beim Scrollen von Leistung zu Leistung wechselt, jeweils mit großer Überschrift, kurzer Beschreibung und visuellem Element. SaaPro-Methode Erstelle einen Abschnitt, der die Reise des Kunden erzählt: Idee → Erlebnis → Conversion → Wachstum 01 Idee: Wir verstehen Marke, Markt und Zielgruppe und entwickeln die Strategie. 02 Erlebnis: Wir verwandeln die Strategie in Content, Design und ein digitales Erlebnis. 03 Conversion: Wir verwandeln das Interesse der Zielgruppe in Interaktion, Anfragen und messbare Ergebnisse. 04 Wachstum: Wir analysieren die Daten und verbessern die Leistung für kontinuierliches Wachstum. Dieser Abschnitt soll Storytelling sein, nicht vier gewöhnliche Karten. Abschnitt Projekte und Arbeiten Einer der wichtigsten Abschnitte der Website. Überschrift: Ausgewählte Arbeiten oder: Projekte, die Wirkung hatten Die Projekte groß im Editorial-/Cinematic-Stil zeigen. Ein Projekt enthält: Projektname, Kunde, Kategorie, Kurzbeschreibung, Titelbild, mehrere Bilder, mehrere Videos und, falls vorhanden, das Projektjahr. Beim Hover über ein Projekt bewegt sich das Bild oder wird etwas größer. Beim Klick öffnet sich die Detailseite des Projekts. Die Projektseite muss sehr hochwertig sein: großes Titelbild, Projektbeschreibung, Bilder und Videos. Galerie und Lightbox, um Bilder in voller Größe zu öffnen und zwischen ihnen zu blättern. Die Videos müssen professionell innerhalb der Website laufen. Upload von Videos bis 400 MB pro Video muss unterstützt werden. SaaPro AI Lab Erstelle einen eigenen Abschnitt namens: SaaPro-Labor oder: SaaPro AI Lab Er zeigt, wie das Unternehmen künstliche Intelligenz für Content-Erstellung, Ideenfindung, Design, Videoproduktion, Datenanalyse und Kampagnenentwicklung einsetzt. Das Design dieses Abschnitts darf futuristischer sein als der Rest der Website, mit leicht animierten Linien, Punkten oder Datenelementen. Es soll aber nicht wie eine Hacker-Oberfläche aussehen; gefragt ist Creative Technology. Abschnitt Ergebnisse und Zahlen Erstelle einen Bereich für Kennzahlen des Unternehmens, etwa: Abgeschlossene Projekte Kampagnen Kunden Produzierter Content Wachstumsraten Die Zahlen sind dynamische Zähler, deren Werte später im Admin-Bereich änderbar sind. Keine erfundenen Zahlen als echte Ergebnisse ausgeben; Platzhalter verwenden, bis die echten Unternehmensdaten eingetragen sind. Seite „Über uns“ Kein klassischer Text wie „Wir sind ein führendes Unternehmen …“. Die Seite soll die Persönlichkeit von SaaPro widerspiegeln. Eine Idee wie: Wir sind nicht bloß eine Marketingagentur. Wir sind ein Team, das Idee, Kreativität und Technik verbindet, um Wachstum zu schaffen, das man sehen und messen kann. Danach Vision, Arbeitsweise, Werte und Fachgebiete des Unternehmens. Das Team kann später über den Admin-Bereich ergänzt werden. Kontaktseite Schlichtes, hochwertiges Design. Mit einem Formular: Name, Firmenname, Telefonnummer, E-Mail, gewünschte Leistung, ungefähres Budget, Projektdetails. Button: Los geht’s Die Anfragen landen im Admin-Bereich. Links zu den Social-Media-Konten des Unternehmens und zu WhatsApp ergänzen. Footer Dunkler, eleganter Footer mit SaaPro-Logo, Kurzbeschreibung, Seitenlinks, Social Media, E-Mail: info@saapro.sa und Copyright-Hinweis. Nicht standardmäßig @saapro360 verwenden. Namen und Links der Social-Media-Konten müssen im Admin-Bereich änderbar sein. Admin-Bereich Die Website ist nicht nur ein Schaufenster; ich möchte ein echtes Verwaltungssystem. Es gibt nur einen Admin-Login, keine Registrierung für Besucher. Nach dem Login erscheint ein professionelles Dashboard, über das der Admin Projekte, Leistungen, Seiteninhalte, Kundenanfragen, Social-Media-Links und Einstellungen verwaltet. Bei Projekten kann der Admin anlegen, bearbeiten, löschen, veröffentlichen und verbergen, je Projekt mehrere Bilder und Videos hochladen, Medien löschen und das Titelbild wählen. Videos bis 400 MB unterstützen. Außerdem ein Bereich für Erinnerungen (Reminders) im Admin-Bereich: Der Admin kann eine Erinnerung zu einem Kunden, Konto oder einer Aufgabe anlegen, mit Datum, Uhrzeit, Priorität und Status; überfällige werden deutlich hervorgehoben. Möglichkeit, das Admin-Passwort und die Firmeneinstellungen zu ändern. Technische Anforderungen Die Website muss vollständig responsive sein. Zu testen auf: großem Desktop, Laptop, Tablet quer und hoch, iPhone, Android und kleinen Smartphone-Bildschirmen. Kein Text darf aus dem Bildschirm laufen, keine Elemente dürfen sich überlappen. Für wichtige Größen clamp() verwenden, damit sich die Typografie automatisch an die Bildschirmgröße anpasst. Am Computer das volle Erlebnis mit allen Animationen; auf dem Smartphone schwere Animationen vereinfachen, ohne die Schönheit des Designs zu verlieren. prefers-reduced-motion unterstützen, um Bewegung reduzieren zu können. Große Sorgfalt bei Performance und Lazy Loading für Bilder und Videos. Animationen und 3D-Elemente dürfen die Website nicht verlangsamen. Für große Videos Video-Streaming bzw. HTTP Range Requests verwenden, statt die ganze Videodatei in den Speicher zu laden. Die Website soll später für SEO taugen: passende Titel und Meta-Beschreibungen, Open Graph, semantisches HTML und gute Vorbereitung für Suchmaschinen. Der Maßstab für das Design Wer die Website besucht, soll nicht sagen: „Das ist eine schöne Website einer Marketingagentur.“ Sondern spüren: „Wenn SaaPro sich selbst so präsentiert, will ich sehen, was sie für meine Marke schaffen können.“ Die Website soll die Fähigkeiten des Unternehmens durch das Erlebnis selbst zeigen: Die Bewegung beweist Kreativität, die Ordnung beweist Strategie, die Technik zeigt Professionalität, und die Projekte beweisen Ergebnisse. Keine offensichtliche fertige Vorlage, keine überall wiederholten Karten, keine beliebigen Stockfotos und keine Animationen nur um der Bewegung willen. Gefragt ist: Premium + Cinematic + Interactive + Creative + Futuristic + Arabic RTL + Marketing Focused. Und zum Schluss ein vollständiges, lauffähiges und änderbares Projekt liefern, nicht bloß ein Mockup oder ein Bild der Oberfläche.
