diff --git a/.github/workflows/alpha.yml b/.github/workflows/alpha.yml index 3c288f1bd..df3f4e4df 100644 --- a/.github/workflows/alpha.yml +++ b/.github/workflows/alpha.yml @@ -99,8 +99,6 @@ jobs: with: builder: ${{ steps.buildx.outputs.name }} file: marketing/Dockerfile - build-args: | - SUB_DOMAIN=www-beta context: marketing tags: retrospected/marketing:alpha platforms: linux/amd64 diff --git a/.github/workflows/canary.yml b/.github/workflows/canary.yml index 284e82318..0f017edbb 100644 --- a/.github/workflows/canary.yml +++ b/.github/workflows/canary.yml @@ -132,8 +132,6 @@ jobs: with: builder: ${{ steps.buildx.outputs.name }} file: marketing/Dockerfile - build-args: | - SUB_DOMAIN=www-beta context: marketing tags: retrospected/marketing:canary platforms: linux/amd64,linux/arm64 diff --git a/.github/workflows/marketing.yml b/.github/workflows/marketing.yml index 63d0bc427..9eea9132c 100644 --- a/.github/workflows/marketing.yml +++ b/.github/workflows/marketing.yml @@ -2,7 +2,7 @@ name: 'Marketing Build' on: push: - branches: [v5000/domains] + branches: [v5000/marketing-content] jobs: marketing: @@ -33,8 +33,6 @@ jobs: with: builder: ${{ steps.buildx.outputs.name }} file: marketing/Dockerfile - build-args: | - SUB_DOMAIN=www-beta context: marketing tags: retrospected/marketing:alpha platforms: linux/amd64 diff --git a/.github/workflows/master.yml b/.github/workflows/master.yml index ebb04a377..d956e9144 100644 --- a/.github/workflows/master.yml +++ b/.github/workflows/master.yml @@ -132,8 +132,6 @@ jobs: with: builder: ${{ steps.buildx.outputs.name }} file: marketing/Dockerfile - build-args: | - SUB_DOMAIN=www context: marketing tags: retrospected/marketing:${{ steps.package.outputs.current-version }} platforms: linux/amd64,linux/arm64 diff --git a/marketing/Dockerfile b/marketing/Dockerfile index ba1bb906f..57cda8850 100644 --- a/marketing/Dockerfile +++ b/marketing/Dockerfile @@ -23,7 +23,7 @@ COPY . . ARG NEXT_PUBLIC_MEASUREMENT_ID=APP_NEXT_PUBLIC_MEASUREMENT_ID ARG NEXT_PUBLIC_APP_URL=APP_NEXT_PUBLIC_APP_URL -ARG SUB_DOMAIN=www +ARG NEXT_BACKEND_SUB_DOMAIN=APP_NEXT_BACKEND_SUB_DOMAIN RUN yarn build # If using npm comment out above and use below instead @@ -44,6 +44,7 @@ COPY --from=builder /app/public ./public COPY --from=builder /app/docker/entrypoint.sh ./entrypoint.sh RUN ["chmod", "+x", "/app/entrypoint.sh"] +RUN ["chown", "nextjs:nodejs", "/app"] # Automatically leverage output traces to reduce image size # https://nextjs.org/docs/advanced-features/output-file-tracing diff --git a/marketing/Makefile b/marketing/Makefile index 76b81ed22..35023e7c6 100644 --- a/marketing/Makefile +++ b/marketing/Makefile @@ -3,4 +3,5 @@ run: docker run \ --env NEXT_PUBLIC_MEASUREMENT_ID=G-BLAH \ --env NEXT_PUBLIC_APP_URL=http://localhost:3000 \ + --env NEXT_BACKEND_SUB_DOMAIN=www-beta \ -it --rm -p 3333:3000 retrospected/marketing:local \ No newline at end of file diff --git a/marketing/docker/entrypoint.sh b/marketing/docker/entrypoint.sh index 6155b454a..3b3500c5d 100644 --- a/marketing/docker/entrypoint.sh +++ b/marketing/docker/entrypoint.sh @@ -3,7 +3,7 @@ # The first part wrapped in a function makeSedCommands() { printenv | \ - grep '^NEXT_PUBLIC' | \ + grep '^NEXT_' | \ sed -r "s/=/ /g" | \ xargs -n 2 sh -c 'echo "sed -i \"s#APP_$0#$1#g\""' } @@ -19,6 +19,7 @@ for c in $(makeSedCommands); do COMMAND="$c $f" eval $COMMAND done + eval "$c ./server.js" done echo "Starting Nextjs" diff --git a/marketing/next-i18next.config.js b/marketing/next-i18next.config.js index eccacccfb..a5fdc3c75 100644 --- a/marketing/next-i18next.config.js +++ b/marketing/next-i18next.config.js @@ -1,9 +1,9 @@ -const subDomain = process.env.SUB_DOMAIN; +const subDomain = process.env.NEXT_BACKEND_SUB_DOMAIN; module.exports = { i18n: { defaultLocale: 'en', - locales: ['en', 'fr', 'de', 'nl'], + locales: ['en', 'fr'], // , 'de', 'nl'], domains: [ { domain: `${subDomain}.retrospected.com`, @@ -13,10 +13,10 @@ module.exports = { domain: `${subDomain}.retrospected.fr`, defaultLocale: 'fr', }, - { - domain: `${subDomain}.retrospected.de`, - defaultLocale: 'de', - } + // { + // domain: `${subDomain}.retrospected.de`, + // defaultLocale: 'de', + // } ], }, } \ No newline at end of file diff --git a/marketing/package.json b/marketing/package.json index b37477df8..e5026216f 100644 --- a/marketing/package.json +++ b/marketing/package.json @@ -10,7 +10,6 @@ }, "dependencies": { "@next/font": "13.1.6", - "@redq/reuse-modal": "^2.0.0", "@styled-system/theme-get": "^5.1.2", "@types/node": "18.13.0", "@types/react": "18.0.28", @@ -36,6 +35,7 @@ "react": "18.2.0", "react-anchor-link-smooth-scroll": "^1.0.12", "react-aria-menubutton": "^7.0.3", + "react-circle-flags": "^0.0.18", "react-dom": "18.2.0", "react-i18next": "^12.1.5", "react-icons-kit": "^2.0.0", diff --git a/marketing/public/locales/de/common.json b/marketing/public/locales/de/common.json index 5cfc207a6..8aba081aa 100644 --- a/marketing/public/locales/de/common.json +++ b/marketing/public/locales/de/common.json @@ -11,7 +11,7 @@ }, "Nav": { "home": "Zuhause", - "howTo": "Wie man", + "howTo": "Warum?", "features": "Eigenschaften", "testimonial": "Referenzen", "pricing": "Preis", @@ -23,80 +23,92 @@ "main": "Schließen Sie sich den Hunderten von Unternehmen mit unserem Produkt an" }, "HowItWorks": { - "heading": "Wir sind anders, we..." + "heading": "Wir sind anders, we...", + "1": { + "title": "Wir sind schnell", + "text": "Sie können Ihr Retro mit einem Klick starten." + }, + "2": { + "title": "Wir sind mehrsprachig", + "text": "Unsere App ist in 15 Sprachen verfügbar!" + }, + "3": { + "title": "Wir sind anpassbar", + "text": "Sie können die App an Ihre Bedürfnisse anpassen. Spalten, Stimmen, Emojis, Sie benennen." + }, + "4": { + "title": "Wir können selbst gehostet werden", + "text": "Wenn Sie die vollständige Kontrolle über Ihre Daten wollen, können Sie selbst Host Retrospektion." + } }, "Testimonials": { "heading": "Was die Leute über uns sagen", "1": { - "author": "Johnny Simpson", - "designation": "Leiter des Designs", - "quote": "Jedes Zimmer ist mit den meisten kollaborativen Oberflächen beladen, so dass Sie schnell Notizen aufnehmen und Ideen austauschen können. Wählen Sie eines unserer Standardthemen oder erstellen Sie Ihr individuelles Design mit den Editoren." + "author": "Jean-Laurent Wotton", + "designation": "Manager", + "quote": "---" }, "2": { - "author": "Johnny Simpson", - "designation": "Leiter des Designs", - "quote": "Jedes Zimmer ist mit den meisten kollaborativen Oberflächen beladen, so dass Sie schnell Notizen aufnehmen und Ideen austauschen können. Wählen Sie eines unserer Standardthemen oder erstellen Sie Ihr individuelles Design mit den Editoren." + "author": "Frank Becker", + "designation": "Liefer-Team-Gruppe", + "quote": "Ihr Text hier" }, "3": { - "author": "Johnny Simpson", - "designation": "Leiter des Designs", - "quote": "Jedes Zimmer ist mit den meisten kollaborativen Oberflächen beladen, so dass Sie schnell Notizen aufnehmen und Ideen austauschen können. Wählen Sie eines unserer Standardthemen oder erstellen Sie Ihr individuelles Design mit den Editoren." - }, - "4": { - "author": "Johnny Simpson", - "designation": "Leiter des Designs", - "quote": "Jedes Zimmer ist mit den meisten kollaborativen Oberflächen beladen, so dass Sie schnell Notizen aufnehmen und Ideen austauschen können. Wählen Sie eines unserer Standardthemen oder erstellen Sie Ihr individuelles Design mit den Editoren." + "author": "Allein-Klaire Allain", + "designation": "Senior Manager", + "quote": "Ich habe Retrospected am Ende jedes Sprints verwendet, um Feedback von meinem Team zu erhalten. Es ist als Werkzeug von unschätzbarem Wert und sehr einfach zu bedienen." } }, "Pricing": { "heading": "Entdecken Sie unsere aufregenden Preise", + "weAccept": "Wir akzeptieren auch Euro und britische Pfund", "monthly": "Monatlich", "yearly": "Jährlich", + "perMonth": " / Monat", + "perYear": " / Jahr", "currency": "$", "subscribe": "Jetzt abonnieren", "login": "Jetzt anmelden", "basic": { "title": "Einfache", "price": 0, - "recurrence": "pro Monat", + "plus": "Ihre kostenlose Option", "features": [ "Unbegrenzte Retrospektiven", - "Unbegrenzte Teammitglieder", - "Unbegrenzte Aktionselemente", + "Komplette Anpassung", + "Giphy-Integration", + "Anonyme Konten", "40 Beiträge" ] }, "pro": { "title": "Pro", "price": "12.9", - "recurrence": "pro Monat", + "plus": "Alles von Basic, plus:", "features": [ - "Unbegrenzte Retrospektiven", - "Unbegrenzte Teammitglieder", - "Unbegrenzte Aktionselemente", "Unbegrenzte Beiträge", + "Volle Datenverschlüsselung", + "Private Sitzungen", "20 Benutzer" ] }, "unlimited": { "title": "Unbegrenzt", "price": "49.95", - "recurrence": "pro Monat", + "plus": "Alles von Pro, plus:", "features": [ - "Unbegrenzte Retrospektiven", - "Unbegrenzte Teammitglieder", - "Unbegrenzte Aktionselemente", - "Unbegrenzte Beiträge", - "Unbegrenzte Benutzer" + "Unbegrenzte Pro-Konten", + "Alle Benutzer Ihrer Domain sind Pro automatisch" ] }, "hosted": { "title": "Selbstgehostet", "price": 649, - "recurrence": "Einmalige Gebühr", + "plus": "Alles von Unlimited, plus:", "features": [ - "Alles von Unlimited", - "Alle Benutzer sind standardmäßig Pro", + "Benutzer-Administrationstools", + "Alle Benutzer sind Pro-Benutzer", + "Lebenslange Updates", "Großartige Dokumentation" ] } @@ -120,10 +132,22 @@ "Features": { "heading": "Eine Retrospektive in Sekunden starten", "description": "Ein Retro zu starten oder zu betreten ist so einfach wie 1, 2, 3.", - "feature1": "Funktion 1", - "feature2": "Funktion 2", - "feature3": "Merkmal 3", - "feature4": "Funktion 4" + "1": { + "title": "Reaktionsfähig", + "description": "Retrospected funktioniert über alle Gerätegrößen, von Ihrem iPhone bis zu einem 4K-Monitor." + }, + "2": { + "title": "Anpassbar", + "description": "Retrospected ist hochgradig anpassbar. Sie können die Spalten ändern, das Abstimmungssystem, den Timer etc. optimieren." + }, + "3": { + "title": "Sicher", + "description": "Es gibt 2 Sicherheitsfunktionen für Pro-Benutzer: die Fähigkeit, den Inhalt lokal zu verschlüsseln (im Browser), und die Fähigkeit, eine Sitzung so zu sperren, dass sie nur von bestimmten Benutzern gesehen werden kann." + }, + "4": { + "title": "Mehrsprachig", + "description": "Retrospected kommt mit 15 Sprachen." + } }, "Newsfeed": { "heading": "Was ist neu bei Retrospected" @@ -173,5 +197,9 @@ "phone": "+44 (nicht jetzt verwendet)", "openingTime": "7 Tage - 8 - 22 Uhr", "email": "support@retrospected.com" + }, + "Integration": { + "heading": "Integrationen", + "description": "Retrospected integriert sich in die Werkzeuge, die Sie bereits verwenden." } } \ No newline at end of file diff --git a/marketing/public/locales/en/common.json b/marketing/public/locales/en/common.json index c1fbd28c5..e21351cea 100644 --- a/marketing/public/locales/en/common.json +++ b/marketing/public/locales/en/common.json @@ -11,7 +11,7 @@ }, "Nav": { "home": "Home", - "howTo": "How To", + "howTo": "Why us?", "features": "Features", "testimonial": "Testimonials", "pricing": "Pricing", @@ -23,80 +23,92 @@ "main": "Join the hundreds of companies using our product" }, "HowItWorks": { - "heading": "We are different because..." + "heading": "We are different because...", + "1": { + "title": "We are fast", + "text": "You can start your retro in one click." + }, + "2": { + "title": "We are multilingual", + "text": "Our app is available in 15 languages!" + }, + "3": { + "title": "We are customisable", + "text": "You can customise the app to your needs. Columns, votes, emojis, you name it." + }, + "4": { + "title": "We can be self-hosted", + "text": "If you want complete control of your data, you can self-host Retrospected." + } }, "Testimonials": { "heading": "What people say about us", "1": { - "author": "Johnny Simpson", - "designation": "Head of Design", - "quote": "Each room is loaded with the most collaborative surfaces so you can quickly take notes, capture to-dos, and share ideas. Pick one of our stock themes, or create your custom theme with the editors." + "author": "Jean-Laurent Wotton", + "designation": "Manager", + "quote": "---" }, "2": { - "author": "Johnny Simpson", - "designation": "Head of Design", - "quote": "Each room is loaded with the most collaborative surfaces so you can quickly take notes, capture to-dos, and share ideas. Pick one of our stock themes, or create your custom theme with the editors." + "author": "Frank Becker", + "designation": "Delivery Team Group", + "quote": "Your text here" }, "3": { - "author": "Johnny Simpson", - "designation": "Head of Design", - "quote": "Each room is loaded with the most collaborative surfaces so you can quickly take notes, capture to-dos, and share ideas. Pick one of our stock themes, or create your custom theme with the editors." - }, - "4": { - "author": "Johnny Simpson", - "designation": "Head of Design", - "quote": "Each room is loaded with the most collaborative surfaces so you can quickly take notes, capture to-dos, and share ideas. Pick one of our stock themes, or create your custom theme with the editors." + "author": "Anne-Claire Allain", + "designation": "Senior Manager", + "quote": "I have been using Retrospected at the end of every sprint to gather feedback from my team. It has been invaluable as a tool, and very easy to use too." } }, "Pricing": { "heading": "Explore our exciting pricing", + "weAccept": "We also accept Euros and British Pounds", "monthly": "Monthly", "yearly": "Yearly", + "perMonth": " / month", + "perYear": " / year", "currency": "$", "subscribe": "Subscribe Now", "login": "Login Now", "basic": { "title": "Basic", "price": 0, - "recurrence": "per month", + "plus": "Your free option", "features": [ "Unlimited Retrospectives", - "Unlimited Team Members", - "Unlimited Action Items", + "Full customisation", + "Giphy integration", + "Anonymous accounts", "40 posts" ] }, "pro": { "title": "Pro", "price": 12.90, - "recurrence": "per month", + "plus": "Everything from Basic, plus:", "features": [ - "Unlimited Retrospectives", - "Unlimited Team Members", - "Unlimited Action Items", "Unlimited posts", + "Full data encryption", + "Private sessions", "20 users" ] }, "unlimited": { "title": "Unlimited", "price": 49.95, - "recurrence": "per month", + "plus": "Everything from Pro, plus:", "features": [ - "Unlimited Retrospectives", - "Unlimited Team Members", - "Unlimited Action Items", - "Unlimited posts", - "Unlimited users" + "Unlimited Pro Accounts", + "All users from your domain are Pro automatically" ] }, "hosted": { "title": "Self Hosted", "price": 649, - "recurrence": "One-time fee", + "plus": "Everything from Unlimited, plus:", "features": [ - "Everything from Unlimited", - "All users are Pro by default", + "User administration tool", + "All users are Pro users", + "Lifetime updates", "Awesome documentation" ] } @@ -120,10 +132,22 @@ "Features": { "heading": "Start a retrospective in seconds", "description":"Starting or joining a retro is as easy as 1, 2, 3. It's friction-less.", - "feature1": "Feature 1", - "feature2": "Feature 2", - "feature3": "Feature 3", - "feature4": "Feature 4" + "1": { + "title": "Responsive", + "description": "Retrospected works across all device sizes, from your iPhone to a 4K monitor." + }, + "2": { + "title": "Customisable", + "description": "Retrospected is highly customisable. You can change the columns, tweak the voting system, the timer etc." + }, + "3": { + "title": "Secure", + "description": "There are 2 security features for Pro users: the ability to encrypt the content locally (in browser), and the ability to lock a session so it can only be seen by specific users." + }, + "4": { + "title": "Multilingual", + "description": "Retrospected comes with 15 languages." + } }, "Newsfeed": { "heading": "What's new at Retrospected" @@ -155,6 +179,10 @@ "phone": "+44 (not used for now)", "openingTime": "7 Days - 8am - 10pm", "email": "support@retrospected.com" + }, + "Integration": { + "heading": "Integrations", + "description": "Retrospected integrates with the tools you already use." } } \ No newline at end of file diff --git a/marketing/public/locales/fr/common.json b/marketing/public/locales/fr/common.json index b0cc7b57b..63fb8ee71 100644 --- a/marketing/public/locales/fr/common.json +++ b/marketing/public/locales/fr/common.json @@ -11,7 +11,7 @@ }, "Nav": { "home": "Accueil", - "howTo": "Comment ?", + "howTo": "Pourquoi nous?", "features": "Fonctionnalités", "testimonial": "Témoignages", "pricing": "Tarifs", @@ -20,148 +20,172 @@ "login": "Connexion" }, "Clients": { - "main": "Rejoingnez les centaines d'entreprises qui nous ont fait confiance" + "main": "Des centaines d'entreprises utilisent Retrospected" }, "HowItWorks": { - "heading": "Nous sommes différents, parce-que..." - }, - "Testimonials": { - "heading": "Ce que les gens disent de nous", + "heading": "Nos utilisateurs aiment ...", "1": { - "author": "Jean LaPointe", - "designation": "Directeur Design", - "quote": "Retrospected nous est très utile, et blah blah blah, et encore du blah blah merci de remplir les trous" + "title": "Notre app intuitive et rapide", + "text": "Commencez une rétrospective en un clic." }, "2": { - "author": "Jean LaPointe", - "designation": "Directeur Design", - "quote": "Retrospected nous est très utile, et blah blah blah, et encore du blah blah merci de remplir les trous" + "title": "Notre interface multilingue", + "text": "Utilisez Retrospected dans l'une des 15 langues disponibles (dont le Français)." }, "3": { - "author": "Jean LaPointe", - "designation": "Directeur Design", - "quote": "Retrospected nous est très utile, et blah blah blah, et encore du blah blah merci de remplir les trous" + "title": "Notre app personnalisable", + "text": "Personnalisez l'application à vos besoins : colonnes, votes, émoticônes, etc." }, "4": { - "author": "Jean LaPointe", - "designation": "Directeur Design", - "quote": "Retrospected nous est très utile, et blah blah blah, et encore du blah blah merci de remplir les trous" + "title": "Héberger Retrospected sur vos serveurs (ou les nôtres)", + "text": "Si vous voulez un contrôle total de vos données, vous pouvez héberger Retrospected." + } + }, + "Testimonials": { + "heading": "Nos utilisateurs aiment Retrospected", + "1": { + "author": "Jean-Laurent Wotton", + "designation": "Manager", + "quote": "---" + }, + "2": { + "author": "Frank Becker", + "designation": "Delivery Team Group", + "quote": "Your text here" + }, + "3": { + "author": "Anne-Claire Allain", + "designation": "Senior Manager", + "quote": "J'ai utilisé Retrospected à la fin de chaque sprint pour recueillir les commentaires de mon équipe. Il a été inestimable en tant qu'outil et très facile à utiliser." } }, "Pricing": { - "heading": "Nos prix", + "heading": "Nos tarifs", + "weAccept": "Nous acceptons également les livres sterling et dollars américains", "monthly": "Par mois", "yearly": "Par an", + "perMonth": " / mois", + "perYear": " / an", "currency": "€", - "subscribe": "Acheter maintenant", + "subscribe": "Je m'abonne", "login": "Connectez-vous", "basic": { - "title": "Basic", + "title": "Basique", "price": 0, - "recurrence": "per month", + "plus": "Votre option gratuite", "features": [ "Retrospectives illimitées", - "Unlimited Team Members", - "Unlimited Action Items", - "40 posts" + "Personnalisation totale", + "Intégration à Giphy", + "Comptes anonymes", + "40 publications" ] }, "pro": { "title": "Pro", "price": "11.9", - "recurrence": "par mois", + "plus": "Basique, plus:", "features": [ - "Unlimited Retrospectives", - "Unlimited Team Members", - "Unlimited Action Items", - "Unlimited posts", - "20 users" + "Posts illimités", + "Chiffrement des données", + "Sessions privées", + "20 utilisateurs" ] }, "unlimited": { - "title": "Unlimited", + "title": "Illimité", "price": "49.95", - "recurrence": "par mois", + "plus": "Tout de Pro, plus :", "features": [ - "Unlimited Retrospectives", - "Unlimited Team Members", - "Unlimited Action Items", - "Unlimited posts", - "Unlimited users" + "Comptes Pro illimités", + "Tous les utilisateurs de votre domaine sont automatiquement Pro" ] }, "hosted": { - "title": "Self Hosted", + "title": "Auto-hébergement", "price": 599, - "recurrence": "une seule fois", + "plus": "Tout de Illimité, plus :", "features": [ - "Everything from Unlimited", - "All users are Pro by default", - "Awesome documentation" + "Outil de gestion des utilisateurs", + "Tous les utilisateurs sont des utilisateurs Pro", + "Mises à jour à vie", + "Une documentation géniale" ] } }, "SelfHosted": { - "slogan": "Self Hosting", - "title": "A TRADUIRE", - "desc": "Keep complete control of your data by self-hosting Retrospected. One-time fee, unlimited updates. Get up and running with our amazing documentation in no time.", + "slogan": "Auto-hébergement", + "title": "Retrospected sur votre serveur", + "desc": "Gardez un contrôle complet de vos données en auto-hébergeant Retrospected. Un seul paiement, des mises à jour illimitées. Installez Retrospected avec notre documentation en un rien de temps.", "features": [ - "Complete control: your data stays on your premises", - "Easy to install", - "Administration Panel", - "All users are Pro", - "Free updates, forever" + "Contrôle complet : vos données restent dans vos serveurs", + "Facile à installer", + "Panneau d'Administration", + "Tous les utilisateurs sont Pro", + "Mises à jour gratuites, pour toujours" ], "button": { "link": "https://docs.retrospected.com", - "label": "Discover our documentation" + "label": "Découvrez notre documentation" } }, "Features": { "heading": "Commencez une rétro en quelques secondes", - "description": "Starting or joining a retro is as easy as 1, 2, 3. It's friction-less.", - "feature1": "Fonctionalité 1", - "feature2": "Feature 2", - "feature3": "Feature 3", - "feature4": "Feature 4" + "description": "Créer ou rejoindre une rétro se fait en 2 clics.", + "1": { + "title": "Adaptatif", + "description": "Retrospected fonctionne sur toutes les tailles d'appareil, de votre iPhone à un moniteur 4K." + }, + "2": { + "title": "Personnalisable", + "description": "Retrospected est hautement personnalisable. Vous pouvez changer les colonnes, modifier le système de vote, le minuteur, etc." + }, + "3": { + "title": "Sécurisé", + "description": "Il y a 2 fonctionnalités de sécurité pour les utilisateurs Pro : la possibilité de chiffrer le contenu localement (dans le navigateur), et la possibilité de verrouiller une session pour qu'elle ne soit visible que par des utilisateurs spécifiques." + }, + "4": { + "title": "Multilingue", + "description": "Retrospected est traduit en 15 langues." + } }, "Newsfeed": { "heading": "Quoi de neuf à Retrospected ?" }, "FAQ": { - "heading": "Vos Questions (à traduire)", + "heading": "Vos Questions", "data": [ { - "question": "How are payments handled?", - "answer": "Payments are handled by our partner, Stripe. No payment information is stored by Retrospected." + "question": "Comment les paiements sont-ils gérés ?", + "answer": "Les paiements sont traités par notre partenaire, Stripe. Aucune information de paiement n'est stockée par Retrospected." }, { - "question": "Do you give Pro licenses for free in some cases?", - "answer": "If you are using this product as a charity, or you are in education, send us an email and we'll sort out a free license for you. Contact us." + "question": "Est-ce que vous donnez des licences Pro gratuitement dans certains cas ?", + "answer": "Si vous utilisez ce produit dans le cadre d'un organisme caritatif, ou si vous êtes dans le domaine de l'éducation, envoyez-nous un courriel et nous vous enverrons une licence gratuite." }, { - "question": "Will I pay more for some features?", - "answer": "We only have 2 tiers: Free and Pro. All features are unlocked when you subscribe to a Pro account." + "question": "Vais-je payer plus cher pour certaines fonctionnalités?", + "answer": "Nous n'avons que 2 niveaux : Gratuit et Pro. Toutes les fonctionnalités sont débloquées lorsque vous vous abonnez à un compte Pro." }, { - "question": "Is it possible to pay yearly?", - "answer": "You can! Simply select this option at checkout and you will get one month free per year." + "question": "Est-il possible de payer annuellement ?", + "answer": "Vous pouvez ! Il suffit de sélectionner cette option au moment du paiement et vous obtiendrez un mois gratuit par an." }, { - "question": "Can I cancel my plan?", - "answer": "Yes. The subscription can be stopped at any time, and will end at the end of your current billing month." + "question": "Puis-je annuler mon abonnement ?", + "answer": "Oui. L'abonnement peut être arrêté à tout moment, et prendra fin à la fin de votre mois de facturation en cours." }, { - "question": "Is there any limit?", - "answer": "There is no limit on the amount of data stored, subject to fair-use policy. On free accounts, you are limited to 40 posts." + "question": "Y a-t-il une limite?", + "answer": "Il n'y a pas de limite sur le nombre de données stockées, sous réserve d'une politique d'utilisation équitable. Sur les comptes gratuits, vous êtes limité à 40 postes." } ] }, "CTA": { "heading": "Commencez une Retrospective maintenant", - "description": "Join the thousands of users who are already using Retrospected", - "button": "Start a Retrospective", - "hint": "This will change your life!" + "description": "Rejoignez les milliers d'utilisateurs qui utilisent déjà Retrospected", + "button": "Démarrez une rétrospective", + "hint": "Cela va changer votre vie !" }, "Footer": { "copyright": "Copyright © 2023 - Retrospected Ltd. Tout droits réservés.", @@ -169,9 +193,13 @@ }, "Contact": { "title": "Contactez-nous", - "address": "Retrospected Ltd, London, UK", - "phone": "+44 (not used for now)", + "address": "Retrospected Ltd, Londres, Royaume-Uni", + "phone": "+44 (non utilisé pour le moment)", "openingTime": "7j/7 - 8h - 22h", "email": "support@retrospected.com" + }, + "Integration": { + "heading": "Intégrations", + "description": "Retrospected s'intègre avec les outils que vous utilisez déjà." } } \ No newline at end of file diff --git a/marketing/public/locales/nl/common.json b/marketing/public/locales/nl/common.json index 2a003acfa..fd1021214 100644 --- a/marketing/public/locales/nl/common.json +++ b/marketing/public/locales/nl/common.json @@ -11,7 +11,7 @@ }, "Nav": { "home": "Startpagina", - "howTo": "Hoe te", + "howTo": "Waarom ons?", "features": "Eigenschappen", "testimonial": "Beoordelingen", "pricing": "Prijsstelling", @@ -23,80 +23,92 @@ "main": "Doe mee met honderden bedrijven die ons product gebruiken" }, "HowItWorks": { - "heading": "We zijn anders omdat..." + "heading": "We zijn anders omdat...", + "1": { + "title": "We zijn snel", + "text": "Je kunt je retro met één klik starten." + }, + "2": { + "title": "We zijn meertalig", + "text": "Onze app is beschikbaar in 15 talen!" + }, + "3": { + "title": "We zijn aanpasbaar", + "text": "U kunt de app aanpassen aan uw behoeften. Kolommen, stemmen, emojis, u kunt het noemen." + }, + "4": { + "title": "We kunnen zelf gehost zijn", + "text": "Als u volledige controle over uw gegevens wilt, kunt u zelf Retrospecten uitvoeren." + } }, "Testimonials": { "heading": "Wat mensen over ons zeggen", "1": { - "author": "Johnny Simpson", - "designation": "Hoofd ontwerp", - "quote": "Elke kamer wordt geladen met de meest samenwerkende oppervlakken, zodat u snel aantekeningen kunt maken, dingen kunt vastleggen en ideeën kunt delen. Kies een van onze standaard thema's, of maak een eigen thema met de editors." + "author": "Jean-Laurent Wotton", + "designation": "Beheerder", + "quote": "---" }, "2": { - "author": "Johnny Simpson", - "designation": "Hoofd ontwerp", - "quote": "Elke kamer wordt geladen met de meest samenwerkende oppervlakken, zodat u snel aantekeningen kunt maken, dingen kunt vastleggen en ideeën kunt delen. Kies een van onze standaard thema's, of maak een eigen thema met de editors." + "author": "Frank Becker", + "designation": "Levering Team groep", + "quote": "Je tekst hier" }, "3": { - "author": "Johnny Simpson", - "designation": "Hoofd ontwerp", - "quote": "Elke kamer wordt geladen met de meest samenwerkende oppervlakken, zodat u snel aantekeningen kunt maken, dingen kunt vastleggen en ideeën kunt delen. Kies een van onze standaard thema's, of maak een eigen thema met de editors." - }, - "4": { - "author": "Johnny Simpson", - "designation": "Hoofd ontwerp", - "quote": "Elke kamer wordt geladen met de meest samenwerkende oppervlakken, zodat u snel aantekeningen kunt maken, dingen kunt vastleggen en ideeën kunt delen. Kies een van onze standaard thema's, of maak een eigen thema met de editors." + "author": "Anne-Claire Allaïne", + "designation": "Senior beheerder", + "quote": "Ik heb aan het einde van elke sprint Retrospected gebruikt om feedback van mijn team te ontvangen. Het is van onschatbare waarde geweest als instrument en ook zeer gemakkelijk te gebruiken." } }, "Pricing": { "heading": "Ontdek onze spannende prijzen", + "weAccept": "We accepteren ook Euros en Britse ponden", "monthly": "maandelijks", "yearly": "Jaarlijks", + "perMonth": " / maand", + "perYear": " / jaar", "currency": "$", "subscribe": "Nu abonneren", "login": "Nu inloggen", "basic": { "title": "Eenvoudig", "price": 0, - "recurrence": "per maand", + "plus": "Jouw gratis optie", "features": [ "Onbeperkte Retrospectieven", - "Onbeperkt teamleden", - "Onbeperkte actie items", + "Volledige aanpassing", + "Giphy integratie", + "Anonieme accounts", "40 berichten" ] }, "pro": { "title": "Pro", "price": "12.9", - "recurrence": "per maand", + "plus": "Alles van Basic, plus:", "features": [ - "Onbeperkte Retrospectieven", - "Onbeperkt teamleden", - "Onbeperkte actie items", "Onbeperkt aantal berichten", + "Volledige data-encryptie", + "Privé sessies", "20 gebruikers" ] }, "unlimited": { "title": "Onbeperkt", "price": "49.95", - "recurrence": "per maand", + "plus": "Alles van Pro, plus:", "features": [ - "Onbeperkte Retrospectieven", - "Onbeperkt teamleden", - "Onbeperkte actie items", - "Onbeperkt aantal berichten", - "Onbeperkt aantal gebruikers" + "Onbeperkt Pro-Accounts", + "Alle gebruikers van uw domein zijn automatisch Pro" ] }, "hosted": { "title": "Zelf gehost", "price": 649, - "recurrence": "Eenmalige vergoeding", + "plus": "Alles van ongelimiteerd, plus:", "features": [ - "Alles van Onbeperkt", - "Alle gebruikers zijn standaard Pro", + "Beheerfunctie van gebruikers", + "Alle gebruikers zijn Pro-gebruikers", + "Levenslange updates", "Geweldige documentatie" ] } @@ -120,10 +132,22 @@ "Features": { "heading": "Start een retrospectief in seconden", "description": "Het starten of deelnemen aan een retro is zo eenvoudig als 1, 2, 3. Het is wrijvingsloos.", - "feature1": "Feature 1", - "feature2": "Functie 2", - "feature3": "Feature 3", - "feature4": "Functie 4" + "1": { + "title": "Responsief", + "description": "Retrospected werkt in alle formaten van je iPhone tot een 4K-monitor." + }, + "2": { + "title": "Aanpasbaar", + "description": "Retrospected is zeer aanpasbaar. U kunt de kolommen, het stemsysteem aanpassen, de timer etc." + }, + "3": { + "title": "Beveiligen", + "description": "Er zijn 2 beveiligingsfuncties voor Pro-gebruikers: de mogelijkheid om de inhoud lokaal (in browser) te versleutelen en de mogelijkheid om een sessie te vergrendelen zodat het alleen kan worden gezien door specifieke gebruikers." + }, + "4": { + "title": "Meertaligheid", + "description": "Retrospected komt met 15 talen." + } }, "Newsfeed": { "heading": "Wat is er nieuw in Retrospected" @@ -173,5 +197,9 @@ "phone": "+44 (niet gebruikt voor nu)", "openingTime": "7 Dagen - 8am - 10.00 uur", "email": "support@retrospected.com" + }, + "Integration": { + "heading": "Integraties", + "description": "Integreert met Retrospecten met de gereedschappen die je al gebruikt." } } \ No newline at end of file diff --git a/marketing/public/robots.txt b/marketing/public/robots.txt new file mode 100644 index 000000000..2a44f87eb --- /dev/null +++ b/marketing/public/robots.txt @@ -0,0 +1,2 @@ +User-Agent: * +Allow: / \ No newline at end of file diff --git a/marketing/src/common/assets/image/webAppCreative/icons/Superprops.zip b/marketing/src/common/assets/image/webAppCreative/icons/Superprops.zip deleted file mode 100755 index 5e3cc06ba..000000000 Binary files a/marketing/src/common/assets/image/webAppCreative/icons/Superprops.zip and /dev/null differ diff --git a/marketing/src/common/components/Heading/index.js b/marketing/src/common/components/Heading/index.js deleted file mode 100755 index bc19f44f7..000000000 --- a/marketing/src/common/components/Heading/index.js +++ /dev/null @@ -1,89 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import styled from 'styled-components' -import { - fontFamily, - fontWeight, - textAlign, - lineHeight, - letterSpacing, -} from 'styled-system' -import { base, themed } from '../base' - -const HeadingWrapper = styled('p')( - base, - fontFamily, - fontWeight, - textAlign, - lineHeight, - letterSpacing, - themed('Heading') -) - -const Heading = ({ content, ...props }) => ( - {content} -) - -export default Heading - -Heading.propTypes = { - content: PropTypes.string, - as: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']), - mt: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number, - PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.string, PropTypes.number]) - ), - ]), - mb: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number, - PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.string, PropTypes.number]) - ), - ]), - fontFamily: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number, - PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.string, PropTypes.number]) - ), - ]), - fontWeight: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number, - PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.string, PropTypes.number]) - ), - ]), - textAlign: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number, - PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.string, PropTypes.number]) - ), - ]), - lineHeight: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number, - PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.string, PropTypes.number]) - ), - ]), - letterSpacing: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number, - PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.string, PropTypes.number]) - ), - ]), - ...base.propTypes, -} - -Heading.defaultProps = { - as: 'h2', - mt: 0, - mb: '1rem', - fontWeight: 'bold', -} diff --git a/marketing/src/common/components/Heading/index.tsx b/marketing/src/common/components/Heading/index.tsx new file mode 100755 index 000000000..223d2b5c3 --- /dev/null +++ b/marketing/src/common/components/Heading/index.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import styled from 'styled-components'; +import { + fontFamily, + fontWeight, + textAlign, + lineHeight, + letterSpacing, +} from 'styled-system'; +import { base, themed } from '../base'; + +const HeadingWrapper = styled('p')( + base, + fontFamily, + fontWeight, + textAlign, + lineHeight, + letterSpacing, + themed('Heading') +) as any; + +type HeadingProps = { + content: React.ReactNode; + className?: string; + as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; + mt?: number | string | Array; + mb?: number | string | Array; + fontFamily?: string | number | Array; + fontWeight?: string | number | Array; + textAlign?: string | number | Array; + lineHeight?: string | number | Array; + letterSpacing?: string | number | Array; +}; + +const Heading = ({ + content, + as = 'h2', + mt = 0, + mb = '1rem', + fontWeight = 'bold', + ...props +}: HeadingProps) => ( + + {content} + +); + +export default Heading; diff --git a/marketing/src/common/components/NextImage/index.tsx b/marketing/src/common/components/NextImage/index.tsx index d21ac65b7..70ce9755a 100755 --- a/marketing/src/common/components/NextImage/index.tsx +++ b/marketing/src/common/components/NextImage/index.tsx @@ -1,5 +1,5 @@ import Image, { ImageProps } from 'next/image'; -export default function NextImage({ ...props }: ImageProps) { - return ; +export default function NextImage({ alt, ...props }: ImageProps) { + return {alt}; } diff --git a/marketing/src/common/components/useToggle/index.js b/marketing/src/common/components/useToggle/index.ts similarity index 76% rename from marketing/src/common/components/useToggle/index.js rename to marketing/src/common/components/useToggle/index.ts index bb736532a..6ea9e84a6 100755 --- a/marketing/src/common/components/useToggle/index.js +++ b/marketing/src/common/components/useToggle/index.ts @@ -1,7 +1,7 @@ import { useState, useCallback } from 'react'; -export default (initialValue) => { +export default function useToggle(initialValue: boolean) { const [value, setValue] = useState(initialValue); const toggler = useCallback(() => setValue((value) => !value), []); return [value, toggler]; -}; +} diff --git a/marketing/src/common/data/WebAppCreative/index.js b/marketing/src/common/data/WebAppCreative/index.js index bf46122b8..d60c1a47a 100755 --- a/marketing/src/common/data/WebAppCreative/index.js +++ b/marketing/src/common/data/WebAppCreative/index.js @@ -39,110 +39,6 @@ export const clients = [envato, evernote, forbes, geekwire, slack, usaToday]; -export const appIntegration = { - sectionTitle: 'Lets see what we integrate', - sectionDesc: `We recently had to jump on 10+ different plugin across eight different countries to find the right owner and escalation process.`, - apps: [ - { - id: 1, - icon: nginx, - name: 'nginx', - bgColor: null, - isBlurred: false, - }, - { - id: 2, - icon: googleCloud, - name: 'googleCloud', - bgColor: '#fff', - isBlurred: false, - }, - { - id: 3, - icon: slack2, - name: 'slack', - bgColor: null, - isBlurred: false, - }, - { - id: 4, - icon: dropbox, - name: 'dropbox', - bgColor: '#fff', - isBlurred: false, - }, - { - id: 5, - icon: drive, - name: 'drive', - bgColor: null, - isBlurred: false, - }, - { - id: 6, - icon: asana, - name: 'asana', - bgColor: null, - isBlurred: false, - }, - { - id: 7, - icon: github, - name: 'github', - bgColor: '#fff', - isBlurred: false, - }, - { - id: 8, - icon: zeplin, - name: 'zeplin', - bgColor: null, - isBlurred: false, - }, - { - id: 9, - icon: nginx, - name: 'nginx', - bgColor: null, - isBlurred: true, - }, - { - id: 10, - icon: messenger, - name: 'messenger', - bgColor: null, - isBlurred: false, - }, - { - id: 11, - icon: zoom, - name: 'zoom', - bgColor: null, - isBlurred: false, - }, - { - id: 12, - icon: smashingMag, - name: 'smashingMag', - bgColor: '#fff', - isBlurred: false, - }, - { - id: 13, - icon: fontAwesome, - name: 'fontAwesome', - bgColor: null, - isBlurred: false, - }, - { - id: 14, - icon: drive, - name: 'google drive', - bgColor: null, - isBlurred: true, - }, - ], -}; export const pricing = [ { diff --git a/marketing/src/containers/WebAppCreative/Banner/banner.style.tsx b/marketing/src/containers/WebAppCreative/Banner/banner.style.tsx index 5bc447a39..c7d5b2d7f 100755 --- a/marketing/src/containers/WebAppCreative/Banner/banner.style.tsx +++ b/marketing/src/containers/WebAppCreative/Banner/banner.style.tsx @@ -2,10 +2,7 @@ import { rgba } from 'polished'; import styled from 'styled-components'; import { themeGet } from '@styled-system/theme-get'; -import dashboardPattern from '../../../common/assets/image/webAppCreative/dashboard-pattern.png'; - const Section = styled.section` - background: url(${dashboardPattern?.src}) no-repeat center bottom; position: relative; z-index: 0; @media (min-width: 768px) and (max-width: 1280px) { @@ -147,9 +144,17 @@ export const Subscribe = styled.div` export const Figure = styled.figure` margin: 30px 0 0; display: flex; + aspect-ratio: 4 / 3; + + img.background { + z-index: 0; + position: absolute; + } img { + z-index: 1; width: 100%; + height: 100%; object-fit: contain; @media (min-width: 1280px) { margin-left: auto; diff --git a/marketing/src/containers/WebAppCreative/Banner/index.tsx b/marketing/src/containers/WebAppCreative/Banner/index.tsx index c84d10754..b89988305 100755 --- a/marketing/src/containers/WebAppCreative/Banner/index.tsx +++ b/marketing/src/containers/WebAppCreative/Banner/index.tsx @@ -12,6 +12,7 @@ import Section, { import screenshot from './mockup-1-02.webp'; import { useTranslation } from 'next-i18next'; import { useConfig } from '@/common/hooks/useConfig'; +import dashboardPattern from '../../../common/assets/image/webAppCreative/dashboard-pattern.png'; const Banner = () => { const { t } = useTranslation('common'); @@ -36,13 +37,22 @@ const Banner = () => {
+
diff --git a/marketing/src/containers/WebAppCreative/Dashboard/dashboard.style.tsx b/marketing/src/containers/WebAppCreative/Dashboard/dashboard.style.tsx index 50a80942e..9a9d32140 100755 --- a/marketing/src/containers/WebAppCreative/Dashboard/dashboard.style.tsx +++ b/marketing/src/containers/WebAppCreative/Dashboard/dashboard.style.tsx @@ -60,6 +60,30 @@ export const SectionHeading = styled.div` } `; +export const Figure = styled.div` + aspect-ratio: 4/3; +`; + +export const Description = styled.div` + text-align: center; + color: ${themeGet('colors.textColor')}; + font-family: 'Inter', sans-serif; + font-size: 18px; + line-height: 1.5; + margin-bottom: 20px; + margin-top: 40px; + margin-left: auto; + margin-right: auto; + @media only screen and (max-width: 1024px) { + max-width: 700px; + } + @media only screen and (max-width: 768px) { + font-size: 16px; + line-height: 2; + max-width: 550px; + } +`; + export const ReactTabs = styled(Tabs)` > nav { text-align: center; diff --git a/marketing/src/containers/WebAppCreative/Dashboard/feature1.webp b/marketing/src/containers/WebAppCreative/Dashboard/feature1.webp new file mode 100644 index 000000000..42230b68b Binary files /dev/null and b/marketing/src/containers/WebAppCreative/Dashboard/feature1.webp differ diff --git a/marketing/src/containers/WebAppCreative/Dashboard/feature2.png b/marketing/src/containers/WebAppCreative/Dashboard/feature2.png new file mode 100644 index 000000000..16b51b288 Binary files /dev/null and b/marketing/src/containers/WebAppCreative/Dashboard/feature2.png differ diff --git a/marketing/src/containers/WebAppCreative/Dashboard/feature3.png b/marketing/src/containers/WebAppCreative/Dashboard/feature3.png new file mode 100644 index 000000000..9aedf982c Binary files /dev/null and b/marketing/src/containers/WebAppCreative/Dashboard/feature3.png differ diff --git a/marketing/src/containers/WebAppCreative/Dashboard/feature4.png b/marketing/src/containers/WebAppCreative/Dashboard/feature4.png new file mode 100644 index 000000000..b2e66326e Binary files /dev/null and b/marketing/src/containers/WebAppCreative/Dashboard/feature4.png differ diff --git a/marketing/src/containers/WebAppCreative/Dashboard/index.tsx b/marketing/src/containers/WebAppCreative/Dashboard/index.tsx index e864df06d..c11b23a29 100755 --- a/marketing/src/containers/WebAppCreative/Dashboard/index.tsx +++ b/marketing/src/containers/WebAppCreative/Dashboard/index.tsx @@ -4,43 +4,47 @@ import Container from '../../../common/components/UI/Container'; import NextImage from '../../../common/components/NextImage'; import Text from '../../../common/components/Text'; import Heading from '../../../common/components/Heading'; -import Section, { SectionHeading, ReactTabs } from './dashboard.style'; -import dashboardImg from '../../../common/assets/image/webAppCreative/dashboard-2.png'; +import Section, { + SectionHeading, + ReactTabs, + Description, + Figure, +} from './dashboard.style'; import { useTranslation } from 'next-i18next'; +import feature1 from './feature1.webp'; +import feature2 from './feature2.png'; +import feature3 from './feature3.png'; +import feature4 from './feature4.png'; +import { StaticImageData } from 'next/image'; -export const dashboard = { - tabs: [ - { - id: 1, - title: 'Features.feature1', - content: { - image: dashboardImg, - }, - }, - { - id: 2, - title: 'Features.feature2', - content: { - image: dashboardImg, - }, - }, - { - id: 3, - title: 'Features.feature3', - content: { - image: dashboardImg, - }, - }, - { - id: 4, - title: 'Features.feature4', - content: { - image: dashboardImg, - }, - }, - ], +type Dashboard = { + id: number; + image: StaticImageData; + width?: number; + height?: number; }; +export const dashboard: Dashboard[] = [ + { + id: 2, + image: feature2, + }, + { + id: 1, + image: feature1, + width: 1007, + height: 592, + }, + { + id: 3, + image: feature3, + }, + { + id: 4, + image: feature4, + }, +]; + const Dashboard = () => { const { t } = useTranslation(); return ( @@ -53,21 +57,28 @@ const Dashboard = () => { - {dashboard.tabs.map((tab) => ( + {dashboard.map((tab) => ( -
+ {t(`Features.${tab.id}.description`)} +
-
+
))} diff --git a/marketing/src/containers/WebAppCreative/Footer/index.tsx b/marketing/src/containers/WebAppCreative/Footer/index.tsx index e47a3f8a8..9a0e28b00 100755 --- a/marketing/src/containers/WebAppCreative/Footer/index.tsx +++ b/marketing/src/containers/WebAppCreative/Footer/index.tsx @@ -206,7 +206,10 @@ const Footer = () => { - +
+ + +
{/* @@ -217,7 +220,9 @@ const Footer = () => { */} - + + + diff --git a/marketing/src/containers/WebAppCreative/HowItWorks/index.tsx b/marketing/src/containers/WebAppCreative/HowItWorks/index.tsx index 7a46697e1..07f03e52b 100755 --- a/marketing/src/containers/WebAppCreative/HowItWorks/index.tsx +++ b/marketing/src/containers/WebAppCreative/HowItWorks/index.tsx @@ -3,7 +3,7 @@ import React from 'react'; // import { arrowRight } from 'react-icons-kit/feather/arrowRight'; import Container from '../../../common/components/UI/Container'; import NextImage from '../../../common/components/NextImage'; -import Link from '../../../common/components/Link'; +// import Link from '../../../common/components/Link'; import Heading from '../../../common/components/Heading'; import Text from '../../../common/components/Text'; import Section, { SectionHeading, Grid, Item } from './howItWorks.style'; @@ -16,44 +16,24 @@ import { useTranslation } from 'next-i18next'; type HowTo = { id: number; icon: any; // TODO - title: string; - text: string; - linkLabel: string; - link: string; }; export const howTos: HowTo[] = [ { id: 1, icon: icon1, - title: 'Manage Smartly', - text: `Stay on top of your task lists and stay in touch with what's happening`, - linkLabel: 'Learn More', - link: '#', }, { id: 2, icon: icon2, - title: 'Monitor user Analytics', - text: `Stay on top of your task lists and stay in touch with what's happening`, - linkLabel: 'Learn More', - link: '#', }, { id: 3, icon: icon3, - title: 'Safe & Trusted', - text: `Get the best DoorDash experience with live order tracking.`, - linkLabel: 'Learn More', - link: '#', }, { id: 4, icon: icon4, - title: 'Fast Customer Support', - text: `Get the best DoorDash experience with live order tracking.`, - linkLabel: 'Learn More', - link: '#', }, ]; @@ -71,12 +51,12 @@ const HowItWorks = () => {
- - - + + + {/* {howTo.linkLabel} - {/* */} - + + */} ))} diff --git a/marketing/src/containers/WebAppCreative/Integrations/index.tsx b/marketing/src/containers/WebAppCreative/Integrations/index.tsx index f12af9390..8fc847cf5 100755 --- a/marketing/src/containers/WebAppCreative/Integrations/index.tsx +++ b/marketing/src/containers/WebAppCreative/Integrations/index.tsx @@ -3,26 +3,86 @@ import NextImage from '../../../common/components/NextImage'; import Text from '../../../common/components/Text'; import Heading from '../../../common/components/Heading'; import Section, { SectionHeading, SupportedApps } from './integration.style'; +import github from '../../../common/assets/image/webAppCreative/icons/github.png'; +import googleCloud from '../../../common/assets/image/webAppCreative/icons/google-cloud.png'; +import slack2 from '../../../common/assets/image/webAppCreative/icons/slack.png'; +import twitter from '../../../common/assets/image/webAppCreative/icons/twitter.png'; +import markdown from './markdown.png'; +import microsoft from './microsoft.png'; +import okta from './okta.png'; +import { useTranslation } from 'next-i18next'; +import styled from 'styled-components'; -import { appIntegration } from '../../../common/data/WebAppCreative'; +export const appIntegration = [ + { + id: 2, + icon: googleCloud, + name: 'googleCloud', + bgColor: '#fff', + isBlurred: false, + }, + { + id: 3, + icon: slack2, + name: 'slack', + bgColor: '#fff', + isBlurred: false, + }, + { + id: 7, + icon: github, + name: 'github', + bgColor: '#fff', + isBlurred: false, + }, + { + id: 8, + icon: twitter, + name: 'Twitter', + bgColor: '#fff', + isBlurred: false, + }, + { + id: 9, + icon: markdown, + name: 'Markdown', + bgColor: '#fff', + isBlurred: false, + }, + { + id: 10, + icon: microsoft, + name: 'Microsoft', + bgColor: '#fff', + isBlurred: false, + }, + { + id: 11, + icon: okta, + name: 'Okta', + bgColor: '#fff', + isBlurred: false, + }, +]; const Integrations = () => { + const { t } = useTranslation(); return (
- - + + - {appIntegration.apps.map((app) => ( -
( +
- -
+ +
))} @@ -30,4 +90,6 @@ const Integrations = () => { ); }; +const Figure = styled.figure``; + export default Integrations; diff --git a/marketing/src/containers/WebAppCreative/Integrations/integration.style.tsx b/marketing/src/containers/WebAppCreative/Integrations/integration.style.tsx index 01315de0f..9bcdb0a1d 100755 --- a/marketing/src/containers/WebAppCreative/Integrations/integration.style.tsx +++ b/marketing/src/containers/WebAppCreative/Integrations/integration.style.tsx @@ -98,14 +98,18 @@ export const SupportedApps = styled.div` min-height: 60px; } img { + object-fit: contain; @media only screen and (max-width: 1024px) { max-width: 55px; + max-height: 55px; } @media only screen and (max-width: 768px) { max-width: 45px; + max-height: 45px; } @media only screen and (max-width: 480px) { max-width: 30px; + max-height: 30px; } } } diff --git a/marketing/src/containers/WebAppCreative/Integrations/markdown.png b/marketing/src/containers/WebAppCreative/Integrations/markdown.png new file mode 100644 index 000000000..5d4ec6ca5 Binary files /dev/null and b/marketing/src/containers/WebAppCreative/Integrations/markdown.png differ diff --git a/marketing/src/containers/WebAppCreative/Integrations/microsoft.png b/marketing/src/containers/WebAppCreative/Integrations/microsoft.png new file mode 100644 index 000000000..308973e0d Binary files /dev/null and b/marketing/src/containers/WebAppCreative/Integrations/microsoft.png differ diff --git a/marketing/src/containers/WebAppCreative/Integrations/okta.png b/marketing/src/containers/WebAppCreative/Integrations/okta.png new file mode 100644 index 000000000..52bd892f5 Binary files /dev/null and b/marketing/src/containers/WebAppCreative/Integrations/okta.png differ diff --git a/marketing/src/containers/WebAppCreative/Navbar/LanguagePicker.tsx b/marketing/src/containers/WebAppCreative/Navbar/LanguagePicker.tsx new file mode 100644 index 000000000..88457d7cd --- /dev/null +++ b/marketing/src/containers/WebAppCreative/Navbar/LanguagePicker.tsx @@ -0,0 +1,63 @@ +import { useRouter } from 'next/router'; +import { useState, MouseEvent as ReactMouseEvent } from 'react'; +import { CircleFlag } from 'react-circle-flags'; +import styled from 'styled-components'; + +const mappings: Record = { + en: 'gb', +}; + +export function LanguagePicker({}: {}) { + const { push, locale, locales } = useRouter(); + const [open, setOpen] = useState(false); + + const handleChange = ( + e: ReactMouseEvent, + loc: string + ) => { + e.preventDefault(); + e.stopPropagation(); + setOpen(false); + push('/' + loc, '/' + loc, { locale: loc }); + }; + + if (!locale || !locales) return null; + + return ( + setOpen((o) => !o)}> + + + {locales.map((lang) => ( + handleChange(e, lang)} + /> + ))} + + + ); +} +const Hover = styled.div<{ open: boolean }>` + display: ${(p) => (p.open ? 'flex' : 'none')}; + + padding: 10px; + flex-direction: column; + gap: 5px; + position: absolute; + left: -10px; + top: 50px; + background-color: white; + box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, + rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, + rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; +`; +const Container = styled.div` + position: relative; + cursor: pointer; +`; diff --git a/marketing/src/containers/WebAppCreative/Navbar/index.tsx b/marketing/src/containers/WebAppCreative/Navbar/index.tsx index 58bae1147..ca8b83652 100755 --- a/marketing/src/containers/WebAppCreative/Navbar/index.tsx +++ b/marketing/src/containers/WebAppCreative/Navbar/index.tsx @@ -1,5 +1,4 @@ import React, { useContext } from 'react'; -import Link from 'next/link'; import NavbarWrapper from '../../../common/components/Navbar'; import Drawer from '../../../common/components/Drawer'; import Button from '../../../common/components/Button'; @@ -13,6 +12,8 @@ import logoImage from './logo.png'; import { MenuItem } from '@/types'; import { useTranslation } from 'next-i18next'; import { useConfig } from '@/common/hooks/useConfig'; +import { LanguagePicker } from './LanguagePicker'; +import styled from 'styled-components'; export const menuItems: MenuItem[] = [ { @@ -30,11 +31,11 @@ export const menuItems: MenuItem[] = [ path: '#features', offset: '70', }, - { - label: 'Nav.testimonial', - path: '#testimonial', - offset: '70', - }, + // { + // label: 'Nav.testimonial', + // path: '#testimonial', + // offset: '70', + // }, { label: 'Nav.pricing', path: '#pricing', @@ -114,6 +115,9 @@ const Navbar = ({