Add Vision and Mission Components for IET and DAVV

.husky/_/husky.sh

@@ -1,28 +1,9 @@
-#!/bin/sh
-if [ -z "$husky_skip_init" ]; then
-  debug () {
-    if [ "$HUSKY_DEBUG" = "1" ]; then
-      echo "husky (debug) - $1"
-    fi
-  }
-  readonly hook_name="$(basename "$0")"
-  debug "starting $hook_name..."
-  if [ "$HUSKY" = "0" ]; then
-    debug "HUSKY env variable is set to 0, skipping hook"
-    exit 0
-  fi
-  if [ -f ~/.huskyrc ]; then
-    debug "sourcing ~/.huskyrc"
-    . ~/.huskyrc
-  fi
+echo "husky - DEPRECATED
 
-  export readonly husky_skip_init=1
-  sh -e "$0" "$@"
-  exitCode="$?"
+Please remove the following two lines from $0:
 
-  if [ $exitCode != 0 ]; then
-    echo "husky - $hook_name hook exited with code $exitCode (error)"
-  fi
+#!/usr/bin/env sh
+. \"\$(dirname -- \"\$0\")/_/husky.sh\"
 
-  exit $exitCode
-fi
+They WILL FAIL in v10.0.0
+"

app/temp/page.tsx

@@ -7,23 +7,24 @@ import { Playfair_Display } from "next/font/google";
 import Image from "next/image";
 import Director from "@/components/about-page/Director";
 import VC from "@/components/about-page/VC";
-
+import Mission from "@/components/about-page/Mission";
+import Vision from "@/components/about-page/Vision";
+import Landmarks from "@/components/about-page/Landmarks";
 const playfair = Playfair_Display({
   subsets: ["latin"],
   weight: ["400", "500", "600", "700", "800", "900"],
 });
 const page = () => {
   return (
     <>
-      <div className=" overflow-hidden bg-white">
-        <Navbar />
-        <About />
-        <History />
-        <div className="p-5 flex flex-col space-y-5">
-          <Director />
-          <VC />
-        </div>
-      </div>
+      <Navbar />
+      <About />
+      <History />
+      <Landmarks />
+      <Vision />
+      <Mission />
+      <Director />
+      <VC />
     </>
   );
 };

components/about-page/Customslide.tsx

@@ -0,0 +1,30 @@
+"use client";
+import React from "react";
+import { Manrope } from "next/font/google";
+import { Achievement } from "grommet-icons";
+
+const manrope = Manrope({
+  subsets: ["latin"],
+  weight: ["200", "300", "400", "500"],
+});
+interface Slideprops {
+  id: string;
+  //  icon: JSX.Element | string;
+  heading: string;
+  paragraph: string;
+}
+const Customslide = ({ id, heading, paragraph }: Slideprops) => {
+  return (
+    <div className=" border border-light-gray hover:border-2 hover:border-dark-blue hover:text-dark-blue rounded-2xl mx-16 my-6 py-2 space-x-2 space-y-2">
+      <div className="flex justify-center my-3">
+        {" "}
+        <Achievement size="large" />
+      </div>
+      <h2 className={`text-center ${manrope.className}`}>{heading}</h2>
+      <p className={`text-xs text-start ${manrope.className} pl-3`}>
+        {paragraph}
+      </p>
+    </div>
+  );
+};
+export default Customslide;

components/about-page/DesCard.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+interface Cardprop {
+  id: string;
+  description: string;
+}
+const DesCard = ({ id, description }: Cardprop) => {
+  return (
+    <div className="px-4 py-4 font-serif ">
+      <h1 className="text-dark-blue text-4xl font-bold font-mono  ">{id}</h1>
+      <p className="text-light-gray text-xs border-t-2 border-x-light-gray font-sans py-4 ">
+        {description}
+      </p>
+    </div>
+  );
+};
+export default DesCard;

components/about-page/Landmarks.tsx

@@ -0,0 +1,37 @@
+"use client";
+import React from "react";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import dynamic from "next/dynamic";
+import { landmarks } from "@/constants/about-page/landmarks";
+import Customslide from "./Customslide";
+const Slider = dynamic(() => import("react-slick"), {
+  ssr: false,
+});
+function Landmarks() {
+  var settings = {
+    dots: true,
+    infinite: false,
+    speed: 500,
+    slidesToScroll: 4,
+    slidesToShow: 4,
+  };
+  return (
+    <div className="slider-container my-20">
+      <Slider {...settings}>
+        {landmarks.map((value: any, id) => {
+          return (
+            <Customslide
+              key={id}
+              id={value.id}
+              heading={value.heading}
+              paragraph={value.paragraph}
+            />
+          );
+        })}
+      </Slider>
+    </div>
+  );
+}
+
+export default Landmarks;

components/about-page/Mission.tsx

@@ -0,0 +1,39 @@
+"use client";
+import React from "react";
+import {
+  missions,
+  missionDavv,
+  missionIet,
+} from "@/constants/about-page/mission";
+import { useState } from "react";
+import DesCard from "./DesCard";
+
+const Mission = () => {
+  const [preview, setPreview] = useState<Object[]>(missionIet);
+  return (
+    <div className="my-20 mx-16">
+      <div className=" flex justify-center ">
+        {missions &&
+          missions.map((value, id) => (
+            <button
+              key={id}
+              className={`hover:underline  border-b-light-gray text-2xl hover:font-semibold text-dark-blue px-6 ${
+                preview === value.link
+                  ? "font-semibold underline"
+                  : "text-dark-blue"
+              }`}
+              onClick={() => setPreview(value.link)}
+            >
+              {value.name}
+            </button>
+          ))}
+      </div>
+      <div className="grid grid-cols-3  my-4">
+        {preview?.map((item: any, index: number) => (
+          <DesCard key={item.id} id={item.id} description={item.description} />
+        ))}
+      </div>
+    </div>
+  );
+};
+export default Mission;

components/about-page/Vision.tsx

@@ -0,0 +1,79 @@
+import {
+  visionIET,
+  visionDavvText,
+  visionIetText,
+  visionDAVV,
+} from "@/constants/about-page/about";
+import { px } from "framer-motion";
+import Image from "next/image";
+import React from "react";
+import { Playfair_Display } from "next/font/google";
+
+const playfair = Playfair_Display({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700", "800", "900"],
+});
+
+const Vision = () => {
+  return (
+    <div className="mx-14 my-20">
+      <div className="flex justify-end">
+        <div>
+          <h1
+            className={`${playfair.className} text-black text-4xl mt-10 px-16 `}
+          >
+            VISION-IET
+          </h1>
+        </div>
+        <div className="relative text-center">
+          <div className="relative  ">
+            <Image
+              src={visionIET}
+              alt="Vision IET"
+              width={800}
+              height={180}
+              className="h-28"
+            />
+            <div className="absolute inset-0 bg-dark-blue opacity-50"></div>
+          </div>
+
+          <div className="w-full absolute top-0 left-0 text-center mt-10">
+            <p className="text-white text-xs  text-start px-12 leading-relaxed">
+              {visionIetText}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex mt-8">
+        <div className="relative text-center">
+          <div className="relative ">
+            <Image
+              src={visionDAVV}
+              alt="Vision DAVV"
+              width={800}
+              height={800}
+              className="h-28"
+            />
+            <div className="absolute inset-0 bg-dark-blue opacity-50"></div>
+          </div>
+
+          <div className="w-full absolute top-0 left-0 text-center mt-10">
+            <p className="text-white text-xs  text-start px-12 leading-relaxed">
+              {visionDavvText}
+            </p>
+          </div>
+        </div>
+        <div>
+          <h1
+            className={`${playfair.className} text-black text-4xl mt-10 px-16 `}
+          >
+            VISION-DAVV
+          </h1>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Vision;

constants/about-page/about.ts

@@ -3,6 +3,12 @@ export const aboutIET =
 export const aboutImage = "/about/aboutietimg.png";
 export const aboutDirector = "/about/about_director.png";
 export const aboutVC = "/about/aboutVC.png";
+export const visionIET = "/about/visionietimg.png";
+export const visionDAVV = "/about/visiondavvimg.png";
+export const visionDavvText =
+  "Emerge as a premier higher learning institution by creating, advancing and disseminating knowledge with collective wisdom, through value imbued holistic education for peaceful, sustainable and humane society.";
+export const visionIetText =
+  "To be a leading human resource development centre for generating, advancing and disseminating knowledge, serve and build value to the society and industry through research, entrepreneurship and outreach activities.";
 export const aboutDirectorText =
   "Devi Ahilya Vishwavidyalaya, Indore (DAVV) formerly, established in 1964 at Indore - the pride city of Malwa, is the leading university in the central part of India.Initially it was known as the University of Indore and the jurisdiction was limited to the district of Indore. Later in the year 1988 university was renamed after the famous and benevolent ruler of Malwa i.e. Devi Ahilya Bai Holkar.During reorganization of the Universities the jurisdiction of the university was expanded over to Indore division spanning over Six Districts. In Indore division, here are fifty four development blocks, out of which forty development blocks are identified as tribal blocks. In all there are 153 affiliated colleges imparting education at UG/PG level in almost all the basic & professional disciplines Most of them also provide the facilities of doctoral research. University now has 6000 students in its campus and total 1, 20,000 students in its affiliated colleges. University has 16 Faculties.";
 export const aboutVCText =

constants/about-page/landmarks.ts

@@ -0,0 +1,61 @@
+"use client";
+import React from "react";
+import { Achievement } from "grommet-icons";
+export const landmarks = [
+  {
+    id: "1",
+    // icon: () => <Achievement size="large" color="brand" />,
+    heading: "Lorem Ipsum",
+    paragraph:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. aEtiam eu turpis molestie",
+  },
+  {
+    id: "2",
+    // icon:  <Achievement size='large' color='brand'/>,
+    heading: "Lorem Ipsum",
+    paragraph:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. aEtiam eu turpis molestie",
+  },
+  {
+    id: "3",
+    // icon: <Achievement size='large' color='brand'/> ,
+    heading: "Lorem Ipsum",
+    paragraph:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. aEtiam eu turpis molestie",
+  },
+  {
+    id: "4",
+    // icon: <Achievement size='large' color='brand'/> ,
+    heading: "Lorem Ipsum",
+    paragraph:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. aEtiam eu turpis molestie",
+  },
+  {
+    id: "5",
+    // icon: <Achievement size='large' color='brand'/> ,
+    heading: "Lorem Ipsum",
+    paragraph:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. aEtiam eu turpis molestie",
+  },
+  {
+    id: "6",
+    // icon: <Achievement size='large' color='brand'/> ,
+    heading: "Lorem Ipsum",
+    paragraph:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. aEtiam eu turpis molestie",
+  },
+  {
+    id: "7",
+    // icon: <Achievement size='large' color='brand'/> ,
+    heading: "Lorem Ipsum",
+    paragraph:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. aEtiam eu turpis molestie",
+  },
+  {
+    id: "8",
+    // icon: <Achievement size='large' color='brand'/>,
+    heading: "Lorem Ipsum",
+    paragraph:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. aEtiam eu turpis molestie",
+  },
+];