Merge pull request #34 from ms-club-sliit/development

release v1.0.0

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
 }

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": false,
+    "singleQuote": true
+}

package.json

@@ -9,15 +9,26 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mui/icons-material": "^5.14.15",
+    "@mui/material": "^5.14.15",
+    "next": "13.5.4",
     "react": "^18",
     "react-dom": "^18",
-    "next": "13.5.4"
+    "styled-components": "^6.1.0"
   },
   "devDependencies": {
     "autoprefixer": "^10",
-    "postcss": "^8",
-    "tailwindcss": "^3",
     "eslint": "^8",
-    "eslint-config-next": "13.5.4"
+    "eslint-config-next": "13.5.4",
+    "postcss": "^8",
+    "tailwindcss": "^3"
   }
 }

public/dummydata/gallery.json

@@ -0,0 +1,50 @@
+{
+    "gallery": [
+        {
+            "id":1,
+            "category":"poya_day",
+            "image": "../public/static/Gallery.png"
+        },
+        {
+            "id":2,
+            "category":"katina_pooja",
+            "image": "public/static/Gallery.png"
+        },
+        {
+            "id":3,
+            "category":"bodhi_pooja",
+            "image": "public/static/Gallery.png"
+        },
+        {
+            "id":4,
+            "category":"charity",
+            "image": "public/static/Gallery.png"
+        },
+        {
+            "id":5,
+            "category":"poya_day",
+            "image": "public/static/Gallery.png"
+        },
+        {
+            "id":6,
+            "category":"katina_pooja",
+            "image": "public/static/Gallery.png"
+        },
+        {
+            "id":7,
+            "category":"bodhi_pooja",
+            "image": "public/static/Gallery.png"
+        },
+        {
+            "id":8,
+            "category":"charity",
+            "image": "public/static/Gallery.png"
+        },
+        {
+            "id":9,
+            "category":"poya_day",
+            "image": "public/static/Gallery.png"
+        }
+    ]
+
+}

src/CSS/gallery.css

@@ -0,0 +1,10 @@
+.gallery-container {
+    columns: 3; /* Set the number of columns (3 images per row) */
+    column-gap: 0; /* Adjust the gap between columns */
+
+    .gallery-item {
+      break-inside: avoid; /* Prevent images from breaking across columns */
+      margin: 0 5px; /* Add spacing between items */
+    }
+  }
+

src/app/about/page.jsx

@@ -0,0 +1,128 @@
+'use client'
+import React, { useEffect } from 'react'
+import historyData from '@/data/HistoryData.json'
+
+const Image = 'image'
+
+const About = () => {
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add(`show-${entry.target.dataset.direction}`)
+        } else {
+          entry.target.classList.remove(
+            `show-${entry.target.dataset.direction}`
+          )
+        }
+      })
+    })
+
+    const hiddenRightElements = document.querySelectorAll('.hide-right')
+    const hiddenLeftElements = document.querySelectorAll('.hide-left')
+
+    hiddenRightElements.forEach((el) => {
+      el.dataset.direction = 'right'
+      observer.observe(el)
+    })
+
+    hiddenLeftElements.forEach((el) => {
+      el.dataset.direction = 'left'
+      observer.observe(el)
+    })
+  }, [])
+
+  return (
+    <>
+      <div className="min-h-screen w-full bg-white px-[40px] py-[20px] overflow-hidden">
+        <div className="max-w-screen-xl mx-auto">
+          <div className="grid gap-[40px]">
+            <div>
+              <div className="text-center text-black font-bold text-2xl md:text-3xl">
+                Sri Sudharmaramaya
+              </div>
+              <div className="flex justify-center">
+                <div className="bg-[#740000] w-[30px] h-[3px]"></div>
+                <div className="bg-[#E35F00] w-[50px] h-[3px]"></div>
+              </div>
+            </div>
+            <div className="text-black">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
+              vehicula libero nec augue molestie, non interdum tellus porttitor.
+              Sed non ultrices dui. Cras auctor porttitor turpis in feugiat.
+              Integer feugiat, ipsum quis commodo pharetra, nisl felis bibendum
+              libero, eu congue libero nisl et nulla. Morbi a interdum diam, ut
+              elementum sem. Phasellus vulputate egestas lacus a ultricies.
+              Proin vestibulum tempus quam ac condimentum. Vivamus at nibh quis
+              tortor posuere vehicula ut sit amet augue. Quisque risus enim,
+              tristique at dolor nec, hendrerit hendrerit massa. In lib
+            </div>
+            <div>
+              <div className="text-center text-black font-semibold text-lg md:text-xl">
+                History of Sri Sudharmaramaya
+              </div>
+              <div className="flex justify-center">
+                <div className="bg-[#740000] w-[100px] h-[2px]"></div>
+                <div className="bg-[#E35F00] w-[160px] h-[2px]"></div>
+              </div>
+            </div>
+            <div className="flex justify-center">
+              <div className="w-fit lg:w-full">
+                {historyData && historyData.data.length ? (
+                  historyData.data.map((item, index) => (
+                    <div
+                      key={index}
+                      className="max-w-[500px] lg:max-w-full justify-between relative"
+                    >
+                      <div className="w-full lg:flex">
+                        <div
+                          className={`w-full lg:w-1/2 flex justify-center items-center border-[#740000] pt-[20px] lg:pb-[50px] px-[40px] xs:px-[50px] lg:px-[0px] ${
+                            index % 2 == 0
+                              ? 'border-l-[4px] lg:border-r-[2px] lg:border-l-0 order-1'
+                              : 'border-l-[4px] lg:border-l-[2px] order-2'
+                          }`}
+                        >
+                          <div
+                            className={`w-[240px] h-[150px] xs:w-[300px] xs:h-[180px] sm:w-[400px] sm:h-[250px] lg:w-[360px] lg:h-[220px] ${
+                              index % 2 == 0 ? 'hide-right' : 'hide-left'
+                            }`}
+                          >
+                            <img
+                              className="object-cover w-[240px] h-[150px] xs:w-[300px] xs:h-[180px] sm:w-[400px] sm:h-[250px] lg:w-[360px] lg:h-[220px]"
+                              src={`./static/${item.image}`}
+                            />
+                          </div>
+                        </div>
+                        <div
+                          className={`w-full lg:w-1/2 flex justify-center border-[#740000] pt-[20px] pb-[50px] px-[40px] xs:px-[50px] lg:px-[0px] ${
+                            index % 2 == 0
+                              ? 'border-l-[4px] lg:border-l-[2px] order-2'
+                              : 'border-l-[4px] lg:border-r-[2px] lg:border-l-0 order-1'
+                          }`}
+                        >
+                          <div
+                            className={`grid gap-[20px] lg:gap-[0px] text-black w-[240px] xs:w-[300px] sm:w-[400px] lg:w-[360px] ${
+                              index % 2 == 0 ? 'hide-left' : 'hide-right'
+                            }`}
+                          >
+                            <div className="font-bold">{item.year}</div>
+                            <div>{item.description}</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="rounded-full w-[25px] h-[25px] bg-[#E35F00] absolute left-[2px] lg:left-[50%] top-[20px] translate-x-[-50%]"></div>
+                    </div>
+                  ))
+                ) : (
+                  <></>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default About

src/app/dhammaSchool/data/events.json

@@ -0,0 +1,30 @@
+[
+  {
+    "id": 1,
+    "imageSrc": "/static/worship.png",
+    "imageAlt": "Image of a person worshipping",
+    "title": "Poya day sill",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Namhtht vehicula libero"
+  },
+  {
+    "id": 2,
+    "imageSrc": "/static/worship.png",
+    "imageAlt": "Image of a person worshipping",
+    "title": "Poya day sill",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Namhtht vehicula libero"
+  },
+  {
+    "id": 3,
+    "imageSrc": "/static/worship.png",
+    "imageAlt": "Image of a person worshipping",
+    "title": "Poya day sill",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Namhtht vehicula libero"
+  },
+  {
+    "id": 4,
+    "imageSrc": "/static/worship.png",
+    "imageAlt": "Image of a person worshipping",
+    "title": "Poya day sill",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Namhtht vehicula libero"
+  }
+]

src/app/dhammaSchool/page.jsx

@@ -0,0 +1,45 @@
+import EventContainer from '@/components/dhammaSchoolEvents/eventContainer'
+import events from './data/events.json'
+
+const DhammaSchoolPage = () => {
+  return (
+    <div className="bg-white py-8">
+      <div className="text-black container mx-auto px-20">
+        <div className="block mx-auto my-12 font-semibold w-full lg:w-2/4">
+          <p className="text-center text-4xl lg:text-5xl mb-4 leading-normal">
+            Sri Sudharmaramaya Dhamma School
+          </p>
+        </div>
+        <div className="block my-12">
+          <div className="h-72 w-full bg-gray-300"></div>
+        </div>
+        <div className="block my-12">
+          <p className="text-base">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
+            vehicula libero nec augue molestie, non interdum tellus porttitor.
+            Sed non ultrices dui. Cras auctor porttitor turpis in feugiat.
+            Integer feugiat, ipsum quis commodo pharetra, nisl felis bibendum
+            libero, eu congue libero nisl et nulla. Morbi a interdum diam, ut
+            elementum sem. Phasellus vulputate egestas lacus a ultricies. Proin
+            vestibulum tempus quam ac condimentum. Vivamus at nibh quis tortor
+            posuere vehicula ut sit amet augue. Quisque risus enim, tristique at
+            dolor nec, hendrerit hendrerit massa. In lib
+          </p>
+        </div>
+        <div className="block my-12">
+          <div className="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
+            {events.length ? (
+              events.map((event) => (
+                <EventContainer key={event.id} event={event} />
+              ))
+            ) : (
+              <p className="flex justify-center">No events to display.</p>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DhammaSchoolPage

src/app/events/page.jsx

@@ -0,0 +1,9 @@
+import DhammaSchoolEventsPage from '@/components/dhammaSchoolEvents'
+
+export default function event() {
+  return (
+    <div>
+      <DhammaSchoolEventsPage />
+    </div>
+  )
+}