├── .eslintrc.json ├── .gitignore ├── README.md ├── app ├── favicon.ico ├── layout.tsx └── page.tsx ├── components ├── Collaboration │ ├── Collaboration.tsx │ └── Discount.tsx ├── Footer │ └── Footer.tsx ├── Hero-section │ └── Hero.tsx ├── Home.tsx ├── Navbar │ ├── NavUtils │ │ ├── Navlist.tsx │ │ └── Navlist2.tsx │ ├── Navbar.tsx │ ├── OpenSourceNav.tsx │ ├── ProductNav.tsx │ ├── SolutionNav.tsx │ └── StickyNav.tsx ├── Productivity │ ├── CodeSpace.tsx │ ├── HoverCard.tsx │ └── Productivity.tsx ├── Security │ ├── Projects.tsx │ └── Security.tsx └── index.ts ├── constants └── index.ts ├── font └── mona-sans-d1bf285e9b9b.woff2 ├── motion └── index.ts ├── next.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── 3m.svg ├── actionProductibity.png ├── actions.svg ├── arcGreen.svg ├── arcGreenPro.svg ├── arcPink.svg ├── arcPinkCollab.svg ├── bag.png ├── bg-stars.webp ├── codeReview.svg ├── codeScaninigSec.png ├── codeSpace.svg ├── collabArc.svg ├── collabBracket.png ├── commandpost.png ├── copilot.svg ├── critical.png ├── dayhaysoos.jpeg ├── dependbotSecu.png ├── directus.png ├── disscusion.svg ├── disscussion.png ├── dropDown.png ├── dropDown.svg ├── dropDownUn.svg ├── earth-dark.jpg ├── eslint.png ├── facebook.svg ├── fluidicon.png ├── footer-galaxy.webp ├── githubF.svg ├── homebrew.png ├── illu-pull-requests.webp ├── imolorhe.jpeg ├── index.ts ├── issueColab.png ├── issues.svg ├── issuesCollab.png ├── kazupon.webp ├── kpmg.svg ├── linkEdin.svg ├── logo.svg ├── marcedeze.svg ├── mobileProductivity.png ├── package.svg ├── package1.png ├── png.svg ├── proArc.svg ├── proCodespace.png ├── proSideArc.svg ├── prodCover.png ├── prodCoverTop.png ├── prophen.webp ├── pullColab.png ├── sap.svg ├── scaningSec.png ├── search.svg ├── security.svg ├── securityIll.svg ├── share.svg ├── sindresorhus.webp ├── telsus.svg ├── tiktok.svg ├── twitch.svg ├── twitter.svg └── youtube.svg ├── styles └── globals.css ├── tailwind.config.ts ├── tsconfig.json └── types └── index.ts /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devwithzain/github-landing-page/41434c9159d14468ac680cb455c0a5d827ad345f/app/favicon.ico -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import "@styles/globals.css"; 2 | import type { Metadata } from "next"; 3 | 4 | export const metadata: Metadata = { 5 | title: "Github", 6 | description: "Github Landing Page Clone", 7 | }; 8 | 9 | export default function RootLayout({ 10 | children, 11 | }: { 12 | children: React.ReactNode; 13 | }) { 14 | return ( 15 | 16 | {children} 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /app/page.tsx: -------------------------------------------------------------------------------- 1 | import { Home } from "@components"; 2 | 3 | export default function App() { 4 | return ( 5 | <> 6 | 7 | 8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /components/Collaboration/Collaboration.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import Image from "next/image"; 3 | import Link from "next/link"; 4 | import { useState } from "react"; 5 | import Discount from "./Discount"; 6 | import { colabItems } from "@constants"; 7 | import { motion } from "framer-motion"; 8 | import HoverCard from "../Productivity/HoverCard"; 9 | import { 10 | collabArc, 11 | collabBracket, 12 | discussionColab, 13 | issuesColab, 14 | } from "@public"; 15 | import { collabcontainervarients, collabitemvarients } from "@motion"; 16 | 17 | export default function Collaboration() { 18 | const [hovered, setHovered] = useState(false); 19 | const [hovered1, setHovered1] = useState(false); 20 | const [hovered2, setHovered2] = useState(false); 21 | 22 | return ( 23 |
24 |
25 |
26 | 31 | 42 | 43 | 44 | 50 |
51 | 56 |

59 | Collaboration 60 |

61 |

64 | Supercharge collaboration 65 |
66 | GitHub helps your teams work more efficiently together. 67 |

68 | 69 |
70 | asdasd 77 |
78 |
79 | Illustration of project table view with cards grouped by 'Feature planning' phase. 88 | 89 |
90 |
91 | 95 |
96 |

97 | GitHub Actions{" "} 98 | automates your build, test, and deployment workflow with simple 99 | and secure CI/CD. 100 |

101 |
102 | setHovered(true)} 104 | onMouseLeave={() => setHovered(false)} 105 | href="" 106 | className="py-1 inline-block text-xl text-white font-semibold"> 107 | Enable GitHub Discussion 108 | 117 | 121 | 130 | 131 |
136 | 137 |
138 |
139 | 144 | 154 | 155 | 156 | 160 |
161 |

162 | GitHub Mobile 163 | fits your projects in your pocket, so you never miss a beat 164 | while on the go. 165 |

166 |
167 | setHovered1(true)} 169 | onMouseLeave={() => setHovered1(false)} 170 | href="" 171 | className="py-1 inline-block text-xl text-white font-semibold"> 172 | Check out pull request 173 | 182 | 186 | 195 | 196 |
201 | 202 |
203 |
204 |
205 |
219 | 220 |
221 |
222 | 226 |
227 |

228 | GitHub Sponsors lets 229 | you support your favorite open source maintainers and projects. 230 |

231 |
232 | setHovered2(true)} 234 | onMouseLeave={() => setHovered2(false)} 235 | href="" 236 | className="py-1 inline-block text-xl text-white font-semibold"> 237 | Check out pull request 238 | 247 | 251 | 260 | 261 |
266 | 267 |
268 |
269 |
270 | 275 | {colabItems.map((item) => ( 276 | 281 | 285 | Homebrew avatar 294 |
{item.title}
295 | 315 | 316 | 317 | ))} 318 | 319 |
320 | 321 |
322 |
323 | 329 | 334 | bracket 339 | 340 | 341 |
342 |
343 |
344 |

345 | Over 100 million developers
call GitHub home 346 | 3 347 |

348 |

349 | Whether you’re scaling your startup or just learning how to code, 350 | GitHub is your home.
Join the world’s largest developer 351 | platform to build the innovations that empower humanity. 352 |
353 | Let’s build from here. 354 |

355 |
356 |
357 |
358 |
359 |
360 |
361 | 370 |
371 |
372 | 377 |
378 |
379 | 380 | setHovered1(true)} 382 | onMouseLeave={() => setHovered1(false)} 383 | href="" 384 | className="flex items-center w-full md:w-auto justify-center text-[16px] py-3 px-5 max-md:mt-4 rounded-md border-[#ae88f9] border-[1.5px] text-white"> 385 | Start a free enterprise trial 386 | 395 | 399 | 408 | 409 | 410 |
411 |
412 |
413 |
414 | ); 415 | } 416 | -------------------------------------------------------------------------------- /components/Collaboration/Discount.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import Image from "next/image"; 3 | import { useState } from "react"; 4 | import { motion } from "framer-motion"; 5 | import { arcPink, bgStar, issueColab } from "@public"; 6 | 7 | export default function Discount() { 8 | const [hovered, setHovered] = useState(false); 9 | return ( 10 |
11 | 21 |
22 | 27 | 43 |
44 |
45 |
46 |
47 | 52 |

53 | 54 | GitHub Issues and GitHub Projects 55 | {" "} 56 | supply flexible project management tools that adapt to your team 57 | alongside your code. 58 |

59 | setHovered(true)} 61 | onMouseLeave={() => setHovered(false)} 62 | href="/" 63 | className="py-1 inline-block text-xl text-white font-semibold"> 64 | Explore GitHube Issue 65 | 74 | 78 | 87 | 88 |
92 | 93 | 94 |
95 | 100 |
101 |
102 |
103 | 112 |
113 |
114 |
115 | 116 |
117 | 122 |
123 |
124 | Did you know? 125 |
126 |

127 | 80% 128 |

129 |

130 | reduction in onboarding
time with GitHub2 131 |

132 |
133 | 134 |
135 |
136 | ); 137 | } 138 | -------------------------------------------------------------------------------- /components/Footer/Footer.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Link from "next/link"; 3 | import Image from "next/image"; 4 | import { 5 | footerLinksItem, 6 | footerSocialItems, 7 | footerTermsItem, 8 | } from "@constants"; 9 | 10 | export default function Footer() { 11 | return ( 12 |
13 |
14 |
15 |
16 | 21 | 32 | 33 |
34 |

35 | Subscribe to our newsletter 36 |

37 |

38 | Get tips, technical guides, and best practices. Once a month. 39 | Right in your inbox. 40 |

41 | 44 | Subscribe 45 | 46 |
47 |
48 | 49 |
50 | {footerLinksItem.map((item) => ( 51 |
54 |

{item.title}

55 | <> 56 | {item.links.map((link) => ( 57 |
    60 |
  • 61 | 64 | {link.title} 65 | 66 |
    • 67 |
68 | ))} 69 | 70 |
71 | ))} 72 |
73 |
74 |
75 | 76 |
77 |
78 |
    79 | {footerSocialItems.map((item) => ( 80 |
  • 83 | 86 | {item.src} 95 | 96 |
    • 97 | ))} 98 |
99 | 100 |
    101 | {footerTermsItem.map((item) => ( 102 | <> 103 |
  • {item.title}
    • 104 | {item.links.map((link) => ( 105 |
  • 108 | 111 | {link.title} 112 | 113 |
    • 114 | ))} 115 | 116 | ))} 117 |
118 |
119 |
120 |
121 | ); 122 | } 123 | -------------------------------------------------------------------------------- /components/Hero-section/Hero.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import Link from "next/link"; 3 | import Image from "next/image"; 4 | import { useState } from "react"; 5 | import { Navbar } from "@components"; 6 | import { motion } from "framer-motion"; 7 | import { collabBracket } from "@public"; 8 | import { heroBrandsItem } from "@constants"; 9 | 10 | export default function Hero() { 11 | const [hovered1, setHovered1] = useState(false); 12 | return ( 13 |
14 | 15 |
16 |
17 |
18 | 23 |
24 | 25 | 26 | 32 |
33 | 38 |

39 | {" "} 40 | Let's build from here 41 |

42 |

43 | The world’s leading AI-powered developer platform. 44 |

45 | 46 |
47 |
48 |
49 | 54 | bracket 61 | 62 | 63 | 69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 | 85 |
86 |
87 | 92 |
93 |
94 | 95 | setHovered1(true)} 97 | onMouseLeave={() => setHovered1(false)} 98 | href="" 99 | className="flex items-center w-full lg:w-[30%] justify-center text-[16px] py-3 px-3 max-md:mt-4 rounded-md border-[#ae88f9] border-[1.5px] text-white"> 100 | Start a free enterprise trial 101 | 110 | 114 | 123 | 124 | 125 |
126 |
127 |

128 | Trusted by the world's leading organizations  129 | 130 | ↘︎ 131 | 132 |

133 |
134 | {heroBrandsItem.map((item) => ( 135 |
138 | Stripe logo 145 |
146 | ))} 147 |
148 |
149 |
150 |
151 |
152 |
153 | ); 154 | } 155 | -------------------------------------------------------------------------------- /components/Home.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import Link from "next/link"; 3 | import { useEffect } from "react"; 4 | import Lenis from "@studio-freight/lenis"; 5 | import { 6 | Collaboration, 7 | Footer, 8 | Hero, 9 | Productivity, 10 | Security, 11 | StickyNav, 12 | } from "@components"; 13 | 14 | export default function Home() { 15 | useEffect(() => { 16 | const lenis = new Lenis(); 17 | 18 | function raf(time: any) { 19 | lenis.raf(time); 20 | requestAnimationFrame(raf); 21 | } 22 | 23 | requestAnimationFrame(raf); 24 | }, []); 25 | return ( 26 | <> 27 |
28 |
29 |
30 | 31 |
32 | 33 |
36 | 37 |
38 |
41 | 42 |
43 |
46 | 47 |
48 |
49 |
    50 |
  • 51 | 1 This 7X times factor is based on 52 | data from the industry’s longest running analysis of fix rates 53 | Veracode State of Software Security 2023, which cites the 54 | average time to fix 50% of flaws as 198 days vs. GitHub’s fix 55 | rates of 72% of flaws with in 28 days which is at a minimum of 56 | 7X faster when compared.. 57 |
    • 58 |
    59 |
  • 60 | 2The Total Economic Impact™ Of GitHub 61 | Enterprise Cloud and Advanced Security, a commissioned study 62 | conducted by Forrester Consulting, 2022. Results are for a 63 | composite organization based on interviewed customers. 64 |
    • 65 |
    66 |
  • 67 | 3 There are now 100 million 68 | developers around the world using GitHub. 69 | 70 | Read the blog post. 71 | 72 |
    • 73 |
74 |
75 |
76 |
77 |
78 | 79 | ); 80 | } 81 | -------------------------------------------------------------------------------- /components/Navbar/NavUtils/Navlist.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import Link from "next/link"; 3 | import Image from "next/image"; 4 | import { useState } from "react"; 5 | import { TnavListProps } from "@types"; 6 | 7 | export default function Navlist({ title, subTitle, icon }: TnavListProps) { 8 | const [focus, setFocus] = useState(false); 9 | return ( 10 | setFocus(true)} 13 | onMouseLeave={() => setFocus(false)} 14 | className="py-3 flex items-center space-x-3 cursor-pointer"> 15 | img 24 |
28 |
32 | {title} 33 |
34 | {subTitle} 35 |
36 | 37 | ); 38 | } 39 | -------------------------------------------------------------------------------- /components/Navbar/NavUtils/Navlist2.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import Link from "next/link"; 3 | import { share } from "@public"; 4 | import Image from "next/image"; 5 | import { TnavList2Props } from "@types"; 6 | import React, { useState } from "react"; 7 | 8 | export default function Navlist2({ title }: TnavList2Props) { 9 | const [focus, setFocus] = useState(false); 10 | return ( 11 | setFocus(true)} 13 | onMouseLeave={() => setFocus(false)} 14 | href="#" 15 | className={`flex items-center ${ 16 | focus ? "text-blue-600" : "text-neutral-500" 17 | }`}> 18 | {title} 19 | share 30 | 31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /components/Navbar/Navbar.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import Link from "next/link"; 3 | import Image from "next/image"; 4 | import { useState } from "react"; 5 | import ProductNav from "./ProductNav"; 6 | import { logo, search } from "@public"; 7 | import SolutionNav from "./SolutionNav"; 8 | import OpenSourceNav from "./OpenSourceNav"; 9 | import { motion } from "framer-motion"; 10 | 11 | export default function Navbar() { 12 | const [showNav, setShowNav] = useState(false); 13 | 14 | return ( 15 | 16 | 51 |
52 |
58 |
59 | 73 |
74 |
75 | 80 | search 87 |
88 |
89 | 92 | Sign in 93 | 94 |
95 | 98 | Sign up 99 | 100 |
101 |
102 |
103 |
104 | 105 | ); 106 | } 107 | -------------------------------------------------------------------------------- /components/Navbar/OpenSourceNav.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import Image from "next/image"; 3 | import { useState } from "react"; 4 | import { dropDown } from "@public"; 5 | import { openSourceNavItem, openSourceNavItem1 } from "@constants"; 6 | 7 | export default function OpenSourceNav() { 8 | const [show, setShow] = useState(false); 9 | 10 | const handleOnclick = () => { 11 | if (window.innerWidth < 1024) { 12 | setShow(!show); 13 | } 14 | }; 15 | 16 | const handleMouseEnter = () => { 17 | if (window.innerWidth > 1024) { 18 | setShow(true); 19 | } 20 | }; 21 | 22 | const handleMouseLeave = () => { 23 | if (window.innerWidth > 1024) { 24 | setShow(false); 25 | } 26 | }; 27 | 28 | return ( 29 |
  • 33 | 50 |
    54 | {openSourceNavItem.map((item) => ( 55 | <> 56 |
    57 | 58 | {item.title} 59 |

    60 | {item.subTitle} 61 |

    62 |     63 |
    64 | 65 | ))} 66 | {openSourceNavItem1.map((items) => ( 67 |
    70 | 71 | {items.title} 72 | 73 | {items.links.map((link) => ( 74 | 85 | ))} 86 |
    87 | ))} 88 |
    89 |
    • 90 | ); 91 | } 92 | -------------------------------------------------------------------------------- /components/Navbar/ProductNav.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import Image from "next/image"; 3 | import { useState } from "react"; 4 | import { dropDown } from "@public"; 5 | import Navlist from "./NavUtils/Navlist"; 6 | import Navlist2 from "./NavUtils/Navlist2"; 7 | import { productNavItem, productNavItem2 } from "@constants"; 8 | 9 | export default function ProductNav() { 10 | const [show, setShow] = useState(false); 11 | 12 | const handleOnclick = () => { 13 | if (window.innerWidth < 1024) { 14 | setShow(!show); 15 | } 16 | }; 17 | 18 | const handleMouseEnter = () => { 19 | if (window.innerWidth > 1024) { 20 | setShow(true); 21 | } 22 | }; 23 | 24 | const handleMouseLeave = () => { 25 | if (window.innerWidth > 1024) { 26 | setShow(false); 27 | } 28 | }; 29 | 30 | return ( 31 |
  • 34 | 51 |
    55 |
    56 |
      57 | {productNavItem.map((item) => ( 58 |
    • 59 | 64 |
      • 65 | ))} 66 |
    67 |
    68 |
    69 | Explore 70 |
      71 |
    • 72 | All Features 73 |
      • 74 | {productNavItem2.map((item) => ( 75 |
      76 |
    • 77 | 81 |
      • 82 |
      83 | ))} 84 |
    85 |
    86 |
    87 |
    • 88 | ); 89 | } 90 | -------------------------------------------------------------------------------- /components/Navbar/SolutionNav.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import Link from "next/link"; 3 | import Image from "next/image"; 4 | import { useState } from "react"; 5 | import Navlist2 from "./NavUtils/Navlist2"; 6 | import { 7 | solutionNavItem, 8 | solutionNavItem1, 9 | solutionNavItem2, 10 | } from "@constants"; 11 | import { dropDown, share } from "@public"; 12 | 13 | export default function SolutionNav() { 14 | const [show, setShow] = useState(false); 15 | const handleOnclick = () => { 16 | if (window.innerWidth < 1024) { 17 | setShow(!show); 18 | } 19 | }; 20 | 21 | const handleMouseEnter = () => { 22 | if (window.innerWidth > 1024) { 23 | setShow(true); 24 | } 25 | }; 26 | 27 | const handleMouseLeave = () => { 28 | if (window.innerWidth > 1024) { 29 | setShow(false); 30 | } 31 | }; 32 | return ( 33 |
  • 36 | 53 | 142 |
    • 143 | ); 144 | } 145 | -------------------------------------------------------------------------------- /components/Navbar/StickyNav.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import Link from "next/link"; 3 | import { useEffect, useState } from "react"; 4 | 5 | export default function StickyNav() { 6 | const [isSticky, setIsSticky] = useState(false); 7 | const [isFixed, setIsFixed] = useState(false); 8 | const [product, setproduct] = useState(false); 9 | const [collab, setcollab] = useState(false); 10 | const [security, setSecurity] = useState(false); 11 | const [product1, setproduct1] = useState(false); 12 | const [collab1, setcollab1] = useState(false); 13 | const [security1, setSecurity1] = useState(false); 14 | const [smallNav, setSmallNav] = useState(false); 15 | const [hovered, setHovered] = useState(false); 16 | const [hovered1, setHovered1] = useState(false); 17 | 18 | useEffect(() => { 19 | const handleScroll = () => { 20 | const element = document.getElementById("nav"); 21 | const topCoordinate = element?.getBoundingClientRect().top; 22 | const Product = document.getElementById("productivity"); 23 | const topProduct = Product?.getBoundingClientRect().top; 24 | const Collab = document.getElementById("collaboration"); 25 | const topCollab = Collab?.getBoundingClientRect().top; 26 | const Security = document.getElementById("security"); 27 | const topSecurity = Security?.getBoundingClientRect().top; 28 | if (topCoordinate && topCoordinate < 0) { 29 | setIsSticky(true); 30 | } 31 | if (topCoordinate && topCoordinate < -20) { 32 | setIsFixed(true); 33 | } 34 | if (topCoordinate && topCoordinate > -20) { 35 | setIsFixed(false); 36 | } 37 | if (topCoordinate && topCoordinate > 0) { 38 | setIsSticky(false); 39 | } 40 | if (topProduct && topProduct < 10) { 41 | setproduct(true); 42 | setcollab(false); 43 | setSecurity(false); 44 | } 45 | if (topSecurity && topSecurity < 10) { 46 | setproduct(false); 47 | setcollab(false); 48 | setSecurity(true); 49 | } 50 | if (topCollab && topCollab < 10) { 51 | setproduct(false); 52 | setcollab(true); 53 | setSecurity(false); 54 | } 55 | }; 56 | 57 | window.addEventListener("scroll", handleScroll); 58 | 59 | return () => { 60 | window.removeEventListener("scroll", handleScroll); 61 | }; 62 | }, []); 63 | 64 | return ( 65 |