feat: updated a service : Rao mission (updated a bit)

tetuaoro · tetuaoro · commit 71200629f568 · 2023-03-27T13:06:29.000-10:00
* updated some sections, used clip-path css attribute https://bennettfeely.com/clippy/ to design the website a bit
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "raonagos",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "private": true,
   "scripts": {
     "dev": "node server/server.mjs",
diff --git a/server/server.mjs b/server/server.mjs
@@ -5,6 +5,12 @@
  * trusted by all browsers.
  * 
  * Here how to use : https://web.dev/how-to-use-local-https/
+ * 
+ * ```bash
+ * mkcert localhost
+ * # or
+ * mkcert myhome.com
+ * ```
  *
  * */
 
diff --git a/src/components/contactForm.tsx b/src/components/contactForm.tsx
@@ -42,6 +42,7 @@ const Component: FC = () => {
             <option value="raoweb">Rao web</option>
             <option value="raobot">Rao bot</option>
             <option value="raomail">Rao mail</option>
+            <option value="raomail">Rao mission</option>
             <option value="information">Information</option>
             <option value="others">Autres</option>
           </select>
diff --git a/src/components/details.tsx b/src/components/details.tsx
@@ -1,21 +1,41 @@
-import type { FC } from "react"
+import type { FC, CSSProperties } from "react"
 
 const Component: FC = () => {
+  // https://bennettfeely.com/clippy/
+  const triangleTopDetails: CSSProperties = {
+    width: "100%",
+    height: "100px",
+    clipPath: "polygon(23% 0, 0% 100%, 100% 100%)",
+    marginBottom: "-1px",
+  }
+
+  // https://bennettfeely.com/clippy/
+  const triangleBottomDetails: CSSProperties = {
+    width: "100%",
+    height: "100px",
+    clipPath: "polygon(0 0, 84% 100%, 100% 0)",
+    marginTop: "-1px",
+  }
+
   return (
     <section id="details">
-      <div className="py-8 lg:py-16 grid grid-cols-1 lg:grid-cols-3 gap-y-12 full-bleed bg-black text-white text-center">
-        <div className="observer">
-          <span className="block text-4xl font-bold">12+</span>
-          <span className="text-xl">Bot vendu</span>
-        </div>
-        <div className="observer">
-          <span className="block text-4xl font-bold">2+</span>
-          <span className="text-xl">Serveur de messagerie installé</span>
-        </div>
-        <div className="observer">
-          <span className="block text-4xl font-bold">4+</span>
-          <span className="text-xl">Site web créé</span>
+      <div className="full-bleed">
+        <div className="bg-black" style={triangleTopDetails}></div>
+        <div className="py-8 lg:py-16 grid grid-cols-1 lg:grid-cols-3 gap-y-12 bg-black text-white text-center">
+          <div className="observer">
+            <span className="block text-4xl font-bold">12+</span>
+            <span className="text-xl">Bot vendu</span>
+          </div>
+          <div className="observer">
+            <span className="block text-4xl font-bold">2+</span>
+            <span className="text-xl">Serveur de messagerie installé</span>
+          </div>
+          <div className="observer">
+            <span className="block text-4xl font-bold">4+</span>
+            <span className="text-xl">Site web créé</span>
+          </div>
         </div>
+        <div className="bg-black" style={triangleBottomDetails}></div>
       </div>
     </section>
   )
diff --git a/src/components/prices.tsx b/src/components/prices.tsx
@@ -51,14 +51,14 @@ const Component: FC = () => {
           <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" className="bi bi-gear-wide-connected" viewBox="0 0 16 16">
             <path d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434l.071-.286zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5zm0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78h4.723zM5.048 3.967c-.03.021-.058.043-.087.065l.087-.065zm-.431.355A4.984 4.984 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8 4.617 4.322zm.344 7.646.087.065-.087-.065z" />
           </svg>
-          <h3 className="poppins poppins-700 ml-2">Intervention & mission</h3>
+          <span className="poppins poppins-700 ml-2">Rao mission</span>
         </div>
         <p className="mt-4">
           Vous avez besoin d&apos;un expert pour une mission numérique ponctuelle ? Engager {sitename}. <br />
           Vous rencontrez un problème technique avec votre site web ou votre serveur de messagerie ? Engager {sitename}.
         </p>
         <p className="mt-4">
-          Nous vous proposons des solutions adaptées à vos besoins, dans un délai rapide et à un coût raisonnable. Nous sommes à votre disposition pour répondre à toutes vos demandes, que ce soit pour
+          Nous vous proposons des solutions adaptées à vos besoins, dans un délai rapide et à un coût raisonnable de 20 700 XPF par journée sans mensualité. Nous sommes à votre disposition pour répondre à toutes vos demandes, que ce soit pour
           une mission ponctuelle ou un accompagnement sur le long terme.
         </p>
         <p className="mt-4">
diff --git a/src/components/whatwedo.tsx b/src/components/whatwedo.tsx
@@ -5,92 +5,104 @@ import w2 from "@images/w-2.webp"
 import w4 from "@images/w-4.webp"
 import { sitename } from "@libs/app"
 
-import type { FC } from "react"
+import type { FC, CSSProperties } from "react"
 
 const Component: FC = () => {
+  // https://bennettfeely.com/clippy/
+  const ellipseBottom: CSSProperties = {
+    width: "100vw",
+    marginLeft: "calc(50% - 50vw)",
+    height: "300px",
+    clipPath: "ellipse(62% 32% at 52% 0%)",
+    marginTop: "-1px",
+  }
+
   return (
-    <section id="whatwedo" className="relative z-10 bg-black text-white full-bleed p-3 md:p-6 py-12">
-      <div className="flex flex-col items-center lg:block mb-4">
-        <h2 className="h2 observer">Nos oeuvres</h2>
-        <p>{`Si tu cherches à renforcer ta présence sur la toile ou à maximiser ton temps sur les marchés mondiaux ou bien à envoyer des mails avec ton domaine en .pf de manière sécurisée, nous te proposons 3 services :`}</p>
-      </div>
-      <div className="work-items">
-        <div className="flex flex-col">
-          <div className="overlay-image">
-            <div className="embed-overlay">
-              <Image src={w1} placeholder="blur" alt="Man who lauched our trading bot" />
+    <section style={{ marginBottom: "0" }} id="whatwedo">
+      <div className="relative z-10 bg-black text-white full-bleed p-3 md:p-6 py-12">
+        <div className="flex flex-col items-center lg:block mb-4">
+          <h2 className="h2 observer">Nos oeuvres</h2>
+          <p>{`Si tu cherches à renforcer ta présence sur la toile ou à maximiser ton temps sur les marchés mondiaux ou bien à envoyer des mails avec ton domaine en .pf de manière sécurisée, nous te proposons 3 services :`}</p>
+        </div>
+        <div className="work-items">
+          <div className="flex flex-col">
+            <div className="overlay-image">
+              <div className="embed-overlay">
+                <Image src={w1} placeholder="blur" alt="Man who lauched our trading bot" />
+              </div>
+              <div className="overlay-text">
+                <span className="poppins poppins-700 text-2xl">Rao bot</span>
+                <p className="text-center p-4">
+                  <span className="italic">Automate place order</span>
+                  {" sur les marchés boursiers tels que les "}
+                  <i>cryptomonnaies</i>
+                  {" ou le "}
+                  <i>CAC40</i>.
+                </p>
+              </div>
             </div>
-            <div className="overlay-text">
-              <span className="poppins poppins-700 text-2xl">Rao bot</span>
-              <p className="text-center p-4">
-                <span className="italic">Automate place order</span>
-                {" sur les marchés boursiers tels que les "}
-                <i>cryptomonnaies</i>
-                {" ou le "}
-                <i>CAC40</i>.
-              </p>
+            <div className="overlay-image">
+              <div className="embed-overlay">
+                <Image src={w4} placeholder="blur" alt="An email which crossed our server" />
+              </div>
+              <div className="overlay-text">
+                <span className="poppins poppins-700 text-2xl">Rao mail server</span>
+                <p className="text-center p-4">
+                  {"Comptes utilisateurs "}
+                  <i>infinies</i>
+                  {" et "}
+                  <i>sécurisés</i>.
+                </p>
+              </div>
             </div>
           </div>
           <div className="overlay-image">
             <div className="embed-overlay">
-              <Image src={w4} placeholder="blur" alt="An email which crossed our server" />
+              <Image src={w2} height={594} placeholder="blur" alt="Our 4th website : chanson du fenua" />
             </div>
             <div className="overlay-text">
-              <span className="poppins poppins-700 text-2xl">Rao mail server</span>
+              <span className="poppins poppins-700 text-2xl">Rao web</span>
               <p className="text-center p-4">
-                {"Comptes utilisateurs "}
-                <i>infinies</i>
-                {" et "}
-                <i>sécurisés</i>.
+                {"Quatrième site web de l'agence : "}
+                <i>rapide</i>
+                {" et consultable hors-ligne. "}
               </p>
             </div>
           </div>
         </div>
-        <div className="overlay-image">
-          <div className="embed-overlay">
-            <Image src={w2} height={594} placeholder="blur" alt="Our 4th website : chanson du fenua" />
+        <div className="cards">
+          <div id="rao-web" className="card">
+            <span className="card-title">Rao web</span>
+            <span className="card-indication">
+              <i className="gray">40 000 XPF</i>
+            </span>
+            <p className="card-text">
+              {`Notre agence ${sitename}  est ton alliée dans la création d'application pour le web. Quel que soit ton type d'application, à usage professionnel ou personnel, nous disposons des outils nécessaires pour répondre à tes attentes. Et ce, dès la phase de conception jusqu'à sa finalisation. Tous nos sites sont consultables hors ligne et peuvent être installés sur ton ordinateur ou ton smartphone.`}
+            </p>
           </div>
-          <div className="overlay-text">
-            <span className="poppins poppins-700 text-2xl">Rao web</span>
-            <p className="text-center p-4">
-              {"Quatrième site web de l'agence : "}
-              <i>rapide</i>
-              {" et consultable hors-ligne. "}
+          <div id="rao-bot" className="card">
+            <span className="card-title">Rao bot</span>
+            <span className="card-indication">
+              <i className="gray">150 000 XPF</i>
+            </span>
+            <p className="card-text">
+              {`Rao bot est un service avec lequel tu peux automatiser tes actions et rentabiliser ton temps. Par exemple depuis 2016, nous sommes au service des professionnels et des particuliers qui veulent tirer parti du marché des cryptomonnaies. Nous disposons de compétences en matière de trading automatique, d'envoie de message électronique programmé ou d'optimisation d'espace disque des serveurs.`}
+            </p>
+          </div>
+          <div id="rao-mail-server" className="card">
+            <span className="card-title">Rao mail server</span>
+            <span className="card-indication">
+              <i className="gray">150 000 XPF</i>
+            </span>
+            <p className="card-text">
+              {
+                "La messagerie Rao est un service d'installation de messagerie efficace, sécurisé et fiable qui fournit une solution pour la livraison des messages de l'expéditeur aux destinataires. Il permet aux entreprises de simplifier leurs solutions de messagerie, offre un ensemble complet de fonctionnalités de gestion via API et en plus les comptes utilisateurs sont infinies."
+              }
             </p>
           </div>
         </div>
       </div>
-      <div className="cards">
-        <div id="rao-web" className="card">
-          <span className="card-title">Rao web</span>
-          <span className="card-indication">
-            <i className="gray">40 000 XPF</i>
-          </span>
-          <p className="card-text">
-            {`Notre agence ${sitename}  est ton alliée dans la création d'application pour le web. Quel que soit ton type d'application, à usage professionnel ou personnel, nous disposons des outils nécessaires pour répondre à tes attentes. Et ce, dès la phase de conception jusqu'à sa finalisation. Tous nos sites sont consultables hors ligne et peuvent être installés sur ton ordinateur ou ton smartphone.`}
-          </p>
-        </div>
-        <div id="rao-bot" className="card">
-          <span className="card-title">Rao bot</span>
-          <span className="card-indication">
-            <i className="gray">150 000 XPF</i>
-          </span>
-          <p className="card-text">
-            {`Rao bot est un service avec lequel tu peux automatiser tes actions et rentabiliser ton temps. Par exemple depuis 2016, nous sommes au service des professionnels et des particuliers qui veulent tirer parti du marché des cryptomonnaies. Nous disposons de compétences en matière de trading automatique, d'envoie de message électronique programmé ou d'optimisation d'espace disque des serveurs.`}
-          </p>
-        </div>
-        <div id="rao-mail-server" className="card">
-          <span className="card-title">Rao mail server</span>
-          <span className="card-indication">
-            <i className="gray">150 000 XPF</i>
-          </span>
-          <p className="card-text">
-            {
-              "La messagerie Rao est un service d'installation de messagerie efficace, sécurisé et fiable qui fournit une solution pour la livraison des messages de l'expéditeur aux destinataires. Il permet aux entreprises de simplifier leurs solutions de messagerie, offre un ensemble complet de fonctionnalités de gestion via API et en plus les comptes utilisateurs sont infinies."
-            }
-          </p>
-        </div>
-      </div>
+      <div className="bg-black" style={ellipseBottom}></div>
     </section>
   )
 }
diff --git a/src/components/whoweare.tsx b/src/components/whoweare.tsx
@@ -52,6 +52,14 @@ const Component: FC = () => {
           </div>
           <p>Rao mail server</p>
         </div>
+        <div className="service-item observer">
+          <div>
+            <svg xmlns="http://www.w3.org/2000/svg" width="46" height="46" fill="currentColor" className="bi bi-gear-wide-connected" viewBox="0 0 16 16">
+              <path d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434l.071-.286zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5zm0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78h4.723zM5.048 3.967c-.03.021-.058.043-.087.065l.087-.065zm-.431.355A4.984 4.984 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8 4.617 4.322zm.344 7.646.087.065-.087-.065z" />
+            </svg>
+          </div>
+          <p>Rao mission</p>
+        </div>
       </div>
     </section>
   )
diff --git a/src/legals/privacy.tsx b/src/legals/privacy.tsx
diff --git a/src/libs/schema.ts b/src/libs/schema.ts

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "raonagos",`
`3`		`- "version": "0.2.5",`
	`3`	`+ "version": "0.2.6",`
`4`	`4`	`"private": true,`
`5`	`5`	`"scripts": {`
`6`	`6`	`"dev": "node server/server.mjs",`
Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,12 @@`
`5`	`5`	`* trusted by all browsers.`
`6`	`6`	`*`
`7`	`7`	`* Here how to use : https://web.dev/how-to-use-local-https/`
	`8`	`+ *`
	`9`	+ * ```bash
	`10`	`+ * mkcert localhost`
	`11`	`+ * # or`
	`12`	`+ * mkcert myhome.com`
	`13`	+ * ```
`8`	`14`	`*`
`9`	`15`	`* */`
`10`	`16`