├── .eslintrc.json
├── app
├── favicon.ico
├── page.tsx
└── layout.tsx
├── public
├── bag.png
├── eslint.png
├── bg-stars.webp
├── critical.png
├── directus.png
├── dropDown.png
├── fluidicon.png
├── homebrew.png
├── imolorhe.jpeg
├── kazupon.webp
├── package1.png
├── prodCover.png
├── prophen.webp
├── pullColab.png
├── commandpost.png
├── dayhaysoos.jpeg
├── disscussion.png
├── earth-dark.jpg
├── issueColab.png
├── issuesCollab.png
├── proCodespace.png
├── prodCoverTop.png
├── scaningSec.png
├── collabBracket.png
├── dependbotSecu.png
├── footer-galaxy.webp
├── sindresorhus.webp
├── codeScaninigSec.png
├── actionProductibity.png
├── illu-pull-requests.webp
├── mobileProductivity.png
├── linkEdin.svg
├── search.svg
├── twitch.svg
├── facebook.svg
├── dropDown.svg
├── dropDownUn.svg
├── twitter.svg
├── youtube.svg
├── issues.svg
├── proArc.svg
├── actions.svg
├── share.svg
├── package.svg
├── logo.svg
├── tiktok.svg
├── security.svg
├── codeReview.svg
├── codeSpace.svg
├── disscusion.svg
├── proSideArc.svg
├── 3m.svg
├── securityIll.svg
├── collabArc.svg
├── copilot.svg
├── githubF.svg
├── sap.svg
├── kpmg.svg
├── png.svg
├── arcPink.svg
├── arcGreenPro.svg
├── telsus.svg
├── arcPinkCollab.svg
├── arcGreen.svg
├── index.ts
└── marcedeze.svg
├── postcss.config.js
├── font
└── mona-sans-d1bf285e9b9b.woff2
├── next.config.js
├── tailwind.config.ts
├── components
├── index.ts
├── Navbar
│ ├── NavUtils
│ │ ├── Navlist2.tsx
│ │ └── Navlist.tsx
│ ├── OpenSourceNav.tsx
│ ├── ProductNav.tsx
│ ├── SolutionNav.tsx
│ ├── Navbar.tsx
│ └── StickyNav.tsx
├── Home.tsx
├── Productivity
│ ├── HoverCard.tsx
│ ├── CodeSpace.tsx
│ └── Productivity.tsx
├── Security
│ ├── Projects.tsx
│ └── Security.tsx
├── Collaboration
│ ├── Discount.tsx
│ └── Collaboration.tsx
├── Footer
│ └── Footer.tsx
└── Hero-section
│ └── Hero.tsx
├── types
└── index.ts
├── .gitignore
├── tsconfig.json
├── package.json
├── motion
└── index.ts
├── README.md
├── styles
└── globals.css
└── constants
└── index.ts
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/app/favicon.ico
--------------------------------------------------------------------------------
/public/bag.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/bag.png
--------------------------------------------------------------------------------
/public/eslint.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/eslint.png
--------------------------------------------------------------------------------
/public/bg-stars.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/bg-stars.webp
--------------------------------------------------------------------------------
/public/critical.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/critical.png
--------------------------------------------------------------------------------
/public/directus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/directus.png
--------------------------------------------------------------------------------
/public/dropDown.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/dropDown.png
--------------------------------------------------------------------------------
/public/fluidicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/fluidicon.png
--------------------------------------------------------------------------------
/public/homebrew.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/homebrew.png
--------------------------------------------------------------------------------
/public/imolorhe.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/imolorhe.jpeg
--------------------------------------------------------------------------------
/public/kazupon.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/kazupon.webp
--------------------------------------------------------------------------------
/public/package1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/package1.png
--------------------------------------------------------------------------------
/public/prodCover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/prodCover.png
--------------------------------------------------------------------------------
/public/prophen.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/prophen.webp
--------------------------------------------------------------------------------
/public/pullColab.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/pullColab.png
--------------------------------------------------------------------------------
/public/commandpost.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/commandpost.png
--------------------------------------------------------------------------------
/public/dayhaysoos.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/dayhaysoos.jpeg
--------------------------------------------------------------------------------
/public/disscussion.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/disscussion.png
--------------------------------------------------------------------------------
/public/earth-dark.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/earth-dark.jpg
--------------------------------------------------------------------------------
/public/issueColab.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/issueColab.png
--------------------------------------------------------------------------------
/public/issuesCollab.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/issuesCollab.png
--------------------------------------------------------------------------------
/public/proCodespace.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/proCodespace.png
--------------------------------------------------------------------------------
/public/prodCoverTop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/prodCoverTop.png
--------------------------------------------------------------------------------
/public/scaningSec.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/scaningSec.png
--------------------------------------------------------------------------------
/public/collabBracket.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/collabBracket.png
--------------------------------------------------------------------------------
/public/dependbotSecu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/dependbotSecu.png
--------------------------------------------------------------------------------
/public/footer-galaxy.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/footer-galaxy.webp
--------------------------------------------------------------------------------
/public/sindresorhus.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/sindresorhus.webp
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/public/codeScaninigSec.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/codeScaninigSec.png
--------------------------------------------------------------------------------
/public/actionProductibity.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/actionProductibity.png
--------------------------------------------------------------------------------
/public/illu-pull-requests.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/illu-pull-requests.webp
--------------------------------------------------------------------------------
/public/mobileProductivity.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/public/mobileProductivity.png
--------------------------------------------------------------------------------
/font/mona-sans-d1bf285e9b9b.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devwithzain/github-landing-page/HEAD/font/mona-sans-d1bf285e9b9b.woff2
--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { Home } from "@components";
2 |
3 | export default function App() {
4 | return (
5 | <>
6 |
7 | >
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | images: {
4 | remotePatterns: [{ hostname: "github.githubassets.com" }],
5 | },
6 | };
7 |
8 | module.exports = nextConfig;
9 |
--------------------------------------------------------------------------------
/public/linkEdin.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/search.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/twitch.svg:
--------------------------------------------------------------------------------
1 | Twitch
--------------------------------------------------------------------------------
/public/facebook.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/dropDown.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from 'tailwindcss';
2 |
3 | const config: Config = {
4 | content: [
5 | './pages/**/*.{js,ts,jsx,tsx,mdx}',
6 | './components/**/*.{js,ts,jsx,tsx,mdx}',
7 | './app/**/*.{js,ts,jsx,tsx,mdx}',
8 | ],
9 | theme: {
10 | extend: {
11 | },
12 | },
13 | plugins: [],
14 | };
15 | export default config;
16 |
--------------------------------------------------------------------------------
/public/dropDownUn.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/twitter.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/public/youtube.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/issues.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/components/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Home } from './Home';
2 | export { default as Navbar } from './Navbar/Navbar';
3 | export { default as Hero } from './Hero-section/Hero';
4 | export { default as StickyNav } from './Navbar/StickyNav';
5 | export { default as Security } from './Security/Security';
6 | export { default as Footer } from './Footer/Footer';
7 | export { default as Productivity } from './Productivity/Productivity';
8 | export { default as Collaboration } from './Collaboration/Collaboration';
--------------------------------------------------------------------------------
/types/index.ts:
--------------------------------------------------------------------------------
1 | import { StaticImageData } from "next/image";
2 |
3 | export type TnavListProps = {
4 | title: string;
5 | subTitle: string;
6 | icon: StaticImageData | string;
7 | };
8 |
9 | export type TnavList2Props = {
10 | title: string;
11 | icon?: StaticImageData | string;
12 | };
13 |
14 | export type ThoverCardProps = {
15 | children: React.ReactNode;
16 | backgroundColor: string;
17 | direction: string;
18 | left: string;
19 | className?: string;
20 | };
21 |
--------------------------------------------------------------------------------
/public/proArc.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/public/actions.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/public/share.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/package.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "noEmit": true,
9 | "esModuleInterop": true,
10 | "module": "esnext",
11 | "moduleResolution": "bundler",
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "jsx": "preserve",
15 | "incremental": true,
16 | "plugins": [
17 | {
18 | "name": "next"
19 | }
20 | ],
21 | "paths": {
22 | "@*": ["./*"]
23 | }
24 | },
25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 | "exclude": ["node_modules"]
27 | }
28 |
--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/tiktok.svg:
--------------------------------------------------------------------------------
1 | TikTok
--------------------------------------------------------------------------------
/public/security.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "github-landing-page",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@studio-freight/lenis": "^1.0.29",
13 | "cobe": "^0.6.3",
14 | "framer-motion": "^10.16.16",
15 | "next": "14.0.4",
16 | "react": "^18",
17 | "react-dom": "^18",
18 | "react-spring": "^9.7.3"
19 | },
20 | "devDependencies": {
21 | "@types/node": "^20",
22 | "@types/react": "^18",
23 | "@types/react-dom": "^18",
24 | "autoprefixer": "^10.0.1",
25 | "eslint": "^8",
26 | "eslint-config-next": "14.0.4",
27 | "postcss": "^8",
28 | "tailwindcss": "^3.3.0",
29 | "typescript": "^5"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/public/codeReview.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/public/codeSpace.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/public/disscusion.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/proSideArc.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/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 |
30 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/public/3m.svg:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
6 |
7 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/public/securityIll.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/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 |
24 |
28 |
32 | {title}
33 |
34 | {subTitle}
35 |
36 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/motion/index.ts:
--------------------------------------------------------------------------------
1 | export const container = {
2 | hidden: { opacity: 0 },
3 | show: {
4 | opacity: 1,
5 | transition: {
6 | staggerChildren: 0.1,
7 | delayChildren: 0.1,
8 | },
9 | },
10 | };
11 |
12 | export const item = {
13 | hidden: { opacity: 0, y: 3 },
14 | show: { opacity: 1, y: 0, transition: { type: "keyframe" } },
15 | };
16 |
17 | export const lineVariant = {
18 | hidden: { height: 0 },
19 | show: { height: "100%" },
20 | };
21 |
22 |
23 |
24 | export const SecurityContainer = {
25 | hidden: { opacity: 0 },
26 | show: {
27 | opacity: 1,
28 | transition: {
29 | staggerChildren: 0.1,
30 | delayChildren: 0.4,
31 | },
32 | },
33 | };
34 |
35 | export const SecurityItem = {
36 | hidden: { opacity: 0, scale: 0.8 },
37 | show: { opacity: 1, scale: 1 },
38 | };
39 |
40 | export const navVariants = {
41 | hidden: { y: "-100%" },
42 | vissible: { y: 0, transition: { ease: "easeInOut", duration: 0.7, backgroundColor: "red" }, }
43 | };
44 |
45 | // Collaboration
46 | export const collabcontainervarients = {
47 | hidden: { opacity: 0 },
48 | show: {
49 | opacity: 1,
50 | transition: {
51 | staggerChildren: 0.1,
52 | delayChildren: 0.1,
53 | },
54 | },
55 | };
56 |
57 | export const collabitemvarients = {
58 | hidden: { opacity: 0, y: 40 },
59 | show: { opacity: 1, y: 0 },
60 | };
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/public/collabArc.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/public/copilot.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/public/githubF.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/sap.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
8 |
9 |
--------------------------------------------------------------------------------
/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 |
38 |
41 |
42 |
43 |
46 |
47 |
48 |
49 |
50 |
51 | 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 | The 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 | 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/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 |
39 | Open Source
40 |
49 |
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 | setShow(!show)}
36 | type="button"
37 | className={`flex items-center p-1 max-lg:font-semibold transition ease-in duration-150 max-lg:justify-between max-lg:w-full ${
38 | show ? "lg:text-neutral-300 " : ""
39 | }`}>
40 | Product
41 |
50 |
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 |
--------------------------------------------------------------------------------
/public/kpmg.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/public/png.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/components/Productivity/HoverCard.tsx:
--------------------------------------------------------------------------------
1 | import { ThoverCardProps } from "@types";
2 | import { useState, useEffect } from "react";
3 | import { useSpring, animated } from "@react-spring/web";
4 |
5 | const calc = (x: number, y: number): [number, number, number] => [
6 | -(y - window.innerHeight / 2) / 360,
7 | (x - window.innerWidth / 2) / 240,
8 | 1.02,
9 | ];
10 |
11 | const trans = (x: number, y: number, s: number): string =>
12 | `perspective(900px) rotateX(${-x}deg) rotateY(${-y}deg)`;
13 |
14 | export default function HoverCard({
15 | children,
16 | backgroundColor,
17 | direction,
18 | left,
19 | className,
20 | }: ThoverCardProps) {
21 | const [hovered, setIsHovered] = useState(false);
22 | const [springProps, set] = useSpring(() => ({
23 | xys: [0, 0, 1],
24 | config: { mass: 5, tension: 6000, friction: 1000 },
25 | }));
26 |
27 | const [cursorCoords, setCursorCoords] = useState({ x: 0, y: 0 });
28 |
29 | useEffect(() => {
30 | const handleMousePosition = (event: MouseEvent) => {
31 | const { clientX: x, clientY: y } = event;
32 | setCursorCoords({ x, y });
33 | };
34 |
35 | window.addEventListener("mousemove", handleMousePosition);
36 |
37 | return () => {
38 | window.removeEventListener("mousemove", handleMousePosition);
39 | };
40 | }, []);
41 |
42 | const calcTranslate = (
43 | coordinate: number,
44 | containerSize: number,
45 | itemSize: number,
46 | ) => (coordinate / containerSize) * (containerSize - itemSize);
47 |
48 | const translateX =
49 | typeof window !== "undefined"
50 | ? calcTranslate(cursorCoords.x, window.innerWidth, 600)
51 | : 0;
52 | const translateY =
53 | typeof window !== "undefined"
54 | ? calcTranslate(cursorCoords.y, window.innerHeight, 500)
55 | : 0;
56 |
57 | const handleMouseMove = (event: React.MouseEvent) => {
58 | const { clientX: x, clientY: y } = event;
59 | set({ xys: calc(x, y) });
60 | setIsHovered(true);
61 | };
62 |
63 | const handleMouseLeave = () => {
64 | set({ xys: [0, 0, 1] });
65 | setIsHovered(false);
66 | };
67 |
68 | return (
69 |
74 |
76 | {children}
77 |
92 |
93 |
94 | );
95 | }
96 |
--------------------------------------------------------------------------------
/public/arcPink.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/public/arcGreenPro.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/public/telsus.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/public/arcPinkCollab.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/public/arcGreen.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/public/index.ts:
--------------------------------------------------------------------------------
1 | export { default as footerGalaxy } from './footer-galaxy.webp';
2 | export { default as logo } from './logo.svg';
3 | export { default as search } from './search.svg';
4 | export { default as dropdown } from './dropDownUn.svg';
5 | export { default as share } from './share.svg';
6 | export { default as security } from './security.svg';
7 | export { default as copilot } from './copilot.svg';
8 | export { default as packages } from './package.svg';
9 | export { default as codeSpace } from './codeSpace.svg';
10 | export { default as discussion } from './disscusion.svg';
11 | export { default as dropDown } from './dropDown.png';
12 | export { default as actions } from './actions.svg';
13 | export { default as codeReview } from './codeReview.svg';
14 | export { default as issues } from './issues.svg';
15 |
16 | // footer social
17 | export { default as twitter } from './twitter.svg';
18 | export { default as tiktok } from './tiktok.svg';
19 | export { default as twitch } from './twitch.svg';
20 | export { default as facebook } from './facebook.svg';
21 | export { default as youtube } from './youtube.svg';
22 | export { default as linkedin } from './linkEdin.svg';
23 |
24 | // hero brands
25 | export { default as kpmg } from './kpmg.svg';
26 | export { default as marcedeeze } from './marcedeze.svg';
27 | export { default as png } from './png.svg';
28 | export { default as sap } from './sap.svg';
29 | export { default as telsus } from './telsus.svg';
30 | export { default as threeM } from './3m.svg';
31 |
32 | // Productivity
33 | export { default as mobile } from './mobileProductivity.png';
34 | export { default as actionsPro } from './actionProductibity.png';
35 | export { default as proArc } from './proArc.svg';
36 | export { default as procodeSpace } from './proCodespace.png';
37 | export { default as proSideArc } from './proSideArc.svg';
38 | export { default as arcGreenPro } from './arcGreenPro.svg';
39 | export { default as proCover } from './prodCover.png';
40 | export { default as proCoverTop } from './prodCoverTop.png';
41 | export { default as proBag } from './bag.png';
42 |
43 | // Collaboration
44 | export { default as issuesColab } from './issueColab.png';
45 | export { default as issueColab } from './issuesCollab.png';
46 | export { default as discussionColab } from './disscussion.png';
47 | // export { default as pullColab } from './illu-pull-requests.webp';
48 | export { default as arcPink } from './arcPinkCollab.svg';
49 | export { default as bgStar } from './bg-stars.webp';
50 | export { default as collabArc } from './collabArc.svg';
51 | export { default as collabBracket } from './collabBracket.png';
52 |
53 | export { default as homeBrew } from './homebrew.png';
54 | export { default as directus } from './directus.png';
55 | export { default as imolorhe } from './imolorhe.jpeg';
56 | export { default as dayhesoe } from './dayhaysoos.jpeg';
57 | export { default as commandPost } from './commandpost.png';
58 | export { default as kazupon } from './kazupon.webp';
59 | export { default as prophen } from './prophen.webp';
60 | export { default as sindresorhus } from './sindresorhus.webp';
61 | export { default as eslint } from './eslint.png';
62 |
63 | // Security
64 | export { default as CodeScaning } from './codeScaninigSec.png';
65 | export { default as dependbot } from './dependbotSecu.png';
66 | export { default as envScaning } from './scaningSec.png';
67 | export { default as securityIll } from './securityIll.svg';
68 | export { default as arcGreen } from './arcGreen.svg';
69 | export { default as criticalSec } from './critical.png';
70 |
--------------------------------------------------------------------------------
/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 |
42 | Solutions
43 |
52 |
53 |
57 | {solutionNavItem.map((item) => (
58 |
61 |
62 | {item.title}
63 |
64 |
65 | {item.links.map((link) => (
66 | <>
67 |
68 |
71 | {link.title}
72 |
73 |
74 | >
75 | ))}
76 |
77 |
81 |
82 |
83 |
84 | ))}
85 | {solutionNavItem1.map((item) => (
86 |
89 |
90 | {item.title}
91 |
92 |
93 |
94 |
97 | CI/CD & Automation
98 |
99 |
100 | {item.links.map((item) => (
101 |
104 |
108 |
109 | ))}
110 |
111 |
112 | ))}
113 | {solutionNavItem2.map((item) => (
114 |
117 |
118 | {item.title}
119 |
120 |
121 |
122 |
125 | Customer stories
126 |
127 |
128 | {item.links.map((item) => (
129 |
132 |
136 |
137 | ))}
138 |
139 |
140 | ))}
141 |
142 |
143 | );
144 | }
145 |
--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @font-face {
6 | src: url("../font/mona-sans-d1bf285e9b9b.woff2");
7 | font-family: mona-sans;
8 | }
9 |
10 | html {
11 | font-family: mona-sans;
12 | }
13 |
14 | body {
15 | position: relative;
16 | box-sizing: border-box;
17 | background-color: #0c1015;
18 | font-size: 15px;
19 | }
20 |
21 | ::-webkit-scrollbar {
22 | width: 0;
23 | background: transparent;
24 | }
25 |
26 | @media (min-width: 1024px) {
27 | .glass {
28 | background: rgba(104, 104, 104, 0.2);
29 | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.67);
30 | backdrop-filter: blur(0.1px);
31 | -webkit-backdrop-filter: blur(3px);
32 | }
33 | }
34 |
35 | .image {
36 | max-width: calc(230vw + 1670px);
37 | z-index: -9999;
38 | }
39 |
40 | .home-campaign-glowing-icon-glow {
41 | --mktg-accent-primary: #dd7df7;
42 | }
43 |
44 | .home-campaign-lines-hero {
45 | left: calc(50% - 12px);
46 | width: 300px;
47 | height: 428px;
48 | }
49 | @media (min-width: 768px) {
50 | .home-campaign-lines-hero {
51 | left: calc(50% - 14px);
52 | width: 437px;
53 | height: 643px;
54 | }
55 | }
56 |
57 | .copilot {
58 | background: rgba(0, 0, 0, 0.1);
59 | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.67);
60 | backdrop-filter: blur(1px);
61 | -webkit-backdrop-filter: blur(3px);
62 | }
63 |
64 | .home-campaign-signup-button {
65 | background: linear-gradient(
66 | 180deg,
67 | rgba(183, 52, 179, 0.15) 0%,
68 | rgba(164, 46, 156, 0) 100%
69 | ),
70 | #6e40c9 !important;
71 | }
72 | .home-campaign-glowing-icon-glow-1 {
73 | background-color: #7ee787;
74 | filter: blur(20px);
75 | }
76 | .home-campaign-glowing-icon-glow-2 {
77 | background-color: #6639ba;
78 | filter: blur(20px);
79 | }
80 | .home-campaign-glowing-icon-glow-3 {
81 | background-color: #33b3ae;
82 | filter: blur(20px);
83 | }
84 |
85 | .home-campaign-git-line {
86 | background: linear-gradient(#56d364, #2ea043, var(--color-canvas-default));
87 | transition-delay: 500ms;
88 | width: 3px;
89 | }
90 |
91 | @media (max-width: 400px) {
92 | .line {
93 | height: 1080px;
94 | }
95 | }
96 | .pl-ent {
97 | color: #7ee787;
98 | }
99 | .pl-e,
100 | .pl-en {
101 | color: #d2a8ff;
102 | }
103 | .pl-s {
104 | color: #a5d6ff;
105 | }
106 | .pl-s1 {
107 | color: #fff;
108 | }
109 | .pl-k {
110 | color: #ff7b72;
111 | }
112 |
113 | .pl-c1 {
114 | color: #79c0ff;
115 | }
116 |
117 | .color-fg-subtle {
118 | color: #6e7681;
119 | }
120 | .color-fg-accent {
121 | color: #2f81f7;
122 | }
123 | .color-fg-done {
124 | color: #a371f7;
125 | }
126 |
127 | .increase {
128 | background: linear-gradient(
129 | 180deg,
130 | rgba(0, 0, 0, 0) 0%,
131 | rgba(88, 133, 91, 0.9) 25.52%,
132 | #4ead56 53.12%,
133 | rgba(99, 199, 107, 0.544444) 74.48%,
134 | rgba(0, 0, 0, 0) 100%
135 | );
136 | }
137 |
138 | .increase1 {
139 | background: linear-gradient(#ffffff00, #f778ba, #f778ba, #ffffff00);
140 | }
141 | .increase2 {
142 | background: linear-gradient(#ffffff00, #33b3ae, #33b3ae, #ffffff00);
143 | }
144 |
145 | .back {
146 | background: #7ee787;
147 | filter: blur(180px);
148 | }
149 |
150 | .box-shadow-card-mktg {
151 | box-shadow: 0 3px 2px rgba(0, 0, 0, 0.04), 0 7px 5px rgba(0, 0, 0, 0.02),
152 | 0 13px 10px rgba(0, 0, 0, 0.02), 0 22px 17px rgba(0, 0, 0, 0.02) !important;
153 | }
154 |
155 | .code-editor-line-mktg {
156 | border-left: 2px solid #0d1117;
157 | display: inline-block;
158 | }
159 |
160 | .code-editor-line-suggested-mktg {
161 | border-color: #1f6feb;
162 | }
163 |
164 | .box-shadow-mktg-xl {
165 | box-shadow: 0 2.74416px 2.74416px rgba(0, 0, 0, 0.0274351),
166 | 0 5.48831px 5.48831px rgba(0, 0, 0, 0.0400741),
167 | 0 13.7208px 10.9766px rgba(0, 0, 0, 0.0499982),
168 | 0 20.5812px 20.5812px rgba(0, 0, 0, 0.0596004),
169 | 0 41.1623px 41.1623px rgba(0, 0, 0, 0.0709366),
170 | 0 96.0454px 89.1851px rgba(0, 0, 0, 0.09);
171 | }
172 |
173 | .responsive {
174 | width: 100% !important;
175 | height: auto !important;
176 | }
177 |
178 | .hero-drone {
179 | animation: animate 20s linear infinite;
180 | }
181 |
182 | @keyframes animate {
183 | 0% {
184 | transform: translateY(-20px);
185 | }
186 | 50% {
187 | transform: translateY(0);
188 | }
189 | 100% {
190 | transform: translateY(-20px);
191 | }
192 | }
193 |
--------------------------------------------------------------------------------
/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 |
17 |
18 |
19 |
20 |
23 | Sign up
24 |
25 |
26 |
27 |
33 |
34 |
setShowNav(!showNav)}
37 | className="lg:hidden cursor-pointer">
38 |
42 |
46 |
50 |
51 |
52 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
68 | Pricing
69 |
70 |
71 |
72 |
73 |
74 |
75 |
80 |
87 |
88 |
89 |
92 | Sign in
93 |
94 |
95 |
98 | Sign up
99 |
100 |
101 |
102 |
103 |
104 |
105 | );
106 | }
107 |
--------------------------------------------------------------------------------
/components/Security/Projects.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import { useState } from "react";
3 | import { motion } from "framer-motion";
4 | import { arcGreen, bgStar, criticalSec } from "@public";
5 |
6 | export default function Projects() {
7 | const [hovered, setHovered] = useState(false);
8 |
9 | return (
10 |
11 |
21 |
22 |
27 |
43 |
44 |
45 |
46 |
95 |
100 |
115 |
116 |
117 |
122 |
123 |
124 | Did you know?
125 |
126 |
127 | 7x faster
128 |
129 |
130 | vulnerability fixes with GitHub1
131 |
132 |
133 |
134 |
135 |
136 | );
137 | }
138 |
--------------------------------------------------------------------------------
/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 |
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 |
30 |
31 |
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 |
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 |
61 |
62 |
63 |
69 |
70 |
71 |
72 |
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 |
145 |
146 | ))}
147 |
148 |
149 |
150 |
151 |
152 |
153 | );
154 | }
155 |
--------------------------------------------------------------------------------
/public/marcedeze.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/components/Productivity/CodeSpace.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import Image from "next/image";
3 | import { lineVariant } from "@motion";
4 | import { motion } from "framer-motion";
5 | import React, { useState } from "react";
6 | import { arcGreenPro, bgStar, proCoverTop, proSideArc } from "@public";
7 | import Link from "next/link";
8 |
9 | export default function CodeSpace() {
10 | const [hovered, setHovered] = useState(false);
11 | return (
12 |
13 |
23 |
24 |
32 |
48 |
49 |
50 |
51 |
52 |
57 |
58 | GitHub Copilot {" "}
59 | empowers developers to complete tasks 55% faster with
60 | contextualized AI coding assistance across workflows.
61 |
62 | setHovered(true)}
64 | onMouseLeave={() => setHovered(false)}
65 | href="/"
66 | className="py-1 inline-block text-xl text-white font-semibold">
67 | Explore GitHub Copilot
68 |
77 |
81 |
90 |
91 |
96 |
97 |
98 |
99 |
104 |
119 |
120 |
121 |
126 |
127 |
128 |
129 | Did you know?
130 |
131 |
132 | 22% increase
133 |
134 |
135 | in developer productivity after three years with GitHub
136 |
137 |
138 |
setHovered(true)}
140 | onMouseLeave={() => setHovered(false)}
141 | href="/"
142 | className="py-1 inline-block text-xl text-white font-semibold">
143 | Read the report
144 |
153 |
157 |
166 |
167 |
172 |
173 |
174 |
175 |
182 |
183 |
184 |
185 |
186 | );
187 | }
188 |
--------------------------------------------------------------------------------
/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 |
68 | {isSticky && (
69 | <>
70 |
74 |
75 |
setSmallNav(!smallNav)}
77 | className="lg:hidden absolute right-12 top-2">
78 |
87 |
88 |
89 |
98 |
99 |
100 |
101 |
102 |
setSmallNav(false)}
105 | onMouseEnter={() => setproduct1(true)}
106 | onMouseLeave={() => setproduct1(false)}
107 | className={` max-lg:pt-2 ${
108 | product1 ? "lg:text-white" : ""
109 | } ${
110 | product || smallNav
111 | ? "lg:text-white max-lg:pb-6"
112 | : "max-lg:hidden"
113 | } `}>
114 | Productivity{" "}
115 |
120 |
121 |
setSmallNav(false)}
124 | onMouseEnter={() => setcollab1(true)}
125 | onMouseLeave={() => setcollab1(false)}
126 | className={` max-lg:pt-2 ${collab1 ? "lg:text-white" : ""} ${
127 | collab || smallNav
128 | ? "lg:text-white max-lg:pb-6"
129 | : "max-lg:hidden"
130 | } `}>
131 | Collaboration
132 |
137 |
138 |
setSmallNav(false)}
141 | onMouseEnter={() => setSecurity1(true)}
142 | onMouseLeave={() => setSecurity1(false)}
143 | className={` max-lg:pt-2 ${
144 | security1 ? "lg:text-white" : ""
145 | } ${
146 | security || smallNav ? "lg:text-white " : "max-lg:hidden"
147 | } `}>
148 | Security
149 |
154 |
155 |
156 |
160 |
setHovered(true)}
162 | onMouseLeave={() => setHovered(false)}
163 | href=""
164 | className="flex items-center max-lg:w-full text-white font-semibold justify-center space-x-2 text-base border-[1px] border-neutral-500 px-3 py-3 rounded-md">
165 | Start a free enterprise trail
166 |
175 |
179 |
188 |
189 |
190 |
setHovered1(true)}
192 | onMouseLeave={() => setHovered1(false)}
193 | href=""
194 | className="flex items-center max-lg:w-full bg-white font-semibold px-3 py-3 justify-center rounded-md text-base">
195 | Sign up for GitHub
196 |
205 |
209 |
218 |
219 |
220 |
221 |
222 |
223 | >
224 | )}
225 |
226 | );
227 | }
228 |
--------------------------------------------------------------------------------
/components/Productivity/Productivity.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import Link from "next/link";
3 | import Image from "next/image";
4 | import { useState } from "react";
5 | import CodeSpace from "./CodeSpace";
6 | import HoverCard from "./HoverCard";
7 | import { motion } from "framer-motion";
8 | import {
9 | actionsPro,
10 | mobile,
11 | proArc,
12 | proBag,
13 | proCover,
14 | procodeSpace,
15 | } from "@public";
16 |
17 | export default function Productivity() {
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 |
32 |
38 |
39 |
40 |
46 |
47 |
48 |
55 | Productivity
56 |
57 |
64 | Accelerate innovation
65 |
66 | Our AI-powered platform increases the pace of software development.
67 |
68 |
69 |
70 |
77 |
78 |
79 |
88 |
89 |
90 |
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 | Discover GitHub Actions
108 |
117 |
121 |
130 |
131 |
136 |
137 |
138 |
139 |
144 |
154 |
155 |
156 |
157 |
158 |
159 |
164 |
165 |
166 |
167 | GitHub Codespaces{" "}
168 |
169 | offers a complete dev environment in seconds. Code, build, test,
170 | and open pull requests from any repo.
171 |
172 |
173 |
setHovered1(true)}
175 | onMouseLeave={() => setHovered1(false)}
176 | href=""
177 | className=" md:text-xl text-white font-semibold inline-block">
178 | Check out GitHub Codespaces
179 |
188 |
192 |
201 |
202 |
207 |
208 |
209 |
210 |
211 |
221 |
222 |
223 |
228 |
229 |
230 | GitHub Mobile
231 | fits your projects in your pocket, so you never miss a beat
232 | while on the go.
233 |
234 |
235 |
setHovered2(true)}
237 | onMouseLeave={() => setHovered2(false)}
238 | href=""
239 | className=" md:text-xl text-white font-semibold inline-block">
240 | Download GitHub Mobile
241 |
250 |
254 |
263 |
264 |
269 |
270 |
271 |
272 |
273 |
283 |
284 |
285 |
286 |
287 |
294 |
295 | );
296 | }
297 |
--------------------------------------------------------------------------------
/constants/index.ts:
--------------------------------------------------------------------------------
1 | import { security, packages, actions, codeSpace, copilot, codeReview, discussion, issues, share, twitter, facebook, linkedin, youtube, twitch, tiktok, logo, kpmg, sap, telsus, png, marcedeeze, homeBrew, directus, dayhesoe, imolorhe, commandPost, kazupon, sindresorhus, eslint, threeM } from "@public";
2 |
3 | // Product Nav Constants
4 | export const productNavItem = [
5 | {
6 | id: 1,
7 | title: "Action",
8 | subTitle: "Automate any workflow",
9 | icon: actions
10 | },
11 | {
12 | id: 2,
13 | title: "Packages",
14 | subTitle: "Host and manage packages",
15 | icon: packages
16 | },
17 | {
18 | id: 3,
19 | title: "Security",
20 | subTitle: "Find and fix vulnerability",
21 | icon: security,
22 | },
23 | {
24 | id: 4,
25 | title: "CodeSpace",
26 | subTitle: "Instant dev environments",
27 | icon: codeSpace
28 | },
29 | {
30 | id: 5,
31 | title: "Copilot",
32 | subTitle: "Write better code with AI",
33 | icon: copilot,
34 | },
35 | {
36 | id: 6,
37 | title: "Code review",
38 | subTitle: "Manage code changes",
39 | icon: codeReview,
40 | },
41 | {
42 | id: 7,
43 | title: "Issues",
44 | subTitle: "Plan and track issues",
45 | icon: issues,
46 | },
47 | {
48 | id: 8,
49 | title: "Discussions",
50 | subTitle: "Collaborate outside of code",
51 | icon: discussion,
52 | },
53 | ];
54 |
55 | // ProductNav2 Constants
56 | export const productNavItem2 = [
57 | {
58 | id: 1,
59 | title: "Documentaion",
60 | icon: share
61 | },
62 | {
63 | id: 2,
64 | title: "GitHub skills",
65 | icon: share,
66 | },
67 | {
68 | id: 3,
69 | title: "Blog",
70 | icon: share
71 | },
72 | ];
73 |
74 | // Solution Nav Constants
75 | export const solutionNavItem = [
76 | {
77 | id: 1,
78 | title: "For",
79 | links: [
80 | {
81 | id: 1,
82 | title: "Enterprise",
83 | },
84 | {
85 | id: 2,
86 | title: "Teams",
87 | },
88 | {
89 | id: 3,
90 | title: "Startups",
91 | },
92 | ],
93 | },
94 | ];
95 |
96 | export const solutionNavItem1 = [
97 | {
98 | id: 1,
99 | title: "By Solution",
100 | links: [
101 | {
102 | id: 1,
103 | title: "DevOps",
104 | icon: share
105 | },
106 | {
107 | id: 2,
108 | title: "DevSecOps",
109 | icon: share
110 | },
111 | ],
112 | },
113 | ];
114 |
115 | export const solutionNavItem2 = [
116 | {
117 | id: 1,
118 | title: "Case Studies",
119 | links: [
120 | {
121 | id: 1,
122 | title: "Resources",
123 | icon: share
124 | },
125 | ],
126 | },
127 | ];
128 |
129 |
130 | export const openSourceNavItem = [
131 | {
132 | id: 1,
133 | title: "GitHub Sponsers",
134 | subTitle: "Fund open source developers",
135 | },
136 | {
137 | id: 2,
138 | title: "The ReadMe Projects",
139 | subTitle: "Fund open source developers",
140 | },
141 | ];
142 |
143 | export const openSourceNavItem1 = [
144 | {
145 | id: 1,
146 | title: "Repositories",
147 | links: [
148 | {
149 | id: 1,
150 | title: "Topics",
151 | },
152 | {
153 | id: 2,
154 | title: "Trendings",
155 | },
156 | {
157 | id: 3,
158 | title: "Collections",
159 | },
160 | ]
161 | }
162 | ];
163 |
164 | // Hero Constants
165 | export const heroBrandsItem = [
166 | { id: 1, src: kpmg },
167 | { id: 2, src: sap },
168 | { id: 3, src: telsus },
169 | { id: 4, src: png },
170 | { id: 5, src: marcedeeze },
171 | { id: 6, src: threeM },
172 | ];
173 |
174 | // Collaboration Items
175 |
176 | export const colabItems = [
177 | {
178 | id: 1,
179 | title: "Homebrew",
180 | subTitle: "Sponsor",
181 | src: homeBrew
182 | },
183 | {
184 | id: 2,
185 | title: "Directus",
186 | subTitle: "Sponsor",
187 | src: directus
188 | },
189 | {
190 | id: 3,
191 | title: "Nick DeJesus",
192 | subTitle: "Sponsor",
193 | src: dayhesoe
194 | },
195 | {
196 | id: 4,
197 | title: "Samuel",
198 | subTitle: "Sponsor",
199 | src: imolorhe
200 | },
201 | {
202 | id: 5,
203 | title: "CommandPost",
204 | subTitle: "Sponsor",
205 | src: commandPost
206 | },
207 | {
208 | id: 6,
209 | title: "kazuya",
210 | subTitle: "Sponsor",
211 | src: kazupon
212 | },
213 | {
214 | id: 7,
215 | title: "Nikema",
216 | subTitle: "Sponsor",
217 | src: sindresorhus
218 | },
219 | {
220 | id: 8,
221 | title: "Sindresorhus",
222 | subTitle: "Sponsor",
223 | src: homeBrew
224 | },
225 | {
226 | id: 9,
227 | title: "ESLint",
228 | subTitle: "Sponsor",
229 | src: eslint
230 | },
231 | ];
232 |
233 | // Footer Constants
234 | export const footerLinksItem = [
235 | {
236 | id: 1,
237 | title: "Product",
238 | links: [
239 | {
240 | id: 1,
241 | title: "Features",
242 | href: "Features",
243 | },
244 | {
245 | id: 2,
246 | title: "Security",
247 | href: "Security",
248 | },
249 | {
250 | id: 3,
251 | title: "Team",
252 | href: "Team",
253 | },
254 | {
255 | id: 4,
256 | title: "Enterprise",
257 | href: "Enterprise",
258 | },
259 | {
260 | id: 5,
261 | title: "Custom Stories",
262 | href: "Custom Stories",
263 | },
264 | {
265 | id: 6,
266 | title: "The ReadME Project",
267 | href: "The ReadME Project",
268 | },
269 | {
270 | id: 7,
271 | title: "Pricing",
272 | href: "Pricing",
273 | },
274 | {
275 | id: 8,
276 | title: "Resources",
277 | href: "Resources",
278 | },
279 | {
280 | id: 9,
281 | title: "Roadmap",
282 | href: "Roadmap",
283 | },
284 | {
285 | id: 10,
286 | title: "Compare GitHub",
287 | href: "Compare GitHub",
288 | },
289 | ]
290 | },
291 | {
292 | id: 2,
293 | title: "Platform",
294 | links: [
295 | {
296 | id: 1,
297 | title: "Developer API",
298 | href: "Developer API",
299 | },
300 | {
301 | id: 2,
302 | title: "Partners",
303 | href: "Partners",
304 | },
305 | {
306 | id: 3,
307 | title: "Electron",
308 | href: "Electron",
309 | },
310 | {
311 | id: 4,
312 | title: "GitHub Desktop",
313 | href: "GitHub Desktop",
314 | },
315 | ]
316 | },
317 | {
318 | id: 3,
319 | title: "Product",
320 | links: [
321 | {
322 | id: 1,
323 | title: "Docs",
324 | href: "Docs",
325 | },
326 | {
327 | id: 2,
328 | title: "Community Forum",
329 | href: "Community Forum",
330 | },
331 | {
332 | id: 3,
333 | title: "Professional Services",
334 | href: "Professional Services",
335 | },
336 | {
337 | id: 4,
338 | title: "Premium Support",
339 | href: "Premium Support",
340 | },
341 | {
342 | id: 5,
343 | title: "Skill",
344 | href: "Skill",
345 | },
346 | {
347 | id: 6,
348 | title: "Status",
349 | href: "Status",
350 | },
351 | {
352 | id: 7,
353 | title: "Contact GitHub",
354 | href: "Contact GitHub",
355 | },
356 | ]
357 | },
358 | {
359 | id: 4,
360 | title: "Company",
361 | links: [
362 | {
363 | id: 1,
364 | title: "About",
365 | href: "About",
366 | },
367 | {
368 | id: 2,
369 | title: "Blog",
370 | href: "Blog",
371 | },
372 | {
373 | id: 3,
374 | title: "Careers",
375 | href: "Careers",
376 | },
377 | {
378 | id: 4,
379 | title: "Press",
380 | href: "Press",
381 | },
382 | {
383 | id: 5,
384 | title: "Inclusion",
385 | href: "Inclusion",
386 | },
387 | {
388 | id: 6,
389 | title: "Social Impact",
390 | href: "Social Impact",
391 | },
392 | {
393 | id: 7,
394 | title: "Shop",
395 | href: "Shop",
396 | },
397 | {
398 | id: 8,
399 | title: "Customers Stories",
400 | href: "Customers Stories",
401 | },
402 | {
403 | id: 9,
404 | title: "The ReadMe Project",
405 | href: "The ReadMe Project",
406 | },
407 | ]
408 | }
409 | ];
410 |
411 | export const footerSocialItems = [
412 | {
413 | id: 1,
414 | href: "https://www.twitter.com",
415 | src: twitter
416 | },
417 | {
418 | id: 2,
419 | href: "https://www.facebook.com",
420 | src: facebook
421 | },
422 | {
423 | id: 3,
424 | href: "https://www.linkedin.com",
425 | src: linkedin
426 | },
427 | {
428 | id: 4,
429 | href: "https://www.youtube.com",
430 | src: youtube
431 | },
432 | {
433 | id: 5,
434 | href: "https://www.twitch.com",
435 | src: twitch
436 | },
437 | {
438 | id: 6,
439 | href: "https://www.tiktok.com",
440 | src: tiktok
441 | },
442 | {
443 | id: 7,
444 | href: "https://www.github.com",
445 | src: logo
446 | },
447 | ];
448 |
449 |
450 | export const footerTermsItem = [
451 | {
452 | id: 1,
453 | title: "© 2024 GitHub, Inc.",
454 | links: [
455 | {
456 | id: 1,
457 | title: "Terms",
458 | href: "/"
459 | },
460 | {
461 | id: 2,
462 | title: "Privacy (Updated 08/2022)",
463 | href: "/"
464 | },
465 | {
466 | id: 3,
467 | title: "Sitemap",
468 | href: "/"
469 | },
470 | {
471 | id: 4,
472 | title: "What is Git?",
473 | href: "/"
474 | },
475 | {
476 | id: 5,
477 | title: "Manage cookies",
478 | href: "/"
479 | },
480 | {
481 | id: 6,
482 | title: "Do not share my personal information",
483 | href: "/"
484 | },
485 | ]
486 | }
487 | ];
488 |
489 |
--------------------------------------------------------------------------------
/components/Security/Security.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import Image from "next/image";
3 | import Projects from "./Projects";
4 | import { motion } from "framer-motion";
5 | import React, { useState } from "react";
6 | import HoverCard from "../Productivity/HoverCard";
7 | import { SecurityContainer, SecurityItem } from "@motion";
8 | import { CodeScaning, dependbot, envScaning, securityIll } from "@public";
9 |
10 | export default function Security() {
11 | const [hovered, setHovered] = useState(false);
12 | const [hovered1, setHovered1] = useState(false);
13 | const [hovered2, setHovered2] = useState(false);
14 |
15 | return (
16 |
17 |
18 |
19 |
24 |
33 |
34 |
35 |
36 |
37 |
43 |
44 |
49 |
52 | Application security
53 |
54 |
57 | Empower developers
58 | With GitHub, you can secure code in minutes.
59 |
60 |
61 |
62 |
69 |
70 |
71 |
76 |
77 |
78 |
cmake.yml
79 |
on: push
80 |
81 |
86 |
90 |
93 |
94 |
95 |
96 |
105 |
106 |
107 |
Build
108 |
109 | 1m 21s
110 |
111 |
112 |
113 |
114 |
118 |
121 |
127 |
130 |
131 |
135 |
138 | Steps
139 |
140 |
143 |
144 |
145 |
146 |
155 |
156 |
157 |
Build
158 |
159 | 1m 21s
160 |
161 |
162 |
163 |
172 |
173 |
174 |
Build
175 |
176 | 1m 21s
177 |
178 |
179 |
180 |
189 |
190 |
191 |
Build
192 |
193 | 1m 21s
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
208 |
209 |
210 | Code scanning
211 | is our code analysis tool that helps you remediate issues in your
212 | code.
213 |
214 |
248 |
249 |
254 |
264 |
265 |
266 |
267 |
268 |
273 |
274 |
275 | Dependabot makes
276 | it easy to find and fix vulnerable dependencies in your supply
277 | chain.
278 |
279 |
313 |
314 |
315 |
325 |
326 |
327 |
332 |
333 |
334 | Secret scanning
335 | automatically looks for partner patterns and prevents fraudulent
336 | use of accidentally committed secrets.
337 |
338 |
372 |
373 |
374 |
384 |
385 |
386 |
387 |
393 |
394 | );
395 | }
396 |
--------------------------------------------------------------------------------
/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 |
40 |
41 |
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 |
77 |
78 |
79 |
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 |
218 |
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 |
294 | {item.title}
295 |
298 |
299 |
308 |
309 |
310 |
311 | {item.subTitle}
312 |
313 |
314 |
315 |
316 |
317 | ))}
318 |
319 |
320 |
321 |
322 |
323 |
329 |
334 |
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 |
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 |
--------------------------------------------------------------------------------