Services Page

src/Components/Hero/Hero.tsx

@@ -1,41 +1,43 @@
-import React from "react";
 import HeroImg from "../../assets/HeroImg.svg";
 import Stars from "../../assets/Stars.svg";
-import { FaChevronDown } from "react-icons/fa";
 
 const Hero = () => {
   return (
-    <div className="flex flex-col lg:flex-row md:flex-row">
-      <div className="lg:w-1/2 w-full md:w-1/2">
-        <img src={HeroImg} alt="hero" className="lg:mt-8 md:mt-8"></img>
+    <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>
-      <div className="text-center lg:w-1/2 ml-auto md:w-1/2 md:ml-auto md:mr-auto">
-        <img
-          src={Stars}
-          alt="hero"
-          className="lg:ml-auto lg:mr-48 lg:mt-8"
-        ></img>
-        <h1 className="text-4xl sm:text-6xl md:text-8xl">GROW YOUR</h1>
-        <h1 className="text-4xl sm:text-6xl md:text-8xl">BUSINESS</h1>
-        <div className="flex flex-col">
-          <h2 className="lg:text-3xl lg:ml-10 mt-10 md:text-sm">
+      <div className="lg:w-1/2 xl:w-1/2">
+        <div className="flex flex-col text-center lg:pr-20 lg:text-right">
+          <img
+            src={Stars}
+            alt="hero"
+            className="px-28 md:px-0 ml-auto lg:text-right"
+          ></img>
+          <div>
+            <h1 className="header-text">GROW YOUR</h1>
+            <h1 className="header-text">BUSINESS</h1>
+            <div>
+              <img
+                src={HeroImg}
+                alt="heroSm"
+                className="flex mt-6 lg:hidden"
+              ></img>
+            </div>
+          </div>
+          <h2 className="italic text-lg md:text-2xl mt-4 md:mt-10">
             We do all the digital footprint for you,
           </h2>
-          <h2 className="lg:text-3xl lg:ml-6 md:text-sm">
-            so you can focus on what’s important!
+          <h2 className="italic text-lg md:text-2xl">
+            so you can focus on what's important!
           </h2>
-          <div className="flex w-full lg:w-21 lg:h-4-75 mt-12 lg:ml-auto lg:mr-48 rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
-            <button className="flex-1 font-bold 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">
+          <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">
+            <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>
           </div>
         </div>
       </div>
-      <div className="w-full mb-4 h-12 absolute bottom-0">
-        <a href="javascript:void(0)">
-          <FaChevronDown size={40} className="text-text-gold mx-auto" />
-        </a>
-      </div>
     </div>
   );
 };

src/Components/Navbar/Navbar.tsx

@@ -1,12 +1,14 @@
-import { useState } from "react";
-import { FaTimes, FaBars } from "react-icons/fa";
+import { useEffect, useState } from "react";
 
 import Logo from "../../assets/logo.svg";
 
 export default () => {
   const [state, setState] = useState(false);
-
   const [colorChange, setColorChange] = useState(false);
+  const [isNavbarCollapsed, setIsNavbarCollapsed] = useState(
+    window.innerWidth <= 768
+  );
+
   const changeColor = () => {
     if (window.scrollY >= 100) {
       setColorChange(true);
@@ -15,41 +17,51 @@ export default () => {
     }
   };
 
-  window.addEventListener("scroll", changeColor);
+  const checkNavbarCollapse = () => {
+    if (window.innerWidth <= 768) {
+      setIsNavbarCollapsed(true);
+    } else {
+      setIsNavbarCollapsed(false);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", changeColor);
+    window.addEventListener("resize", checkNavbarCollapse);
+    return () => {
+      window.removeEventListener("scroll", changeColor);
+      window.removeEventListener("resize", checkNavbarCollapse);
+    };
+  }, []);
 
   // Replace javascript:void(0) path with your path
   const navigation = [
-    { title: "Custom", path: "javascript:void(0)" },
-    { title: "Services", path: "javascript:void(0)" },
-    { title: "Work", path: "javascript:void(0)" },
-    { title: "About Us", path: "javascript:void(0)" },
+    { title: "Services", path: "#Services" },
+    { title: "Contact", path: "javascript:void(0)" },
   ];
 
   return (
     <nav
       className={`${
         colorChange
-          ? "bg-black bg-opacity-80 transition duration-500 w-full border-b md:border-0 md:static"
-          : ""
+          ? "bg-black bg-opacity-80 transition duration-500 w-full border-0 sticky top-0 z-10"
+          : "z-10"
       }`}
     >
       <div className="items-center px-4 max-w-screen-xl mx-auto md:flex md:px-8">
-        <div className="flex items-center justify-between py-3 md:py-5 md:block">
-          <a href="/">
-            <img src={Logo} width={60} height={60} alt="logo" />
-          </a>
-          <div className="md:hidden">
+        <div className="flex items-center justify-center md:justify-between py-3 md:py-5 md:block">
+          {isNavbarCollapsed ? (
             <button
               className="outline-none p-2 rounded-md focus:border-gray-400 focus:border"
               onClick={() => setState(!state)}
             >
-              {state ? (
-                <FaTimes className="h-6 w-6" />
-              ) : (
-                <FaBars className="h-6 w-6" />
-              )}
+              <img src={Logo} width={60} height={60} alt="logo" />
             </button>
-          </div>
+          ) : (
+            <a href="/">
+              <img src={Logo} width={60} height={60} alt="logo" />
+            </a>
+          )}
         </div>
         <div
           className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${

src/Components/Services/Buttons.css

@@ -0,0 +1,7 @@
+.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

@@ -0,0 +1,15 @@
+import React from "react";
+import CardBtn from "./CardBtn";
+
+const Buttons = () => {
+  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" />
+    </div>
+  );
+};
+
+export default Buttons;

src/Components/Services/CardBtn.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import "./Buttons.css";
+
+interface props {
+  title: string;
+}
+
+const CardBtn = ({ title }: props) => {
+  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">
+        {title}
+      </button>
+    </div>
+  );
+};
+
+export default CardBtn;

src/Components/Services/CardGroup.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import WesiteCards from "./WesiteCards";
+import Buttons from "./Buttons";
+
+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">
+      <WesiteCards />
+      <Buttons />
+    </div>
+  );
+};
+
+export default CardGroup;

src/Components/Services/ServiceCard.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IProps {
+  title: string;
+  description: string;
+  imgSrc: string;
+}
+
+const Card = ({ title, description, imgSrc }: IProps) => {
+  return (
+    <div
+      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>
+  );
+};
+
+export default Card;

src/Components/Services/ServiceCardContainer.tsx

@@ -0,0 +1,12 @@
+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">
+      <CardGroup />
+    </div>
+  );
+};
+
+export default ServiceCardContainer;

src/Components/Services/Services.tsx

@@ -0,0 +1,35 @@
+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">
+      <h1>
+        We've got your{" "}
+        <span className="relative inline-block">
+          footprint{" "}
+          <img
+            src={Underline}
+            alt="underline"
+            className="absolute bottom-0 left-0"
+          />
+        </span>{" "}
+      </h1>
+      <h1>
+        bullsh
+        <span className="bg-clip-text text-transparent bg-gradient-to-br from-gold-light to-gold-dark">
+          *
+        </span>
+        t covered
+      </h1>
+
+      <h2 className="italic font-thin hidden md:block md:text-2xl mt-2">
+        Unlock the full potential of your business with our services.
+      </h2>
+
+      <ServiceCardContainer />
+    </div>
+  );
+};
+export default Services;

src/Components/Services/WesiteCards.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import Card from "./ServiceCard";
+import IdealizeImg from "../../assets/test.png";
+
+const WesiteCards = () => {
+  return (
+    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 lg: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} />
+    </div>
+  );
+};
+
+export default WesiteCards;

src/assets/Stars.svg

@@ -7,23 +7,23 @@
 <defs>
 <linearGradient id="paint0_linear_387_5" x1="180" y1="0" x2="180" y2="38" gradientUnits="userSpaceOnUse">
 <stop stop-color="#FACC97"/>
-<stop offset="1" stop-color="#282828"/>
+<stop offset="1" stop-color="#54330F"/>
 </linearGradient>
 <linearGradient id="paint1_linear_387_5" x1="140" y1="0" x2="140" y2="38" gradientUnits="userSpaceOnUse">
 <stop stop-color="#FACC97"/>
-<stop offset="1" stop-color="#282828"/>
+<stop offset="1" stop-color="#54330F"/>
 </linearGradient>
 <linearGradient id="paint2_linear_387_5" x1="99.5" y1="0" x2="99.5" y2="38" gradientUnits="userSpaceOnUse">
 <stop stop-color="#FACC97"/>
-<stop offset="1" stop-color="#282828"/>
+<stop offset="1" stop-color="#54330F"/>
 </linearGradient>
 <linearGradient id="paint3_linear_387_5" x1="59" y1="0" x2="59" y2="38" gradientUnits="userSpaceOnUse">
 <stop stop-color="#FACC97"/>
-<stop offset="1" stop-color="#282828"/>
+<stop offset="1" stop-color="#54330F"/>
 </linearGradient>
 <linearGradient id="paint4_linear_387_5" x1="19" y1="0" x2="19" y2="38" gradientUnits="userSpaceOnUse">
 <stop stop-color="#FACC97"/>
-<stop offset="1" stop-color="#282828"/>
+<stop offset="1" stop-color="#54330F"/>
 </linearGradient>
 </defs>
 </svg>

src/assets/Underline.svg

@@ -0,0 +1,9 @@
+<svg width="394" height="30" viewBox="0 0 394 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.60632 13.6078C111.695 13.6078 441.868 14.4716 331.841 18.1391C243.644 21.079 -20.9465 29.8693 67.2553 27.0913C175.821 23.6719 283.494 12.1974 391.521 1.67163" stroke="url(#paint0_linear_265_133)" stroke-width="3" stroke-linecap="round"/>
+<defs>
+<linearGradient id="paint0_linear_265_133" x1="1.60632" y1="14.6492" x2="391.521" y2="14.6492" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FACC97"/>
+<stop offset="1" stop-color="#65431D"/>
+</linearGradient>
+</defs>
+</svg>

src/index.css

@@ -3,3 +3,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.header-text {
+  @apply text-5xl font-medium sm:text-6xl lg:text-7xl 2xl:text-9xl;
+}

src/routes/Home.tsx

@@ -1,12 +1,16 @@
 import React from "react";
-import Navbar from "../Components/Navbar/Navbar";
-import Hero from "../Components/Hero/Hero";
+import Navbar from "../components/Navbar/Navbar";
+import Hero from "../components/Hero/Hero";
+import Services from "../components/Services/Services";
 
 const Home = () => {
   return (
     <div>
       <Navbar />
       <Hero />
+      <div id="Services">
+        <Services />
+      </div>
     </div>
   );
 };

tailwind.config.js

@@ -13,13 +13,8 @@ export default {
       fontFamily: {
         baijam: ['"Bai Jamjuree"', "sans-serif"],
       },
-      spacing: {
-        "4-75": "4.75rem",
-        8: "8rem",
-        "13-62": "13.625rem",
-        20: "12rem",
-        21: "21rem",
-        22: "22rem",
+      backgroundImage: {
+        "hero-pattern": "url('./src/assets/HeroImg.svg')",
       },
     },
   },