Merge pull request #73 from Daksh-SASTRA/merch_2k23_abdul

Merch 2k23 abdul

components/Buttons/buttons.module.css

@@ -5,8 +5,8 @@
   padding: 15px 30px;
   /* color: #2621b7; */
   /* color: #DA0037; */
-  color: var(--color-white);
-  background-color: var(--color-black);
+  color: var(--color-black);
+  background-color: var(--color-white);
   /* background-image: var(--text-gradient-color); */
   /* background-clip:padding-box; */
   /* -webkit-background-clip: text; */
@@ -23,6 +23,13 @@
 .global_button:hover {
   /* color: #05559c; */
   /* color:#ff0040; */
-  color: var(--color-black);
-  background-color: var(--color-white);
+  color: var(--color-white);
+  background-color: var(--color-black);
+}
+@media screen and (max-width: 500px){
+  .global_button{
+    padding: 10px 20px;
+    font-size: 12px;
+
+  }
 }

components/Merch/MerchComp.js

@@ -0,0 +1,17 @@
+import React, { useState } from 'react'
+import styles from './merch.module.css'
+import MerchItem from "./Merchandise";
+import tshirt from '../../public/shirtpreview/tshirt.webp'
+import hoodie from '../../public/shirtpreview/hoodie.webp'
+
+
+function Merch() {
+
+    return (
+        <div className={styles.merch_container}>
+                <MerchItem merchName={"TSHIRT"} imageLink={tshirt} shoppingLink="/merch/tshirt"/>
+                <MerchItem merchName={"HOODIE"} imageLink={hoodie} shoppingLink="/merch/hoodie"/>
+        </div>
+    )
+}
+export default Merch;

components/Merch/Merchandise.js

@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+import styles from './merchandise.module.css'
+import cstyles from '../Contact/contact.module.css';
+import Image from 'next/image';
+import side from '../../public/shirtpreview/Side.png'
+import Buttons from '../Buttons/Buttons';
+import Link from 'next/link';
+import btn from '../Buttons/buttons.module.css';
+
+// import { FaArrowRight, FaArrowLeft } from 'react-icons/fa'
+
+function Merch({merchName, imageLink, shoppingLink}) {
+    return (
+        <div className={styles.glassyCard}>
+        <div className={styles.imageContainer}>
+            <h1>{merchName}</h1>
+            <div className={styles.merchImage}>
+            <Image src={imageLink} alt={merchName}/>
+            </div>
+        </div>
+        <div className={btn.global_button}>
+            <Link style={{borderRadius: "5px"}} href={shoppingLink} >SHOP NOW &rarr;</Link>
+        </div>
+        </div>
+    )
+}
+export default Merch;

components/Merch/ProductDetails.js

@@ -0,0 +1,48 @@
+import React from "react";
+import styles from "./productDetails.module.css";
+import Image from "next/image";
+import Button from "../Buttons/Buttons";
+import Link from "next/link";
+
+function Product({ productName, imageLink }) {
+  // productName = productName.toUpperCase();
+  return (
+    <div className={styles.product_details_container}>
+      <div className={styles.product_image}>
+        <Image src={imageLink} width={500} height={600} />
+      </div>
+      <div className={styles.product_details}>
+        <div className={styles.product_name}>{productName}</div>
+        <div className={styles.product_desc}>
+          The Liverpool F.C. Stadium Home Shirt features highly breathable
+          fabric to help keep sweat off your skin while.
+        </div>
+
+        <div className={styles.product_price}>₹299</div>
+
+        <div className={styles.product_size}>
+          <h3>SELECT SIZE</h3>
+          <div className={styles.merch__sizecontainer}>
+            <span className={styles.merch__sizebubble}>XS</span>
+            <span className={styles.merch__sizebubble}>S</span>
+            <span className={styles.merch__sizebubble}>M</span>
+          </div>
+          <br></br>
+          <div className={styles.merch__sizecontainer}>
+            <span className={styles.merch__sizebubble}>L</span>
+            <span className={styles.merch__sizebubble}>XL</span>
+            <span className={styles.merch__sizebubble}>XXL</span>
+          </div>
+        </div>
+
+        <div className={styles.order_now_button}>
+          <Link href={"#"}>
+            <Button text="ORDER NOW &rarr;"></Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Product;