Add some info and renaming to ecoSecrets (#1)

* feat: change footer and contacts

* feat: end of contact page

* wip : product page with team presentation

* feat: add page about technologies used

* wip : header et navigation modifications

* feat: add release card to home page

* feat: last modification to contact page

* feat: add some information to home page

* modifcation of background picture of product page

* feat: complete footer

* finishing design footer

* remove apostrophes

* renaming to ecosecrets

* renaming ecoSecrets in readme

* logo change and prettier

.env

@@ -1,3 +1,3 @@
-SITE_URL=https://geocam.natural-solutions.eu
+SITE_URL=https://ecosecrets.natural-solutions.eu
 NEXT_PUBLIC_GITHUB_USER=naturalsolutions
 NEXT_PUBLIC_GITHUB_URL=https://github.com/naturalsolutions

README.md

@@ -1,6 +1,6 @@
-# geocam-site
+# ecoSecrets-site
 
-GeoCam promotional site. Built using [Next.js](https://nextjs.org/) with TypeScript, it is intended to be hosted as a fully static site on GitHub Pages.
+ecoSecrets promotional site. Built using [Next.js](https://nextjs.org/) with TypeScript, it is intended to be hosted as a fully static site on GitHub Pages.
 
 ## Principles
 
@@ -44,4 +44,4 @@ The site uses Next.js's "export" functionality. To build locally, run `pnpm buil
 ## TODO
 
 - [ ] Fix alt text for images
-- [ ] Add font loading (Open Sans)
+- [ ] Add font loading (Open Sans)

package.json

@@ -28,6 +28,7 @@
     "react-dom": "18.2.0",
     "react-leaflet": "^4.2.1",
     "react-markdown": "^8.0.7",
+    "react-player": "^2.12.0",
     "remark": "^14.0.3",
     "remark-html": "^15.0.2",
     "sass": "^1.66.1",

src/_posts/2022-11-02_webinar.md

@@ -1,6 +1,6 @@
 ---
-title: GEOCAM, UN OUTIL OPEN-SOURCE POUR LES DONNÉES DE PIÈGES PHOTOGRAPHIQUES, DISPONIBLE SUR GITHUB
+title: ECOSECRETS, UN OUTIL OPEN-SOURCE POUR LES DONNÉES DE PIÈGES PHOTOGRAPHIQUES, DISPONIBLE SUR GITHUB
 date: "2023-03-07"
-excerpt: "Qu'est-ce que geoCam et l'open-source ? Comment contribuer à GeoCam via GitHub ? "
+excerpt: "Qu'est-ce que ecoSecrets et l'open-source ? Comment contribuer à ecoSecrets via GitHub ? "
 author: Mathilde Leclerc
 ---

src/_posts/2023-03-07_open-source.md

@@ -1,6 +1,6 @@
 ---
-title: GEOCAM, UN OUTIL OPEN-SOURCE POUR LES DONNÉES DE PIÈGES PHOTOGRAPHIQUES, DISPONIBLE SUR GITHUB
+title: ECOSECRETS, UN OUTIL OPEN-SOURCE POUR LES DONNÉES DE PIÈGES PHOTOGRAPHIQUES, DISPONIBLE SUR GITHUB
 date: "2023-03-07"
-excerpt: "Qu'est-ce que geoCam et l'open-source ? Comment contribuer à GeoCam via GitHub ? "
+excerpt: "Qu'est-ce que ecoSecrets et l'open-source ? Comment contribuer à ecoSecrets via GitHub ? "
 author: Mathilde Leclerc
 ---

src/components/presentation/Contact.tsx

@@ -0,0 +1,29 @@
+import { PropsWithChildren } from "react";
+import Image from "next/image";
+
+const Contact = ({
+  name,
+  img,
+  description,
+  children,
+}: PropsWithChildren<{ name?: string; img?: any; description?: string }>) => (
+  <div className="card mb-3 border-0" style={{ maxWidth: "900px" }}>
+    <div className="row g-0">
+      <div className="col-md-2">
+        <Image
+          src={img ? img : require("public/images/contacts/unknown.jpg")}
+          style={{ width: 150, height: 150 }}
+          alt={"Pas de photo disponible"}
+        ></Image>
+      </div>
+      <div className="col-md-8">
+        <div className="card-body">
+          <h5 className="card-title">{name}</h5>
+          <p className="card-text">{description}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+export default Contact;

src/components/presentation/Modal.tsx

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from "react";
+
+const Modal = ({
+  title,
+  children,
+}: PropsWithChildren<{ title?: string; children?: string }>) => (
+  <div className="modal" tabIndex={-1}>
+    <div className="modal-dialog">
+      <div className="modal-content">
+        <div className="modal-header">
+          <h5 className="modal-title">{title}</h5>
+          <button
+            type="button"
+            className="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div className="modal-body">
+          <p>{children}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+export default Modal;

src/components/presentation/team_member.tsx

@@ -0,0 +1,26 @@
+import { PropsWithChildren } from "react";
+import Image from "next/image";
+
+const Member = ({
+  name,
+  img,
+  description,
+}: PropsWithChildren<{ name?: string; img?: any; description?: string }>) => (
+  <div className="card">
+    <Image
+      src={img ? img : require("public/images/contacts/unknown.jpg")}
+      className="card-img-top"
+      alt="..."
+      style={{ maxWidth: "80%", height: "80%", content: "center" }}
+    ></Image>
+    <div className="card-body">
+      <h5 className="card-title">{name}</h5>
+      <p className="card-text">{description}</p>
+      <a href="#" className="btn btn-primary">
+        Go somewhere
+      </a>
+    </div>
+  </div>
+);
+
+export default Member;

src/layout/Footer.tsx

@@ -1,15 +1,66 @@
 import React from "react";
+import logo from "./static/logo.png";
+import Image from "next/image";
 
 const Footer = () => (
-  <div className="constrainer">
-    <footer className="bg-light py-5">
-      <div className="container">
-        <ul className="nav">
-          <li className="navbar-text">Natural Solutions 2023</li>
+  <footer className="bg-light ">
+    <div className="row container  items-center align-items-center">
+      <div className="col">
+        <Image src={logo} height={80} className="me-1" alt="" />
+      </div>
+      <div className="col">
+        <p>
+          <a
+            style={{ color: "black" }}
+            href="https://www.natural-solutions.eu/"
+            target="_blank"
+          >
+            Natural Solutions
+          </a>{" "}
+          <br />
+          English :{" "}
+          <a
+            style={{ color: "black" }}
+            href="https://www.natural-solutions.world/"
+            target="_blank"
+          >
+            natural-solutions.world
+          </a>
+          <br />
+          <a href="https://ecosecrets.natural-solutions.eu/contact/">
+            Nous contacter
+          </a>
+        </p>
+      </div>
+      <div className="col">
+        <ul>
+          <li>Comment installer l&apos;application ?</li>
+          <li>Documentation utilisateur</li>
+          &rarr; Toutes les informations sont sur{" "}
+          <a
+            href="https://github.com/naturalsolutions/ecosecrets"
+            target="_blank"
+          >
+            GitHub
+          </a>
         </ul>
       </div>
-    </footer>
-  </div>
+    </div>
+    <div className="container text-center">
+      <p>
+        Site réalisé (2023) par{" "}
+        <a style={{ color: "black" }} href="https://github.com/MathildeNS">
+          Mathilde Leclerc
+        </a>{" "}
+        et{" "}
+        <a style={{ color: "black" }} href="https://georgemoon.com/">
+          George Moon
+        </a>
+        . Code source disponible{" "}
+        <a href="https://github.com/naturalsolutions/geocam-site">ici</a>
+      </p>
+    </div>
+  </footer>
 );
 
 export default Footer;

src/layout/Header.tsx

@@ -4,7 +4,7 @@ import Link, { LinkProps } from "next/link";
 import { useRouter } from "next/router";
 import Image from "next/image";
 
-import logo from "./static/geocam-logo-dark.svg";
+import logo from "./static/ecoSecrets_Full_light.svg";
 
 interface NavLiLinkProps extends LinkProps {
   href: string;
@@ -41,7 +41,6 @@ const Header: FC = () => (
     <div className="container">
       <Link href="/" className="navbar-brand">
         <Image src={logo} height={30} className="me-1" alt="" />
-        GeoCam
       </Link>
 
       <button
@@ -59,10 +58,11 @@ const Header: FC = () => (
       <div className="collapse navbar-collapse" id="navbarSupportedContent">
         <ul className="navbar-nav ms-auto">
           <NavLiLink href="/" exact>
-            Home
+            Accueil
           </NavLiLink>
-          <NavLiLink href="/produit">Découvrir GeoCam</NavLiLink>
-          <NavLiLink href="/code">Code et démo</NavLiLink>
+          <NavLiLink href="/produit">Découvrir ecoSecrets</NavLiLink>
+          <NavLiLink href="/techno">Technologies</NavLiLink>
+          <NavLiLink href="/ressources">Ressources</NavLiLink>
           <NavLiLink href="/contact">Contact</NavLiLink>
         </ul>
       </div>