Website overall

package-lock.json

@@ -20,6 +20,7 @@
         "react-dom": "^18.2.0",
         "react-i18next": "^14.1.2",
         "react-icons": "^5.0.1",
+        "react-phone-input-2": "^2.15.1",
         "react-router-dom": "^6.22.3",
         "react-toastify": "^10.0.5",
         "sort-by": "^0.0.2"
@@ -1945,6 +1946,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -3077,12 +3083,32 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
+    "node_modules/lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/lodash.reduce": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
+      "integrity": "sha512-6raRe2vxCYBhpBu+B+TtNGUzah+hQjVdu3E17wfusjyrXBka2nBS8OH/gjVZ5PvHOhWmIZTYri09Z6n/QfnNMw=="
+    },
+    "node_modules/lodash.startswith": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/lodash.startswith/-/lodash.startswith-4.2.1.tgz",
+      "integrity": "sha512-XClYR1h4/fJ7H+mmCKppbiBmljN/nGs73iq2SjCT9SF4CBPoUHzLvWmH1GtZMhMBZSiRkHXfeA2RY1eIlJ75ww=="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -3246,7 +3272,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3589,6 +3614,16 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3670,6 +3705,28 @@
         "react": "*"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/react-phone-input-2": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/react-phone-input-2/-/react-phone-input-2-2.15.1.tgz",
+      "integrity": "sha512-W03abwhXcwUoq+vUFvC6ch2+LJYMN8qSOiO889UH6S7SyMCQvox/LF3QWt+cZagZrRdi5z2ON3omnjoCUmlaYw==",
+      "dependencies": {
+        "classnames": "^2.2.6",
+        "lodash.debounce": "^4.0.8",
+        "lodash.memoize": "^4.1.2",
+        "lodash.reduce": "^4.6.0",
+        "lodash.startswith": "^4.2.1",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
+        "react-dom": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",

package.json

@@ -22,6 +22,7 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^14.1.2",
     "react-icons": "^5.0.1",
+    "react-phone-number-input": "^3.4.3",
     "react-router-dom": "^6.22.3",
     "react-toastify": "^10.0.5",
     "sort-by": "^0.0.2"

public/locales/common/en.json

@@ -14,7 +14,7 @@
       "part1": "We do all the digital footprint for you,",
       "part2": "so you can focus on what's important!"
     },
-    "button": "Yes, I want that!"
+    "button": "Contact Us"
   },
   "services": {
     "heading": {
@@ -159,13 +159,14 @@
       "company": "Company",
       "phone": "Phone",
       "question": "What is your most important question?",
-      "message": "Message",
+      "reference": "How did you hear about us?",
       "button": "Send"
     },
     "toasts": {
       "success": "Your message has been sent successfully!",
       "error": "An error occurred while sending your message. Please try again later.",
-      "empty": "Please fill out all the fields before sending the message."
+      "empty": "Please fill out all the fields before sending the message.",
+      "invalidCountryCode": "Please enter a valid country code."
     }
   },
   "footer": {

public/locales/common/pt.json

@@ -165,7 +165,8 @@
     "toasts": {
       "success": "A tua mensagem foi enviada com sucesso!",
       "error": "Ocorreu um erro ao enviar a tua mensagem. Por favor, tenta novamente mais tarde.",
-      "empty": "Por favor, preenche todos os campos antes de enviar a mensagem."
+      "empty": "Por favor, preenche todos os campos antes de enviar a mensagem.",
+      "invalidCountryCode": "Por favor, preenche um código de país válido."
     }
   },
   "footer": {

src/Components/Pages/Contact/ContactForm.css

@@ -0,0 +1,6 @@
+.PhoneInputInput {
+    background-color: transparent;
+    border: none;
+    outline: none;
+    width: 100%;
+}

src/Components/Pages/Contact/ContactForm.tsx

@@ -1,11 +1,15 @@
-import React from "react";
+import React, { useState } from "react";
 import emailjs from "@emailjs/browser";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { useTranslation } from "react-i18next";
+import PhoneInput, { formatPhoneNumber, parsePhoneNumber } from "react-phone-number-input";
+import 'react-phone-number-input/style.css'
+import "./ContactForm.css";
 
 const ContactForm = () => {
   const { t } = useTranslation();
+  const [phone, setPhone] = useState<string | undefined>(undefined);
 
   const notify = () => {
     toast.success(t("contact.toasts.success"));
@@ -19,6 +23,10 @@ const ContactForm = () => {
     toast.warning(t("contact.toasts.empty"));
   };
   
+  const invalidCountryCode = () => {
+    toast.error(t("contact.toasts.invalidCountryCode"));
+  };
+
   const sendEmail = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -28,11 +36,25 @@ const ContactForm = () => {
         (input as HTMLInputElement).value.trim() === ""
     );
 
-    if (isEmpty) {
+    if (isEmpty || !phone) { // Check if phone is also empty
       emptyForm();
       return;
     }
 
+    let parsedPhone = parsePhoneNumber(phone);
+    let countryCode = parsedPhone?.countryCallingCode;
+
+    if (!countryCode) {
+      invalidCountryCode();
+      return;
+    }
+
+    // Append phone number to the form
+    const phoneInput = document.createElement("input");
+    phoneInput.setAttribute("type", "hidden");
+    phoneInput.setAttribute("value", `+${countryCode} ${formatPhoneNumber(phone)}`);
+    e.currentTarget.appendChild(phoneInput);
+
     emailjs
       .sendForm("service_o7kxotj", "template_f30zlog", e.currentTarget, {
         publicKey: "vcSOwPedqkRH3nmr9",
@@ -49,6 +71,7 @@ const ContactForm = () => {
       );
 
     e.currentTarget.reset();
+    setPhone(undefined); // Reset phone state
   };
 
   return (
@@ -56,13 +79,13 @@ const ContactForm = () => {
       <form onSubmit={sendEmail} className="w-full md:w-auto">
         <div className="flex flex-col md:flex-row md:gap-3">
           <input
-            className="form-input"
+            className="form-input flex-1"
             type="text"
             name="user_name"
             placeholder={t("contact.form.name")}
           />
           <input
-            className="form-input"
+            className="form-input flex-1"
             type="email"
             name="user_email"
             placeholder={t("contact.form.email")}
@@ -70,18 +93,25 @@ const ContactForm = () => {
         </div>
         <div className="flex flex-col md:flex-row md:gap-3">
           <input
-            className="form-input"
+            className="form-input md:w-1/2"
             type="text"
             name="user_company"
             placeholder={t("contact.form.company")}
           />
-          <input
+          <div className="md:w-1/2 flex items-center">
-            className="form-input"
+            <PhoneInput 
-            type="number"
+              defaultCountry="PT"
-            name="user_phone"
               placeholder={t("contact.form.phone")}
+              className="form-input placeholder-white w-full"
+              value={phone}
+              onChange={setPhone}
+              inputProps={{
+                name: "user_phone",
+                required: true,
+              }}
             />
           </div>
+        </div>
         <div className="flex flex-col">
           <input
             className="form-input"
@@ -90,18 +120,17 @@ const ContactForm = () => {
             placeholder={t("contact.form.question")}
           ></input>
 
-          <textarea
+          <input
             className="form-input"
-            name="message"
+            name="user_reference"
-            placeholder={t("contact.form.message")}
+            placeholder={t("contact.form.reference")}
-            rows={6}
+          ></input>
-          ></textarea>
         </div>
 
-        <div className="flex mt-5 mb-10 lg:mt-12 mx-10 lg:mx-20 rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
+        <div className="flex mt-5 mb-10 lg:mt-12 mx-10 sm:mx-40 rounded-full bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
           <button
             type="submit"
-            className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500"
+            className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-full hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500"
           >
             {t("contact.form.button")}
           </button>

src/Components/Pages/Hero/Hero.tsx

@@ -21,7 +21,7 @@ const Hero = () => {
         <img className="items-center" src={HeroImg} alt="hero"></img>
       </div>
       <div className="justify-center items-center lg:w-1/2 xl:w-1/2">
-        <div className="flex flex-col text-center lg:pt-10 lg:pr-20 lg:text-right 2xl:pr-40">
+        <div className="flex flex-col text-center lg:pt-10 lg:pr-20 lg:text-right">
           <img
             src={Stars}
             alt="hero"
@@ -64,7 +64,7 @@ const Hero = () => {
               {t("hero.subheading.part2")}
             </h2>
           </div>
-          <div className="flex mt-5 lg:mt-12 mx-10 lg:mx-0 lg:ml-auto rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
+          <div className="flex mt-5 lg:mt-12 mx-10 lg:mx-0 lg:ml-auto rounded-full bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
             <a
               className="flex w-full"
               href="Contact"
@@ -73,7 +73,7 @@ const Hero = () => {
                 handleNavigation("Contact");
               }}
             >
-              <button className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500">
+              <button className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-full hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500">
                 {t("hero.button")}
               </button>
             </a>

src/Components/Pages/Services/Buttons.tsx

@@ -16,7 +16,7 @@ const Buttons = ({ changeActiveGroup }: props) => {
   };
 
   return (
-    <div className="lg:px-40 flex flex-row 2xl:gap-8 gap-2 mx-2 md:gap-5 mt-5 lg:mt-10 mb-4 justify-center">
+    <div className="lg:px-40 mx-5 gap-5 flex flex-row flex-1 2xl:gap-8 md:gap-5 mt-5 lg:mt-10 mb-4 justify-center">
       <CardBtn
         title="Marketing"
         onClick={() => handleClick("markCards")}
@@ -33,7 +33,7 @@ const Buttons = ({ changeActiveGroup }: props) => {
         isSelected={selectedButton === "smCards"}
       />
       <CardBtn
-        title="Camera & Edits"
+        title="Video & Edits"
         onClick={() => handleClick("camCards")}
         isSelected={selectedButton === "camCards"}
       />

src/Components/Pages/Services/CameraCards.tsx

@@ -9,7 +9,7 @@ const CameraCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full flex lg:mt-20 flex-col flex-wrap xl:flex-row mx-4">
       <Card
         title={t("services.cards.media.card1.title")}
         description={t("services.cards.media.card1.description")}

src/Components/Pages/Services/CardBtn.tsx

@@ -6,7 +6,7 @@ interface props {
 
 const CardBtn = ({ title, onClick, isSelected }: props) => {
   const buttonClass = isSelected
-    ? "w-full font-bold md:px-4 py-1 text-xs lg:text-sm xl:text-2xl cursor-pointer"
+    ? "w-full font-bold md:px-4 py-1 text-xs lg:text-sm xl:text-xl cursor-pointer"
     : "w-full font-medium md:px-4 py-1 text-xs lg:text-sm xl:text-xl text-gray-400 shadow-inner hover:text-text-gold cursor-pointer";
 
   return (

src/Components/Pages/Services/CardGroup.tsx

@@ -31,7 +31,7 @@ const CardGroup = () => {
   }
 
   return (
-    <div className="h-full font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl flex flex-col">
+    <div className="h-full font-medium md:px-8 py-3 text-2xl md:text-3xl flex flex-col">
       {ActiveCards && <ActiveCards />}
       <Buttons changeActiveGroup={changeActiveGroup} />
     </div>

src/Components/Pages/Services/MarketingCards.tsx

@@ -9,7 +9,7 @@ const MarketingCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full flex lg:mt-20 flex-col flex-wrap xl:flex-row mx-4">
       <Card
         title={t("services.cards.marketing.card1.title")}
         description={t("services.cards.marketing.card1.description")}

src/Components/Pages/Services/ServiceCard.tsx

@@ -8,7 +8,7 @@ interface IProps {
 const Card = ({ title, description, imgSrc, delay }: IProps) => {
   return (
     <div
-      className="flex flex-col justify-end flex-1 h-full border-solid border shadow-lg bg-cover bg-center text-center"
+      className="flex flex-col mt-4 lg:mt-0 lg:mr-8 justify-end flex-1 h-full border-solid border shadow-lg bg-cover bg-center text-center"
       style={{
         backgroundImage: `url(${imgSrc})`,
         filter: "saturate(50%)",

src/Components/Pages/Services/ServiceCardContainer.tsx

@@ -2,7 +2,7 @@ import CardGroup from "./CardGroup";
 
 const ServiceCardContainer = () => {
   return (
-    <div className="h-full xl:h-[65vh] 1920:h-[60vh] rounded-xl mx-4 lg:mx-20 xl:mx-40 2xl:mx-60 1920:margin-calc mt-10 bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg ">
+    <div className="h-full xl:h-[65vh] 1920:h-[60vh] rounded-xl mx-4 lg:mx-20 xl:mx-40 2xl:mx-60 1920:margin-calc mt-10 p-0.5 shadow-lg ">
       <CardGroup />
     </div>  
   );

src/Components/Pages/Services/SocialMedia.tsx

@@ -9,7 +9,7 @@ const SocialMediaCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full flex lg:mt-20 flex-col flex-wrap xl:flex-row mx-4">
       <Card
         title={t("services.cards.social.card1.title")}
         description={t("services.cards.social.card1.description")}

src/Components/Pages/Services/WesiteCards.tsx

@@ -9,7 +9,7 @@ const WesiteCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full flex lg:mt-20 flex-col flex-wrap xl:flex-row mx-4">
       <Card
         title={t("services.cards.website.card1.title")}
         description={t("services.cards.website.card1.description")}

src/index.css

@@ -31,7 +31,7 @@ body {
 }
 
 .form-input {
-  @apply rounded-xl px-4 py-2 mt-2 bg-gray-bg border-solid border border-gray-300 text-sm md:text-lg;
+  @apply rounded-xl px-4 py-4 mt-2 bg-gray-bg border-solid border border-gray-300 text-xs md:text-xl;
 }
 
 .gold-text {
@@ -50,7 +50,7 @@ body {
 }
 
 .results-card-content {
-  @apply mb-2 mt-3 italic text-lg xl:text-2xl font-medium text-gray-300;
+  @apply mb-5 mt-3 italic text-lg xl:text-2xl font-medium text-gray-300;
 }
 
 .footer-text {