├── .deepsource.toml ├── .eslintrc.json ├── .github └── FUNDING.yml ├── .gitignore ├── .gitpod.yml ├── LICENSE ├── README.md ├── common ├── config │ └── .gitkeep ├── dataSource │ └── team-data.json ├── helpers │ └── index.ts └── utils │ └── index.ts ├── components ├── AlertPopup │ └── index.tsx ├── AnnouncementBar │ └── index.tsx ├── CommunityNarratives │ └── index.tsx ├── EmojiLayer │ ├── emoji-list-data.json │ └── index.tsx ├── Footer │ ├── footer-data.ts │ └── index.tsx ├── GetStarted │ ├── get-started-data.json │ └── index.tsx ├── HackathonCTA │ └── index.tsx ├── MetaHead │ └── index.tsx ├── Navbar │ ├── index.tsx │ └── navbar-options.json ├── OrganizeWithUs │ └── index.tsx ├── Team │ └── index.tsx ├── UpcomingEvents │ └── index.tsx ├── UpcomingHackathons │ └── index.tsx ├── UpcomingSessions │ └── index.tsx └── ui-patterns │ ├── Button.tsx │ ├── Callout.tsx │ ├── ModalView.tsx │ └── Skeleton.tsx ├── context └── .gitkeep ├── middleware ├── hackathons-api.ts ├── index.ts └── teams-api.ts ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── 404.tsx ├── _app.tsx ├── design-sessions │ └── index.tsx ├── events │ ├── [id].tsx │ ├── index.tsx │ └── past-events.tsx ├── index.tsx └── mlh.tsx ├── postcss.config.js ├── public ├── assets │ ├── favicon │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── apple-touch-icon.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon.ico │ │ └── site.webmanifest │ └── hekors-website-repo-banner.png ├── callout-icon.svg ├── checks-bg.svg ├── community-narratives-illustration.svg ├── emojis │ ├── books-emoji.svg │ ├── color-palette-emoji.svg │ ├── confetti-emoji.svg │ ├── heart-eyes-emoji.svg │ ├── magic-ball-emoji.svg │ ├── open-eyes-emoji.svg │ ├── rocket-emoji.svg │ └── school-bag-emoji.svg ├── hekors-logo.svg ├── police.svg ├── skills-illustration.svg ├── social │ ├── bmac-icon.svg │ ├── discord-icon.svg │ ├── luma-icon.svg │ ├── notion-icon.svg │ ├── twitter-icon.svg │ └── whatsapp-icon.svg └── team │ ├── ayush.jpg │ ├── nishant.jpg │ ├── sumit.jpg │ └── yash.jpg ├── routers └── .gitkeep ├── styles ├── button-styles.css ├── globals.css └── typography.css ├── tailwind.config.js ├── tsconfig.json └── types ├── alert-popup-type.ts ├── announcement-bar-type.ts ├── emoji-type.ts ├── footer-option-type.ts ├── get-started-item-type.ts ├── hackathon-types.ts ├── meta-head-type.ts ├── navbar-option-type.ts ├── team-type.ts └── ui-pattern-types ├── button-type.ts ├── callout-type.ts ├── modal-view-type.ts └── skeleton-types.ts /.deepsource.toml: -------------------------------------------------------------------------------- 1 | version = 1 2 | 3 | [[analyzers]] 4 | name = "javascript" 5 | enabled = true 6 | 7 | [analyzers.meta] 8 | plugins = ["react"] -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [ayushsoni1010, wh0sumit] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 13 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 14 | -------------------------------------------------------------------------------- /.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 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.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 | 38 | # vs-code 39 | .vscode -------------------------------------------------------------------------------- /.gitpod.yml: -------------------------------------------------------------------------------- 1 | # This configuration file was automatically generated by Gitpod. 2 | # Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file) 3 | # and commit this file to your remote git repository to share the goodness with others. 4 | 5 | tasks: 6 | - init: npm install --save-dev && npm run build 7 | command: npm run dev 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | Apache License 3 | Version 2.0, January 2004 4 | https://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | 2. Grant of Copyright License. Subject to the terms and conditions of 68 | this License, each Contributor hereby grants to You a perpetual, 69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 70 | copyright license to reproduce, prepare Derivative Works of, 71 | publicly display, publicly perform, sublicense, and distribute the 72 | Work and such Derivative Works in Source or Object form. 73 | 74 | 3. Grant of Patent License. Subject to the terms and conditions of 75 | this License, each Contributor hereby grants to You a perpetual, 76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 77 | (except as stated in this section) patent license to make, have made, 78 | use, offer to sell, sell, import, and otherwise transfer the Work, 79 | where such license applies only to those patent claims licensable 80 | by such Contributor that are necessarily infringed by their 81 | Contribution(s) alone or by combination of their Contribution(s) 82 | with the Work to which such Contribution(s) was submitted. If You 83 | institute patent litigation against any entity (including a 84 | cross-claim or counterclaim in a lawsuit) alleging that the Work 85 | or a Contribution incorporated within the Work constitutes direct 86 | or contributory patent infringement, then any patent licenses 87 | granted to You under this License for that Work shall terminate 88 | as of the date such litigation is filed. 89 | 90 | 4. Redistribution. You may reproduce and distribute copies of the 91 | Work or Derivative Works thereof in any medium, with or without 92 | modifications, and in Source or Object form, provided that You 93 | meet the following conditions: 94 | 95 | (a) You must give any other recipients of the Work or 96 | Derivative Works a copy of this License; and 97 | 98 | (b) You must cause any modified files to carry prominent notices 99 | stating that You changed the files; and 100 | 101 | (c) You must retain, in the Source form of any Derivative Works 102 | that You distribute, all copyright, patent, trademark, and 103 | attribution notices from the Source form of the Work, 104 | excluding those notices that do not pertain to any part of 105 | the Derivative Works; and 106 | 107 | (d) If the Work includes a "NOTICE" text file as part of its 108 | distribution, then any Derivative Works that You distribute must 109 | include a readable copy of the attribution notices contained 110 | within such NOTICE file, excluding those notices that do not 111 | pertain to any part of the Derivative Works, in at least one 112 | of the following places: within a NOTICE text file distributed 113 | as part of the Derivative Works; within the Source form or 114 | documentation, if provided along with the Derivative Works; or, 115 | within a display generated by the Derivative Works, if and 116 | wherever such third-party notices normally appear. The contents 117 | of the NOTICE file are for informational purposes only and 118 | do not modify the License. You may add Your own attribution 119 | notices within Derivative Works that You distribute, alongside 120 | or as an addendum to the NOTICE text from the Work, provided 121 | that such additional attribution notices cannot be construed 122 | as modifying the License. 123 | 124 | You may add Your own copyright statement to Your modifications and 125 | may provide additional or different license terms and conditions 126 | for use, reproduction, or distribution of Your modifications, or 127 | for any such Derivative Works as a whole, provided Your use, 128 | reproduction, and distribution of the Work otherwise complies with 129 | the conditions stated in this License. 130 | 131 | 5. Submission of Contributions. Unless You explicitly state otherwise, 132 | any Contribution intentionally submitted for inclusion in the Work 133 | by You to the Licensor shall be under the terms and conditions of 134 | this License, without any additional terms or conditions. 135 | Notwithstanding the above, nothing herein shall supersede or modify 136 | the terms of any separate license agreement you may have executed 137 | with Licensor regarding such Contributions. 138 | 139 | 6. Trademarks. This License does not grant permission to use the trade 140 | names, trademarks, service marks, or product names of the Licensor, 141 | except as required for reasonable and customary use in describing the 142 | origin of the Work and reproducing the content of the NOTICE file. 143 | 144 | 7. Disclaimer of Warranty. Unless required by applicable law or 145 | agreed to in writing, Licensor provides the Work (and each 146 | Contributor provides its Contributions) on an "AS IS" BASIS, 147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 148 | implied, including, without limitation, any warranties or conditions 149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 150 | PARTICULAR PURPOSE. You are solely responsible for determining the 151 | appropriateness of using or redistributing the Work and assume any 152 | risks associated with Your exercise of permissions under this License. 153 | 154 | 8. Limitation of Liability. In no event and under no legal theory, 155 | whether in tort (including negligence), contract, or otherwise, 156 | unless required by applicable law (such as deliberate and grossly 157 | negligent acts) or agreed to in writing, shall any Contributor be 158 | liable to You for damages, including any direct, indirect, special, 159 | incidental, or consequential damages of any character arising as a 160 | result of this License or out of the use or inability to use the 161 | Work (including but not limited to damages for loss of goodwill, 162 | work stoppage, computer failure or malfunction, or any and all 163 | other commercial damages or losses), even if such Contributor 164 | has been advised of the possibility of such damages. 165 | 166 | 9. Accepting Warranty or Additional Liability. While redistributing 167 | the Work or Derivative Works thereof, You may choose to offer, 168 | and charge a fee for, acceptance of support, warranty, indemnity, 169 | or other liability obligations and/or rights consistent with this 170 | License. However, in accepting such obligations, You may act only 171 | on Your own behalf and on Your sole responsibility, not on behalf 172 | of any other Contributor, and only if You agree to indemnify, 173 | defend, and hold each Contributor harmless for any liability 174 | incurred by, or claims asserted against, such Contributor by reason 175 | of your accepting any such warranty or additional liability. 176 | 177 | END OF TERMS AND CONDITIONS 178 | 179 | Copyright 2013-2018 Docker, Inc. 180 | 181 | Licensed under the Apache License, Version 2.0 (the "License"); 182 | you may not use this file except in compliance with the License. 183 | You may obtain a copy of the License at 184 | 185 | https://www.apache.org/licenses/LICENSE-2.0 186 | 187 | Unless required by applicable law or agreed to in writing, software 188 | distributed under the License is distributed on an "AS IS" BASIS, 189 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 190 | See the License for the specific language governing permissions and 191 | limitations under the License. 192 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![website-repo-banner](./public/assets/hekors-website-repo-banner.png) 2 | 3 | # Community Website 4 | 5 | Hey Great People, Welcome to the Community Website Repository 🚀 6 | 7 | ### Overview 8 | 9 | This is the community website repository and it's powered by these technologies: 10 | 11 | - Frontend built using [NextJS](http://nextjs.org), [TailwindCSS](http://tailwindcss.com) & [Typescript](http://typescriptlang.org) 12 | - Middleware and API Utilities are written using [Typescript](http://typescriptlang.org) 13 | - For content and information on the website, we're using a headless-CMS called [Strapi](http://strapi.io) 14 | 15 | - For design and graphical utilities, we're using [Figma](http://figma.com) 16 | 17 | ### Requirements 18 | 19 | - [Node.js](https://nodejs.org/en/) 20 | - [npm](http://npmjs.com) 21 | 22 | ### Usage 23 | 24 | #### Install Dependencies 25 | 26 | To install all dependencies, run this command: 27 | 28 | ```cmd 29 | npm install --save-dev 30 | ``` 31 | 32 | #### Develop 33 | 34 | Launch the development server with the hot reloading functionality that allows any change in files to be immediately visible in the browser. Use this command: 35 | 36 | ```cmd 37 | npm run dev 38 | ``` 39 | 40 | You can access the live development server at [localhost:3000](https://localhost:3000). 41 | 42 | #### Setting up your workspace using GitPod Codespace 43 | 44 | In order to prepare and spin up a Gitpod dev environment for our project, we configured our workspace through a [.gitpod.yml](/.gitpod.yml) file. 45 | 46 | To spin up a Gitpod codespace, go to [http://gitpod.io/#https://github.com/hekors/website](http://gitpod.io/#https://github.com/hekors/website). 47 | 48 | #### Build 49 | 50 | To build a production-ready website, run the following command: 51 | 52 | ```cmd 53 | npm run build 54 | ``` 55 | 56 | Generated files of the website go to the `.next` folder. 57 | 58 | -------------------------------------------------------------------------------- /common/config/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hekors/website/5b2f334752ac78d5fe182bf4f29eadf4c87b4489/common/config/.gitkeep -------------------------------------------------------------------------------- /common/dataSource/team-data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "picture": "/team/yash.jpg", 4 | "fullName": { 5 | "firstName": "Yash", 6 | "lastName": "Sehgal" 7 | }, 8 | "isAvenger": true, 9 | "directWebsite": { 10 | "label": "website/yashsehgal", 11 | "link": "https://yashsehgal.com" 12 | }, 13 | "socialProfile": { 14 | "twitterUsername": "yashsehgaldev", 15 | "instagramUsername": "sehgalyash_", 16 | "linkedInUsername": "sehgalyash", 17 | "githubUsername": "yashsehgal" 18 | } 19 | }, 20 | { 21 | "picture": "/team/sumit.jpg", 22 | "fullName": { 23 | "firstName": "Sumit", 24 | "lastName": "Singh" 25 | }, 26 | "isAvenger": true, 27 | "directWebsite": { 28 | "label": "website/wh0sumit", 29 | "link": "http://wh0sumit.vercel.app" 30 | }, 31 | "socialProfile": { 32 | "twitterUsername": "wh0sumit", 33 | "instagramUsername": "wh0sumit", 34 | "linkedInUsername": "wh0sumit", 35 | "githubUsername": "wh0sumit" 36 | } 37 | }, 38 | { 39 | "picture": "/team/nishant.jpg", 40 | "fullName": { 41 | "firstName": "Nishant", 42 | "lastName": "Jain" 43 | }, 44 | "isAvenger": true, 45 | "directWebsite": { 46 | "label": "website/devnishant", 47 | "link": "http://devnishant.vercel.app" 48 | }, 49 | "socialProfile": { 50 | "twitterUsername": "devnishant10", 51 | "instagramUsername": "nishant.jain_10", 52 | "linkedInUsername": "nishantj2002", 53 | "githubUsername": "nishantjain10" 54 | } 55 | } 56 | ] 57 | -------------------------------------------------------------------------------- /common/helpers/index.ts: -------------------------------------------------------------------------------- 1 | const helpers = { 2 | 3 | } 4 | 5 | export {helpers} -------------------------------------------------------------------------------- /common/utils/index.ts: -------------------------------------------------------------------------------- 1 | const baseURL = "https://hekors-strapi.herokuapp.com"; 2 | 3 | function mediaURL(fileName: string) { 4 | return `${baseURL}/uploads/${fileName}`; 5 | } 6 | 7 | // utility method to parse date from type (yyyy-mm-dd) ---> to type object : { year, month, date } 8 | function parseDate(date = "") { 9 | const allMonths: any = { 10 | "01": "Jan", 11 | "02": "Feb", 12 | "03": "Mar", 13 | "04": "Apr", 14 | "05": "May", 15 | "06": "June", 16 | "07": "July", 17 | "08": "Aug", 18 | "09": "Sept", 19 | "10": "Oct", 20 | "11": "Nov", 21 | "12": "Dec", 22 | }; 23 | return { 24 | year: date.substring(0, 3), 25 | month: allMonths[date.substring(5, 7)], 26 | date: date.substring(8, 10), 27 | }; 28 | } 29 | 30 | export { baseURL, mediaURL, parseDate }; 31 | -------------------------------------------------------------------------------- /components/AlertPopup/index.tsx: -------------------------------------------------------------------------------- 1 | import { AlertPopupType } from "@/types/alert-popup-type"; 2 | import { FaTimes } from 'react-icons/fa'; 3 | 4 | const AlertPopup: React.FunctionComponent = ({ 5 | isActive=true, 6 | isHighlighted=false, 7 | children, 8 | style, 9 | }) => { 10 | return ( 11 |
13 |
14 | 17 |
18 |
19 | {children} 20 |
21 |
22 | ) 23 | }; 24 | 25 | export default AlertPopup; -------------------------------------------------------------------------------- /components/AnnouncementBar/index.tsx: -------------------------------------------------------------------------------- 1 | // Basic Imports 2 | import React, { useEffect, useState } from "react"; 3 | 4 | // Types Comports 5 | import { AnnouncementBarType } from "@/types/announcement-bar-type"; 6 | 7 | // Icon Imports 8 | import { FaTimes } from "react-icons/fa"; 9 | 10 | const AnnouncementBar: React.FunctionComponent = ({ 11 | children, 12 | color = "bg-product-red", 13 | isClosable = true, 14 | }) => { 15 | const [announcementBarVisibility, setAnnouncementBarVisibility] = 16 | useState(isClosable); 17 | const [announcementBarColor, setAnnouncementBarColor] = 18 | useState(color); 19 | const [announcementBarTextColor, setAnnouncementBarTextColor] = 20 | useState("text-black"); 21 | 22 | useEffect(() => { 23 | switch (color) { 24 | case "bg-product-red": 25 | setAnnouncementBarColor("bg-product-red"); 26 | break; 27 | case "bg-product-purple-light": 28 | setAnnouncementBarColor("bg-product-purple-light"); 29 | break; 30 | case "bg-product-purple-dark": 31 | setAnnouncementBarColor("bg-product-purple-dark"); 32 | break; 33 | case "bg-product-yellow": 34 | setAnnouncementBarColor("bg-product-yellow"); 35 | break; 36 | case "bg-product-pink": 37 | setAnnouncementBarColor("bg-product-pink"); 38 | break; 39 | case "bg-white": 40 | setAnnouncementBarColor("bg-white"); 41 | break; 42 | case "bg-product-blue": 43 | setAnnouncementBarColor("bg-product-blue"); 44 | break; 45 | case "bg-product-brown": 46 | setAnnouncementBarColor("bg-product-brown"); 47 | break; 48 | } 49 | }, [color]); 50 | 51 | useEffect(() => { 52 | if ( 53 | [ 54 | "bg-product-red", 55 | "bg-product-purple-light", 56 | "bg-product-purple-dark", 57 | "bg-product-brown", 58 | "bg-product-pink", 59 | ].includes(announcementBarColor) 60 | ) { 61 | setAnnouncementBarTextColor("text-white"); 62 | } 63 | }, [announcementBarColor]); 64 | 65 | if (announcementBarVisibility) { 66 | return ( 67 | 68 |
72 |
73 |
76 | {children} 77 |
78 | {announcementBarVisibility && ( 79 | 87 | )} 88 |
89 |
90 | 91 | ); 92 | } 93 | return ; 94 | }; 95 | 96 | export default AnnouncementBar; 97 | -------------------------------------------------------------------------------- /components/CommunityNarratives/index.tsx: -------------------------------------------------------------------------------- 1 | // Basic Imports 2 | import React, { useState } from "react"; 3 | import Image from "next/image"; 4 | 5 | // Components Imports 6 | import { CommunityNarrativesCardSkeleton } from "@/components/ui-patterns/Skeleton"; 7 | 8 | const CommunityNarratives: React.FunctionComponent = () => { 9 | // TODO 10 | // change the usetstate type after we are sure about data types 11 | const [communityNarrativesData, setCommunityNarrativesData] = useState( 12 | [] 13 | ); 14 | 15 | return ( 16 | 17 |
18 |
19 |

20 | {"Community Narratives"} 21 |

22 |

23 | {"listen from the community"} 24 |

25 |
26 |
27 | {communityNarrativesData?.length > 0 ? ( 28 | communityNarrativesData?.map( 29 | ( 30 | communityNarrative: any, 31 | communityNarrativeIndex: number 32 | ) =>
33 | ) 34 | ) : ( 35 | 36 | 37 | 38 | 39 | 40 | 41 | )} 42 |
43 |
44 | community-narrartives-illustration 50 |
51 |
52 |
53 |
54 | 55 | ); 56 | }; 57 | 58 | export default CommunityNarratives; 59 | -------------------------------------------------------------------------------- /components/EmojiLayer/emoji-list-data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "confetti", 4 | "imageName": "confetti-emoji.svg" 5 | }, 6 | { 7 | "name": "school-bag", 8 | "imageName": "school-bag-emoji.svg", 9 | "isHighlighted": true, 10 | "isActive": true 11 | }, 12 | { 13 | "name": "color-palette", 14 | "imageName": "color-palette-emoji.svg" 15 | }, 16 | { 17 | "name": "rocket", 18 | "imageName": "rocket-emoji.svg" 19 | }, 20 | { 21 | "name": "books", 22 | "imageName": "books-emoji.svg" 23 | }, 24 | { 25 | "name": "open-eyes", 26 | "imageName": "open-eyes-emoji.svg" 27 | }, 28 | { 29 | "name": "heart-eyes", 30 | "imageName": "heart-eyes-emoji.svg" 31 | }, 32 | { 33 | "name": "magic-ball", 34 | "imageName": "magic-ball-emoji.svg" 35 | } 36 | ] 37 | -------------------------------------------------------------------------------- /components/EmojiLayer/index.tsx: -------------------------------------------------------------------------------- 1 | // Basic Imports 2 | import React, { useState } from "react"; 3 | import { useRef } from "react"; 4 | import Image from "next/image"; 5 | 6 | // Components Imports 7 | import EmojiLayerData from "./emoji-list-data.json"; 8 | import { Tooltip } from 'react-tooltip' 9 | 10 | // Types Imports 11 | import { EmojiType } from "@/types/emoji-type"; 12 | import ModalView from "@/components/ui-patterns/ModalView"; 13 | import Link from "next/link"; 14 | 15 | const EmojiLayer: React.FunctionComponent = () => { 16 | const emojiLayerRef = useRef>(EmojiLayerData); 17 | const [highlitablePopupView, setHighlightablePopupView] = useState(false); 18 | 19 | return ( 20 | 21 |
22 | {emojiLayerRef.current?.map((emoji: EmojiType, emojiIndex: number) => ( 23 | 24 | {emoji?.isActive 25 | ? 26 | 43 | 44 |

{"🎒 Build Program is now live"}

45 |

46 | {"The Build Program by HEKORS is now live. The Program will be running for next 1.5 months"} 47 |

48 |
49 | 54 | {"→ Visit Build Program website"} 55 | 56 |
57 | 58 | 59 | : {emoji?.name} 68 | } 69 | 70 | ))} 71 |
72 | 73 | ); 74 | }; 75 | 76 | export default EmojiLayer; 77 | -------------------------------------------------------------------------------- /components/Footer/footer-data.ts: -------------------------------------------------------------------------------- 1 | // Types Imports 2 | import { FooterOptionType, SocialLinkType } from "@/types/footer-option-type"; 3 | 4 | const communityLinks: Array = [ 5 | { title: "Contact Us", link: "https://github.com/hekors" }, 6 | { title: "Organize with HEKORS", link: "https://github.com/hekors/.github" }, 7 | { 8 | title: "Community Guidelines", 9 | link: "https://github.com/hekors/.github/blob/master/CODE_OF_CONDUCT.md", 10 | }, 11 | { 12 | title: "Join Team", 13 | link: "https://github.com/hekors/.github/tree/master/profile", 14 | }, 15 | { 16 | title: "Community Gallery", 17 | link: "https://drive.google.com/drive/folders/1gR_6eD7SiPNjSc79Aykg0m8gnKcsP0rp?usp=share_link", 18 | }, 19 | ]; 20 | 21 | const directLinks: Array = [ 22 | { title: "Hackathons", path: "" }, 23 | { 24 | title: "Open Source", 25 | link: "https://github.com/hekors/.github/blob/master/open-source/README.md", 26 | }, 27 | { title: "MLH.io", link: "https://mlh.io" }, 28 | { title: "Offline Meetups", path: "" }, 29 | { 30 | title: "Avengers at HEKORS", 31 | link: "https://github.com/hekors/.github/blob/master/profile/avengers-at-hekors.md", 32 | }, 33 | ]; 34 | 35 | const socialLinks: Array = [ 36 | { 37 | iconPath: "discord-icon.svg", 38 | label: "discord", 39 | link: "https://discord.gg/eqYJgB8A57", 40 | }, 41 | { 42 | iconPath: "twitter-icon.svg", 43 | label: "twitter", 44 | link: "https://twitter.com/hekorscommunity", 45 | }, 46 | { 47 | iconPath: "bmac-icon.svg", 48 | label: "buy-me-a-coffee", 49 | link: "https://www.buymeacoffee.com/wh0sumit", 50 | }, 51 | { 52 | iconPath: "whatsapp-icon.svg", 53 | label: "whatsapp", 54 | link: "https://chat.whatsapp.com/GjIdIUYccWd1J6kWDEtxTB", 55 | }, 56 | { 57 | iconPath: "notion-icon.svg", 58 | label: "notion", 59 | link: "https://www.notion.so/yashsehgal/HEKORS-Community-Updates-dd27307cb56d4e0d87efad9983e3329c", 60 | }, 61 | { iconPath: "luma-icon.svg", label: "luma", link: "https://lu.ma/hekors" }, 62 | ]; 63 | 64 | export { communityLinks, directLinks, socialLinks }; 65 | -------------------------------------------------------------------------------- /components/Footer/index.tsx: -------------------------------------------------------------------------------- 1 | // Basic Imports 2 | import React from "react"; 3 | import Image from "next/image"; 4 | import Link from "next/link"; 5 | 6 | // Components Imports 7 | import Button from "@/components/ui-patterns/Button"; 8 | import { communityLinks, directLinks, socialLinks } from "./footer-data"; 9 | 10 | // Types Imports 11 | import { FooterOptionType, SocialLinkType } from "@/types/footer-option-type"; 12 | 13 | type Props = FooterOptionType | SocialLinkType; 14 | 15 | const Footer: React.FunctionComponent = () => { 16 | return ( 17 | 18 |
19 |
20 |
21 | hekors 22 | 23 | 24 | {"hekors"} 25 | 26 | 27 | {"Advocating Open Source, Hackathons and Engineering"} 28 | 29 | 30 |
31 |
32 |
33 |

34 | 35 | {"make sure you join the"} 36 | 37 | {" discord"} 38 |

39 | 42 |
43 |
44 |
45 |
46 |

47 | {"Community"} 48 |

49 |
    50 | {communityLinks?.map( 51 | ( 52 | footerOption: FooterOptionType, 53 | footerOptionIndex: number 54 | ) => ( 55 |
  • 59 | {footerOption?.link && ( 60 | 61 | 62 | {footerOption?.title} 63 | 64 | 65 | )} 66 | {footerOption?.path && ( 67 | 68 | 69 | {footerOption?.title} 70 | 71 | 72 | )} 73 |
    • 74 | ) 75 | )} 76 |
77 |
78 |
79 |

80 | {"Direct Links"} 81 |

82 |
    83 | {directLinks?.map( 84 | ( 85 | footerOption: FooterOptionType, 86 | footerOptionIndex: number 87 | ) => ( 88 |
  • 92 | {footerOption?.link && ( 93 | 94 | 95 | {footerOption?.title} 96 | 97 | 98 | )} 99 | {footerOption?.path && ( 100 | 101 | 102 | {footerOption?.title} 103 | 104 | 105 | )} 106 |
    • 107 | ) 108 | )} 109 |
110 |
111 |
112 |
113 | {socialLinks?.map( 114 | (socialLink: SocialLinkType, socialLinkIndex: number) => ( 115 | 120 | 121 | {socialLink?.label 129 | 130 | 131 | ) 132 | )} 133 |
134 |
135 |
136 |

137 | ©{" "} 138 | {"HEKORS Community " + 139 | new Date().getFullYear() + 140 | "-" + 141 | Number(new Date().getFullYear() + 1)} 142 |

143 |
144 |
145 | 146 | ); 147 | }; 148 | 149 | export default Footer; 150 | -------------------------------------------------------------------------------- /components/GetStarted/get-started-data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": { 4 | "emoji": "🔮", 5 | "text" : "Open Source" 6 | }, 7 | "bgColor": "bg-product-red", 8 | "description": [ 9 | "Get started by contributing to open source projects with a wide range of technology stack - Such as React" 10 | ], 11 | "path": "https://github.com/hekors/.github/blob/master/open-source/README.md", 12 | "hasNewTab": true 13 | }, 14 | { 15 | "title": { 16 | "emoji": "🎨", 17 | "text" : "Designing Sessions" 18 | }, 19 | "bgColor": "bg-product-purple-light", 20 | "description": [ 21 | "Join our sprint based design sessions on Discord. Learn about UX Design, UI Design/Dev, Design Systems Engineering, Graphic Design and building some cool stuff" 22 | ], 23 | "path": "/design-sessions" 24 | }, 25 | { 26 | "title": { 27 | "emoji": "💻", 28 | "text" : "Hackathons with MLH" 29 | }, 30 | "bgColor": "bg-product-yellow", 31 | "description": [ 32 | "We actively participate in MLH organized hackathons and events. Join HEKORS guild and learn through building cool projects - Build your project portfolio" 33 | ], 34 | "path": "/hackathons/with-mlh" 35 | }, 36 | { 37 | "title": { 38 | "emoji": "🎉", 39 | "text" : "Offline Meetups" 40 | }, 41 | "bgColor": "bg-white", 42 | "description": [ 43 | "Join us in offline meetups where we connect in person with all the community members. Checkout for upcoming offline meetups." 44 | ], 45 | "path": "https://lu.ma/community/com-JOfvbmBawEqrJuk/calendar", 46 | "hasNewTab": true 47 | }, 48 | { 49 | "title": { 50 | "emoji": "📷", 51 | "text" : "Community Gallery" 52 | }, 53 | "bgColor": "bg-product-pink", 54 | "description": [ 55 | "A small and fun gallery of our online/offline meetups, team outings, events and hackathons we've been to." 56 | ], 57 | "path": "https://drive.google.com/drive/folders/1gR_6eD7SiPNjSc79Aykg0m8gnKcsP0rp?usp=share_link", 58 | "hasNewTab": true 59 | } 60 | ] 61 | -------------------------------------------------------------------------------- /components/GetStarted/index.tsx: -------------------------------------------------------------------------------- 1 | // Basic Imports 2 | import React from "react"; 3 | import Link from "next/link"; 4 | import { useEffect, useRef, useState } from "react"; 5 | 6 | // Component Imports 7 | import GetStartedData from "./get-started-data.json"; 8 | 9 | // Types Imports 10 | import { GetStartedItemType } from "@/types/get-started-item-type"; 11 | 12 | const GetStarted: React.FunctionComponent = () => { 13 | const getStartedRef = useRef>(GetStartedData); 14 | 15 | return ( 16 | 17 |
18 |
19 |

20 | {"Get Started"} 21 |

22 |

23 | 24 | {"A space to learn, build & grow"} 25 | 26 | {"together."} 27 |

28 | 29 |
30 | {getStartedRef.current?.map( 31 | (getStartedItem: GetStartedItemType, getStartedIndex: number) => ( 32 | 40 | ) 41 | )} 42 |
43 |
44 |
45 | 46 | ); 47 | }; 48 | 49 | function GetStartedItem( 50 | { 51 | title, 52 | bgColor = "bg-white", 53 | description, 54 | path, 55 | hasNewTab, 56 | }: GetStartedItemType, 57 | props: any 58 | ) { 59 | const [backgroundColor, setBackgroundColor] = useState(bgColor); 60 | const [cardTextColor, setCardTextColor] = useState("text-black"); 61 | 62 | useEffect(() => { 63 | switch (bgColor) { 64 | case "bg-product-red": 65 | setBackgroundColor("bg-product-red"); 66 | break; 67 | case "bg-product-purple-light": 68 | setBackgroundColor("bg-product-purple-light"); 69 | break; 70 | case "bg-product-purple-dark": 71 | setBackgroundColor("bg-product-purple-dark"); 72 | break; 73 | case "bg-product-yellow": 74 | setBackgroundColor("bg-product-yellow"); 75 | break; 76 | case "bg-product-pink": 77 | setBackgroundColor("bg-product-pink"); 78 | break; 79 | case "bg-white": 80 | setBackgroundColor("bg-white"); 81 | break; 82 | case "bg-product-blue": 83 | setBackgroundColor("bg-product-blue"); 84 | break; 85 | case "bg-product-brown": 86 | setBackgroundColor("bg-product-brown"); 87 | break; 88 | } 89 | }, [bgColor]); 90 | 91 | useEffect(() => { 92 | if ( 93 | [ 94 | "bg-product-red", 95 | "bg-product-purple-light", 96 | "bg-product-purple-dark", 97 | "bg-product-brown", 98 | "bg-product-pink", 99 | ].includes(backgroundColor) 100 | ) { 101 | setCardTextColor("text-white"); 102 | } 103 | }, [backgroundColor]); 104 | 105 | return ( 106 | 107 |
108 | 109 |
114 | 115 | 116 | {title?.emoji} 117 | 118 | 119 | {title?.text} 120 | 121 | 122 |
123 | 124 |
125 | {description} 126 |
127 |
128 | 129 | ); 130 | } 131 | 132 | export default GetStarted; 133 | -------------------------------------------------------------------------------- /components/HackathonCTA/index.tsx: -------------------------------------------------------------------------------- 1 | // Basic Imports 2 | import React from "react"; 3 | import Image from "next/image"; 4 | import Link from "next/link"; 5 | 6 | // Components Imports 7 | import Button from "@/components/ui-patterns/Button"; 8 | 9 | const HackathonCTA: React.FunctionComponent = () => { 10 | return ( 11 | 12 |
13 |
14 |
15 | skills-illustration 22 |
23 |
24 |

25 | 26 | {"Attend a"} 27 | {"Hackathon"} 28 | 29 | {"Create a team."} 30 | {"Build Projects."} 31 | {"Upgrade your portfolio."} 32 |

33 |
34 | 35 | 38 | 39 |
40 |
41 |
42 | 43 | ); 44 | }; 45 | 46 | export default HackathonCTA; 47 | -------------------------------------------------------------------------------- /components/MetaHead/index.tsx: -------------------------------------------------------------------------------- 1 | import { MetaHeadType } from '@/types/meta-head-type' 2 | import Head from 'next/head' 3 | 4 | const MetaHead: React.FunctionComponent = ({ 5 | title="HEKORS Community", 6 | description="Learn in public, Build in public", 7 | children 8 | }: MetaHeadType, props) => { 9 | return ( 10 | 11 | {`${title} - ${description}`} 12 | 13 | 14 | 15 | 16 | {children} 17 | 18 | ) 19 | } 20 | 21 | export default MetaHead -------------------------------------------------------------------------------- /components/Navbar/index.tsx: -------------------------------------------------------------------------------- 1 | // Basic Imports 2 | import React from "react"; 3 | import Image from "next/image"; 4 | import Link from "next/link"; 5 | import { useRef } from "react"; 6 | 7 | // Components Imports 8 | import Button from "@/components/ui-patterns/Button"; 9 | import NavbarOptionsData from "./navbar-options.json"; 10 | 11 | // Types Imports 12 | import { NavbarOptionType } from "@/types/navbar-option-type"; 13 | 14 | const Navbar: React.FunctionComponent = () => { 15 | const navbarOptionsRef = useRef>(NavbarOptionsData); 16 | 17 | return ( 18 |
19 |
20 | 21 | 22 | hekors 29 | 30 | 31 | 32 | {navbarOptionsRef.current?.map( 33 | (navbarOption: NavbarOptionType, navbarOptionIndex: number) => ( 34 | 35 | 36 | {navbarOption?.label} 37 | 38 | 39 | ) 40 | )} 41 | 42 |
43 |
44 | 48 | 49 | {"meet"} 50 | {" avengers"} 51 | 52 | 53 | 54 | 55 | 56 |
57 |
58 | ); 59 | }; 60 | 61 | export default Navbar; 62 | -------------------------------------------------------------------------------- /components/Navbar/navbar-options.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "label": "🗓️ Past Events", 4 | "path": "/events/past-events" 5 | } 6 | ] -------------------------------------------------------------------------------- /components/OrganizeWithUs/index.tsx: -------------------------------------------------------------------------------- 1 | // Basic Imports 2 | import React from "react"; 3 | import Link from "next/link"; 4 | 5 | // Components Imports 6 | import Callout from "@/components/ui-patterns/Callout"; 7 | import Button from "@/components/ui-patterns/Button"; 8 | 9 | const OrganizeWithUs: React.FunctionComponent = () => { 10 | return ( 11 | 12 |
13 |
14 | {"Collaborate with us"} 15 |

16 | {"Organize an event"} 17 | {"with hekors"} 18 |

19 |
20 | 23 | 28 | 31 | 32 |
33 |
34 |
35 | 36 | ); 37 | }; 38 | 39 | export default OrganizeWithUs; 40 | -------------------------------------------------------------------------------- /components/Team/index.tsx: -------------------------------------------------------------------------------- 1 | // Basic Imports 2 | import Image from "next/image"; 3 | import Link from "next/link"; 4 | import React, { useState } from "react"; 5 | 6 | // JSON Imports 7 | import TeamMembersData from "@/common/dataSource/team-data.json"; 8 | 9 | // Components Imports 10 | import { TeamMemberCardSkeleton } from "@/components/ui-patterns/Skeleton"; 11 | 12 | // Types Imports 13 | import { TeamMemberCardType } from "@/types/team-type"; 14 | 15 | // Icon Imports 16 | import { FaGithub, FaInstagram, FaLinkedinIn, FaTwitter } from "react-icons/fa"; 17 | 18 | const Team: React.FunctionComponent = () => { 19 | const [teamMembersData, setTeamMembersData] = useState(TeamMembersData); 20 | 21 | // START: temporary code removal: THIS CODE BLOCK WILL BE UNDER USAGE AFTER STRAPI FIX ======== 22 | // useEffect(() => { 23 | // (async () => { 24 | // await getTeamData() 25 | // .then((dataResponse) => { 26 | // console.log("logging from team", dataResponse); 27 | // setTeamMembersData(dataResponse); 28 | // }) 29 | // .catch((err) => { 30 | // console.log("Error log from Teams Page: ", err); 31 | // }); 32 | // }).call({}); 33 | // console.log("data from component: ", teamMembersData); 34 | // }, []); 35 | // END: temporary code removal: THIS CODE BLOCK WILL BE UNDER USAGE AFTER STRAPI FIX ======== 36 | 37 | return ( 38 | 39 |
40 |
41 |

42 | {"The Team"} 43 |

44 |

45 | 46 | {"Meet the"} 47 | {" builders"} 48 | 49 | {"behind hekors."} 50 |

51 | 52 |
53 | {teamMembersData?.length > 0 ? ( 54 | teamMembersData?.map( 55 | (teamMember: TeamMemberCardType, teamMemberIndex: number) => ( 56 | 76 | ) 77 | ) 78 | ) : ( 79 |
80 | 81 | 82 | 83 | 84 |
85 | )} 86 |
87 |
88 |
89 | 90 | ); 91 | }; 92 | 93 | function TeamMemberCard( 94 | { 95 | picture, 96 | fullName, 97 | isAvenger, 98 | directWebsite, 99 | socialProfile, 100 | description, 101 | }: TeamMemberCardType, 102 | props: any 103 | ) { 104 | return ( 105 | 106 |
110 |
111 | team-mate 119 |
120 |
121 |
122 |
123 |

124 | {fullName?.firstName + " " + fullName?.lastName} 125 |

126 | {directWebsite?.link && ( 127 | 128 | 133 | {directWebsite?.label} 134 | 135 | 136 | )} 137 |
138 | {isAvenger && ( 139 | 140 | {"AVENGER"} 141 | 142 | )} 143 |
144 |
145 | {socialProfile?.twitterUsername && ( 146 | 150 | 151 | 152 | )} 153 | {socialProfile?.instagramUsername && ( 154 | 158 | 159 | 160 | )} 161 | {socialProfile?.linkedInUsername && ( 162 | 166 | 167 | 168 | )} 169 | {socialProfile?.githubUsername && ( 170 | 174 | 175 | 176 | )} 177 |
178 |

179 | {description} 180 |

181 |
182 |
183 | 184 | ); 185 | } 186 | 187 | export default Team; 188 | -------------------------------------------------------------------------------- /components/UpcomingEvents/index.tsx: -------------------------------------------------------------------------------- 1 | // Basic Imports 2 | import React from "react"; 3 | 4 | const UpComingEvents: React.FunctionComponent = () => { 5 | return ; 6 | }; 7 | 8 | export default UpComingEvents; 9 | -------------------------------------------------------------------------------- /components/UpcomingHackathons/index.tsx: -------------------------------------------------------------------------------- 1 | // Basic Imports 2 | import Link from "next/link"; 3 | import React, { useEffect, useState } from "react"; 4 | 5 | // Components Imports 6 | import { getUpcomingHackathons } from "@/middleware/hackathons-api"; 7 | import { parseDate } from "@/common/utils"; 8 | import Button from "@/components/ui-patterns/Button"; 9 | 10 | // Types Imports 11 | import { HackathonCardType } from "@/types/hackathon-types"; 12 | import { HackathonCardSkeleton } from "@/components/ui-patterns/Skeleton"; 13 | 14 | const UpcomingHackathons: React.FunctionComponent = () => { 15 | const [upcomingHackathonsData, setUpcomingHackathonsData] = useState([]); 16 | 17 | useEffect(() => { 18 | (async () => { 19 | await getUpcomingHackathons() 20 | .then((dataResponse) => { 21 | console.log( 22 | "logging from upcoming hackathons component", 23 | dataResponse 24 | ); 25 | setUpcomingHackathonsData(dataResponse); 26 | }) 27 | .catch((err) => { 28 | console.log("Error log from upcoming hackathons component", err); 29 | }); 30 | }).call({}); 31 | }, []); 32 | 33 | return ( 34 | 35 |
36 |
37 |
38 |

39 | {"Events / Hackathons"} 40 |

41 |

42 | {"Upcoming Hackathons"} 43 |

44 |
45 |
46 | 49 | 52 |
53 |
54 |
55 | {upcomingHackathonsData?.length > 0 ? ( 56 | upcomingHackathonsData?.map( 57 | ( 58 | upcomingHackathon: HackathonCardType, 59 | upcomingHackathonIndex: number 60 | ) => ( 61 | 72 | ) 73 | ) 74 | ) : ( 75 |
76 | 77 | 78 | 79 | 80 |
81 | )} 82 |
83 | 86 | 89 |
90 |
91 |
92 | 93 | ); 94 | }; 95 | 96 | // TODO: Write a better UI Layout for Hackathon Logo 97 | 98 | function HackathonCard( 99 | { 100 | hackathonTitle, 101 | hackathonOrganizer, 102 | isHackathonOffline, 103 | hackathonStartDate, 104 | hackathonEndDate, 105 | hackathonBG, 106 | hackathonLogo, 107 | hackathonSlugID, 108 | }: HackathonCardType, 109 | props: any 110 | ) { 111 | return ( 112 | 113 | 114 |
118 |
126 |
127 |

128 | {hackathonTitle} 129 |

130 |

131 | {"by, " + hackathonOrganizer} 132 |

133 |

134 | {"Starts from " + 135 | parseDate(hackathonStartDate)?.date + 136 | " " + 137 | parseDate(hackathonStartDate)?.month + 138 | " " + 139 | parseDate(hackathonStartDate)?.year} 140 |

141 | {isHackathonOffline && ( 142 |

143 | {"Offline"} 144 |

145 | )} 146 | {!isHackathonOffline && ( 147 |

148 | {"Online"} 149 |

150 | )} 151 |
152 |
153 | 154 | 155 | ); 156 | } 157 | 158 | export default UpcomingHackathons; 159 | -------------------------------------------------------------------------------- /components/UpcomingSessions/index.tsx: -------------------------------------------------------------------------------- 1 | // Basic Imports 2 | import React, { useState } from "react"; 3 | 4 | // Components Imports 5 | import Button from "@/components/ui-patterns/Button"; 6 | import { SessionCardSkeleton } from "@/components/ui-patterns/Skeleton"; 7 | 8 | const UpcomingSessions: React.FunctionComponent = () => { 9 | const [upcomingSessionsData, setUpcomingSessionsData] = useState([]); 10 | 11 | return ( 12 | 13 |
14 |
15 |
16 |
17 |
18 |

19 | {"Events / Sessions"} 20 |

21 |

22 | {"Upcoming Sessions"} 23 |

24 |
25 |
26 | 29 | 32 |
33 |
34 |
35 | {upcomingSessionsData?.length > 0 ? ( 36 | upcomingSessionsData?.map( 37 | (upcomingSession: any, upcomingSessionIndex: number) => ( 38 | 39 | ) 40 | ) 41 | ) : ( 42 |
43 | 44 | 45 | 46 | 47 |
48 | )} 49 |
50 | 53 | 56 |
57 |
58 |
59 |
60 |
61 | 62 | ); 63 | }; 64 | 65 | function SessionCard() { 66 | return ( 67 | 68 |
{"Session Card"}
69 | 70 | ); 71 | } 72 | 73 | export default UpcomingSessions; 74 | -------------------------------------------------------------------------------- /components/ui-patterns/Button.tsx: -------------------------------------------------------------------------------- 1 | // Basic Imports 2 | import React, { useEffect, useRef, useState } from "react"; 3 | 4 | // Types Imports 5 | import { ButtonType } from "@/types/ui-pattern-types/button-type"; 6 | 7 | const Button: React.FunctionComponent = ( 8 | { children, type, shade = "product-orange", isActive = true }, 9 | props: any 10 | ) => { 11 | const [buttonType, setButtonType] = useState( 12 | "product-button-secondary" 13 | ); 14 | const [buttonShade, setButtonShade] = useState("product-orange"); 15 | const [buttonShadowSize, setButtonShadowSize] = useState("5px 5px"); 16 | const isButtonActive = useRef(isActive ? true : false); 17 | 18 | useEffect(() => { 19 | switch (type) { 20 | case "primary": 21 | setButtonType("product-button-primary"); 22 | break; 23 | default: 24 | setButtonType("product-button-secondary"); 25 | break; 26 | } 27 | }, [type]); 28 | 29 | useEffect(() => { 30 | switch (shade) { 31 | case "product-red": 32 | setButtonShade("#FF4E4E"); 33 | break; 34 | case "product-pink": 35 | setButtonShade("#FF008A"); 36 | break; 37 | case "product-orange": 38 | setButtonShade("#FF833E"); 39 | break; 40 | case "product-purple-dark": 41 | setButtonShade("#5B23FA"); 42 | break; 43 | case "product-purple-light": 44 | setButtonShade("#7C4EFF"); 45 | break; 46 | case "product-teal": 47 | setButtonShade("#12C0AB"); 48 | break; 49 | case "product-yellow": 50 | setButtonShade("#FFB800"); 51 | break; 52 | case "product-blue": 53 | setButtonShade("#4E95FF"); 54 | break; 55 | case "product-brown": 56 | setButtonShade("#231C18"); 57 | break; 58 | default: 59 | setButtonShade(shade); 60 | break; 61 | } 62 | }, [shade]); 63 | 64 | return ( 65 | 66 | 79 | 80 | ); 81 | }; 82 | 83 | export default Button; 84 | -------------------------------------------------------------------------------- /components/ui-patterns/Callout.tsx: -------------------------------------------------------------------------------- 1 | // Basic Imports 2 | import React from "react"; 3 | import Image from "next/image"; 4 | 5 | // Types Imports 6 | import { CalloutType } from "@/types/ui-pattern-types/callout-type"; 7 | 8 | const Callout: React.FunctionComponent = ( 9 | { children, className }: CalloutType, 10 | props: any 11 | ) => { 12 | return ( 13 | 14 | 18 | 19 | callout 26 | 27 | 28 | {children || "DemoCallout"} 29 | 30 | 31 | 32 | ); 33 | }; 34 | 35 | export default Callout; 36 | -------------------------------------------------------------------------------- /components/ui-patterns/ModalView.tsx: -------------------------------------------------------------------------------- 1 | import { ModalViewType } from "@/types/ui-pattern-types/modal-view-type"; 2 | import ReactModal from "react-modal"; 3 | import Button from "./Button"; 4 | 5 | ReactModal.setAppElement("body"); 6 | 7 | const ModalView: React.FunctionComponent = ({ 8 | children, 9 | title, 10 | isOpen=true, 11 | modalViewAction 12 | }, props: any) => { 13 | return ( 14 | modalViewAction(false)} {...props} 15 | shouldCloseOnEsc 16 | shouldReturnFocusAfterClose 17 | style={{ 18 | overlay: { 19 | background: "rgba(0, 0, 0, 0.300)", 20 | display: "flex", 21 | flexDirection: "row", 22 | alignItems: "center", 23 | justifyContent: "center", 24 | }, 25 | content: { 26 | marginRight: "auto", 27 | marginLeft: "auto", 28 | marginTop: "6rem", 29 | width: "fit-content", 30 | minWidth: "420px", 31 | maxWidth: "600px", 32 | height: "fit-content", 33 | minHeight: "300px", 34 | maxHeight: "800px", 35 | padding: "0px", 36 | borderColor: "black", 37 | borderWidth: "2px", 38 | borderStyle: "solid", 39 | boxShadow: "5px 5px black" 40 | } 41 | }} 42 | > 43 |
44 | {title ?

{title}

: } 45 |
46 |
47 | {children} 48 |
modalViewAction(false)}> 49 | 52 |
53 |
54 | 55 | ) 56 | }; 57 | 58 | export default ModalView; -------------------------------------------------------------------------------- /components/ui-patterns/Skeleton.tsx: -------------------------------------------------------------------------------- 1 | // Basic Imports 2 | import React, { useRef } from "react"; 3 | 4 | // Library Imports 5 | import Skeleton from "react-loading-skeleton"; 6 | import "react-loading-skeleton/dist/skeleton.css"; 7 | 8 | // Types Imports 9 | import { SkeletonType } from "@/types/ui-pattern-types/skeleton-types"; 10 | 11 | const HackathonCardSkeleton: React.FunctionComponent = ({ 12 | visibility, 13 | }) => { 14 | return ( 15 | 16 |
17 |
18 | 19 |
20 |
21 | 26 | 31 | 38 |
39 |
40 | 41 | ); 42 | }; 43 | 44 | const SessionCardSkeleton: React.FunctionComponent = ({ 45 | visibility, 46 | }) => { 47 | return ( 48 | 49 |
50 |
51 | 52 |
53 |
54 | 59 | 64 | 71 |
72 |
73 | 74 | ); 75 | }; 76 | 77 | const CommunityNarrativesCardSkeleton: React.FunctionComponent< 78 | SkeletonType 79 | > = ({ visibility }) => { 80 | return ( 81 | 82 |
83 |
84 | 85 |
86 | 91 | 96 |
97 | 104 |
105 |
106 | 107 | ); 108 | }; 109 | 110 | const TeamMemberCardSkeleton: React.FunctionComponent = ({ 111 | visibility, 112 | }) => { 113 | return ( 114 | 115 |
116 | 117 |
118 | 123 | 128 |
129 |
130 | 131 | ); 132 | }; 133 | 134 | export { 135 | HackathonCardSkeleton, 136 | SessionCardSkeleton, 137 | CommunityNarrativesCardSkeleton, 138 | TeamMemberCardSkeleton, 139 | }; 140 | -------------------------------------------------------------------------------- /context/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hekors/website/5b2f334752ac78d5fe182bf4f29eadf4c87b4489/context/.gitkeep -------------------------------------------------------------------------------- /middleware/hackathons-api.ts: -------------------------------------------------------------------------------- 1 | // Library Imports 2 | import axios from "axios"; 3 | 4 | // Components Imports 5 | import { HackathonCardType } from "@/types/hackathon-types"; 6 | import { baseURL, mediaURL } from "@/common/utils"; 7 | 8 | async function getAllHackathons() { 9 | let allHackathonsResponse: any = []; 10 | 11 | await axios 12 | .get(baseURL + "/api/hackathons") 13 | .then((hackathonResponse: any) => { 14 | hackathonResponse?.data?.data 15 | ?.map(async (response: any) => { 16 | const responseAttribute: any = response?.attributes; 17 | const _hackathonData: HackathonCardType = { 18 | hackathonTitle: responseAttribute?.hackathonTitle, 19 | hackathonOrganizer: responseAttribute?.hackathonOrganizer, 20 | isHackathonOffline: responseAttribute?.isHackathonOffline, 21 | isHackathonCompleted: responseAttribute?.isHackathonCompleted, 22 | hackathonLogo: { 23 | file: responseAttribute?.hackathonLogo, 24 | logoID: mediaURL(responseAttribute?.hackathonLogoID), 25 | }, 26 | hackathonBG: { 27 | file: responseAttribute?.hackathonBG, 28 | logoID: mediaURL(responseAttribute?.hackathonBGID), 29 | }, 30 | hackathonStartDate: responseAttribute?.hackathonStartDate, 31 | hackathonEndDate: responseAttribute?.hackathonEndDate, 32 | hackathonSlugID: responseAttribute?.hackathonSlugID, 33 | }; 34 | hackathonResponse = [await _hackathonData, ...hackathonResponse]; 35 | }) 36 | .catch((err: any) => { 37 | throw new Error(err); 38 | }) 39 | .finally(() => { 40 | // do something 41 | }); 42 | }); 43 | 44 | return allHackathonsResponse; 45 | } 46 | 47 | async function getHackathon(_hackathonID: string) { 48 | await axios 49 | .get(baseURL + "/api/hackathons/" + _hackathonID) 50 | .then((hackathonResponse: any) => { 51 | // write code for hackathon-id content here 52 | }); 53 | } 54 | 55 | async function getPastHackathons() { 56 | let allHackathonsResponse: any = []; 57 | let pastHackathonsResponse: any = []; 58 | 59 | await axios 60 | .get(baseURL + "/api/hackathons") 61 | .then((hackathonResponse: any) => { 62 | hackathonResponse?.data?.data?.map(async (response: any) => { 63 | const responseAttribute: any = response?.attributes; 64 | const _hackathonData: HackathonCardType = { 65 | hackathonTitle: responseAttribute?.hackathonTitle, 66 | hackathonOrganizer: responseAttribute?.hackathonOrganizer, 67 | isHackathonOffline: responseAttribute?.isHackathonOffline, 68 | isHackathonCompleted: responseAttribute?.isHackathonCompleted, 69 | hackathonLogo: { 70 | file: responseAttribute?.hackathonLogo, 71 | logoID: mediaURL(responseAttribute?.hackathonLogoID), 72 | }, 73 | hackathonBG: { 74 | file: responseAttribute?.hackathonBG, 75 | logoID: mediaURL(responseAttribute?.hackathonBGID), 76 | }, 77 | hackathonStartDate: responseAttribute?.hackathonStartDate, 78 | hackathonEndDate: responseAttribute?.hackathonEndDate, 79 | hackathonSlugID: responseAttribute?.hackathonSlugID, 80 | }; 81 | hackathonResponse = [await _hackathonData, ...hackathonResponse]; 82 | }); 83 | }); 84 | 85 | allHackathonsResponse?.map((hackathon: HackathonCardType) => { 86 | if (hackathon?.isHackathonCompleted) { 87 | pastHackathonsResponse = [hackathon, ...pastHackathonsResponse]; 88 | } 89 | }); 90 | 91 | return pastHackathonsResponse; 92 | } 93 | 94 | async function getUpcomingHackathons() { 95 | let allHackathonsResponse: any = []; 96 | let upcomingHackathonsResponse: any = []; 97 | 98 | await axios 99 | .get(baseURL + "/api/hackathons") 100 | .then((hackathonResponse: any) => { 101 | console.log("data for hackathons", hackathonResponse); 102 | hackathonResponse?.data?.data?.map(async (response: any) => { 103 | const responseAttribute: any = response?.attributes; 104 | const _hackathonData: HackathonCardType = { 105 | hackathonTitle: responseAttribute?.hackathonTitle, 106 | hackathonOrganizer: responseAttribute?.hackathonOrganizer, 107 | isHackathonOffline: responseAttribute?.isHackathonOffline, 108 | isHackathonCompleted: responseAttribute?.isHackathonCompleted, 109 | hackathonLogo: { 110 | file: responseAttribute?.hackathonLogo, 111 | logoID: mediaURL(responseAttribute?.hackathonLogoID), 112 | }, 113 | hackathonBG: { 114 | file: responseAttribute?.hackathonBG, 115 | logoID: mediaURL(responseAttribute?.hackathonBGID), 116 | }, 117 | hackathonStartDate: responseAttribute?.hackathonStartDate, 118 | hackathonEndDate: responseAttribute?.hackathonEndDate, 119 | hackathonSlugID: responseAttribute?.hackathonSlugID, 120 | }; 121 | allHackathonsResponse = [ 122 | await _hackathonData, 123 | ...allHackathonsResponse, 124 | ]; 125 | }); 126 | }); 127 | 128 | allHackathonsResponse?.map((hackathon: HackathonCardType) => { 129 | if (!hackathon?.isHackathonCompleted) { 130 | upcomingHackathonsResponse = [hackathon, ...upcomingHackathonsResponse]; 131 | } 132 | }); 133 | 134 | return upcomingHackathonsResponse; 135 | } 136 | 137 | export { 138 | getAllHackathons, 139 | getHackathon, 140 | getPastHackathons, 141 | getUpcomingHackathons, 142 | }; 143 | -------------------------------------------------------------------------------- /middleware/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./hackathons-api"; 2 | export * from "./teams-api"; 3 | -------------------------------------------------------------------------------- /middleware/teams-api.ts: -------------------------------------------------------------------------------- 1 | // Library Imports 2 | import axios from "axios"; 3 | 4 | // Components Imports 5 | import { TeamMemberCardType } from "@/types/team-type"; 6 | import { baseURL, mediaURL } from "@/common/utils"; 7 | 8 | async function getTeamData() { 9 | let teamDataResponse: any = []; 10 | 11 | await axios.get(baseURL + "/api/teams").then((teamResponse: any) => { 12 | teamResponse?.data?.data 13 | ?.map(async (response: any) => { 14 | const responseAttribute: any = response?.attributes; 15 | const _teamMemberData: TeamMemberCardType = { 16 | picture: mediaURL(responseAttribute?.uploadFileName), 17 | fullName: { 18 | firstName: responseAttribute?.firstName, 19 | lastName: responseAttribute?.lastName, 20 | }, 21 | isAvenger: responseAttribute?.isAvenger, 22 | directWebsite: { 23 | label: responseAttribute?.directWebsiteLabel, 24 | link: responseAttribute?.directWebsiteLink, 25 | }, 26 | socialProfile: { 27 | twitterUsername: responseAttribute?.twitterUsername, 28 | instagramUsername: responseAttribute?.instagramUsername, 29 | linkedInUsername: responseAttribute?.linkedInUsername, 30 | githubUsername: responseAttribute?.githubUsername, 31 | }, 32 | description: responseAttribute?.description, 33 | }; 34 | teamDataResponse?.push(await _teamMemberData); 35 | }) 36 | .catch((err: any) => { 37 | throw new Error(err); 38 | }) 39 | .finally(() => { 40 | // do something 41 | }); 42 | }); 43 | 44 | return teamDataResponse; 45 | } 46 | 47 | export { getTeamData }; 48 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | images: { 6 | domains: ["hekors-strapi.herokuapp.com"] 7 | } 8 | } 9 | 10 | module.exports = nextConfig -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "website", 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 | "@types/node": "18.11.9", 13 | "@types/react": "18.0.25", 14 | "@types/react-dom": "18.0.9", 15 | "eslint": "8.28.0", 16 | "eslint-config-next": "13.0.5", 17 | "next": "13.0.5", 18 | "react": "18.2.0", 19 | "react-dom": "18.2.0", 20 | "typescript": "4.9.3" 21 | }, 22 | "devDependencies": { 23 | "@types/react-modal": "^3.13.1", 24 | "autoprefixer": "^10.4.13", 25 | "axios": "^1.2.0", 26 | "css-houdini-squircle": "^0.2.1", 27 | "postcss": "^8.4.19", 28 | "react-icons": "^4.6.0", 29 | "react-loading-skeleton": "^3.1.0", 30 | "react-modal": "^3.16.1", 31 | "react-tooltip": "^5.5.1", 32 | "tailwindcss": "^3.2.4" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /pages/404.tsx: -------------------------------------------------------------------------------- 1 | // Basic Imports 2 | import React from "react"; 3 | import Image from "next/image"; 4 | import Link from "next/link"; 5 | import { NextPage } from "next"; 6 | 7 | // Components Imports 8 | import Callout from "@/components/ui-patterns/Callout"; 9 | import Button from "@/components/ui-patterns/Button"; 10 | import MetaHead from "@/components/MetaHead"; 11 | 12 | const NotFound: NextPage = () => { 13 | return ( 14 | 15 | 16 |
17 |
18 | {"Reporting: 404 (Invalid Page)"} 19 |

20 | {"Don't worry, we got you!"} 21 |

22 | hekors-police 29 |
30 | 31 | 34 | 35 | 36 | 39 | 40 |
41 |
42 |
43 | 44 | ); 45 | }; 46 | 47 | export default NotFound; 48 | -------------------------------------------------------------------------------- /pages/_app.tsx: -------------------------------------------------------------------------------- 1 | // Basic Imports 2 | import React from "react"; 3 | import Link from "next/link"; 4 | import type { AppProps } from "next/app"; 5 | 6 | // Components Imports 7 | import Navbar from "@/components/Navbar"; 8 | import Footer from "@/components/Footer"; 9 | import AnnouncementBar from "@/components/AnnouncementBar"; 10 | 11 | // Styles Imports 12 | import "@/styles/globals.css"; 13 | import 'react-tooltip/dist/react-tooltip.css' 14 | 15 | const App: React.FunctionComponent = ({ 16 | Component, 17 | pageProps, 18 | }: AppProps) => { 19 | return ( 20 | 21 | 22 |
23 | 24 | {"Build Program by HEKORS is now live"} 25 | 26 | Applications are now open, start from{" "} 27 | 32 | {"🎒 Build Program"} 33 | 34 | 35 | 36 |
37 | 38 | 39 | 40 |