Merge pull request #282 from piyusesh/web2.0-dev

Created landing page

app/globals.css

@@ -2,32 +2,16 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
 body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background-color: #141718;
+  font-family: sans-serif;
+  font-weight: 500;
 }
 
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
+.inter-heading {
+  font-family: "Inter", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 500;
+  font-style: normal;
+  font-variation-settings: "slnt" 0;
+}

app/page.tsx

@@ -1,35 +1,19 @@
-export default function Home() {
+import Navbar from '@/components/Navbar';
+import Hero from '@/components/Hero';
+import Initiatives from '@/components/Initiatives';
+import Structure from '@/components/Structure';
+import Footer from '@/components/Footer';
+
+const Home: React.FC = () => {
   return (
-    <section className="bg-gray-950 text-white">
-      <div className="mx-auto max-w-screen-xl px-4 py-32 lg:flex lg:h-screen lg:items-center">
-        <div className="mx-auto max-w-3xl text-center">
-          <h1
-            className="bg-gradient-to-r cursor-grab from-[#2b422d] via-[#2d472f] to-gray-900 bg-clip-text text-3xl font-extrabold text-transparent sm:text-5xl"
-          >
-            Under Construction.
-            <span className="sm:block"> FOSSCU-K</span>
-          </h1>
-          <p className="mx-auto mt-4 max-w-xl sm:text-xl/relaxed text-opacity-50 text-white">
-            Free and Open Source Software Community University
-          </p>
-          <div className="mt-8 flex flex-wrap justify-center gap-4">
-            <a
-              className="block w-full rounded-full border border-[#2b422d] bg-[#2b422d] px-12 py-3 text-sm font-medium text-white hover:bg-transparent hover:text-white focus:outline-none focus:ring active:text-opacity-75 sm:w-auto"
-              href="https://fosscu.org/"
-              target="_blank"
-            >
-              Join Us
-            </a>
-            <a
-              className="block w-full rounded-full border border-[#2b422d] px-12 py-3 text-sm font-medium text-white hover:bg-[#2b422d] focus:outline-none focus:ring active:bg-green-600 sm:w-auto"
-              href="https://docs.fosscu.org/"
-              target="_blank"
-            >
-              Learn More
-            </a>
-          </div>
-        </div>
-      </div>
-    </section>
+    <>
+      <Navbar />
+      <Hero />
+      <Initiatives />
+      <Structure />
+      <Footer />
+    </>
   );
-}
+};
+
+export default Home;

assets/index.ts

@@ -0,0 +1,7 @@
+export { default as designer } from './designer.png';
+export { default as developer } from './developer.png';
+export { default as students } from './student.png';
+export { default as creativeIndividual } from './creativeIndividual.png';
+export { default as conf1} from './conf 1.png';
+export { default as Shipyard} from './Shipyard 1.png';
+export { default as openMic} from './open-mic.png';

components/Footer.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { FaGithubSquare, FaInstagram, FaTwitterSquare, FaLinkedin } from "react-icons/fa";
+
+export default function Footer() {
+  return (
+    <div className="max-w-[1240px] mx-auto py-16 px-4 grid lg:grid-cols-3 gap-8 text-gray-300">
+      <div>
+        <h1 className="w-full text-3xl font-bold text-custom-green">FOSSCU</h1>
+        <p className="py-4">Made with 💚 and Open Source</p>
+        <div className="flex justify-between md:w-[75%] my-6">
+          <a href="https://www.instagram.com/fosscu/" className="transition duration-300 ease-in-out hover:scale-125" target="blank">
+            <FaInstagram size={30} />
+          </a>
+          <a href="https://twitter.com/fosscuk" className="transition duration-300 ease-in-out hover:scale-125" target="blank">
+            <FaTwitterSquare size={30} />
+          </a>
+          <a href="https://github.com/FOSS-Community/" className="transition duration-300 ease-in-out hover:scale-125" target="blank">
+            <FaGithubSquare size={30} />
+          </a>
+          <a href="https://linkedin.com/company/fosscu/" className="transition duration-300 ease-in-out hover:scale-125" target="blank">
+            <FaLinkedin size={30} />
+          </a>
+        </div>
+      </div>
+      <div className="lg:col-span-2 flex justify-between mt-6">
+        <div className="px-2 text-sm md:text-base lg:text-lg">
+          <h6 className="font-medium text-custom-green">Support</h6>
+          <ul>
+            <li className="pt-2 hover:border-b hover:border-green-400">
+              <a href="/building" className="pb-2">Documentation</a>
+            </li>
+            <li className="pt-2 hover:border-b hover:border-green-400">
+              <a href="/guide" className="pb-2">Guides</a>
+            </li>
+            <li className="pt-2 hover:border-b hover:border-green-400">
+              <a href="https://www.kuma.fosscu.org/status/fosscu" className="pb-2">API Status</a>
+            </li>
+            <li className="pt-2 hover:border-b hover:border-green-400">
+              <a href="/faq" className="pb-2">FAQ</a>
+            </li>
+          </ul>
+        </div>
+        <div className="px-2 text-sm md:text-base lg:text-lg">
+          <h6 className="font-medium text-custom-green">Organization</h6>
+          <ul>
+            <li className="pt-2 hover:border-b hover:border-custom-green">
+              <a href="/about" className="pb-2">About</a>
+            </li>
+            <li className="pt-2 hover:border-b hover:border-custom-green">
+              <a href="https://github.com/FOSS-Community/blog-archive" className="pb-2" target="blank">Blog</a>
+            </li>
+            <li className="pt-2 hover:border-b hover:border-custom-green">
+              <a href="https://dub.sh/fosscu-discord" className="pb-2" target="blank">Join Us</a>
+            </li>
+            <li className="pt-2 hover:border-b hover:border-custom-green">
+              <a href="https://github.com/FOSS-Community/" className="pb-2" target="blank">Contribute</a>
+            </li>
+          </ul>
+        </div>
+        <div className="px-2 text-sm md:text-base lg:text-lg">
+          <h6 className="font-medium text-custom-green">Handbook</h6>
+          <ul>
+            <li className="pt-2 hover:border-b hover:border-custom-green">
+              <a href="https://docs.fosscu.org/Docs/values" className="pb-2" target="blank">Core Values</a>
+            </li>
+            <li className="pt-2 hover:border-b hover:border-custom-green">
+              <a href="https://docs.fosscu.org/Docs/code-of-conduct" className="pb-2" target="blank">Code of Conduct</a>
+            </li>
+            <li className="pt-2 hover:border-b hover:border-custom-green">
+              <a href="https://docs.fosscu.org/Docs/getting-started" className="pb-2" target="blank">What is FOSS</a>
+            </li>
+            <li className="pt-2 hover:border-b hover:border-custom-green">
+              <a href="/building" className="pb-2">Terms</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}

components/Hero.tsx

@@ -0,0 +1,36 @@
+import bgImg from "@/assets/Frame 1000005985.png";
+import Image from "next/image";
+
+export default function Hero() {
+  return (
+    <div className="relative h-screen flex items-center justify-center overflow-hidden">
+      <div className="absolute inset-0 flex items-center justify-center">
+        <Image
+          src={bgImg.src}
+          alt="bg img"
+          className="object-cover scale-150 sm:scale-150 md:block lg:block"
+          width={700}
+          height={700}
+        />
+      </div>
+      <div className="flex-col text-center text-white z-10 mb-20 px-10">
+        <div className="flex justify-end">
+        <div className="hidden lg:flex bg-custom-green text-black p-1 px-4 text-sm rounded-tl-full rounded-tr-full rounded-br-full hover:opacity-50">Wanna open a local chapter at your uni?</div>
+        </div>
+        <h1 className="text-5xl font-bold mb-4">Welcome to FOSSCU</h1>
+        <p className="text-xl mb-8 text-custom-gray">We are a community of students, developers, designers, and other creative individuals who are passionate about promoting the <br />use and development of Free and Open Source Software.</p>
+        <div className="flex gap-4">
+          <div className="flex items-center justify-center flex-grow">
+            <div className="flex gap-4 items-center justify-center">
+            <button className="px-7 py-3 bg-custom-green-gradient rounded-full text-white transition-opacity hover:opacity-50">Join Us</button>
+            <button className='border-white border-2 px-7 py-3 rounded-full text-white transition-opacity hover:opacity-50'>Learn More</button>
+            </div>
+          </div>
+        </div>
+        <div className="flex justify-start">
+          <div className="hidden lg:flex bg-custom-green text-black p-1 px-4 text-sm rounded-tl-full rounded-bl-full rounded-br-full hover:opacity-50">Are you here from FOSSConf?</div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/Initiatives.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import Image from "next/image";
+import { developer, designer, students, creativeIndividual, conf1, Shipyard, openMic } from "@/assets";
+import Card from "../components/ui/Card";
+
+export default function Initiatives () {
+  return (
+    <div className="flex flex-col items-center justify-between gap-16 mb-16 mt-16">
+      <h1 className="text-3xl lg:text-5xl font-bold text-white text-center lg:py-6">We Include</h1>
+      <div className="flex flex-col gap-10 justify-evenly text-center md:flex-row lg:flex-row text-3xl text-custom-gray2 font-bold">
+        <div className="flex items-center justify-center lg:justify-start gap-3 lg:mb-0">
+          <Image src={developer} alt="developer" width={20} height={20} style={{ width: "auto", height: "auto" }} />
+          <h2 className="text-sm lg:text-3xl">Developers</h2>
+        </div>
+        <div className="flex items-center justify-center lg:justify-start gap-3 lg:mb-0">
+          <Image src={designer} alt="designer" width={20} height={20} style={{ width: "auto", height: "auto" }} />
+          <h2 className="text-sm lg:text-3xl">Designers</h2>
+        </div>
+        <div className="flex items-center justify-center lg:justify-start gap-3 lg:mb-0">
+          <Image src={students} alt="student" width={20} height={20} style={{ width: "auto", height: "auto" }} />
+          <h2 className="text-sm lg:text-3xl">Students</h2>
+        </div>
+        <div className="flex items-center justify-center lg:justify-start gap-3 lg:mb-0">
+          <Image src={creativeIndividual} alt="creativeIndividual" width={20} height={20} style={{ width: "auto", height: "auto" }} />
+          <h2 className="text-sm lg:text-3xl">Creative Individuals</h2>
+        </div>
+      </div>
+      <div className="flex justify-center p-4 lg:p-0" style={{ maxWidth: '600px' }}>
+        <div className="text-center text-white font-bold rounded-3xl px-10 py-6" style={{ backgroundColor: 'rgba(255, 255, 255, 0.08)' }}>
+          <p className="lg:text-3xl md:text-2xl sm:text-lg">
+            We aim to provide a space for students to develop their skills, collaborate with like-minded
+            individuals, and contribute to FOSS projects. The community welcomes anyone who is
+            interested in FOSS, regardless of their background or skill level.
+          </p>
+        </div>
+      </div>
+      <h1 className="text-3xl lg:text-5xl font-bold text-white text-center py-6">What we do?</h1>
+      <div className="flex flex-col items-center px-10 gap-10 lg:flex-row justify-evenly">
+        <Card
+          title="FOSSConf"
+          description="Annual open source conference organized by FOSSCU."
+          imageUrl={conf1.src}
+        />
+        <Card
+          title="Shipyard"
+          description="Build and ship every other weekend with us. Just Ship it 🚀🚀🚀"
+          imageUrl={Shipyard.src}
+        />
+        <Card
+          title="Open-mic"
+          description="We host Open-mic sessions every other weekend at FOSSCU-K."
+          imageUrl={openMic.src}
+        />
+      </div>
+      <h1 className="text-2xl lg:text-3xl text-white text-center">and much more...</h1>
+    </div>
+  );
+}

components/Navbar.tsx

@@ -0,0 +1,77 @@
+"use client";
+import { useState } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBars, faXmark } from '@fortawesome/free-solid-svg-icons';
+
+export default function Navbar() {
+  const [menu, setMenu] = useState<boolean>(false);
+
+  const handleMenu = (): void => {
+    setMenu(!menu);
+  }
+
+  return (
+    <nav className="flex bg-bg-black p-4 px-6 items-center justify-between">
+      <Link href='/' className="flex gap-2 items-center">
+        <Image src="/favicon.ico" alt="logo" width={36} height={36} />
+        <div className="text-white text-3xl">FOSSCU</div>
+      </Link>
+      <div className="hidden lg:flex gap-12">
+        <Link href='/' className="text-white text-lg hover:text-custom-green">Home</Link>
+        <Link href='/about' className="text-white text-lg hover:text-custom-green">About</Link>
+        <Link href='/team' className="text-white text-lg hover:text-custom-green">Team</Link>
+        <Link href='/contact' className="text-white text-lg hover:text-custom-green">Contact</Link>
+        <Link href='/shipyard' className="text-white text-lg hover:text-custom-green">Shipyard</Link>
+        <button className="hover:text-custom-green flex items-center  text-white ">
+              <span className="mr-1">
+                {" "}
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  fill="currentColor"
+                  className="bi bi-chevron-down"
+                  viewBox="0 0 16 16"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
+                  />
+                </svg>
+            </span>
+            <span>More</span>
+          </button>
+
+      </div>
+
+      <div className='hidden lg:flex'>
+        <button className='px-7 py-3 bg-custom-green-gradient rounded-full text-white hover:opacity-50 lg:flex items-center'>Join Us</button>
+      </div>
+
+      <button className="p-2 lg:hidden" onClick={handleMenu}>
+        <FontAwesomeIcon icon={faBars} className="text-white" />
+      </button>
+
+      <div className={`fixed bg-bg-black text-white m-0 inset-0 h-fit pl-4 pr-4 pt-4 z-20 lg:hidden ${menu ? '' : 'hidden'}`}>
+        <div className="flex justify-between">
+          <Link href='/' className="flex gap-2 items-center">
+            <Image src="/favicon.ico" alt="logo" width={48} height={48} className="object-cover max-w-12 max-h-12" />
+            <span className="text-3xl">FOSSCU</span>
+          </Link>
+          <button className="p-2 lg:hidden" onClick={handleMenu}>
+            <FontAwesomeIcon icon={faXmark} className="text-white" />
+          </button>
+        </div>
+        <div className="mt-6">
+          <Link href='/' className="font-medium hover:text-custom-green p-3 m-3 hover:bg-gray-800 block rounded-lg">Home</Link>
+          <Link href='/about' className="font-medium hover:text-custom-green p-3 m-3 hover:bg-gray-800 block rounded-lg">About</Link>
+          <Link href='/team' className="font-medium hover:text-custom-green p-3 m-3 hover:bg-gray-800 block rounded-lg">Team</Link>
+          <Link href='/contact' className="font-medium hover:text-custom-green p-3 m-3 hover:bg-gray-800 block rounded-lg">Contact</Link>
+          <Link href='/shipyard' className="font-medium hover:text-custom-green p-3 m-3 hover:bg-gray-800 block rounded-lg">Shipyard</Link>
+        </div>
+      </div>
+    </nav>
+  );
+}

components/Structure.tsx

@@ -0,0 +1,37 @@
+export default function Structure() {
+    return (
+      <div className="flex flex-col items-center justify-between gap-16 mb-10">
+        <h1 className="text-3xl lg:text-5xl font-bold text-white text-center py-6 px-3">The Community Structure</h1>
+        <div className="flex justify-center">
+        <div className="flex flex-col gap-20 rounded-t-3xl lg:px-40 pt-10 text-center text-black text-sm" style={{ backgroundColor: 'rgba(255, 255, 255, 0.08)' }}>
+          <h1 className="p-2 text-lg sm:text-xl md:text-2xl lg:text-3xl font-bold text-white text-center">“with great power, comes great <br /> responsibilities”</h1>
+          <div className="px-4 py-4 flex justify-center items-end gap-4 mb-0 pb-0 sm:gap-6 md:gap-10 lg:gap-20">
+            <div className="flex justify-center items-center px-2 h-20 sm:h-32 md:h-36 lg:h-40 bg-custom-yellow w-20 sm:w-24 md:w-28 lg:w-32">
+              <span className="text-xs sm:text-sm md:text-base lg:text-lg">Learner</span>
+            </div>
+            <div className="flex justify-center items-center px-2 h-40 sm:h-64 md:h-72 lg:h-80 bg-custom-yellow w-20 sm:w-24 md:w-28 lg:w-32">
+              <span className="text-xs sm:text-sm md:text-base lg:text-lg">Maintainer</span>
+            </div>
+            <div className="flex justify-center items-center px-2 h-32 sm:h-48 md:h-56 lg:h-60 bg-custom-yellow w-20 sm:w-24 md:w-28 lg:w-32">
+              <span className="text-xs sm:text-sm md:text-base lg:text-lg">Contributor</span>
+            </div>
+          </div>
+        </div>
+        </div>
+        <a href="/docs" className="text-center text-white text-lg">Read our docs for a much detailed information.</a>
+        <div className="flex flex-col gap-10 text-center md:flex-row lg:flex-row p-4 justify-center items-center">
+  <div>
+    <h1 className="lg:text-3xl md:text-xl sm:text-lg text-white">Want Latest News of OSS World 🌍 ?</h1>
+    <h2 className="lg:text-3xl md:text-xl sm:text-lg text-white">Sign up for our newsletter to stay up to date.</h2>
+  </div>
+  <div className="flex flex-col gap-2 text-center">
+    <input type="text" placeholder="Enter Email" className="p-3 rounded-xl" style={{ backgroundColor: 'rgba(255, 255, 255, 0.08)'}} />
+    <button className="bg-custom-green-gradient font-bold p-3 rounded-xl hover:opacity-50">Notify me</button>
+    <p className="text-white">We care about the protection of your data. Read our <br />
+      <a href="/privacy" className="underline">Privacy Policy.</a></p>
+  </div>
+</div>
+      </div>
+    );
+  }
+