Merge pull request #1 from EnthusiastiCoder/main

WOC Landing Page
GDSC-IIIT-Kalyani · Sep 5, 2024 · 14fff78 · 14fff78
2 parents 0bebf4c + 39d5a67
commit 14fff78
Show file tree

Hide file tree

Showing 35 changed files with 2,826 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/README.md b/README.md
@@ -1 +1,36 @@
-# Winter-of-Code-4.0
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/globals.css b/app/globals.css
@@ -0,0 +1,50 @@
+@tailwind base;
+@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));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@layer base {
+  .border-outline-2 {
+    -webkit-text-stroke: 2px #E2AA06;
+  }
+
+  .border-outline-1 {
+    -webkit-text-stroke: 1px #E2AA06;
+  }
+
+}
+
+hr {
+  border: 0;
+  height: 2px;
+  background-image: linear-gradient(to right, #ff7e5f, #feb47b, #ff7e5f);
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,46 @@
+import type { Metadata } from "next";
+import { Inter, Chakra_Petch } from "next/font/google";
+import localfont from "next/font/local";
+import "./globals.css";
+import Navbar from "@/components/navbar";
+import Register from "@/components/onboarding";
+import Footer from "@/components/footer";
+import AboutUs from "@/components/about";
+
+const inter = Inter({ subsets: ["latin"] });
+const chakra = Chakra_Petch({
+  subsets: ["latin"] , 
+  weight: "400",
+  variable: "--font-chakra"
+});
+
+const kleemax = localfont({
+  src : [{
+    path: "../public/fonts/kleemaxdemo.ttf",
+    weight : "400"
+    }],
+    variable: "--font-kleemax"
+})
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${kleemax.variable} ${chakra.variable}`}>
+        <Navbar/>
+        <Register/>
+        <AboutUs/>
+        {children}
+        <Footer/>
+      </body>
+    </html>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,8 @@
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <main>
+    </main>
+  );
+}
diff --git a/components/about.tsx b/components/about.tsx
@@ -0,0 +1,31 @@
+import Link from 'next/link';
+import Image from 'next/image'
+import asset1 from '../public/arrow.svg'
+const AboutUs = () => {
+    return (
+        <div className="bg-[#868686] bg-opacity-10 max-w-[1280px] m-10 xl:m-auto">
+            <div className="w-full flex">
+                <div className='text-[#00FF84] bg-black w-fit rounded-br-xl border-[#868686] border-opacity-10 pr-4 text-4xl font-kleemax text-nowrap'>
+                    ABOUT US
+                </div>
+                <div className='w-full bg-black'>
+                    <div className='h-full bg-[#868686] bg-opacity-10 rounded-tl-xl border-black'></div>
+                </div>
+                <div className='w-fit'>
+                    <Image src={asset1} alt="woc"/>
+                </div>
+            </div>
+            <div className="w-full flex p-5 rounded-2xl border-black">
+            Lorem ipsum dolor sit amet consectetur. Adipiscing commodo id vel id massa venenatis. Faucibus vitae nisi amet convallis commodo at consectetur suspendisse diam. Adipiscing est vel id quis tempor nisl eros dolor. Habitant curabitur leo ultrices vitae massa nullam. Convallis habitasse at in volutpat ullamcorper ornare vitae. Non justo egestas venenatis nunc sed metus. Cursus tellus consequat volutpat in facilisi sed tincidunt. Accumsan augue molestie vel integer imperdiet nec nulla.
+
+            Pellentesque tellus elementum auctor augue. Duis lobortis diam integer sit condimentum nulla cursus. Enim eget aliquam nibh lorem porttitor hac quisque massa. Integer varius sit imperdiet nam consectetur nulla eget. Quisque sed elit risus malesuada. Tortor velit libero tristique orci vitae morbi in consectetur. Nibh ligula maecenas arcu ornare urna gravida nec mi. Turpis mi ornare enim tempor risus tempus mi mi ullamcorper.
+            Eget mus ultricies nibh nec commodo interdum risus augue lacinia. Vitae arcu tincidunt vestibulum tristique sed sagittis nulla pellentesque quis. Massa nunc pellentesque ut ipsum nec. At est ullamcorper elementum bibendum amet. Phasellus et egestas fermentum in risus nulla.
+
+            Non cursus platea enim tellus. Interdum ornare pulvinar at tortor mus faucibus nulla tellus laoreet. Quam convallis interdum amet malesuada ante. Enim accumsan tellus pellentesque et viverra id in tincidunt in. Enim et parturient in feugiat a sollicitudin massa arcu vel. 
+            </div>
+
+        </div>
+    );
+};
+
+export default AboutUs;
diff --git a/components/footer.tsx b/components/footer.tsx
@@ -0,0 +1,42 @@
+import Link from 'next/link';
+import Image from 'next/image'
+import footer from '../public/footer.svg'
+import instagram from '../public/instagram.svg'
+import twitter from '../public/twitter.svg'
+import facebook from '../public/facebook.svg'
+import linkedin from '../public/linkedin.svg'
+const navigation = [
+    { name: "Team", href: "#", current: true },
+    { name: "Organisation", href: "#", current: false },
+    { name: "Time-Line", href: "#", current: false },
+    { name: "FAQ", href: "#", current: false },
+  ];
+
+const Footer = () => {
+    return (
+
+        <div className="flex-col flex py-2 sm:py-4 w-full">
+            <div className="flex w-full m:top-9 md:top-10">
+
+            </div>
+            <Image src={footer} alt="footer" style={{objectFit: 'cover',}}/>
+            <div className="absolute flex-col flex flex-shrink-0 p-4 lg:p-10">
+                    <Link href="/" className=" text-sm sm:text-2xl md:text-4xl lg:text-9xl text-black font-kleemax border-outline-1 sm:border-outline-2">
+                    WOC
+                    </Link>
+                    <div className="relative flex p-4">
+                        <Image className='p-4' src={instagram} width={75} quality={100}  alt="footer" />
+                        <Image className="p-4" src={twitter} width={75} quality={100}  alt="footer" />
+                        <Image className="p-4" src={facebook} width={75} quality={100}  alt="footer" />
+                        <Image className="p-4" src={linkedin}  width={75} quality={100}  alt="footer" />
+                    </div>
+
+
+            </div>
+        </div>
+
+    );
+};
+
+export default Footer;
+
diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -0,0 +1,39 @@
+import Link from 'next/link';
+import Image from 'next/image'
+import navline from '../public/navline.svg'
+const navigation = [
+    { name: "Team", href: "#", current: true },
+    { name: "Organisation", href: "#", current: false },
+    { name: "Time-Line", href: "#", current: false },
+    { name: "FAQ", href: "#", current: false },
+  ];
+
+const Navbar = () => {
+    return (
+        <nav className="sticky flex-col flex py-2 sm:py-4 w-full">
+            <div className="flex md:justify-between w-full justify-center">
+                <div className="hidden md:flex flex-1"></div>
+                <div className="flex flex-shrink-0">
+                    <Link href="/" className="text-sm sm:text-2xl md:text-3xl lg:text-4xl text-black font-kleemax border-outline-1 sm:border-outline-2">
+                    WOC
+                    </Link>
+                </div>
+                <div className="hidden md:flex flex-1 justify-end">
+                    {navigation.map((item) => (
+                    <Link href={item.href} className="font-chakra text-brand text-sm px-2 hover:drop-shadow-2xl" key={item.name}>
+                        {item.name.toUpperCase()}
+                    </Link>
+                    ))}
+                    <div className="mr-10"></div>
+                </div>
+            </div>
+            <div className="flex w-full absolute top-6 sm:top-9 md:top-10">
+                <Image src={navline} alt="navline"/>
+            </div>
+        </nav>
+
+    );
+};
+
+export default Navbar;
+
diff --git a/components/onboarding.tsx b/components/onboarding.tsx
@@ -0,0 +1,31 @@
+import Link from 'next/link';
+import Image from 'next/image'
+import wocg from '../public/wocg.svg'
+import regline1 from '../public/regline1.svg'
+import regline2 from '../public/regline2.svg'
+import asset1 from '../public/background1.svg'
+const Register = () => {
+    return (
+        <div>
+            <div className="my-4 sm:my-6 md:my-10 lg:my-20">
+                <Image src={asset1} alt="woc"/>
+                <div className="">
+                <div className="">
+                    <div className="flex justify-center items-center"> 
+                        <Image className='' src={regline1}  width={300} alt="woc"/>
+                        <div className="flex justify-center grow-0 bg-black">
+                            <Link href="/" className="z-10 text-nowrap text-xs sm:text-base md:text-2xl lg:text-3xl p-1 sm:p-2 md:p-3 lg:p-4 font-kleemax text-brand border sm:border-2 md:border-3 lg:border-4 drop-shadow-glow">
+                            REGISTER HERE
+                            </Link>
+                        </div>
+                        <Image className='' src={regline2} width={300} alt="woc"/>
+                    </div> 
+                </div>
+                </div>
+            </div>
+            </div>
+    );
+};
+
+export default Register;
+
diff --git a/next.config.mjs b/next.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;