feat: homepage (#5)

- join us
- mobile responsive
- info cards for events and gallery

next.config.mjs

@@ -1,5 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+    images: {
+        domains: ['images.unsplash.com'],
+        unoptimized: true,
+    },
     output: "export",
     reactStrictMode: true,
 };

package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "next": "14.2.14",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-icons": "^5.3.0"
   },
   "devDependencies": {
     "@types/node": "^20",

public/images/gallery/images.txt

@@ -0,0 +1,18 @@
+/images/gallery/event.jpg
+/images/gallery/placeholder.png
+https://images.unsplash.com/photo-1472491235688-bdc81a63246e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxjYXR8ZW58MHwwfHx8MTcyMTgyMjE3OXww&ixlib=rb-4.0.3&q=80&w=1080"
+https://images.unsplash.com/photo-1478098711619-5ab0b478d6e6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxjYXR8ZW58MHwwfHx8MTcyMTgyMjE3OXww&ixlib=rb-4.0.3&q=80&w=1080"
+https://images.unsplash.com/photo-1668491195456-9341d9cf3977?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxjYXQlMjB3aGl0ZXxlbnwwfDF8fHwxNzIxODIyMzU3fDA&ixlib=rb-4.0.3&q=80&w=1080"
+https://images.unsplash.com/photo-1515002246390-7bf7e8f87b54?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxM3x8Y2F0fGVufDB8MHx8fDE3MjE4MjIxNzl8MA&ixlib=rb-4.0.3&q=80&w=1080"
+https://images.unsplash.com/photo-1511044568932-338cba0ad803?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwyfHxjYXR8ZW58MHwwfHx8MTcyMTgyMjE3OXww&ixlib=rb-4.0.3&q=80&w=1080"
+https://images.unsplash.com/photo-1475518112798-86ae358241eb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMHx8Y2F0fGVufDB8MHx8fDE3MjE4MjIxNzl8MA&ixlib=rb-4.0.3&q=80&w=1080"
+https://images.unsplash.com/photo-1498100152307-ce63fd6c5424?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMXx8Y2F0fGVufDB8MHx8fDE3MjE4MjIxNzl8MA&ixlib=rb-4.0.3&q=80&w=1080"
+https://images.unsplash.com/photo-1503777119540-ce54b422baff?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw5fHxjYXQlMjB3aGl0ZXxlbnwwfDF8fHwxNzIxODIyMzU3fDA&ixlib=rb-4.0.3&q=80&w=1080"
+https://images.unsplash.com/photo-1533743983669-94fa5c4338ec?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw4fHxjYXR8ZW58MHwwfHx8MTcyMTgyMjE3OXww&ixlib=rb-4.0.3&q=80&w=1080"
+https://images.unsplash.com/photo-1502083896352-259ab9e342d7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMnx8Y2F0fGVufDB8MHx8fDE3MjE4MjIxNzl8MA&ixlib=rb-4.0.3&q=80&w=1080"
+https://images.unsplash.com/photo-1708791793972-cf97ef3c01c4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxjYXQlMjB3aGl0ZXxlbnwwfDB8fHwxNzIxODIyMjkwfDA&ixlib=rb-4.0.3&q=80&w=1080"
+https://images.unsplash.com/photo-1516470544373-df3edeb89d80?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw4fHxjYXQlMjB3aGl0ZXxlbnwwfDB8fHwxNzIxODIyMjkwfDA&ixlib=rb-4.0.3&q=80&w=1080"
+https://images.unsplash.com/photo-1472491235688-bdc81a63246e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxjYXR8ZW58MHwwfHx8MTcyMTgyMjE3OXww&ixlib=rb-4.0.3&q=80&w=1080"
+https://images.unsplash.com/photo-1478098711619-5ab0b478d6e6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxjYXR8ZW58MHwwfHx8MTcyMTgyMjE3OXww&ixlib=rb-4.0.3&q=80&w=1080"
+https://images.unsplash.com/photo-1517451330947-7809dead78d5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw5fHxjYXR8ZW58MHwwfHx8MTcyMTgyMjE3OXww&ixlib=rb-4.0.3&q=80&w=1080"
+https://images.unsplash.com/photo-1515002246390-7bf7e8f87b54?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxM3x8Y2F0fGVufDB8MHx8fDE3MjE4MjIxNzl8MA&ixlib=rb-4.0.3&q=80&w=1080"

src/app/globals.css

@@ -3,22 +3,24 @@
 @tailwind utilities;
 
 :root {
-  --fg: #ffffff;
-  --bg-primary: #171717;
-  --bg-secondary: #0a0a0a;
+  --fg-primary: 255, 255, 255; /* #ffffff */
+  --fg-secondary: 20, 20, 20;
+  --bg-primary: 23, 23, 23; /* #171717 */
+  --bg-secondary: 10, 10, 10; /* #0a0a0a */
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --bg-primary: #0a0a0a;
-    --bg-secondary: #171717;
-    --fg: #ededed;
+    --bg-primary: 10, 10, 10; /* #0a0a0a */
+    --bg-secondary: 23, 23, 23; /* #171717 */
+    --fg-primary: 237, 237, 237; /* #ededed */
+    --fg-secondary: 215, 215, 215;
   }
 }
 
 body {
-  color: var(--fg);
-  background: var(--bg-primary);
+  color: rgb(var(--fg-primary));
+  background: rgb(var(--bg-primary));
 }
 
 h1, h2, h3, h4, h5, h6, .cinzel {

src/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
-import Image from "next/image";
 import localFont from "next/font/local";
 import "./globals.css";
+import { Navbar } from "@/components/Navbar";
 
 const cinzel = localFont({
   src: "./fonts/CinzelVF.ttf",
@@ -27,39 +27,4 @@ export default function RootLayout({
       </body>
     </html>
   );
-}
-
-function Navbar() {
-  return (
-    <nav 
-      className="flex justify-between items-center px-16 py-4 sticky top-0 bg-background bg-opacity-50 z-10"
-      style={{backdropFilter: "blur(10px)"}}
-    >
-      <Leftitem />
-      <Rightitem>
-        <Navitem href="/about">About</Navitem>
-        <Navitem href="/contact">Contact</Navitem>
-      </Rightitem>
-    </nav>
-  );
-}
-
-function Leftitem() { // logo image that links to home page
-  return (
-    <a href="/">
-      <Image src="/images/favicon.ico" alt="logo" className="h-14 w-14" width={100} height={100} />
-    </a>
-  );
-}
-
-function Rightitem({ children }: { children: React.ReactNode }) {
-  return <div className="flex space-x-4">{children}</div>;
-}
-
-function Navitem({ href, children }: { href: string; children: React.ReactNode }) {
-  return (
-    <a href={href} className="text-gray-100 hover:text-gray-200 hover:underline">
-      {children}
-    </a>
-  );
 }

src/app/page.tsx

@@ -1,10 +1,13 @@
 // src/app/page.js
 "use client";
 import React from 'react';
-import { Parallax } from '../components/Parallax';
-import { Section } from '../components/Section';
-import { ImageText } from '../components/ImageText';
-import { Button } from '../components/Button';
+import { Parallax } from '@/components/Parallax';
+import { Section } from '@/components/Section';
+import { ImageText } from '@/components/ImageText';
+import { Button } from '@/components/Button';
+import { ImageGallery } from '@/components/ImageGallery';
+import { Link } from '@/components/Link';
+import { FaInstagram } from 'react-icons/fa';
 
 export default function Home() { 
   return (
@@ -17,7 +20,7 @@ export default function Home() {
 
       <Main/>
 
-      <footer className="p-4 mt-8 text-center" style={{background: "var(--bg-secondary)"}}>
+      <footer className="p-4 mt-8 text-center" style={{background: "rgb(var(--bg-secondary))"}}>
         <p>&copy; 2024 Game Theory@IIITH. All rights reserved.</p>
       </footer>
 
@@ -32,22 +35,44 @@ const Main = () => {
         Join us for exciting tournaments, friendly games, and opportunities to improve your poker skills.
         Whether you&apos;re a beginner or a seasoned player, there&apos;s a seat at our table for you!
         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius ratione quae voluptate praesentium architecto tempore ut ipsum delectus tempora sit! Repellendus, delectus. Illum error doloremque eius magnam aperiam aliquam dolorum?
+
+        <div className="flex justify-end mt-2">
+          <Link href="/join" showArrow>
+            Join Us
+          </Link>
+        </div>
       </Section>
+
       <Section title="Events">
-        Poker tournaments every Wednesday.
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum quia non nesciunt molestias eos minima, repellendus quis repellat inventore omnis corrupti error! Suscipit, magni ab eveniet obcaecati nam aut quasi?
-      </Section>
-      <Section title="placeholder1">
         <ImageText src="/images/placeholder.png" alt="Poker Table" ratio='1:2'>
           <p>
+            Poker tournaments every Wednesday.
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, sit ipsum? Itaque accusantium perspiciatis nemo cupiditate fuga amet exercitationem, deleniti placeat a praesentium quod id reprehenderit distinctio molestiae consequatur atque.
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam animi quas doloribus at sunt officia dicta et minus ipsum. Impedit molestiae error atque nemo doloremque saepe provident officia animi quia?
           </p>
-          <Button onClick={() => console.log('Button clicked')} text="See More" />
+          <Button onClick={() => console.log('Button clicked')} text="See All Events" />
         </ImageText>
+
+      </Section>
+
+      <Section title="Gallery">
+        <ImageGallery src="/images/gallery" width="100%" max={5} />
+        <div className="flex justify-end mt-2">
+          <Link href="/gallery" showArrow>
+            See more
+          </Link>
+        </div>
       </Section>
-      <Section title="placeholder2">
-        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque cum, ullam magni voluptate, porro possimus deleniti delectus veritatis doloremque quam eum amet provident aspernatur quo necessitatibus mollitia inventore, dignissimos soluta?
+
+      <Section title="Contact Us" className="text-center">
+        <p className="flex items-center justify-center">
+          <span>gametheoryiiith@gmail.com</span>
+        </p>
+        <p className="flex items-center justify-center">
+          <a href="https://www.instagram.com/gametheory_iiith" target="_blank" rel="noopener noreferrer" className="flex items-center no-underline">
+            <FaInstagram className="mr-2" /> gametheory_iiith
+          </a>
+        </p>
       </Section>
     </div>
   );
@@ -57,4 +82,9 @@ const At = () => {
   return (
     <span style={{fontFamily: "serif, 'Times New Roman', Times"}}>@</span>
   );
-}
+}
+
+
+/* //TODO:
+ * brief info cards for events, gallery, members, contact
+*/

src/components/Button/button.css

@@ -1,7 +1,7 @@
 .poker-button {
-  background-color: var(--bg-secondary);
-  border: 1px solid var(--fg);
-  color: var(--fg);
+  background-color: rgb(var(--bg-secondary));
+  border: 1px solid rgb(var(--fg-primary));
+  color: rgb(var(--fg-primary));
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
@@ -13,7 +13,7 @@
 }
 
 .poker-button:hover {
-  background-color: var(--fg);
-  color: var(--bg-secondary);
+  background-color: rgb(var(--fg-primary));
+  color: rgb(var(--bg-secondary));
 }
 

src/components/ImageGallery/imagegallery.css

@@ -0,0 +1,9 @@
+.masonry-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+}
+
+.masonry-item {
+    break-inside: avoid;
+}

src/components/ImageGallery/imagegallery.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
+
+interface ImageGalleryProps {
+    src: string;
+    width: string;
+    max?: number;
+}
+
+const ImageGallery = ({ src, width, max }: ImageGalleryProps) => {
+    const [images, setImages] = useState<string[]>([]);
+
+    useEffect(() => {
+        const fetchImages = async () => {
+            const response = await fetch(`${src}/images.txt`);
+            const text = await response.text();
+            const staticImages = text.split('\n').filter(name => name.trim() !== '').map(name => `${name.trim()}`);
+
+            const limitedImages = max ? staticImages.slice(0, max) : staticImages;
+            setImages(limitedImages);
+        };
+
+        fetchImages();
+    }, [max]);
+
+    return (
+        <div style={{ width }}>
+            <div className={`columns-2 gap-5 sm:columns-2 sm:gap-8 md:columns-3 lg:columns-3 [&>img:not(:first-child)]:mt-8`}>
+                {images.map((src, index) => (
+                    <Image 
+                        key={index}
+                        src={src} 
+                        alt={`Image ${index}`} 
+                        // layout="responsive" 
+                        width={300} 
+                        height={200}
+                        className="transition duration-300 ease-in-out transform hover:scale-105"
+                    />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default ImageGallery;

src/components/ImageGallery/index.tsx

@@ -0,0 +1,2 @@
+import ImageGallery from './imagegallery';
+export { ImageGallery };

src/components/ImageText/ImageText.module.css

@@ -0,0 +1,34 @@
+/* ImageText.module.css */
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.image {
+  width: 50%;
+}
+
+.text {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+@media (min-width: 768px) {
+  .container {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .image {
+    width: var(--image-width);
+  }
+
+  .text {
+    width: var(--text-width);
+    align-items: baseline;
+  }
+}

src/components/ImageText/imagetext.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import Image from 'next/image';
+import styles from './ImageText.module.css';
 
 interface ImageTextProps {
   src: string;
@@ -13,10 +14,13 @@ export const ImageText = ({ src, alt, ratio, children, className }: ImageTextPro
   ratio = ratio || '1:1';
   const w1 = parseInt(ratio.split(':')[0]);
   const w2 = parseInt(ratio.split(':')[1]);
+  const imageWidth = `${100 * w1 / (w1 + w2)}%`;
+  const textWidth = `${100 * w2 / (w1 + w2)}%`;
+
   return (
-    <div className={`flex items-center space-x-8 ${className}`}>
-      <Image src={src} alt={alt} width={800} height={800} style={{ width: `${ 100 * w1 / (w1 + w2) }%` }}/>
-      <div className="text-justify space-y-8" style={{ width: `${ 100 * w2 / (w1 + w2) }%` }}>
+    <div className={`md:space-x-8 md:space-y-0 space-y-8 ${styles.container} ${className}`} style={{ '--image-width': imageWidth, '--text-width': textWidth } as React.CSSProperties}>
+      <Image src={src} alt={alt} width={800} height={800} className={styles.image} />
+      <div className={`${styles.text} text-justify space-y-8`}>
         {children}
       </div>
     </div>

src/components/Link/index.tsx

@@ -0,0 +1 @@
+export { Link } from './link'