-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
-Changed Header for smaller devices -Fixed the issues
- Loading branch information
Showing
11 changed files
with
173 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,36 @@ | ||
| export const AboutUs = () => { | ||
| return ( | ||
| <div id="aboutus" className="flex flex-col items-center justify-center bg-black w-screen h-screen"> | ||
| <div className="mt-5"> | ||
| <h2 className="text-white text-3xl font-bold mb-4">About Us</h2> | ||
| <div | ||
| id="aboutus" | ||
| className="flex flex-col items-center justify-center bg-black w-screen min-h-screen" | ||
| > | ||
| <div className="mt-20 md:mt-0"> | ||
| <h2 className="text-white text-3xl font-bold md:mb-8 ">About Us</h2> | ||
| <div className="p-1 rounded-lg shadow-lg"></div> | ||
| </div> | ||
| <div className="flex flex-col items-center mt-8 px-4 lg:px-8"> | ||
| <div className="flex flex-wrap items-center justify-between gap-x-12 gap-y-8 w-full lg:flex-nowrap"> | ||
| <div className="flex flex-wrap items-center justify-between gap-x-12 gap-y-8 w-full lg:flex-nowrap"> | ||
| <div className="flex-1"> | ||
| <h2 className="text-white text-3xl mb-4 font-thin text-justify" style={{fontFamily:"Arial", margin: "0 30px", padding: "8px" }}> | ||
| Welcome to the Cloud Native Community Group - New Delhi. We are the New Delhi chapter of the Cloud Native Community Groups (CNCG), operating under the <span className="text-[#0086FF]">Cloud Native Computing Foundation</span> (CNCF). Our focus is on knowledge sharing and exploring the potential of cloud native technologies. Through our meetups, educational sessions, and practical activities, we aim to empower individuals in navigating the cloud native ecosystem. We are dedicated to hosting at least one meetup every month and take pride in being recognized as the leading CNCG community worldwide. We prioritize creating an inclusive learning environment, adhering to the CNCF Code of Conduct to ensure everyone feels welcome and respected. | ||
| </h2> | ||
| <h2 className="text-2xl mb-4 text-center text-neutral-200"> | ||
| Welcome to the Cloud Native Community Group - New Delhi. We are | ||
| the New Delhi chapter of the Cloud Native Community Groups (CNCG), | ||
| operating under the{" "} | ||
| <span className="text-[#0086FF]"> | ||
| Cloud Native Computing Foundation | ||
| </span>{" "} | ||
| (CNCF). Our focus is on knowledge sharing and exploring the | ||
| potential of cloud native technologies. Through our meetups, | ||
| educational sessions, and practical activities, we aim to empower | ||
| individuals in navigating the cloud native ecosystem. We are | ||
| dedicated to hosting at least one meetup every month and take | ||
| pride in being recognized as the leading CNCG community worldwide. | ||
| We prioritize creating an inclusive learning environment, adhering | ||
| to the CNCF Code of Conduct to ensure everyone feels welcome and | ||
| respected. | ||
| </h2> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,9 @@ | ||
| import { useState } from "react"; | ||
| import { Button } from "./ui/moving-border"; | ||
|
|
||
| export const Header = () => { | ||
| const email = '[email protected]'; | ||
| const [showSidebar, setShowSidebar] = useState(false); | ||
| const email = "[email protected]"; | ||
|
|
||
| const scrollToComponent = ( | ||
| id: string, | ||
|
|
@@ -21,8 +23,19 @@ export const Header = () => { | |
|
|
||
| return ( | ||
| <div className="fixed top-0 left-0 right-0 z-50"> | ||
| <nav className="bg-white dark:bg-gray-900 fixed w-full z-20 top-0 start-0 border-b border-gray-200 dark:border-gray-600"> | ||
| <nav className="bg-white dark:bg-gray-900 fixed w-screen z-20 top-0 start-0 border-b border-gray-200 dark:border-gray-600"> | ||
| <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-1"> | ||
| <div className="flex items-center md:order-2 space-x-3 md:space-x-1 rtl:space-x-reverse font-bold"> | ||
| {window.innerWidth > 768 && ( | ||
| <Button | ||
| onClick={handleMailClick} | ||
| className="bg-pink transition duration-300 ease-in-out hover:text-opacity-80 hover:mix-blend-darken-10" | ||
| > | ||
| Contact Us | ||
| </Button> | ||
| )} | ||
| </div> | ||
|
|
||
| <a | ||
| href="/" | ||
| className="flex items-center space-x-2 rtl:space-x-reverse" | ||
|
|
@@ -38,11 +51,8 @@ export const Header = () => { | |
| <p>CNCG NEW DELHI</p> | ||
| </span> | ||
| </a> | ||
| <div className="flex md:order-2 space-x-3 md:space-x-1 rtl:space-x-reverse font-bold"> | ||
| <Button onClick={handleMailClick} className="bg-pink transition duration-300 ease-in-out hover:text-opacity-80 hover:mix-blend-darken-10">Contact Us</Button> | ||
| </div> | ||
| <div | ||
| className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" | ||
| className={`hidden md:flex md:items-center md:justify-between w-full md:w-auto md:order-1`} | ||
| id="navbar-sticky" | ||
| > | ||
| <ul className="flex flex-col p-4 md:p-0 mt-4 border border-gray-100 bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white "> | ||
|
|
@@ -80,8 +90,114 @@ export const Header = () => { | |
| </li> | ||
| </ul> | ||
| </div> | ||
| <button | ||
| onClick={() => setShowSidebar(!showSidebar)} | ||
| className="md:hidden focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink p-2" | ||
| > | ||
| {showSidebar ? ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| className="h-8 w-8 text-black dark:text-white" | ||
| viewBox="0 0 20 20" | ||
| fill="currentColor" | ||
| > | ||
| <path | ||
| fillRule="evenodd" | ||
| d="M13.707 14.707a1 1 0 0 1-1.414 0L10 11.414l-2.293 2.293a1 1 0 1 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 1 1 1.414 1.414L11.414 10l2.293 2.293a1 1 0 0 1 0 1.414z" | ||
| clipRule="evenodd" | ||
| /> | ||
| </svg> | ||
| ) : ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| className="h-8 w-8 text-black dark:text-white" | ||
| viewBox="0 0 24 24" | ||
| fill="currentColor" | ||
| > | ||
| <path | ||
| fillRule="evenodd" | ||
| d="M4 18h16a1 1 0 010 2H4a1 1 0 010-2zm0-7h16a1 1 0 010 2H4a1 1 0 010-2zm0-7h16a1 1 0 010 2H4a1 1 0 010-2z" | ||
| clipRule="evenodd" | ||
| /> | ||
| </svg> | ||
| )} | ||
| </button> | ||
| </div> | ||
| </nav> | ||
| {showSidebar && ( | ||
| <div className="md:hidden fixed inset-0 bg-white dark:bg-gray-900 z-30"> | ||
| <ul className="flex flex-col p-4 md:p-0 mt-4 border border-gray-100 bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white "> | ||
| <li> | ||
| <button | ||
| onClick={(e) => { | ||
| setShowSidebar(false); | ||
| scrollToComponent("aboutus", e); | ||
| }} | ||
| className="block py-2 px-3 text-gray-900 rounded md:hover:bg-transparent md:hover:text-blue md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700" | ||
| > | ||
| About Us | ||
| </button> | ||
| </li> | ||
| <li> | ||
| <button | ||
| onClick={(e) => { | ||
| setShowSidebar(false); | ||
| scrollToComponent("events", e); | ||
| }} | ||
| className="block py-2 px-3 text-gray-900 rounded md:hover:bg-transparent md:hover:text-blue md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700" | ||
| > | ||
| Events | ||
| </button> | ||
| </li> | ||
| <li> | ||
| <button | ||
| onClick={(e) => { | ||
| setShowSidebar(false); | ||
| scrollToComponent("team", e); | ||
| }} | ||
| className="block py-2 px-3 text-gray-900 rounded md:hover:bg-transparent md:hover:text-blue md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700" | ||
| > | ||
| Team | ||
| </button> | ||
| </li> | ||
| <li> | ||
| <button | ||
| onClick={(e) => { | ||
| setShowSidebar(false); | ||
| scrollToComponent("sponsors", e); | ||
| }} | ||
| className="block py-2 px-3 text-gray-900 rounded md:hover:bg-transparent md:hover:text-blue md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700" | ||
| > | ||
| Our Sponsors | ||
| </button> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <div className="flex items-center md:order-2 space-x-3 md:space-x-1 rtl:space-x-reverse font-bold"> | ||
| <Button | ||
| onClick={handleMailClick} | ||
| className="bg-pink transition duration-300 ease-in-out hover:text-opacity-80 hover:mix-blend-darken-10" | ||
| > | ||
| Contact Us | ||
| </Button> | ||
| </div> | ||
|
|
||
| <button onClick={() => setShowSidebar(!showSidebar)}> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| className="h-8 w-8 text-black dark:text-white" | ||
| viewBox="0 0 20 20" | ||
| fill="currentColor" | ||
| > | ||
| <path | ||
| fillRule="evenodd" | ||
| d="M13.707 14.707a1 1 0 0 1-1.414 0L10 11.414l-2.293 2.293a1 1 0 1 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 1 1 1.414 1.414L11.414 10l2.293 2.293a1 1 0 0 1 0 1.414z" | ||
| clipRule="evenodd" | ||
| /> | ||
| </svg> | ||
| </button> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters