Results Page + Contacts

package-lock.json

@@ -8,14 +8,17 @@
       "name": "marketing-business-frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@emailjs/browser": "^4.3.3",
         "@headlessui/react": "^1.7.18",
         "@heroicons/react": "^2.1.3",
+        "emailjs-com": "^3.2.0",
         "localforage": "^1.10.0",
         "match-sorter": "^6.3.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^5.0.1",
         "react-router-dom": "^6.22.3",
+        "react-toastify": "^10.0.5",
         "sort-by": "^0.0.2"
       },
       "devDependencies": {
@@ -424,6 +427,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emailjs/browser": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-4.3.3.tgz",
+      "integrity": "sha512-ltpt2S/WVREIBXptxYAVYBvXb2O6yTUYiRUWF8OLikMxlmiGsIgKpgHppikNd4Df0uAav7jCsQKcOJ3TJFUx5g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
@@ -1934,6 +1946,15 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -2073,6 +2094,16 @@
       "integrity": "sha512-zjqzx4N7xGdl5468G+vcgzDhaHkaYgVcf9MqgexcTqsl2UHSCmOj/Bi3HAprg4BZCpC7HyD8a6nZl6QAZf72gw==",
       "dev": true
     },
+    "node_modules/emailjs-com": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/emailjs-com/-/emailjs-com-3.2.0.tgz",
+      "integrity": "sha512-Prbz3E1usiAwGjMNYRv6EsJ5c373cX7/AGnZQwOfrpNJrygQJ15+E9OOq4pU8yC977Z5xMetRfc3WmDX6RcjAA==",
+      "deprecated": "The SDK name changed to @emailjs/browser",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -3588,6 +3619,19 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
+      "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -10,14 +10,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emailjs/browser": "^4.3.3",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.3",
+    "emailjs-com": "^3.2.0",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
     "react-router-dom": "^6.22.3",
+    "react-toastify": "^10.0.5",
     "sort-by": "^0.0.2"
   },
   "devDependencies": {

src/App.tsx

@@ -3,7 +3,7 @@ import Home from "./routes/Home";
 
 export default function App() {
   return (
-    <div className="font-baijam bg-gradient-to-br from-custom-bglight to-custom-bgdark min-h-screen text-white">
+    <div className="font-baijam min-h-screen text-white">
       <Routes>
         <Route path="/" element={<Home />} />
       </Routes>

src/Components/Pages/Contact/ContactForm.tsx

@@ -0,0 +1,62 @@
+const ContactForm = () => {
+  return (
+    <div className="mt-10 mx-5  lg:mx-0 flex justify-center items-center">
+      <form className="w-full md:w-auto">
+        <div className="flex flex-col md:flex-row md:gap-3">
+          <input
+            className="form-input"
+            type="text"
+            id="name"
+            placeholder="Name"
+          />
+          <input
+            className="form-input"
+            type="email"
+            id="email"
+            placeholder="Email"
+          />
+        </div>
+        <div className="flex flex-col md:flex-row md:gap-3">
+          <input
+            className="form-input"
+            type="text"
+            id="company"
+            placeholder="Company"
+          />
+          <input
+            className="form-input"
+            type="number"
+            id="phone"
+            placeholder="Phone"
+          />
+        </div>
+        <div className="flex flex-col">
+          <input
+            className="form-input"
+            type="text"
+            id="question"
+            placeholder="What is your most important question?"
+          ></input>
+
+          <textarea
+            className="form-input"
+            name="message"
+            id="message"
+            placeholder="Message"
+            rows={6}
+          ></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">
+          <a className="flex w-full" href="#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">
+              Send!
+            </button>
+          </a>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default ContactForm;

src/Components/Pages/Contact/ContactPage.tsx

@@ -0,0 +1,26 @@
+import ContactForm from "./ContactForm";
+
+const ContactPage = () => {
+  return (
+    <div className="h-full">
+      <div className="header-text">
+        <h1>
+          Contact Us For <br />A{" "}
+          <span className="bg-clip-text text-transparent bg-gradient-to-br from-gold-light to-gold-dark">
+            Free
+          </span>{" "}
+          Analysis
+        </h1>
+        <h2 className="sub-header-text ">
+          Would you like to know what we could do for you? Fill out the form ad
+          we’ll get <br />
+          back to you No obligation, no annoying tactics. We won’t waste your
+          time.
+        </h2>
+      </div>
+      <ContactForm />
+    </div>
+  );
+};
+
+export default ContactPage;

src/Components/Pages/Hero/Hero.tsx

@@ -1,5 +1,5 @@
-import HeroImg from "../../assets/HeroImg.svg";
+import HeroImg from "../../../assets/HeroImg.svg";
-import Stars from "../../assets/Stars.svg";
+import Stars from "../../../assets/Stars.svg";
 
 const Hero = () => {
   return (
@@ -15,8 +15,8 @@ const Hero = () => {
             className="md:px-0 ml-auto mr-auto lg:mr-0 lg:text-right"
           ></img>
           <div>
-            <h1 className="header-text">GROW YOUR</h1>
+            <h1 className="hero-text">GROW YOUR</h1>
-            <h1 className="header-text">BUSINESS</h1>
+            <h1 className="hero-text">BUSINESS</h1>
             <div>
               <img
                 src={HeroImg}
@@ -31,10 +31,12 @@ const Hero = () => {
           <h2 className="italic text-lg md:text-2xl 2xl:text-3xl">
             so you can focus on what's important!
           </h2>
-          <div className="flex mt-5 lg:mt-12 mx-10 sm:mx-40 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-20 lg:mx-0 lg:ml-auto rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
+            <a className="flex w-full" href="#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">
                 Yes, I want that!
               </button>
+            </a>
           </div>
         </div>
       </div>

src/Components/Pages/Navbar/Navbar.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-import Logo from "../../assets/logo.svg";
+import Logo from "../../../assets/logo.svg";
 
 export default () => {
   const [state, setState] = useState(false);
@@ -37,7 +37,8 @@ export default () => {
   // Replace javascript:void(0) path with your path
   const navigation = [
     { title: "Services", path: "#Services" },
-    { title: "Contact", path: "javascript:void(0)" },
+    { title: "Results", path: "#Results" },
+    { title: "Contact", path: "#Contact" },
   ];
 
   return (

src/Components/Pages/Results/Card.tsx

@@ -0,0 +1,24 @@
+interface IProps {
+  title: string;
+  description: string;
+}
+
+const Card = ({ title, description }: IProps) => {
+  return (
+    <div className="mt-5 xl:mt-0 flex bg-gradient-to-b from-gold-light to-gold-dark p-0.5 shadow-lg">
+      <div className="w-full font-medium md:px-4 py-1 bg-gradient-to-br from-custom-bglight to-custom-bgdark">
+        <h1 className="mt-2 lg:mt-6 text-3xl xl:text-5xl">{title}</h1>
+        <h2 className="mb-2 mt-3 italic text-xl xl:text-3xl font-medium text-gray-300">
+          {description.split("\n").map((line, i) => (
+            <span key={i}>
+              {line}
+              <br />
+            </span>
+          ))}
+        </h2>
+      </div>
+    </div>
+  );
+};
+
+export default Card;

src/Components/Pages/Results/CardContainer.tsx

@@ -0,0 +1,26 @@
+import Card from "./Card";
+
+const CardContainer = () => {
+  return (
+    <div className="mt-10 flex-col h-full lg:grid lg:grid-cols-2 lg:gap-10 px-10 lg:px-40 2xl:px-96 1920:margin-calc">
+      <Card
+        title="GUARANTED"
+        description={`We only win if you win!\nThat’s the basis for a good\npartnership.\nYou won’t carry all the risk,\nwe’ll share it.`}
+      />
+      <Card
+        title="RESULTS"
+        description={`Our first priority is to get\nyou results.\n\nLess talk, more walk.`}
+      />
+      <Card
+        title="LOCAL"
+        description={`We’re not a anonymous call\ncenter. We’re a local\ncompany, so you’ll be able to\nreach us when you need us`}
+      />
+      <Card
+        title="SPECIALIZED"
+        description={`Jack of all trades... master\nof none Specialization\nworks. We work with\nindustries we know, so we\ncan guarantee results.`}
+      />
+    </div>
+  );
+};
+
+export default CardContainer;

src/Components/Pages/Results/ResultsPage.tsx

@@ -0,0 +1,21 @@
+import CardContainer from "./CardContainer";
+
+const ResultsPage = () => {
+  return (
+    <div className="header-text">
+      <h1>
+        <span className="bg-clip-text text-transparent bg-gradient-to-br from-gold-light to-gold-dark">
+          "
+        </span>
+        Ok... So what makes <br />
+        us different?
+        <span className="bg-clip-text text-transparent bg-gradient-to-br from-gold-light to-gold-dark">
+          "
+        </span>
+      </h1>
+      <CardContainer />
+    </div>
+  );
+};
+
+export default ResultsPage;

src/Components/Pages/Services/Buttons.tsx

@@ -16,7 +16,7 @@ const Buttons = ({ changeActiveGroup }: props) => {
   };
 
   return (
-    <div className="lg:px-40 flex flex-row gap-2 mx-2 md:gap-5 mt-10 mb-4 flex-wrap justify-center">
+    <div className="lg:px-40 flex flex-row 2xl:gap-8 gap-2 mx-2 md:gap-5 mt-10 mb-4 flex-wrap justify-center">
       <CardBtn
         title="Marketing"
         onClick={() => handleClick("markCards")}

src/Components/Pages/Services/CameraCards.tsx

@@ -1,8 +1,8 @@
 import Card from "./ServiceCard";
-import EnvisionImg from "../../assets/imgs/Envision.jpg";
+import EnvisionImg from "../../../assets/imgs/Envision.jpg";
-import CaptureImg from "../../assets/imgs/Capture.png";
+import CaptureImg from "../../../assets/imgs/Capture.png";
-import EditImg from "../../assets/imgs/Edit.png";
+import EditImg from "../../../assets/imgs/Edit.png";
-import PublishImg from "../../assets/imgs/Publish.jpg";
+import PublishImg from "../../../assets/imgs/Publish.jpg";
 
 const CameraCards = () => {
   return (

src/Components/Pages/Services/MarketingCards.tsx

@@ -1,8 +1,8 @@
 import Card from "./ServiceCard";
-import AnaliseImg from "../../assets/imgs/Analise.jpg";
+import AnaliseImg from "../../../assets/imgs/Analise.jpg";
-import CreateImg from "../../assets/imgs/Create.jpg";
+import CreateImg from "../../../assets/imgs/Create.jpg";
-import ScaleImg from "../../assets/imgs/Scale.jpg";
+import ScaleImg from "../../../assets/imgs/Scale.jpg";
-import ExecuteImg from "../../assets/imgs/Execute.jpg";
+import ExecuteImg from "../../../assets/imgs/Execute.jpg";
 
 const MarketingCards = () => {
   return (

src/Components/Pages/Services/ServiceCard.tsx

@@ -11,8 +11,18 @@ const Card = ({ title, description, imgSrc }: IProps) => {
       style={{ backgroundImage: `url(${imgSrc})` }}
     >
       <div className="lg:my-6">
-        <h2 className="text-3xl font-bold">{title}</h2>
+        <h2
-        <p className="xl:mb-10 font-thin text-xl">{description}</p>
+          className="drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]
+ text-3xl font-bold"
+        >
+          {title}
+        </h2>
+        <p
+          className="drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]
+ xl:mb-10 font-thin text-xl"
+        >
+          {description}
+        </p>
       </div>
     </div>
   );

src/Components/Pages/Services/Services.tsx

@@ -1,9 +1,9 @@
-import Underline from "../../assets/Underline.svg";
+import Underline from "../../../assets/Underline.svg";
 import ServiceCardContainer from "./ServiceCardContainer";
 
 const Services = () => {
   return (
-    <div className="mt-20 lg:mt-60 text-4xl md:text-7xl xl:text-8xl text-center">
+    <div className="header-text">
       <h1>
         We've got your{" "}
         <span className="relative inline-block">
@@ -23,7 +23,7 @@ const Services = () => {
         t covered
       </h1>
 
-      <h2 className="italic font-thin hidden md:block md:text-2xl mt-2">
+      <h2 className="sub-header-text">
         Unlock the full potential of your business with our services.
       </h2>
 

src/Components/Pages/Services/SocialMedia.tsx

@@ -1,8 +1,8 @@
 import Card from "./ServiceCard";
-import AlgorithmImg from "../../assets/imgs/Algorithm.jpg";
+import AlgorithmImg from "../../../assets/imgs/Algorithm.jpg";
-import ScheduleImg from "../../assets/imgs/Schedule.jpg";
+import ScheduleImg from "../../../assets/imgs/Schedule.jpg";
-import TargetImg from "../../assets/imgs/Target.jpg";
+import TargetImg from "../../../assets/imgs/Target.jpg";
-import ExpandImg from "../../assets/imgs/Expand.jpg";
+import ExpandImg from "../../../assets/imgs/Expand.jpg";
 
 const SocialMediaCards = () => {
   return (

src/Components/Pages/Services/WesiteCards.tsx

@@ -1,8 +1,8 @@
 import Card from "./ServiceCard";
-import IdealizeImg from "../../assets/imgs/Idealize.png";
+import IdealizeImg from "../../../assets/imgs/Idealize.png";
-import DesignImg from "../../assets/imgs/Design.png";
+import DesignImg from "../../../assets/imgs/Design.png";
-import CodeImg from "../../assets/imgs/Code.jpg";
+import CodeImg from "../../../assets/imgs/Code.jpg";
-import BuildImg from "../../assets/imgs/Build.png";
+import BuildImg from "../../../assets/imgs/Build.png";
 
 const WesiteCards = () => {
   return (

src/index.css

@@ -4,54 +4,22 @@
 @tailwind components;
 @tailwind utilities;
 
-.header-text {
+body {
+  @apply bg-gradient-to-br from-custom-bglight to-custom-bgdark;
+}
+
+.hero-text {
   @apply font-medium text-5xl lg:text-7xl xl:text-8xl;
 }
 
-.fade-in {
+.header-text {
-  animation: fadeIn ease 1s;
+  @apply mt-20 lg:mt-48 text-3xl md:text-5xl xl:text-7xl text-center;
-  -webkit-animation: fadeIn ease 1s;
-  -moz-animation: fadeIn ease 1s;
-  -o-animation: fadeIn ease 1s;
-  -ms-animation: fadeIn ease 1s;
 }
-@keyframes fadeIn {
+
-  0% {
+.sub-header-text {
-    opacity: 0;
+  @apply italic font-thin block text-sm mx-10 md:text-2xl mt-5 text-gray-400;
-  }
-  100% {
-    opacity: 1;
-  }
 }
-@-moz-keyframes fadeIn {
+
-  0% {
+.form-input {
-    opacity: 0;
+  @apply rounded-xl px-4 py-2 mt-2 bg-gray-bg border-solid border border-gray-300 text-sm md:text-lg;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@-webkit-keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@-o-keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@-ms-keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
 }

src/routes/Home.tsx

@@ -1,6 +1,8 @@
-import Navbar from "../Components/Navbar/Navbar";
+import Navbar from "../Components/Pages/Navbar/Navbar";
-import Hero from "../Components/Hero/Hero";
+import Hero from "../Components/Pages/Hero/Hero";
-import Services from "../Components/Services/Services";
+import Services from "../Components/Pages/Services/Services";
+import ResultsPage from "../Components/Pages/Results/ResultsPage";
+import ContactPage from "../Components/Pages/Contact/ContactPage";
 
 const Home = () => {
   return (
@@ -10,6 +12,12 @@ const Home = () => {
       <div id="Services">
         <Services />
       </div>
+      <div id="Results">
+        <ResultsPage />
+      </div>
+      <div id="Contact">
+        <ContactPage />
+      </div>
     </div>
   );
 };

tailwind.config.js

@@ -12,6 +12,7 @@ export default {
         "text-gold": "#FACC97",
         "gold-light": "#FACC97",
         "gold-dark": "#54330F",
+        "gray-bg": "#1C1C1C",
       },
       fontFamily: {
         baijam: ['"Bai Jamjuree"', "sans-serif"],