Services Page Done (?)

package-lock.json

@@ -29,7 +29,7 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.5",
         "postcss": "^8.4.38",
-        "tailwindcss": "^3.4.3",
+        "tailwindcss": "^3.4.4",
         "typescript": "^5.2.2",
         "vite": "^5.1.0"
       }
@@ -3995,10 +3995,11 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
-      "integrity": "sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==",
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
+      "integrity": "sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",

package.json

@@ -31,7 +31,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.4",
     "typescript": "^5.2.2",
     "vite": "^5.1.0"
   }

src/Components/Hero/Hero.tsx

@@ -3,16 +3,16 @@ import Stars from "../../assets/Stars.svg";
 
 const Hero = () => {
   return (
-    <div className="flex flex-col md:mt-16 lg:flex-row">
-      <div className="lg:w-1/2 w-full xl:w-1/2 hidden lg:flex transform origin-left 2xl:scale-110">
-        <img src={HeroImg} alt="hero" className="2xl:scale-110"></img>
+    <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">
+        <img className="items-center" src={HeroImg} alt="hero"></img>
       </div>
-      <div className="lg:w-1/2 xl:w-1/2">
-        <div className="flex flex-col text-center lg:pr-20 lg:text-right">
+      <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">
           <img
             src={Stars}
             alt="hero"
-            className="px-28 md:px-0 ml-auto lg:text-right"
+            className="md:px-0 ml-auto mr-auto lg:mr-0 lg:text-right"
           ></img>
           <div>
             <h1 className="header-text">GROW YOUR</h1>
@@ -25,13 +25,13 @@ const Hero = () => {
               ></img>
             </div>
           </div>
-          <h2 className="italic text-lg md:text-2xl mt-4 md:mt-10">
+          <h2 className="italic text-lg md:text-2xl 2xl:text-3xl mt-4 md:mt-10">
             We do all the digital footprint for you,
           </h2>
-          <h2 className="italic text-lg md:text-2xl">
+          <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 md: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">
+          <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">
             <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>

src/Components/Services/Buttons.css

@@ -1,7 +0,0 @@
-.fixed-size-button {
-  width: 158px; /* adjust as needed */
-  height: 36px; /* adjust as needed */
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}

src/Components/Services/Buttons.tsx

@@ -1,13 +1,42 @@
-import React from "react";
+import { useState } from "react";
 import CardBtn from "./CardBtn";
 
-const Buttons = () => {
+interface props {
+  changeActiveGroup: (group: string) => void;
+}
+
+const Buttons = ({ changeActiveGroup }: props) => {
+  const [selectedButton, setSelectedButton] = useState<string | null>(
+    "webCards"
+  );
+
+  const handleClick = (group: string) => {
+    changeActiveGroup(group);
+    setSelectedButton(group);
+  };
+
   return (
     <div className="lg:px-40 flex flex-row gap-2 mx-2 md:gap-5 mt-10 mb-4 flex-wrap justify-center">
-      <CardBtn title="Marketing" />
-      <CardBtn title="Website" />
-      <CardBtn title="Social Media" />
-      <CardBtn title="Camera & Edits" />
+      <CardBtn
+        title="Marketing"
+        onClick={() => handleClick("markCards")}
+        isSelected={selectedButton === "markCards"}
+      />
+      <CardBtn
+        title="Website"
+        onClick={() => handleClick("webCards")}
+        isSelected={selectedButton === "webCards"}
+      />
+      <CardBtn
+        title="Social Media"
+        onClick={() => handleClick("smCards")}
+        isSelected={selectedButton === "smCards"}
+      />
+      <CardBtn
+        title="Camera & Edits"
+        onClick={() => handleClick("camCards")}
+        isSelected={selectedButton === "camCards"}
+      />
     </div>
   );
 };

src/Components/Services/CameraCards.tsx

@@ -0,0 +1,18 @@
+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";
+
+const CameraCards = () => {
+  return (
+    <div className="h-full 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} />
+      <Card title="Publish" description="Content" imgSrc={PublishImg} />
+    </div>
+  );
+};
+
+export default CameraCards;

src/Components/Services/CardBtn.tsx

@@ -1,14 +1,21 @@
-import React from "react";
-import "./Buttons.css";
-
 interface props {
   title: string;
+  onClick: () => void;
+  isSelected: boolean;
 }
 
-const CardBtn = ({ title }: 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-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
+    ? "flex flex-1 flex-row mt-5 lg:mt-12 bg-gradient-to-b from-gold-light to-gold-dark p-0.5 shadow-lg transform scale-110"
+    : "flex flex-1 flex-row mt-5 lg:mt-12 bg-gradient-to-b from-gold-light to-gold-dark p-0.5 shadow-lg";
+
   return (
-    <div className="flex flex-1 flex-row mt-5 lg:mt-12 bg-gradient-to-b from-gold-light to-gold-dark p-0.5 shadow-lg">
-      <button className="w-full font-medium md:px-4 py-1 text-xs lg:text-sm bg-gradient-to-br from-custom-bglight to-custom-bgdark">
+    <div className={divClass}>
+      <button className={buttonClass} onClick={onClick}>
         {title}
       </button>
     </div>

src/Components/Services/CardGroup.tsx

@@ -1,12 +1,39 @@
-import React from "react";
+import { useState } from "react";
 import WesiteCards from "./WesiteCards";
 import Buttons from "./Buttons";
+import MarketingCards from "./MarketingCards";
+import CameraCards from "./CameraCards";
+import SocialMediaCards from "./SocialMedia";
 
 const CardGroup = () => {
+  const [activeGroup, setActiveGroup] = useState("webCards");
+
+  const changeActiveGroup = (group: string) => {
+    setActiveGroup(group);
+  };
+
+  let ActiveCards;
+  switch (activeGroup) {
+    case "markCards":
+      ActiveCards = MarketingCards;
+      break;
+    case "webCards":
+      ActiveCards = WesiteCards;
+      break;
+    case "smCards":
+      ActiveCards = SocialMediaCards;
+      break;
+    case "camCards":
+      ActiveCards = CameraCards;
+      break;
+    default:
+      ActiveCards = null;
+  }
+
   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">
-      <WesiteCards />
-      <Buttons />
+      {ActiveCards && <ActiveCards />}
+      <Buttons changeActiveGroup={changeActiveGroup} />
     </div>
   );
 };

src/Components/Services/MarketingCards.tsx

@@ -0,0 +1,18 @@
+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";
+
+const MarketingCards = () => {
+  return (
+    <div className="h-full 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} />
+      <Card title="Execute" description="Plan" imgSrc={ExecuteImg} />
+    </div>
+  );
+};
+
+export default MarketingCards;

src/Components/Services/ServiceCard.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 interface IProps {
   title: string;
   description: string;
@@ -12,8 +10,10 @@ const Card = ({ title, description, imgSrc }: IProps) => {
       className="flex flex-col justify-end flex-1 h-full border-solid border shadow-lg bg-cover bg-center text-center"
       style={{ backgroundImage: `url(${imgSrc})` }}
     >
-      <h2 className="text-3xl font-bold">{title}</h2>
-      <p className="lg:mb-10 font-thin text-xl">{description}</p>
+      <div className="lg:my-6">
+        <h2 className="text-3xl font-bold">{title}</h2>
+        <p className="xl:mb-10 font-thin text-xl">{description}</p>
+      </div>
     </div>
   );
 };

src/Components/Services/ServiceCardContainer.tsx

@@ -1,9 +1,8 @@
-import React from "react";
 import CardGroup from "./CardGroup";
 
 const ServiceCardContainer = () => {
   return (
-    <div className="lg:h-[70vh] rounded-xl mx-4 md:mx-40 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 bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg ">
       <CardGroup />
     </div>
   );

src/Components/Services/Services.tsx

@@ -1,10 +1,9 @@
-import React from "react";
 import Underline from "../../assets/Underline.svg";
 import ServiceCardContainer from "./ServiceCardContainer";
 
 const Services = () => {
   return (
-    <div className="mt-20 lg:mt-40 text-4xl lg:text-6xl text-center">
+    <div className="mt-20 lg:mt-60 text-4xl md:text-7xl xl:text-8xl text-center">
       <h1>
         We've got your{" "}
         <span className="relative inline-block">

src/Components/Services/SocialMedia.tsx

@@ -0,0 +1,18 @@
+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";
+
+const SocialMediaCards = () => {
+  return (
+    <div className="h-full 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} />
+      <Card title="Expand" description="Platforms" imgSrc={ExpandImg} />
+    </div>
+  );
+};
+
+export default SocialMediaCards;

src/Components/Services/WesiteCards.tsx

@@ -1,14 +1,16 @@
-import React from "react";
 import Card from "./ServiceCard";
-import IdealizeImg from "../../assets/test.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 (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 lg:flex-row mx-4">
+    <div className="h-full 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={IdealizeImg} />
-      <Card title="Code" description="Website" imgSrc={IdealizeImg} />
-      <Card title="Build" description="Website" imgSrc={IdealizeImg} />
+      <Card title="Design" description="Website" imgSrc={DesignImg} />
+      <Card title="Code" description="Website" imgSrc={CodeImg} />
+      <Card title="Build" description="Website" imgSrc={BuildImg} />
     </div>
   );
 };

src/index.css

@@ -5,5 +5,53 @@
 @tailwind utilities;
 
 .header-text {
-  @apply text-5xl font-medium sm:text-6xl lg:text-7xl 2xl:text-9xl;
+  @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;
+}
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-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;
+  }
 }

src/routes/Home.tsx

@@ -1,7 +1,6 @@
-import React from "react";
-import Navbar from "../components/Navbar/Navbar";
-import Hero from "../components/Hero/Hero";
-import Services from "../components/Services/Services";
+import Navbar from "../Components/Navbar/Navbar";
+import Hero from "../Components/Hero/Hero";
+import Services from "../Components/Services/Services";
 
 const Home = () => {
   return (

tailwind.config.js

@@ -3,6 +3,9 @@ export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
+      screens: {
+        1920: "1921px",
+      },
       colors: {
         "custom-bglight": "#1C1C1F",
         "custom-bgdark": "#06060B",
@@ -18,5 +21,21 @@ export default {
       },
     },
   },
-  plugins: [],
+  plugins: [
+    function ({ addUtilities }) {
+      addUtilities(
+        {
+          ".padding-calc": {
+            "padding-left": "calc((100vw - 1920px)/2)",
+            "padding-right": "calc((100vw - 1920px)/2)",
+          },
+          ".margin-calc": {
+            "margin-left": "calc((100vw - 1920px)/2)",
+            "margin-right": "calc((100vw - 1920px)/2)",
+          },
+        },
+        ["responsive"]
+      );
+    },
+  ],
 };