teams,contactus,aboutus,projects,menu frontend created

frontend/components/Card.tsx

@@ -0,0 +1,34 @@
+
+import React, { useState } from "react";
+
+type PropType = {
+ Name: string,
+ Designation: string,
+ Image: string
+}
+function Card(props: PropType) {
+
+ const [hover, setHover] = useState(0);
+ return (
+ <div>
+
+ <div className='h-[13.9rem] w-[13.6rem] my-4 gap-1 px-[-1vw] z-[5] flex flex-col w-[90%] transition-transform duration-300 transform hover:scale-125 sm:hover:scale-[105%] sm:hover:my-[14vh] sm:w-[18rem] sm:h-[15rem] mg:h-[35vh] mg:pb-[5vh] mg:w-[80wv] mg:mb-[3.5rem] ' onMouseEnter={() => { setHover(1) }} onMouseLeave={() => { setHover(0) }}>
+ <img src={props.Image} alt="" className={` object-cover max-w-full h-auto align-middle z-[55] z-0 memberImage w-[13.6rem] h-[13.9rem] flex-shrink-0 flex-basis-[21%] rounded-[1.5rem] sm:w-[15rem] sm:h-[15rem] sm:px-[0rem] mg:w-[17.5rem] mg:h-[18rem] `} />
+
+ <div className={`text-left -mt-16 z-[61] memberDetails `} >
+
+ <span className={`pl-4 text-xl ${hover ? "opacity-0 opacity-1" : ""} md:text-[3vw] `} >{props.Name}</span ><br />
+ <span className={`pl-4 text-base ${hover ? "opacity-0 opacity-1" : ""} md:text-[2vw]`}>{props.Designation}</span>
+ </div>
+ <div className={` z-[60] flex justify-center ${hover ? "opacity-1" : "opacity-0"} : ""} h-12`}>
+ <a href="" className="memberContacts"><img src="/images/aboutUs.svg" alt="" className='w-12 -mt-14 mx-2 h-12' /></a>
+ <a href="" className="memberContacts"><img src="/images/linkedin.svg" alt="" className='w-12 -mt-14 mx-2 h-12' /></a>
+ <a href="" className="memberContacts"><img src="/images/insta.svg" alt="" className='w-12 -mt-14 mx-2 h-12' /></a>
+ </div>
+
+ </div >
+ </div>
+ );
+}
+
+export default Card;

frontend/components/Carousel.tsx

@@ -0,0 +1,23 @@
+import { Carousel } from "@material-tailwind/react";
+
+export function CarouselTransition() {
+ return (
+ <Carousel transition={{ duration: 2 }} className="rounded-xl">
+ <img
+ src="https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2560&q=80"
+ alt="image 1"
+ className="h-full w-full object-cover"
+ />
+ <img
+ src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
+ alt="image 2"
+ className="h-full w-full object-cover"
+ />
+ <img
+ src="https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80"
+ alt="image 3"
+ className="h-full w-full object-cover"
+ />
+ </Carousel>
+ );
+}

frontend/components/Icon.tsx

@@ -0,0 +1,18 @@
+
+import React from "react";
+type PropType = {
+ Image: string
+}
+function Icon(props: PropType) {
+
+
+ return (
+ <div >
+ <div className=' h-auto w-[16vw] my-4 gap-1 px-[-1vw] z-[5] flex flex-col w-[90%] transition-transform duration-300 transform hover:scale-125 md:h-[20vh] md:w-[30vw] sm:h-[15vh] sm:w-[30vw] sm:my-[.5vh] md:my-[-1.5vh] md:mb-[2vh] sm:mx-[2.1vw]' >
+ <a href="#"><img src={props.Image} alt="" className={` object-cover max-w-full h-auto mx-auto z-0 w-[13.6rem] h-[13.9rem] flex-shrink-0 flex-basis-[21%] rounded-[1.5rem] md:w-[80%] sm:h-[90%] sm:w-[100%] `} /></a>
+ </div >
+ </div>
+ );
+}
+
+export default Icon;

frontend/components/Menu.tsx

@@ -0,0 +1,20 @@
+
+import React from "react";
+
+type PropType = {
+ Image: string,
+ Title: string
+}
+
+function MenuItems(props: PropType) {
+ return (
+ <div >
+ <div className=' h-auto w-[16vw] my-4 gap-1 px-[-1vw] z-[5] flex flex-col w-[90%] transition-transform duration-300 transform hover:scale-125 md:h-[20vh] md:w-[30vw] sm:h-[15vh] sm:w-[30vw] sm:my-[.5vh] md:my-[-1.5vh] md:mb-[2vh] sm:mx-[2.1vw]' >
+ <a href=""><img src={props.Image} alt="" className={` object-cover max-w-full h-auto mx-auto z-0 w-[13.6rem] h-[13.9rem] flex-shrink-0 flex-basis-[21%] rounded-[1.5rem] md:w-[80%] sm:h-[90%] sm:w-[100%] `} /></a>
+ <h1 className="text-[rgba(255, 255, 255, 0.85)] align-center text-[1.5rem] weight-[700] sm:text-[4.5vw] md:text-[4vw] sm:mt-[-1rem] md:mt-[-1rem] ">{props.Title}</h1>
+ </div >
+ </div>
+ );
+}
+
+export default MenuItems;

frontend/components/Project.tsx

@@ -0,0 +1,32 @@
+
+import React from "react";
+
+type PropType = {
+ Vertical: string,
+ Quote: string,
+ Image: string
+}
+
+function Project(props: PropType) {
+ const cardStyle = {
+ background: "linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), rgba(255, 255, 255, 0.10)"
+ }
+ return (
+
+ <>
+
+ <div className="w-[25vw] h-[100%] flex flex-col rounded-xl mx-[0.2rem] sm:h-[40vh] sm:my-[5vh] sm:pt-[3vh] sm:w-[50vw] md:w-[50vw] md:my-[10vh] md:h-[30vh]" style={cardStyle}>
+ <div className="flex items-center justify-center"><img src={props.Image} alt="Project Image Not Loaded" className="h-[75%] w-[90%] z-5" /></div>
+ <div className=" h-[90%] mt-[-12vh] rounded-xl self-end w-[100%] sm:h-[130%]" style={{ background: "rgba(71, 71, 71, 0.50)" }}>
+ <h1 className="mt-[7vh] ml-[2vw] text-[1.875rem] md:text-[4vw] sm:text-[4vw]">{props.Vertical}</h1>
+ <h3 className="ml-[2vw] mt-[0.5vh] text-[1.25rem] md:text-[3vw] sm:text-[3vw]">{props.Quote}</h3>
+ <div className="flex items-center justify-center">
+ <button className="flex-row inline-flex py-[1rem] px-[2rem] sm:px-[0.5rem] justify-center items-center rounded-[0.375rem] bg-purple-500 my-[4vh] w-[85%] m-auto color-white h-[3vw] md:h-[7.5vw]" style={{ background: "linear-gradient(0deg, #9E7EF4 0%, #A795D5 100%)" }}><span className="text-[1.5vw] md:text-[3vw] sm:text-[4.5vw]">View Projects</span> <img src="/images/arrow.svg" alt="" className="w-[10%] ml-[0.5vw]" /></button>
+ </div>
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default Project;

frontend/next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+ reactStrictMode: true,
+}
+
+module.exports = nextConfig
+