From 224c71021494db4cb02f496814fb04eb73ea1b0d Mon Sep 17 00:00:00 2001 From: Saksham Date: Mon, 31 Oct 2022 18:15:50 +0530 Subject: [PATCH] minor changes in ui and added script in package.json file --- assets/index.ts | 72 ++++--------------- components/Faq.tsx | 8 ++- components/Footer.tsx | 36 +++++----- components/GradientText.tsx | 4 +- components/ReviewBox.tsx | 1 + components/SelectBox.tsx | 38 +++++++--- .../blog-page-components/Card.tsx | 14 ++-- .../blog-page-components/MainCard.tsx | 5 +- components/pages-components/jobs/Job.tsx | 14 ++-- components/pages-components/jobs/JobAlert.tsx | 17 +++-- .../pages-components/jobs/LandingSection.tsx | 21 ++++-- .../project-page-components/Form.tsx | 2 +- .../section-comonents/why-koders/Info.tsx | 4 ++ helper/constant.ts | 11 ++- package.json | 2 +- pages/Blogs/ReadMoreBlog.tsx | 2 +- pages/Jobs.tsx | 1 - pages/index.tsx | 12 ++++ public/images/discordWhiteLogo.svg | 3 + public/images/githubWhite.svg | 3 + public/images/linkedinWhite.svg | 3 + public/images/twitterWhite.svg | 3 + sections/Hero.tsx | 14 +++- sections/Newsletter.tsx | 12 +++- sections/Pricing.tsx | 6 +- sections/Testmonials.tsx | 27 ++++--- sections/WhyKoders.tsx | 15 ++-- tailwind.config.js | 2 + 28 files changed, 204 insertions(+), 148 deletions(-) create mode 100644 public/images/discordWhiteLogo.svg create mode 100644 public/images/githubWhite.svg create mode 100644 public/images/linkedinWhite.svg create mode 100644 public/images/twitterWhite.svg diff --git a/assets/index.ts b/assets/index.ts index 38850f9..adc504f 100644 --- 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 index b1038bf..3622cf2 100644 --- a/components/Faq.tsx +++ b/components/Faq.tsx @@ -13,17 +13,19 @@ interface Props { const Faq = ({ answer, question, onClick, show }: Props) => { return (
-
+
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" + >

{question}

onClick(question)} />
{ router.push(href); }; - console.log(router.pathname); - return ( <>
{ onClick={() => handleNavigate("/")} />
- {[linkedin, github, twitter, discord].map((item, i) => ( - {item} - ))} + {[linkedinWhite, githubWhite, twitterWhite, discordWhiteLogo].map( + (item, i) => ( + {item} + ) + )}
{ 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" ? ( - Pricing + router.pathname === "pricing" ? ( + Pricing ) : ( "Pricing" ) diff --git a/components/GradientText.tsx b/components/GradientText.tsx index 4e494b6..078a050 100644 --- 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 (

{text} diff --git a/components/ReviewBox.tsx b/components/ReviewBox.tsx index 5a67fd6..f68ccd6 100644 --- a/components/ReviewBox.tsx +++ b/components/ReviewBox.tsx @@ -18,6 +18,7 @@ const ReviewBox = ({ {testmonialLogo.map((item, i) => { return (
{ 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 (
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" } `} >
{value ? value : placeholder}
show
    {list.map((item, i) => (
  • {item}
    • diff --git a/components/pages-components/blog-page-components/Card.tsx b/components/pages-components/blog-page-components/Card.tsx index 1590d38..f9bc256 100644 --- 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`} > -
    handleNavigate(`${currentPath}/ReadMoreBlog`)} - className="absolute top-0 left-0 w-full h-full bg-transparent z-50" - >
    card { SEP 6, 2022 -

    +

    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?

    @@ -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... -

    diff --git a/components/pages-components/blog-page-components/MainCard.tsx b/components/pages-components/blog-page-components/MainCard.tsx index 02eee8c..2913a5a 100644 --- 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" > -

    +

    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

    diff --git a/components/pages-components/jobs/Job.tsx b/components/pages-components/jobs/Job.tsx index f7f48de..308809c 100644 --- a/components/pages-components/jobs/Job.tsx +++ b/components/pages-components/jobs/Job.tsx @@ -179,20 +179,20 @@ const Job = ({ candidateDetails, setCandidateDetails }: Props) => { />
    -

    +

    Fresher UI/UX Designer

    -
    -
    +
    +
    Dehradun, Uttrakhand
    -
    +
    Full Time
    -

    +

    Posted 2 weeks ago

    @@ -200,12 +200,12 @@ const Job = ({ candidateDetails, setCandidateDetails }: Props) => {
    diff --git a/components/pages-components/jobs/JobAlert.tsx b/components/pages-components/jobs/JobAlert.tsx index d4645ce..8fa41ba 100644 --- a/components/pages-components/jobs/JobAlert.tsx +++ b/components/pages-components/jobs/JobAlert.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import Image from "next/image"; import Divider from "../../Divider"; @@ -6,28 +6,33 @@ import { aeroUp } from "../../../assets"; import GradientText from "../../GradientText"; const JobAlert = () => { + const [isHover, setIsHover] = useState(false); return (
    - + -

    +

    Subscribe to our Newsletter and stay updated about the latest job postings.

    -
    +
    -
    +
    setIsHover(true)} + onMouseLeave={() => setIsHover(false)} + className="w-14 h-10 bg-main-teal flex justify-center items-center p-4 cursor-pointer" + > aero
    diff --git a/components/pages-components/jobs/LandingSection.tsx b/components/pages-components/jobs/LandingSection.tsx index eae3451..044281c 100644 --- a/components/pages-components/jobs/LandingSection.tsx +++ b/components/pages-components/jobs/LandingSection.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import Image from "next/image"; import Divider from "../../Divider"; @@ -11,6 +11,7 @@ interface Props { setFilterDetaile: (data: any) => void; } const LandingSection = ({ filterDetaile, setFilterDetaile }: Props) => { + const [isHover, setIsHover] = useState(false); const handleChange = (e: any) => { const { name, value } = e.target; setFilterDetaile((p) => { @@ -52,16 +53,20 @@ const LandingSection = ({ filterDetaile, setFilterDetaile }: Props) => { value={filterDetaile?.jobTitle} />
    -
    +
    setIsHover(true)} + onMouseLeave={() => setIsHover(false)} + > aero
    -
    - +
    + FILTER BY: { placeholder="Location" value={filterDetaile?.location} innelStyle="p-0" - mainStyle="cursor-pointer bg-main-secondary w-full md:w-[30%] rounded-xl px-2 text-[0.9rem] z-30 flex items-center justify-between relative py-[3px]" + mainStyle="font-miligramTextMedium cursor-pointer bg-main-secondary w-full md:w-[40%] rounded-xl px-2 text-[0.9rem] z-30 flex items-center justify-between relative py-[3px] text-main-filterDropDown" + dropdownStyle="font-miligramTextMedium w-full z-50 rounded-md absolute top-8 left-0 transition-all duration-500 bg-main-secondary text-main-light_white overflow-hidden" /> { placeholder="Categories" value={filterDetaile?.categories} innelStyle="p-0" - mainStyle="cursor-pointer bg-main-secondary w-full md:w-[30%] rounded-xl px-2 text-[0.9rem] z-30 flex items-center justify-between relative py-[3px]" + mainStyle="font-miligramTextMedium cursor-pointer bg-main-secondary w-full md:w-[40%] rounded-xl px-2 text-[0.9rem] z-30 flex items-center justify-between relative py-[3px] text-main-filterDropDown" + dropdownStyle="font-miligramTextMedium w-full z-50 rounded-md absolute top-8 left-0 transition-all duration-500 bg-main-secondary text-main-light_white overflow-hidden" />
    diff --git a/components/pages-components/project-page-components/Form.tsx b/components/pages-components/project-page-components/Form.tsx index 5839b05..4e9f1a3 100644 --- a/components/pages-components/project-page-components/Form.tsx +++ b/components/pages-components/project-page-components/Form.tsx @@ -110,7 +110,7 @@ const Form = () => { diff --git a/components/section-comonents/why-koders/Info.tsx b/components/section-comonents/why-koders/Info.tsx index d2af7b4..2a5e76f 100644 --- a/components/section-comonents/why-koders/Info.tsx +++ b/components/section-comonents/why-koders/Info.tsx @@ -10,6 +10,7 @@ interface Props { className: string; isMobile?: boolean; translateX?: number; + aos?: string; } const Info = ({ @@ -19,9 +20,12 @@ const Info = ({ className, isMobile, translateX, + aos, }: Props) => { return (
    { setShowMore(true); }} text="Read More" - className="border-2 mt-3 border-main-lightTeal text-main-lightTeal bg-main-greenOpt-200 block mx-auto px-6 py-2 rounded-lg hover:bg-main-lightTeal hover:text-white font-miligramMedium" + className="border-[1px] mt-3 border-main-lightTeal text-main-lightTeal bg-main-greenOpt-200 block mx-auto px-6 py-[8px] sm:py-2 text-[0.8rem] xxl:text-[1rem] rounded-lg hover:bg-main-lightTeal hover:text-white font-miligramMedium" /> )}
    { }); }, []); const handleSubmit = () => { - // send "selectedFile" state to server in a accepted format console.log("state", filterDetaile, candidateDetails); }; return ( diff --git a/pages/index.tsx b/pages/index.tsx index 947c9c5..b1c2d4d 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,4 +1,9 @@ +import React from "react"; +import AOS from "aos"; import Head from "next/head"; + +import "aos/dist/aos.css"; + import { Footer, Navbar } from "../components"; import { Clients, @@ -11,6 +16,13 @@ import { } from "../sections"; export default function Home() { + React.useEffect(() => { + AOS.init({ + easing: "ease-out-cubic", + once: true, + duration: 1500, + }); + }, []); return (
    diff --git a/public/images/discordWhiteLogo.svg b/public/images/discordWhiteLogo.svg new file mode 100644 index 0000000..95d00f7 --- /dev/null +++ b/public/images/discordWhiteLogo.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/githubWhite.svg b/public/images/githubWhite.svg new file mode 100644 index 0000000..e075ff4 --- /dev/null +++ b/public/images/githubWhite.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/linkedinWhite.svg b/public/images/linkedinWhite.svg new file mode 100644 index 0000000..17906d1 --- /dev/null +++ b/public/images/linkedinWhite.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/twitterWhite.svg b/public/images/twitterWhite.svg new file mode 100644 index 0000000..fdec41c --- /dev/null +++ b/public/images/twitterWhite.svg @@ -0,0 +1,3 @@ + + + diff --git a/sections/Hero.tsx b/sections/Hero.tsx index 6fefc34..2e37be3 100644 --- a/sections/Hero.tsx +++ b/sections/Hero.tsx @@ -18,14 +18,24 @@ const Hero = () => { alt="" className="absolute -bottom-10 right-0 w-[70%] md:w-[28%]" /> -

    +

    Infrastructure for

    -

    +

    WEBSITES | MOBILE APPS | TOOLBOTS |
    MONITORS | UI/UX

    diff --git a/sections/Newsletter.tsx b/sections/Newsletter.tsx index 3a367bb..ec835f2 100644 --- a/sections/Newsletter.tsx +++ b/sections/Newsletter.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import Image from "next/image"; import AOS from "aos"; @@ -8,6 +8,8 @@ import { aeroUp } from "../assets"; import { Divider, GradientText } from "../components"; const Newsletter = () => { + const [isHover, setIsHover] = useState(false); + React.useEffect(() => { AOS.init({ easing: "ease-out", @@ -39,11 +41,15 @@ const Newsletter = () => { className="w-full px-4 py-1 outline-none border-none text-main-light_white placeholder:tracking-[2px] bg-transparent placeholder:text-main-light_white lett font-miligramMedium" placeholder="Your Email Address" /> -
    +
    setIsHover(true)} + onMouseLeave={() => setIsHover(false)} + > aero
    diff --git a/sections/Pricing.tsx b/sections/Pricing.tsx index ca0545d..80d6291 100644 --- a/sections/Pricing.tsx +++ b/sections/Pricing.tsx @@ -16,7 +16,7 @@ const Pricing = () => { } React.useEffect(() => { - handleSliding.onSwipe("pricing"); + handleSliding.onSwipe("pricingSec"); }); React.useEffect(() => { @@ -29,7 +29,7 @@ const Pricing = () => { return (
    @@ -62,7 +62,7 @@ const Pricing = () => {
    { const isRunning = useRef(false); const [currentItem, setCurrentItem] = useState( @@ -22,14 +23,17 @@ const Testmonials = () => { useEffect(() => { const startAnimation = async () => { - if (COUNTER < testmonialLogo.length - 1) { - COUNTER += 1; - setCurrentItem(testmonialLogo[COUNTER]); + if (timer < 5) { + timer += 1; } else { - COUNTER = 0; - setCurrentItem(testmonialLogo[0]); + timer = 0; + if (!(index < testmonialLogo.length)) { + index = 0; + } + setCurrentItem(testmonialLogo[index]); + index += 1; } - await sleep(5000); + await sleep(1000); startAnimation(); }; if (!isRunning.current) { @@ -37,13 +41,15 @@ const Testmonials = () => { startAnimation(); } }); + useEffect(() => { AOS.init({ easing: "ease-out", once: true, - duration: 600, + duration: 1000, }); }, []); + return (
    @@ -73,7 +79,8 @@ const Testmonials = () => { {testmonialLogo.map((item, i) => (
    { - COUNTER = i; + timer = 0; + index = i; setCurrentItem(item); }} key={i} @@ -98,7 +105,7 @@ const Testmonials = () => {
    diff --git a/sections/WhyKoders.tsx b/sections/WhyKoders.tsx index 8792791..529452f 100644 --- a/sections/WhyKoders.tsx +++ b/sections/WhyKoders.tsx @@ -19,18 +19,17 @@ const WhyKoders = () => { AOS.init({ easing: "ease-out-cubic", once: true, - offset: 50, - duration: 2000, + duration: 1500, }); }, []); return ( -
    +
    -

    +

    Why trust  Koders @@ -46,6 +45,7 @@ const WhyKoders = () => {
    {whyWe.map((item, i) => { const css = i < 3 ? " border-r-2" : ""; + const aos = i === 0 ? "fade-right" : i < 3 ? "fade-up" : "fade-left"; return ( { title={item.title} html={item.html} key={i} + aos={aos} /> ); })} diff --git a/tailwind.config.js b/tailwind.config.js index a3ad1f8..22eed26 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -29,6 +29,8 @@ module.exports = { 700: "#A1A1AA", }, lightTeal: "#38D8CC", + filter: "#D4D4D4", + filterDropDown: "#E0E0E0", }, }, boxShadow: {