Results Page + Contacts

2024-06-08 02:41:54 +01:00
parent cc73a8e3da
commit 601d5ac89d
23 changed files with 277 additions and 81 deletions
@@ -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;
@@ -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;
@@ -0,0 +1,47 @@
+import HeroImg from "../../../assets/HeroImg.svg";
+import Stars from "../../../assets/Stars.svg";
+
+const Hero = () => {
+  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">
+        <img className="items-center" src={HeroImg} alt="hero"></img>
+      </div>
+      <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="md:px-0 ml-auto mr-auto lg:mr-0 lg:text-right"
+          ></img>
+          <div>
+            <h1 className="hero-text">GROW YOUR</h1>
+            <h1 className="hero-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 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 2xl:text-3xl">
+            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">
+              <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>
+    </div>
+  );
+};
+
+export default Hero;
@@ -0,0 +1,90 @@
+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);
+    } else {
+      setColorChange(false);
+    }
+  };
+
+  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: "Services", path: "#Services" },
+    { title: "Results", path: "#Results" },
+    { title: "Contact", path: "#Contact" },
+  ];
+
+  return (
+    <nav
+      className={`${
+        colorChange
+          ? "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-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)}
+            >
+              <img src={Logo} width={60} height={60} alt="logo" />
+            </button>
+          ) : (
+            <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 ${
+            state ? "block" : "hidden"
+          }`}
+        >
+          <ul className="text-text-gold justify-center items-center space-y-8 md:flex md:space-x-6 md:space-y-0">
+            {navigation.map((item, idx) => {
+              return (
+                <li key={idx} className="hover:text-white">
+                  <a
+                    href={item.path}
+                    className="block py-2 md:py-0 md:px-4 text-xl font-medium$"
+                  >
+                    {item.title}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
+};
@@ -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;
@@ -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;
@@ -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;
@@ -0,0 +1,44 @@
+import { useState } from "react";
+import CardBtn from "./CardBtn";
+
+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 2xl:gap-8 gap-2 mx-2 md:gap-5 mt-10 mb-4 flex-wrap justify-center">
+      <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>
+  );
+};
+
+export default Buttons;
@@ -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;
@@ -0,0 +1,25 @@
+interface props {
+  title: string;
+  onClick: () => void;
+  isSelected: boolean;
+}
+
+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={divClass}>
+      <button className={buttonClass} onClick={onClick}>
+        {title}
+      </button>
+    </div>
+  );
+};
+
+export default CardBtn;
@@ -0,0 +1,41 @@
+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">
+      {ActiveCards && <ActiveCards />}
+      <Buttons changeActiveGroup={changeActiveGroup} />
+    </div>
+  );
+};
+
+export default CardGroup;
@@ -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;
@@ -0,0 +1,31 @@
+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})` }}
+    >
+      <div className="lg:my-6">
+        <h2
+          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>
+  );
+};
+
+export default Card;
@@ -0,0 +1,11 @@
+import CardGroup from "./CardGroup";
+
+const ServiceCardContainer = () => {
+  return (
+    <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>
+  );
+};
+
+export default ServiceCardContainer;
@@ -0,0 +1,34 @@
+import Underline from "../../../assets/Underline.svg";
+import ServiceCardContainer from "./ServiceCardContainer";
+
+const Services = () => {
+  return (
+    <div className="header-text">
+      <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="sub-header-text">
+        Unlock the full potential of your business with our services.
+      </h2>
+
+      <ServiceCardContainer />
+    </div>
+  );
+};
+export default Services;
@@ -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;
@@ -0,0 +1,18 @@
+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";
+
+const WesiteCards = () => {
+  return (
+    <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={DesignImg} />
+      <Card title="Code" description="Website" imgSrc={CodeImg} />
+      <Card title="Build" description="Website" imgSrc={BuildImg} />
+    </div>
+  );
+};
+
+export default WesiteCards;