Merge pull request #31 from 2060-io/29-replace-left-illustration

feat: add new images and add banner with data of services

app/app/components/banners/bannerServiceHologram.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import Image from 'next/image'
+import React from 'react'
+
+import { Translations } from '../utils'
+
+const BannerServiceHologram: React.FC<{ translations: Translations; imageUrl: string; label: string }> = ({
+  translations,
+  imageUrl,
+  label,
+}) => {
+  return (
+    <div>
+      <div className="-mx-6 w-aut align-middle text-xl text-center py-8 px-3">
+        {translations.invited_to.split('{word}').map((part, index, array) => (
+          <React.Fragment key={index}>
+            {part}
+            {index < array.length - 1 && <strong>{translations.invited_word}</strong>}
+          </React.Fragment>
+        ))}
+      </div>
+      <div className="flex items-center justify-center py-4 bg-[#EAF8F7]">
+        <div className="flex items-center space-x-4">
+          <div className="flex-shrink-0">
+            <Image
+              src={imageUrl}
+              alt="service"
+              width={72}
+              height={72}
+              priority={false}
+              className="p-2 transform transition duration-300 ease-in-out hover:scale-110"
+            />
+          </div>
+          <div className="text-xl font-semibold">{label}</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default BannerServiceHologram

app/app/components/banners/index.ts

@@ -0,0 +1,3 @@
+export { default as BannerDownloadHolomgram } from './bannerDownloadHologram'
+export { default as BannerHologramMessaging } from './bannerHologramMessaging'
+export { default as bannerServiceHologram } from './bannerServiceHologram'

app/app/components/footer/index.ts

@@ -0,0 +1,2 @@
+export { default as About } from './about'
+export { default as Footer } from './footer'

app/app/components/navBars/index.ts

@@ -0,0 +1,2 @@
+export { default as NavbarFooter } from './navbarFooter'
+export { default as NavBarTopPage } from './navbarTopPage'

app/app/components/sections/index.ts

@@ -0,0 +1,3 @@
+export { default as SectionProofOfTrust } from './sectionProofOfTrust'
+export { default as SectionStandardsBuilt } from './sectionStandardsBuilt'
+export { default as SectionWhatIs } from './sectionWhatIs'

app/app/components/header.tsx → app/app/components/utils/header.tsx

@@ -2,7 +2,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import React from 'react'
 
-import { Translations } from '../components/utils'
+import { Translations } from './types'
 
 interface Header {
   translations: Translations

app/app/components/utils/index.ts

@@ -1 +1,4 @@
+export { default as Header } from './header'
+export { default as QRCodeWithLogo } from './QRCodeWithLogo'
 export * from './types'
+export { default as useDeviceDetect } from './useDeviceDetect'

app/app/page.tsx

@@ -6,15 +6,11 @@ import React, { useEffect, useState } from 'react'
 
 import loadTranslations from '../utils/loadTranslations'
 
-import { Header, useDeviceDetect } from './components'
-import BannerDownloadHolomgram from './components/banners/bannerDownloadHologram'
-import BannerHologramMessaging from './components/banners/bannerHologramMessaging'
-import Footer from './components/footer/footer'
-import SectionProofOfTrust from './components/sections/sectionProofOfTrust'
-import SectionStandardsBuilt from './components/sections/sectionStandardsBuilt'
-import SectionWhatIs from './components/sections/sectionWhatIs'
-import { Translations } from './components/utils'
-import QRCodeWithLogo from './components/utils/QRCodeWithLogo'
+import { BannerDownloadHolomgram, BannerHologramMessaging } from './components/banners'
+import BannerServiceHologram from './components/banners/bannerServiceHologram'
+import { Footer } from './components/footer'
+import { SectionProofOfTrust, SectionStandardsBuilt, SectionWhatIs } from './components/sections'
+import { Header, QRCodeWithLogo, Translations, useDeviceDetect } from './components/utils'
 
 interface OobData {
   imageUrl: string
@@ -79,27 +75,46 @@ export default function HomePage() {
         <Header translations={translations ?? {}} />
 
         {oobData && oobData?.type !== didcomm_v2 && (
-          <section className="container mx-auto my-8 md:my-12 lg:my-16 flex flex-col items-center justify-center text-center bg-white shadow-lg rounded border border-gray-300 p-6 max-w-lg">
-            <Image
-              src={oobData.imageUrl ?? './default.svg'}
-              alt="QR Code"
-              className="w-32 h-32 md:w-48 md:h-48 lg:w-64 lg:h-64"
-              width={30}
-              height={30}
-              priority={false}
-            />
-            <h2 className="text-2xl font-bold mb-4 md:text-3xl lg:text-4xl">{oobData.label}</h2>
-            <p className="text-base md:text-lg lg:text-xl leading-relaxed text-justify max-w-lg mb-4">
-              {translations?.download.replace('SERVICE', oobData.label ?? 'service')}
-            </p>
-          </section>
+          // <section className="container mx-auto my-8 md:my-12 lg:my-16 flex flex-col items-center justify-center text-center bg-white shadow-lg rounded border border-gray-300 p-6 max-w-lg">
+          //   <Image
+          //     src={oobData.imageUrl ?? './default.svg'}
+          //     alt="QR Code"
+          //     className="w-32 h-32 md:w-48 md:h-48 lg:w-64 lg:h-64"
+          //     width={30}
+          //     height={30}
+          //     priority={false}
+          //   />
+          //   <h2 className="text-2xl font-bold mb-4 md:text-3xl lg:text-4xl">{oobData.label}</h2>
+          //   <p className="text-base md:text-lg lg:text-xl leading-relaxed text-justify max-w-lg mb-4">
+          //     {translations?.download.replace('SERVICE', oobData.label ?? 'service')}
+          //   </p>
+          // </section>
+          <BannerServiceHologram
+            translations={translations ?? {}}
+            imageUrl={oobData.imageUrl}
+            label={oobData.label}
+          />
         )}
 
         {deviceType !== 'mobile' && (
-          <section className="container mx-auto my-8 md:my-12 lg:my-16 flex flex-col items-center justify-center text-center">
+          <section className="container mx-auto my-2 md:my-8 lg:my-10 flex flex-col items-center justify-center text-center">
             <div className="w-[315px] h-[315px] flex justify-center items-center mb-6 bg-white border-solid border-2 rounded-2xl border-gray-300">
               <QRCodeWithLogo value={url} logoUrl="images/ico-hologram.png" logoHeight={18} logoWidth={18} />
             </div>
+            <p className="flex items-center justify-center font-normal text-[18px] leading-[16px] text-center text-[#9194B1]">
+              <Image
+                src={'images/valid_credential.svg'}
+                alt={'check'}
+                width={26}
+                height={26}
+                className="mr-2 w-[30px] h-[30px] transition duration-300 ease-in-out hover:scale-110"
+              />
+              {translations?.valid_credential.split(' ').slice(0, -1).join(' ') + '\u00A0'}
+              <span className="text-[18px] font-bold leading-[16px] text-[#3EBDB6]">
+                {translations?.valid_credential.split(' ').pop()}
+              </span>
+            </p>
+            &nbsp;
             <p className="font-bold text-xl">{translations?.continue_qr}</p>
           </section>
         )}

app/app/privacity/page.tsx

@@ -4,10 +4,9 @@ import { usePathname } from 'next/navigation'
 import { useEffect, useState } from 'react'
 
 import loadTranslations from '../../utils/loadTranslations'
-import { Header } from '../components'
-import Footer from '../components/footer/footer'
-import NavBarTopPage from '../components/navBars/navbarTopPage'
-import { Translations } from '../components/utils'
+import { Footer } from '../components/footer'
+import { NavBarTopPage } from '../components/navBars'
+import { Header, Translations } from '../components/utils'
 
 const Privacity = () => {
   const [translations, setTranslations] = useState<Translations>()

app/app/terms/page.tsx

@@ -4,10 +4,9 @@ import { usePathname } from 'next/navigation'
 import { useEffect, useState } from 'react'
 
 import loadTranslations from '../../utils/loadTranslations'
-import { Header } from '../components'
-import Footer from '../components/footer/footer'
-import NavBarTopPage from '../components/navBars/navbarTopPage'
-import { Translations } from '../components/utils'
+import { Footer } from '../components/footer'
+import { NavBarTopPage } from '../components/navBars'
+import { Header, Translations } from '../components/utils'
 
 const Terms = () => {
   const [translations, setTranslations] = useState<Translations>()

app/translations/en.json

@@ -3,6 +3,7 @@
     "terms": "Terms and conditions",
     "download" : "To connect to SERVICE, first you need to download Hologram in your phone.",
     "get_service": "Hologram is already installed in your phone? click here to enter SERVICE.",
+    "valid_credential": "The credential of this service is valid.",
     "continue_qr": "Continue on your Mobile Phone by scanning this QR",
     "download_msg": "Download Hologram",
     "new_app": "New to Hologram?",
@@ -23,6 +24,8 @@
     "proof_of_trust_paragraph_3_phrase_2": "its",
     "proof_of_trust_paragraph_3_phrase_3": "Proof-of-Trust",
     "proof_of_trust_paragraph_3_phrase_4": "with Hologram.",
+    "invited_to": "You have been {word} to connect to:",
+    "invited_word": "invited",
     "built_standar": "Built exclusively on open standards for a new, decentralized, and trusted Internet",
     "copy_right": "©2060 OÜ | All Rights Reserved",
     "nav_home": "Home",

app/translations/es.json

@@ -3,6 +3,7 @@
     "terms": "Términos y condiciones",
     "download": "Para conectarte a SERVICE, primero necesitas descargar Hologram en tu teléfono.",
     "get_service": "¿Has descargado Hologram? Haz clic aquí para entrar a SERVICE.",
+    "valid_credential": "La credencial de este servicio es válida.",
     "continue_qr": "Continúa en tu teléfono móvil escaneando este QR",
     "download_msg": "Descargar Hologram",
     "new_app": "¿Nuevo en Hologram?",
@@ -23,6 +24,8 @@
     "proof_of_trust_paragraph_3_phrase_2": "su",
     "proof_of_trust_paragraph_3_phrase_3": "Prueba de Confianza",
     "proof_of_trust_paragraph_3_phrase_4": "con Hologram.",
+    "invited_to": "Has sido {word} a conectarte con:",
+    "invited_word": "invitado",
     "built_standar": "Construido exclusivamente sobre estándares abiertos para una nueva Internet descentralizada y confiable.",
     "copy_right": "© 2060 OÜ | Todos los derechos reservados",
     "nav_home": "Inicio",