From d5a14354ec783985c927b3f992a0edf020acd130 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Jos=C3=A9=20Videira?=
 <03.pleaser-minster@icloud.com>
Date: Tue, 11 Jun 2024 14:51:40 +0100
Subject: [PATCH] Fixed smooth scrolling + Added animations to the services
 cards

---
 src/Components/Pages/Hero/Hero.tsx               | 14 +++++++++++++-
 src/Components/Pages/Services/CameraCards.tsx    |  2 +-
 src/Components/Pages/Services/CardBtn.tsx        |  2 +-
 src/Components/Pages/Services/MarketingCards.tsx |  2 +-
 src/Components/Pages/Services/SocialMedia.tsx    |  2 +-
 src/Components/Pages/Services/WesiteCards.tsx    |  2 +-
 src/index.css                                    | 13 +++++++++++++
 7 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/Components/Pages/Hero/Hero.tsx b/src/Components/Pages/Hero/Hero.tsx
index f28324d..c38debc 100644
--- a/src/Components/Pages/Hero/Hero.tsx
+++ b/src/Components/Pages/Hero/Hero.tsx
@@ -2,6 +2,11 @@ import HeroImg from "../../../assets/HeroImg.svg";
 import Stars from "../../../assets/Stars.svg";
 
 const Hero = () => {
+  const handleNavigation = (path: string) => {
+    const element = document.getElementById(path);
+    element?.scrollIntoView({ behavior: "smooth" });
+  };
+
   return (
     <div className="flex flex-col lg:mt-20 lg:flex-row 1920:padding-calc items-center">
       <div className="lg:w-1/2 w-full xl:w-1/2 hidden lg:flex transform origin-left">
@@ -32,7 +37,14 @@ const Hero = () => {
             so you can focus on what's important!
           </h2>
           <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">
+            <a
+              className="flex w-full"
+              href="Contact"
+              onClick={(e) => {
+                e.preventDefault();
+                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">
                 Yes, I want that!
               </button>
diff --git a/src/Components/Pages/Services/CameraCards.tsx b/src/Components/Pages/Services/CameraCards.tsx
index f616cd2..2e3aec1 100644
--- a/src/Components/Pages/Services/CameraCards.tsx
+++ b/src/Components/Pages/Services/CameraCards.tsx
@@ -6,7 +6,7 @@ import PublishImg from "../../../assets/imgs/Publish.jpg";
 
 const CameraCards = () => {
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full fade-effect flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
       <Card title="Envision" description="Prespective" imgSrc={EnvisionImg} />
       <Card title="Capture" description="Moments" imgSrc={CaptureImg} />
       <Card title="Edit" description="Moments" imgSrc={EditImg} />
diff --git a/src/Components/Pages/Services/CardBtn.tsx b/src/Components/Pages/Services/CardBtn.tsx
index 5dab055..6dad54c 100644
--- a/src/Components/Pages/Services/CardBtn.tsx
+++ b/src/Components/Pages/Services/CardBtn.tsx
@@ -6,7 +6,7 @@ interface props {
 
 const CardBtn = ({ title, onClick, isSelected }: props) => {
   const buttonClass = isSelected
-    ? "w-full font-medium md:px-4 py-1 text-xs lg:text-sm xl:text-lg bg-gradient-to-br from-custom-bglight to-custom-bgdark"
+    ? "w-full font-bold md:px-4 py-1 text-xs lg:text-sm xl:text-lg bg-gradient-to-br from-custom-bglight to-custom-bgdark"
     : "w-full font-medium md:px-4 py-1 text-xs lg:text-sm xl:text-lg bg-gradient-to-br from-custom-bglight to-custom-bgdark text-gray-400 shadow-inner";
 
   const divClass = isSelected
diff --git a/src/Components/Pages/Services/MarketingCards.tsx b/src/Components/Pages/Services/MarketingCards.tsx
index f72b3fb..79990c4 100644
--- a/src/Components/Pages/Services/MarketingCards.tsx
+++ b/src/Components/Pages/Services/MarketingCards.tsx
@@ -6,7 +6,7 @@ import ExecuteImg from "../../../assets/imgs/Execute.jpg";
 
 const MarketingCards = () => {
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full fade-effect flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
       <Card title="Analise" description="Problem" imgSrc={AnaliseImg} />
       <Card title="Create" description="Strategy" imgSrc={CreateImg} />
       <Card title="Scale" description="Company" imgSrc={ScaleImg} />
diff --git a/src/Components/Pages/Services/SocialMedia.tsx b/src/Components/Pages/Services/SocialMedia.tsx
index fd82bba..bdbfd53 100644
--- a/src/Components/Pages/Services/SocialMedia.tsx
+++ b/src/Components/Pages/Services/SocialMedia.tsx
@@ -6,7 +6,7 @@ import ExpandImg from "../../../assets/imgs/Expand.jpg";
 
 const SocialMediaCards = () => {
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full fade-effect flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
       <Card title="Algorithm" description="Analise" imgSrc={AlgorithmImg} />
       <Card title="Schedule" description="Content" imgSrc={ScheduleImg} />
       <Card title="Target" description="Audience" imgSrc={TargetImg} />
diff --git a/src/Components/Pages/Services/WesiteCards.tsx b/src/Components/Pages/Services/WesiteCards.tsx
index 3ffe6af..a4af17b 100644
--- a/src/Components/Pages/Services/WesiteCards.tsx
+++ b/src/Components/Pages/Services/WesiteCards.tsx
@@ -6,7 +6,7 @@ import BuildImg from "../../../assets/imgs/Build.png";
 
 const WesiteCards = () => {
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full fade-effect flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
       <Card title="Idealize" description="Website" imgSrc={IdealizeImg} />
       <Card title="Design" description="Website" imgSrc={DesignImg} />
       <Card title="Code" description="Website" imgSrc={CodeImg} />
diff --git a/src/index.css b/src/index.css
index 47010ed..bb429a6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -27,3 +27,16 @@ body {
 .gold-text {
   @apply bg-clip-text text-transparent bg-gradient-to-br from-gold-light to-gold-dark;
 }
+
+.fade-effect {
+  animation: fadeEffect 1s ease-in-out;
+}
+
+@keyframes fadeEffect {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}