Skip to content

Commit

Permalink
[feat] menupage, contactus , project frontend created
Browse files Browse the repository at this point in the history
  • Loading branch information
@paaban25
paaban25 committed Sep 24, 2023
1 parent 7fc2d29 commit d341c73
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 78 deletions.
29 changes: 6 additions & 23 deletions frontend/components/Icon.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,18 @@

import React, { useState } from "react";







import React from "react";
type PropType = {
Image: string
}

function Card(props: PropType) {

const imgStyle={
height:"13rem",
width:"13rem",
flexShrink:"0",
flexBasis: "21%",
borderRadius: "5rem"
}

function Icon(props: PropType) {


return (
<div>
<div className=' my-4 gap-1 px-[1vw] z-[5] flex flex-col w-[30%] transition-transform duration-300 transform hover:scale-125 sm:hover:my-[5vh] md:hover:my-[5vh] sm:w-[14.6rem] sm:h-[15rem] ' style={imgStyle} >
<a href=""><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] `} /></a>
<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 Card;
export default Icon;
42 changes: 4 additions & 38 deletions frontend/components/Menu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,4 @@

// import React, { useState } from "react";

// type PropType = {
// Image: string,
// Title: string
// }

// function MenuItems(props: PropType) {

// const imgStyle={

// width:"12rem",
// flexShrink:"0",
// flexBasis: "21%",
// borderRadius: "5rem"
// }



// return (
// <div>
// <div className=' mt-2 px-[1vw] pb-[2vh] flex flex-col w-[30%] transition-transform duration-300 transform hover:scale-125 sm:hover:my-[5vh] md:hover:my-[5vh] sm:w-[14.6rem] sm:h-[15rem] ' style={imgStyle} >
// <a href=""><img src={props.Image} alt="" className={`object-cover max-w-full h-auto align-middle z-0 w-[13.6rem] h-[13.9rem] flex-shrink-0 flex-basis-[21%] rounded-[1.5rem] sm:w-[15rem] sm:h-[15rem] sm:px-[0rem] `} /></a>
// <h1 className="text-[rgba(255, 255, 255, 0.85)] align-center text-[1.5rem] weight-[700] ">{props.Title}</h1>
// </div >
// </div>
// );
// }

// export default MenuItems;




import React from "react";

type PropType = {
Expand All @@ -42,10 +8,10 @@ type PropType = {

function MenuItems(props: PropType) {
return (
<div>
<div className=' border-4 border-black 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] ' >
<a href=""><img src={props.Image} alt="" className={` border-3 border-white object-cover max-w-full h-auto align-middle z-0 w-[13.6rem] h-[13.9rem] flex-shrink-0 flex-basis-[21%] rounded-[1.5rem] md:h-[90%] md:w-[70%] sm:h-[90%] sm:w-[70%] `} /></a>
<h1 className="text-[rgba(255, 255, 255, 0.85)] align-center text-[1.5rem] weight-[700] ">{props.Title}</h1>
<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>
);
Expand Down
21 changes: 11 additions & 10 deletions frontend/pages/contactUs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,12 @@ const Contact = () => {

return (
<>
<div className="bg-[url('/images/bg.png')] bg-cover bg-center h-[100vh]">
<div className="bg-[url('/images/bg.png')] bg-cover bg-center h-[100vh] pt-[1vh]">
<div className='w-full flex justify-center'>
<div className=" inline-flex px-5 py-1.5 backdrop-blur-2xl font-medium flex-col justify-center items-center gap-2 rounded-3xl text-3xl mt-[5%] bg-[linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.10) 100%)] " style={styleObj}>Get In Touch</div>
<div className=" inline-flex px-5 py-1.5 backdrop-blur-2xl font-medium flex-col justify-center items-center gap-2 rounded-3xl text-3xl mt-[5%] bg-[linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.10) 100%)] md:mb-[2vh]" style={styleObj}>Get In Touch</div>
</div>
<div className='mt-3 m-auto block text-center h-[65vh] w-[70%] pl-[2%] pr-[2%] pt-[1%] flex flex-row-reverse flex-wrap justify-around'>

<div className=' m-auto block text-center h-[75vh] w-[75%] pl-[2%] pr-[2%] pt-[1%] flex flex-row flex-wrap overflow-scroll-y justify-around sm:pt-[1vh] md:pt-[-2.0vh]'>
{contacts.map((contact, it) => {
return (<>
<Icon Image={contact.Image} />
Expand All @@ -28,13 +29,13 @@ const Contact = () => {
)
}
</div>
<div className="flex align-center justify-center mt-10 mb-0">
<div className="inline-flex px-2 py-4 items-start gap-2 rounded-3xl shadow-md shadow-slate-100 backdrop-blur-2xl " style={styleObj}>
<a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/contactUs.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/fluentPeople.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/home.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/info.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/lightBulb.svg" alt="" /></a>
<div className="flex align-center justify-center mt-[0vh] mb-0 md:mt-[2.5vh]">
<div className="inline-flex px-2 py-4 items-start gap-2 rounded-3xl " style={styleObj}>
<a href=""><img className='h-5 w-5 mx-2 shrink-0 sm:h-[3vw] sm:w-[3vw] md:h-[3vw] md:w-[3vw]' src="/images/contactUs.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0 sm:h-[3vw] sm:w-[3vw] md:h-[3vw] md:w-[3vw]' src="/images/fluentPeople.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0 sm:h-[3vw] sm:w-[3vw] md:h-[3vw] md:w-[3vw]' src="/images/home.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0 sm:h-[3vw] sm:w-[3vw] md:h-[3vw] md:w-[3vw]' src="/images/info.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0 sm:h-[3vw] sm:w-[3vw] md:h-[3vw] md:w-[3vw]' src="/images/lightBulb.svg" alt="" /></a>
</div>
</div>
</div>
Expand Down
14 changes: 7 additions & 7 deletions frontend/pages/menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const Menu = () => {
<>
<div className="bg-[url('/images/bg.png')] bg-cover bg-center h-[100vh] pt-[10vh]">

<div className=' m-auto block text-center h-[75vh] w-[70%] pl-[2%] pr-[2%] pt-[1%] flex flex-row flex-wrap overflow-scroll-y justify-around'>
<div className=' m-auto block text-center h-[75vh] w-[75%] pl-[2%] pr-[2%] pt-[1%] flex flex-row flex-wrap overflow-scroll-y justify-around sm:pt-[1vh] md:pt-[-2.0vh]'>
{menus.map((menu, it) => {
return (<>
<MenuItems Image={menu.Image} Title={menu.Title} />
Expand All @@ -26,13 +26,13 @@ const Menu = () => {
)
}
</div>
<div className="flex align-center justify-center mt-10 mb-0">
<div className="flex align-center justify-center mt-[6vh] mb-0">
<div className="inline-flex px-2 py-4 items-start gap-2 rounded-3xl " style={styleObj}>
<a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/contactUs.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/fluentPeople.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/home.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/info.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/lightBulb.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0 sm:h-[3vw] sm:w-[3vw] md:h-[3vw] md:w-[3vw]' src="/images/contactUs.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0 sm:h-[3vw] sm:w-[3vw] md:h-[3vw] md:w-[3vw]' src="/images/fluentPeople.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0 sm:h-[3vw] sm:w-[3vw] md:h-[3vw] md:w-[3vw]' src="/images/home.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0 sm:h-[3vw] sm:w-[3vw] md:h-[3vw] md:w-[3vw]' src="/images/info.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0 sm:h-[3vw] sm:w-[3vw] md:h-[3vw] md:w-[3vw]' src="/images/lightBulb.svg" alt="" /></a>
</div>
</div>
</div>
Expand Down

0 comments on commit d341c73

Please sign in to comment.