minor changes in ui and added script in package.json file

koders-in · Oct 31, 2022 · 224c710 · 224c710
1 parent 572fec4
commit 224c710
Show file tree

Hide file tree

Showing 28 changed files with 204 additions and 148 deletions.
diff --git a/assets/index.ts b/assets/index.ts
@@ -36,6 +36,10 @@ import tick from "../public/images/tick.svg";
 import work from "../public/images/work.svg";
 import search from "../public/images/search.svg";
 import locationTeal from "../public/images/location-teal.svg";
+import linkedinWhite from "../public/images/linkedinWhite.svg";
+import githubWhite from "../public/images/githubWhite.svg";
+import twitterWhite from "../public/images/twitterWhite.svg";
+import discordWhiteLogo from "../public/images/discordWhiteLogo.svg";
 
 // Assets for technologies components
 
@@ -142,10 +146,10 @@ export {
   logo,
   aero,
   projectOne,
-  discord,
-  twitter,
-  github,
-  linkedin,
+  // discord,
+  // twitter,
+  // github,
+  // linkedin,
   blogMain,
   blogProfile,
   blogCard,
@@ -177,60 +181,8 @@ export {
   work,
   search,
   locationTeal,
+  linkedinWhite,
+  githubWhite,
+  twitterWhite,
+  discordWhiteLogo,
 };
-
-// export const technologiesIconsData: Array<{ src: string; position: Object }> = [
-//   { src: chakra, position: { left: "67%", width: "9%", top: "63%" } },
-//   { src: portainer, position: { left: "21%", top: "-6%", width: "8%" } },
-//   { src: js, position: { width: "7%", left: "37%", top: "2%" } },
-//   { src: threejs, position: { left: "54%", top: "4%", width: "10%" } },
-//   { src: ios, position: { left: "4%", width: "7%", top: "44%" } },
-//   { src: firebase, position: { left: "5%", width: "4%", top: "15%" } },
-//   { src: electron, position: { left: "27%", width: "11%", top: "20%" } },
-//   { src: next, position: { left: "58%", width: "5%", top: "54%" } },
-//   { src: vue, position: { left: "38%", width: "9%", top: "20%" } },
-//   { src: preact, position: { left: "55%", width: "8%", top: "25%" } },
-//   { src: raspeberrypy, position: { left: "65%", top: "1%", width: "6%" } },
-//   { src: bootstrap, position: { left: "29%", width: "7%", top: "43%" } },
-//   { src: spacy, position: { left: "56%", width: "11%", top: "46%" } },
-//   { src: scikit, position: { left: "71.5%", width: "13%" } },
-//   { src: html, position: { left: "48%", width: "6%", top: "20%" } },
-//   { src: twilio, position: { left: "7%", width: "4%", top: "33%" } },
-//   { src: selenium, position: { left: "64%", width: "11%", top: "18%" } },
-//   { src: googleCloud, position: { left: "86%", width: "6%", top: "6%" } },
-//   { src: redux, position: { width: "8%", left: "45.5%", top: "2%" } },
-//   { src: rust, position: { left: "21%", width: "5%", top: "22%" } },
-//   { src: stripe, position: { left: "75%", width: "10%", top: "15%" } },
-//   { src: flutter, position: { left: "0", width: "7%", top: "28%" } },
-//   { src: tc, position: { left: "84.5%", width: "4%", top: "25%" } },
-//   { src: android, position: { left: "12%", width: "11%", top: "40%" } },
-//   { src: prometheous, position: { left: "23%", width: "5%", top: "38%" } },
-//   { src: css, position: { left: "38%", width: "7%", top: "39%" } },
-//   { src: angular, position: { left: "46%", width: "9%", top: "39%" } },
-//   { src: grafana, position: { left: "89%", width: "6%", top: "18%" } },
-//   { src: go, position: { top: "6%", width: "5%", left: "3%" } },
-//   { src: dart, position: { left: "14%", width: "6%", top: "56%" } },
-//   { src: py, position: { left: "10%", width: "10%", top: "18%" } },
-//   { src: dj, position: { left: "30%", width: "6%", top: "59%", zIndex: 1 } },
-//   { src: docker, position: { width: "11%", left: "9%" } },
-//   { src: ts, position: { width: "7%", left: "28.5%", top: "2.9%" } },
-//   { src: eth, position: { left: "84%", width: "5%", top: "69%" } },
-//   { src: etherscane, position: { left: "38%", width: "5%", top: "57%" } },
-//   { src: express, position: { left: "68%", width: "7%", top: "51%" } },
-//   { src: flask, position: { left: "21%", width: "10%", top: "56%" } },
-//   { src: graphql, position: { left: "76%", width: "10%", top: "33%" } },
-//   { src: jquery, position: { left: "37%", width: "7%", top: "69%" } },
-//   { src: keras, position: { left: "78%", width: "4%", top: "73%" } },
-//   { src: mySql, position: { left: "3%", width: "10%", top: "56%" } },
-//   { src: node, position: { left: "90%", width: "6%", top: "70%" } },
-//   { src: php, position: { left: "8%", width: "6%", top: "71%" } },
-//   { src: pytorch, position: { left: "91%", width: "4%", top: "58%" } },
-//   { src: rails, position: { left: "0", width: "12%", top: "75%" } },
-//   { src: redmine, position: { left: "77%", width: "8%", top: "59%" } },
-//   { src: solidity, position: { left: "88%", width: "8%", top: "39%" } },
-//   { src: sqlite, position: { left: "0", width: "5%", top: "53%" } },
-//   { src: scss, position: { left: "45%", width: "10%", top: "61%" } },
-//   { src: talwind, position: { left: "56%", width: "10%", top: "67%" } },
-//   { src: tensorflow, position: { left: "85%", width: "5%", top: "54%" } },
-//   { src: ruby, position: { left: "14%", width: "6%", top: "71%" } },
-// ];
diff --git a/components/Faq.tsx b/components/Faq.tsx
@@ -13,17 +13,19 @@ interface Props {
 const Faq = ({ answer, question, onClick, show }: Props) => {
   return (
     <div data-aos="fade-up">
-      <div className="border-b-[1px] pt-2 pb-1 sm:pb-4 mt-3 w-[97%] mx-auto border-b-main-light_white flex justify-between items-center">
+      <div
+        onClick={() => onClick(question)}
+        className="cursor-pointer border-b-[1px] pt-2 pb-1 sm:pb-4 mt-3 w-[97%] mx-auto border-b-main-light_white flex justify-between items-center"
+      >
         <p className="w-[90%] text-main-white-700 font-miligramLight sm:font-miligramMedium text-[0.8rem] sm:text-[1.4rem]">
           {question}
         </p>
         <Image
           src={add}
           alt=""
-          className={`h-4 sm:h-6 cursor-pointer hover:brightness-75 transition-all duration-300 ${
+          className={`h-4 sm:h-6 hover:brightness-75 transition-all duration-300 ${
             show ? " rotate-45" : ""
           }`}
-          onClick={() => onClick(question)}
         />
       </div>
       <div

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -4,13 +4,13 @@ import Image from "next/image";
 import { useRouter } from "next/router";
 
 import {
-  discord,
-  github,
-  linkedin,
+  discordWhiteLogo,
+  githubWhite,
+  linkedinWhite,
   location,
   logo,
   phone,
-  twitter,
+  twitterWhite,
 } from "../assets";
 import AnimatedBorder from "./AnimatedBorder";
 import { footerButtons } from "../helper/constant";
@@ -24,8 +24,6 @@ const Footer = () => {
     router.push(href);
   };
 
-  console.log(router.pathname);
-
   return (
     <>
       <div
@@ -40,14 +38,16 @@ const Footer = () => {
             onClick={() => handleNavigate("/")}
           />
           <div className="flex items-center my-3 gap-2">
-            {[linkedin, github, twitter, discord].map((item, i) => (
-              <Image
-                src={item}
-                alt={item}
-                key={i}
-                className="h-7 cursor-pointer hover:transition-all transition transform hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:transform-none"
-              />
-            ))}
+            {[linkedinWhite, githubWhite, twitterWhite, discordWhiteLogo].map(
+              (item, i) => (
+                <Image
+                  src={item}
+                  alt={item}
+                  key={i}
+                  className="h-7 cursor-pointer brightness-50 hover:brightness-100"
+                />
+              )
+            )}
           </div>
           <div className="flex justify-start items-start  mt-4 text-[0.9rem] sm:text-[1rem] ml-2">
             <Image
@@ -116,9 +116,9 @@ const Footer = () => {
                       if (item.title === "Pricing") {
                         if (
                           router.pathname !== "/" &&
-                          router.pathname !== "pricingSec"
+                          router.pathname !== "pricing"
                         )
-                          router.push("/#pricingSec");
+                          router.push("/#pricing");
                         return;
                       }
                       if (item.target) window.open(item?.route, "_blank");
@@ -129,8 +129,8 @@ const Footer = () => {
                   >
                     {item.title === "Pricing" ? (
                       router.pathname === "/" ||
-                      router.pathname === "pricingSec" ? (
-                        <Link href="#pricingSec">Pricing</Link>
+                      router.pathname === "pricing" ? (
+                        <Link href="#pricing">Pricing</Link>
                       ) : (
                         "Pricing"
                       )

diff --git a/components/GradientText.tsx b/components/GradientText.tsx
@@ -4,11 +4,13 @@ interface Props {
   className?: string;
   text: string;
   aos?: string;
+  dataEasing?: string;
 }
-const GradientText = ({ className, text, aos }: Props) => {
+const GradientText = ({ className, text, aos, dataEasing }: Props) => {
   return (
     <h1
       data-aos={aos}
+      data-aos-easing={dataEasing}
       className={`${className} font-medium bg-clip-text text-transparent`}
     >
       {text}

diff --git a/components/ReviewBox.tsx b/components/ReviewBox.tsx
@@ -18,6 +18,7 @@ const ReviewBox = ({
       {testmonialLogo.map((item, i) => {
         return (
           <div
+            data-aos="fade-up"
             key={i}
             className={`border-4 font-miligramMedium border-main-teal rounded-2xl w-[90%] sm:w-2/3 mx-auto lg:flex items-center justify-start sm:my-10 my-3 p-6 lg:p-12 bg-main-secondary transition-all duration-200 animate-fadeOut xxl:w-[60%]`}
             style={item.title === title ? {} : { display: "none" }}

diff --git a/components/SelectBox.tsx b/components/SelectBox.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 
 import { aeroDown } from "../assets";
@@ -11,6 +11,7 @@ interface Props {
   name: string;
   mainStyle?: string;
   innelStyle?: string;
+  dropdownStyle?: string;
 }
 
 const SelectBox = ({
@@ -21,34 +22,53 @@ const SelectBox = ({
   value,
   mainStyle,
   innelStyle,
+  dropdownStyle,
 }: Props) => {
   const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    window.onclick = function (event) {
+      if (
+        !(
+          event.target.matches(".select") ||
+          event.target.matches(".down-list") ||
+          event.target.matches(".select-img") ||
+          event.target.matches(".select-label") ||
+          event.target.matches(".items")
+        )
+      ) {
+        setShow(false);
+      }
+    };
+  });
+
   return (
     <div
       onClick={() => setShow(!show)}
-      className={`mr-2 ${
+      className={`select ${
         mainStyle
           ? mainStyle
           : "flex gap-2 cursor-pointer items-center border-b-2 border-main-light_white w-full pb-1 sm:pb-3 text-[0.9rem] md:text-[1.2rem] sm:mt-5 relative"
       } `}
     >
       <div
-        placeholder={placeholder}
-        className={`px-1 text-main-light_white bg-transparent border-none outline-none tracking-[1px] sm:tracking-[2px] placeholder:text-main-light_white w-full ${innelStyle}`}
+        className={`select-label px-1 text-main-light_white bg-transparent border-none outline-none tracking-[1px] sm:tracking-[2px] placeholder:text-main-light_white w-full ${innelStyle}`}
       >
         {value ? value : placeholder}
       </div>
       <Image
         src={aeroDown}
         alt="show"
-        className={`h-3 w-3 mr-2 hover:brightness-75 transition-all duration-300 ${
+        className={`select-img h-3 w-3 mr-2 hover:brightness-75 transition-all duration-300 ${
           show ? "rotate-180" : ""
         }`}
       />
       <ul
-        className={`w-full z-50 rounded-md absolute top-10 sm:top-12 transition-all duration-500 bg-main-secondary text-main-light_white overflow-hidden ${
-          show ? "max-h-[300px]" : "max-h-0"
-        }`}
+        className={`down-list ${
+          dropdownStyle
+            ? dropdownStyle
+            : "w-full z-50 rounded-md absolute top-10 sm:top-12 transition-all duration-500 bg-main-secondary text-main-light_white overflow-hidden"
+        } ${show ? "max-h-[300px]" : "max-h-0"}`}
       >
         {list.map((item, i) => (
           <li
@@ -57,7 +77,7 @@ const SelectBox = ({
               setShow(!show);
               handleSelect({ name: name, value: item });
             }}
-            className="m-3 z-30 hover:text-white cursor-pointer hover:bg-gray-600 px-3 py-2"
+            className="items m-3 z-30 hover:text-white cursor-pointer hover:bg-gray-600 px-3 py-2"
           >
             {item}
           </li>

diff --git a/components/pages-components/blog-page-components/Card.tsx b/components/pages-components/blog-page-components/Card.tsx
@@ -17,10 +17,6 @@ const Card = ({ className }: { className?: string }) => {
       data-aos="fade-up"
       className={`relative ${className} flex flex-wrap msm:flex-nowrap gap-3 sm:block md:w-1/3`}
     >
-      <div
-        onClick={() => handleNavigate(`${currentPath}/ReadMoreBlog`)}
-        className="absolute top-0 left-0 w-full h-full bg-transparent z-50"
-      ></div>
       <Image
         src={blogCard}
         alt="card"
@@ -31,7 +27,10 @@ const Card = ({ className }: { className?: string }) => {
           SEP 6, 2022
         </span>
         <Divider className="hidden sm:block mt-6" />
-        <h1 className="text-white font-miligrambold text-[12px] sm:text-[1.3rem] leading-none">
+        <h1
+          onClick={() => handleNavigate(`${currentPath}/ReadMoreBlog`)}
+          className="text-white font-miligrambold text-[12px] sm:text-[1.3rem] leading-none cursor-pointer"
+        >
           What to know before taking your business online?
         </h1>
         <div className="flex items-center justify-start gap-3 my-2 sm:my-5 md:block lg:flex">
@@ -45,7 +44,10 @@ const Card = ({ className }: { className?: string }) => {
             need an online presence for your business to increase marketing and
             create a loyal customer base.A website consists of web pages which
             are easy to share and most browsers have a...
-            <button className="border-b-2 border-transparent hover:border-main-lightTeal text-main-lightTeal cursor-pointer text-[1rem] leading-none font-miligramTextBook hover:font-miligramTextMedium">
+            <button
+              onClick={() => handleNavigate(`${currentPath}/ReadMoreBlog`)}
+              className="border-b-2 border-transparent hover:border-main-lightTeal text-main-lightTeal cursor-pointer text-[1rem] leading-none font-miligramTextBook hover:font-miligramTextMedium"
+            >
               Read More
             </button>
           </p>

diff --git a/components/pages-components/blog-page-components/MainCard.tsx b/components/pages-components/blog-page-components/MainCard.tsx
@@ -21,7 +21,10 @@ const MainCard = () => {
         data-aos="fade-left"
         className="w-full lg:w-[32%] mt-2 sm:mt-0 relative pb-14 lg:pb-0"
       >
-        <h1 className="text-white text-[1.4rem] leading-[1.4rem] mt-2  cursor-pointer font-miligrambold">
+        <h1
+          onClick={() => handleNavigate(`${currentPath}/ReadMoreBlog`)}
+          className="text-white text-[1.4rem] leading-[1.4rem] mt-2  cursor-pointer font-miligrambold"
+        >
           Hacking Humans is easier than hacking Computers
         </h1>
         <div className="flex items-center justify-start gap-3 mt-5">

diff --git a/components/pages-components/jobs/Job.tsx b/components/pages-components/jobs/Job.tsx
@@ -179,33 +179,33 @@ const Job = ({ candidateDetails, setCandidateDetails }: Props) => {
       />
       <div className=" md:flex justify-between items-center mx-auto w-[90%]">
         <div className="text-main-light_white w-full my-4 md:my-0 md:mr-[4%]">
-          <h1 className="text-white text-[1.2rem] text-center md:text-left">
+          <h1 className="text-white text-[1.2rem] text-center md:text-left font-miligrambold">
             Fresher UI/UX Designer
           </h1>
-          <div className="flex text-white mx-auto w-fit md:w-full">
-            <div className="flex items-center justify-between text-[0.8rem] mr-3">
+          <div className="flex text-white mx-auto w-fit md:w-full font-miligramText400">
+            <div className="flex items-center justify-between text-[0.85rem] mr-3">
               <Image src={locationTeal} alt="" className="mr-2 h-3" />
               Dehradun, Uttrakhand
             </div>
-            <div className="flex items-center justify-between text-[0.8rem]">
+            <div className="flex items-center justify-between text-[0.85rem]">
               <Image src={work} alt="" className="mr-2 h-3" />
               Full Time
             </div>
           </div>
-          <p className="text-[0.8rem] text-whiteVar1  text-center md:text-left">
+          <p className="text-[0.7rem] text-whiteVar1  text-center md:text-left  font-miligramText400">
             Posted 2 weeks ago
           </p>
         </div>
         <div className="flex justify-center items-center gap-4 w-fit mx-auto md:mx-0 md:w-[40rem]">
           <Button
             OnClick={toogleApplyModal}
             text="Apply"
-            className=" bg-main-greenOpt-200  font-miligramMedium w-fit text-[0.8rem] lg:text-[1rem] text-main-lightTeal py-[4px] md:py-[10px] px-8 lg:px-14 rounded-lg border-[1px] border-main-lightTeal hover:bg-main-lightTeal hover:text-white"
+            className=" bg-main-greenOpt-200  font-miligramMedium w-fit text-[0.8rem] lg:text-[0.9rem] text-main-lightTeal py-[4px] md:py-[10px] px-8 lg:px-14 rounded-lg border-[1px] border-main-lightTeal hover:bg-main-lightTeal hover:text-white"
           />
           <Button
             OnClick={toogleDetailModal}
             text="View Details"
-            className=" bg-main-greenOpt-200 font-miligramMedium w-fit text-[0.8rem] lg:text-[1rem] text-main-lightTeal py-[4px] md:py-[10px] px-3 lg:px-7 rounded-lg border-[1px] border-main-lightTeal hover:bg-main-lightTeal hover:text-white"
+            className=" bg-main-greenOpt-200 font-miligramMedium w-fit text-[0.8rem] lg:text-[0.9rem] text-main-lightTeal py-[4px] md:py-[10px] px-3 lg:px-7 rounded-lg border-[1px] border-main-lightTeal hover:bg-main-lightTeal hover:text-white"
           />
         </div>
       </div>