From 601d5ac89d1926d4694c5c18f12b8af61e1c9444 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fernando=20Jos=C3=A9=20Videira?= <03.pleaser-minster@icloud.com> Date: Sat, 8 Jun 2024 02:41:54 +0100 Subject: [PATCH] Results Page + Contacts --- package-lock.json | 44 +++++++++++++ package.json | 3 + src/App.tsx | 2 +- src/Components/Pages/Contact/ContactForm.tsx | 62 +++++++++++++++++++ src/Components/Pages/Contact/ContactPage.tsx | 26 ++++++++ src/Components/{ => Pages}/Hero/Hero.tsx | 18 +++--- src/Components/{ => Pages}/Navbar/Navbar.tsx | 5 +- src/Components/Pages/Results/Card.tsx | 24 +++++++ .../Pages/Results/CardContainer.tsx | 26 ++++++++ src/Components/Pages/Results/ResultsPage.tsx | 21 +++++++ .../{ => Pages}/Services/Buttons.tsx | 2 +- .../{ => Pages}/Services/CameraCards.tsx | 8 +-- .../{ => Pages}/Services/CardBtn.tsx | 0 .../{ => Pages}/Services/CardGroup.tsx | 0 .../{ => Pages}/Services/MarketingCards.tsx | 8 +-- .../{ => Pages}/Services/ServiceCard.tsx | 14 ++++- .../Services/ServiceCardContainer.tsx | 0 .../{ => Pages}/Services/Services.tsx | 6 +- .../{ => Pages}/Services/SocialMedia.tsx | 8 +-- .../{ => Pages}/Services/WesiteCards.tsx | 8 +-- src/index.css | 58 ++++------------- src/routes/Home.tsx | 14 ++++- tailwind.config.js | 1 + 23 files changed, 277 insertions(+), 81 deletions(-) create mode 100644 src/Components/Pages/Contact/ContactForm.tsx create mode 100644 src/Components/Pages/Contact/ContactPage.tsx rename src/Components/{ => Pages}/Hero/Hero.tsx (62%) rename src/Components/{ => Pages}/Navbar/Navbar.tsx (95%) create mode 100644 src/Components/Pages/Results/Card.tsx create mode 100644 src/Components/Pages/Results/CardContainer.tsx create mode 100644 src/Components/Pages/Results/ResultsPage.tsx rename src/Components/{ => Pages}/Services/Buttons.tsx (90%) rename src/Components/{ => Pages}/Services/CameraCards.tsx (68%) rename src/Components/{ => Pages}/Services/CardBtn.tsx (100%) rename src/Components/{ => Pages}/Services/CardGroup.tsx (100%) rename src/Components/{ => Pages}/Services/MarketingCards.tsx (68%) rename src/Components/{ => Pages}/Services/ServiceCard.tsx (59%) rename src/Components/{ => Pages}/Services/ServiceCardContainer.tsx (100%) rename src/Components/{ => Pages}/Services/Services.tsx (77%) rename src/Components/{ => Pages}/Services/SocialMedia.tsx (68%) rename src/Components/{ => Pages}/Services/WesiteCards.tsx (68%) diff --git a/package-lock.json b/package-lock.json index cfd621c..d706990 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 3db6d6e..b4e82b5 100644 --- a/package.json +++ b/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": { diff --git a/src/App.tsx b/src/App.tsx index 2f63ecc..21b8ed9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,7 +3,7 @@ import Home from "./routes/Home"; export default function App() { return ( -
+
} /> diff --git a/src/Components/Pages/Contact/ContactForm.tsx b/src/Components/Pages/Contact/ContactForm.tsx new file mode 100644 index 0000000..9d7ed25 --- /dev/null +++ b/src/Components/Pages/Contact/ContactForm.tsx @@ -0,0 +1,62 @@ +const ContactForm = () => { + return ( +
+
+
+ + +
+
+ + +
+
+ + + +
+ +
+ + + +
+
+
+ ); +}; + +export default ContactForm; diff --git a/src/Components/Pages/Contact/ContactPage.tsx b/src/Components/Pages/Contact/ContactPage.tsx new file mode 100644 index 0000000..6d04fc3 --- /dev/null +++ b/src/Components/Pages/Contact/ContactPage.tsx @@ -0,0 +1,26 @@ +import ContactForm from "./ContactForm"; + +const ContactPage = () => { + return ( +
+
+

+ Contact Us For
A{" "} + + Free + {" "} + Analysis +

+

+ Would you like to know what we could do for you? Fill out the form ad + we’ll get
+ back to you No obligation, no annoying tactics. We won’t waste your + time. +

+
+ +
+ ); +}; + +export default ContactPage; diff --git a/src/Components/Hero/Hero.tsx b/src/Components/Pages/Hero/Hero.tsx similarity index 62% rename from src/Components/Hero/Hero.tsx rename to src/Components/Pages/Hero/Hero.tsx index 63a7c45..f28324d 100644 --- a/src/Components/Hero/Hero.tsx +++ b/src/Components/Pages/Hero/Hero.tsx @@ -1,5 +1,5 @@ -import HeroImg from "../../assets/HeroImg.svg"; -import Stars from "../../assets/Stars.svg"; +import HeroImg from "../../../assets/HeroImg.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" >
-

GROW YOUR

-

BUSINESS

+

GROW YOUR

+

BUSINESS

{

so you can focus on what's important!

-
- +
diff --git a/src/Components/Navbar/Navbar.tsx b/src/Components/Pages/Navbar/Navbar.tsx similarity index 95% rename from src/Components/Navbar/Navbar.tsx rename to src/Components/Pages/Navbar/Navbar.tsx index d13de4e..a664171 100644 --- a/src/Components/Navbar/Navbar.tsx +++ b/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 ( diff --git a/src/Components/Pages/Results/Card.tsx b/src/Components/Pages/Results/Card.tsx new file mode 100644 index 0000000..b340fd6 --- /dev/null +++ b/src/Components/Pages/Results/Card.tsx @@ -0,0 +1,24 @@ +interface IProps { + title: string; + description: string; +} + +const Card = ({ title, description }: IProps) => { + return ( +
+
+

{title}

+

+ {description.split("\n").map((line, i) => ( + + {line} +
+ + ))} +

+
+
+ ); +}; + +export default Card; diff --git a/src/Components/Pages/Results/CardContainer.tsx b/src/Components/Pages/Results/CardContainer.tsx new file mode 100644 index 0000000..779ff9f --- /dev/null +++ b/src/Components/Pages/Results/CardContainer.tsx @@ -0,0 +1,26 @@ +import Card from "./Card"; + +const CardContainer = () => { + return ( +
+ + + + +
+ ); +}; + +export default CardContainer; diff --git a/src/Components/Pages/Results/ResultsPage.tsx b/src/Components/Pages/Results/ResultsPage.tsx new file mode 100644 index 0000000..e8ba084 --- /dev/null +++ b/src/Components/Pages/Results/ResultsPage.tsx @@ -0,0 +1,21 @@ +import CardContainer from "./CardContainer"; + +const ResultsPage = () => { + return ( +
+

+ + " + + Ok... So what makes
+ us different? + + " + +

+ +
+ ); +}; + +export default ResultsPage; diff --git a/src/Components/Services/Buttons.tsx b/src/Components/Pages/Services/Buttons.tsx similarity index 90% rename from src/Components/Services/Buttons.tsx rename to src/Components/Pages/Services/Buttons.tsx index 0245312..ea8bdec 100644 --- a/src/Components/Services/Buttons.tsx +++ b/src/Components/Pages/Services/Buttons.tsx @@ -16,7 +16,7 @@ const Buttons = ({ changeActiveGroup }: props) => { }; return ( -
+
handleClick("markCards")} diff --git a/src/Components/Services/CameraCards.tsx b/src/Components/Pages/Services/CameraCards.tsx similarity index 68% rename from src/Components/Services/CameraCards.tsx rename to src/Components/Pages/Services/CameraCards.tsx index ca07250..f616cd2 100644 --- a/src/Components/Services/CameraCards.tsx +++ b/src/Components/Pages/Services/CameraCards.tsx @@ -1,8 +1,8 @@ import Card from "./ServiceCard"; -import EnvisionImg from "../../assets/imgs/Envision.jpg"; -import CaptureImg from "../../assets/imgs/Capture.png"; -import EditImg from "../../assets/imgs/Edit.png"; -import PublishImg from "../../assets/imgs/Publish.jpg"; +import EnvisionImg from "../../../assets/imgs/Envision.jpg"; +import CaptureImg from "../../../assets/imgs/Capture.png"; +import EditImg from "../../../assets/imgs/Edit.png"; +import PublishImg from "../../../assets/imgs/Publish.jpg"; const CameraCards = () => { return ( diff --git a/src/Components/Services/CardBtn.tsx b/src/Components/Pages/Services/CardBtn.tsx similarity index 100% rename from src/Components/Services/CardBtn.tsx rename to src/Components/Pages/Services/CardBtn.tsx diff --git a/src/Components/Services/CardGroup.tsx b/src/Components/Pages/Services/CardGroup.tsx similarity index 100% rename from src/Components/Services/CardGroup.tsx rename to src/Components/Pages/Services/CardGroup.tsx diff --git a/src/Components/Services/MarketingCards.tsx b/src/Components/Pages/Services/MarketingCards.tsx similarity index 68% rename from src/Components/Services/MarketingCards.tsx rename to src/Components/Pages/Services/MarketingCards.tsx index 5b5ce9d..f72b3fb 100644 --- a/src/Components/Services/MarketingCards.tsx +++ b/src/Components/Pages/Services/MarketingCards.tsx @@ -1,8 +1,8 @@ import Card from "./ServiceCard"; -import AnaliseImg from "../../assets/imgs/Analise.jpg"; -import CreateImg from "../../assets/imgs/Create.jpg"; -import ScaleImg from "../../assets/imgs/Scale.jpg"; -import ExecuteImg from "../../assets/imgs/Execute.jpg"; +import AnaliseImg from "../../../assets/imgs/Analise.jpg"; +import CreateImg from "../../../assets/imgs/Create.jpg"; +import ScaleImg from "../../../assets/imgs/Scale.jpg"; +import ExecuteImg from "../../../assets/imgs/Execute.jpg"; const MarketingCards = () => { return ( diff --git a/src/Components/Services/ServiceCard.tsx b/src/Components/Pages/Services/ServiceCard.tsx similarity index 59% rename from src/Components/Services/ServiceCard.tsx rename to src/Components/Pages/Services/ServiceCard.tsx index b108b27..3b22a7b 100644 --- a/src/Components/Services/ServiceCard.tsx +++ b/src/Components/Pages/Services/ServiceCard.tsx @@ -11,8 +11,18 @@ const Card = ({ title, description, imgSrc }: IProps) => { style={{ backgroundImage: `url(${imgSrc})` }} >
-

{title}

-

{description}

+

+ {title} +

+

+ {description} +

); diff --git a/src/Components/Services/ServiceCardContainer.tsx b/src/Components/Pages/Services/ServiceCardContainer.tsx similarity index 100% rename from src/Components/Services/ServiceCardContainer.tsx rename to src/Components/Pages/Services/ServiceCardContainer.tsx diff --git a/src/Components/Services/Services.tsx b/src/Components/Pages/Services/Services.tsx similarity index 77% rename from src/Components/Services/Services.tsx rename to src/Components/Pages/Services/Services.tsx index bf4917f..b715890 100644 --- a/src/Components/Services/Services.tsx +++ b/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 ( -
+

We've got your{" "} @@ -23,7 +23,7 @@ const Services = () => { t covered

-

+

Unlock the full potential of your business with our services.

diff --git a/src/Components/Services/SocialMedia.tsx b/src/Components/Pages/Services/SocialMedia.tsx similarity index 68% rename from src/Components/Services/SocialMedia.tsx rename to src/Components/Pages/Services/SocialMedia.tsx index 1e894ff..fd82bba 100644 --- a/src/Components/Services/SocialMedia.tsx +++ b/src/Components/Pages/Services/SocialMedia.tsx @@ -1,8 +1,8 @@ import Card from "./ServiceCard"; -import AlgorithmImg from "../../assets/imgs/Algorithm.jpg"; -import ScheduleImg from "../../assets/imgs/Schedule.jpg"; -import TargetImg from "../../assets/imgs/Target.jpg"; -import ExpandImg from "../../assets/imgs/Expand.jpg"; +import AlgorithmImg from "../../../assets/imgs/Algorithm.jpg"; +import ScheduleImg from "../../../assets/imgs/Schedule.jpg"; +import TargetImg from "../../../assets/imgs/Target.jpg"; +import ExpandImg from "../../../assets/imgs/Expand.jpg"; const SocialMediaCards = () => { return ( diff --git a/src/Components/Services/WesiteCards.tsx b/src/Components/Pages/Services/WesiteCards.tsx similarity index 68% rename from src/Components/Services/WesiteCards.tsx rename to src/Components/Pages/Services/WesiteCards.tsx index 5361d84..3ffe6af 100644 --- a/src/Components/Services/WesiteCards.tsx +++ b/src/Components/Pages/Services/WesiteCards.tsx @@ -1,8 +1,8 @@ import Card from "./ServiceCard"; -import IdealizeImg from "../../assets/imgs/Idealize.png"; -import DesignImg from "../../assets/imgs/Design.png"; -import CodeImg from "../../assets/imgs/Code.jpg"; -import BuildImg from "../../assets/imgs/Build.png"; +import IdealizeImg from "../../../assets/imgs/Idealize.png"; +import DesignImg from "../../../assets/imgs/Design.png"; +import CodeImg from "../../../assets/imgs/Code.jpg"; +import BuildImg from "../../../assets/imgs/Build.png"; const WesiteCards = () => { return ( diff --git a/src/index.css b/src/index.css index 7fcbf58..aa5c56a 100644 --- a/src/index.css +++ b/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 { - animation: fadeIn ease 1s; - -webkit-animation: fadeIn ease 1s; - -moz-animation: fadeIn ease 1s; - -o-animation: fadeIn ease 1s; - -ms-animation: fadeIn ease 1s; +.header-text { + @apply mt-20 lg:mt-48 text-3xl md:text-5xl xl:text-7xl text-center; } -@keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } + +.sub-header-text { + @apply italic font-thin block text-sm mx-10 md:text-2xl mt-5 text-gray-400; } -@-moz-keyframes fadeIn { - 0% { - opacity: 0; - } - 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; - } + +.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; } diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx index f87c94a..8961d36 100644 --- a/src/routes/Home.tsx +++ b/src/routes/Home.tsx @@ -1,6 +1,8 @@ -import Navbar from "../Components/Navbar/Navbar"; -import Hero from "../Components/Hero/Hero"; -import Services from "../Components/Services/Services"; +import Navbar from "../Components/Pages/Navbar/Navbar"; +import Hero from "../Components/Pages/Hero/Hero"; +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 = () => {
+
+ +
+
+ +
); }; diff --git a/tailwind.config.js b/tailwind.config.js index 893dd96..c6262ec 100644 --- a/tailwind.config.js +++ b/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"],