ui changes

mrswastik-robot · May 25, 2024 · c9e2a5e · c9e2a5e
1 parent 0708067
commit c9e2a5e
Show file tree

Hide file tree

Showing 8 changed files with 200 additions and 31 deletions.
diff --git a/app/event-details/[eventTitle]/custom.css b/app/event-details/[eventTitle]/custom.css
@@ -0,0 +1,140 @@
+h2 {
+    font-size: 20px;
+    font-family: Plus Jakarta Sans;
+    font-weight: 700;
+    font-style: normal;
+}
+
+h3 {
+    font-size: 16px;
+    font-weight: 700;
+    font-style: normal;
+    text-transform: capitalize;
+    color: #000000;
+    background-color: #ffffff;
+    font-family: Plus Jakarta Sans;
+}
+
+div p p {
+    font-size: 14px;
+    font-weight: 400;
+    font-style: normal;
+    text-decoration: none;
+    text-transform: none;
+    text-align: left;
+    color: #525769;
+    font-family: Plus Jakarta Sans;
+}
+
+div.h-full.pt-4 {
+    background-color: #e8eaf6;
+}
+
+button {
+    font-family: Plus Jakarta Sans;
+    font-weight: 500;
+    font-style: normal;
+    font-size: 14px;
+    text-transform: capitalize;
+}
+
+p {
+    font-family: Plus Jakarta Sans;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 14px;
+    color: #212121;
+}
+
+div div a {
+    font-family: Plus Jakarta Sans;
+    font-size: 14px;
+    font-weight: 500;
+    font-style: normal;
+}
+
+td {
+    font-family: Plus Jakarta Sans;
+    font-weight: 500;
+    font-style: normal;
+    font-size: 14px;
+    color: #1976d2;
+}
+
+a td p {
+    color: #212121;
+    font-family: Plus Jakarta Sans;
+    font-weight: 400;
+    font-style: normal;
+}
+
+h1 {
+    font-family: Plus Jakarta Sans;
+    font-size: 16px;
+    font-weight: 700;
+    font-style: normal;
+    text-transform: none;
+    color: #311b92;
+}
+
+span {
+    font-family: Plus Jakarta Sans;
+    font-size: 14px;
+    color: #212121;
+}
+
+ol li p {
+    font-family: Plus Jakarta Sans;
+    font-size: 14px;
+    color: #424242;
+}
+
+div.rounded-3xl {
+    font-family: Plus Jakarta Sans;
+    font-size: 14px;
+}
+
+label {
+    font-family: Plus Jakarta Sans;
+    font-size: 14px;
+    font-weight: 500;
+    font-style: normal;
+    text-decoration: none;
+    color: #212121;
+}
+
+div.text-sm.font-normal.opacity-70 {
+    font-family: Plus Jakarta Sans;
+    font-size: 14px;
+}
+
+th {
+    font-family: Plus Jakarta Sans;
+}
+
+button.inline-flex {
+    font-family: Plus Jakarta Sans;
+    font-size: 14px;
+    font-weight: 500;
+    font-style: normal;
+}
+
+p.ml-4.text-zinc-400 {
+    font-family: Plus Jakarta Sans;
+}
+
+p.ml-4 {
+    font-family: Plus Jakarta Sans;
+    font-weight: 500;
+    font-style: normal;
+    font-size: 16px;
+}
+
+
+/* input.lg:w-[38rem].w-[22rem].text-sm.border.border-gray-300.rounded-2xl.p-2.pl-8 {
+    display: none;
+}*/
+
+input {
+    display: none;
+}
diff --git a/app/event-details/[eventTitle]/layout.tsx b/app/event-details/[eventTitle]/layout.tsx
@@ -1,4 +1,4 @@
-
+import './custom.css'
 
 export default function EventDetailsPage ({
     children,

diff --git a/app/event-details/[eventTitle]/page.tsx b/app/event-details/[eventTitle]/page.tsx
@@ -1,4 +1,4 @@
-
+import custom from './custom.module.css'
 "use client";
 
 import Image from 'next/image'
@@ -337,7 +337,7 @@ const EventDetailsPage = ({ params: { eventTitle } }: Props) => {
                 </div>
                 <div className=' max-w-[70%]'>
                     <div className='p-4 space-y-7'>
-                        <h1 className='text-[30px] font-[500]'>{eventObject.title}</h1>
+                        <h1 className='text-[30px] font-[500] text-[#311b92]'>{eventObject.title}</h1>
                     </div>
                 </div>
             </div>
@@ -369,15 +369,15 @@ const EventDetailsPage = ({ params: { eventTitle } }: Props) => {
             <div className='md:flex gap-10 md:justify-between flex-row border border-[#d3d3d3] rounded-md m-4'>
 
             <div className=' p-4 space-y-3 mt-3'>
-                <h1 className=' font-[500] text-[20px]'>Date and Time</h1>
+                <h1 className=' font-[500] text-[20px] text-[#311b92]'>Date and Time</h1>
                 <div className=' flex gap-3'>
                     <CalendarCheck2 size={24} />
                     {dateString && <p className=' font-[400] text-gray-900 text-[17px]'>{dateString}</p>}
                 </div>
             </div>
 
             <div className="mb-4">
-            <h1 className=' font-[500] text-[20px] px-4 my-3 lg:mt-6'>Location</h1>
+            <h1 className=' font-[500] text-[20px] px-4 my-3 lg:mt-6 text-[#311b92]'>Location</h1>
             <div className=' px-4 flex gap-x-5'>
                 <div className=' mt-2'>
                     <MapPin size={24} />
@@ -396,15 +396,15 @@ const EventDetailsPage = ({ params: { eventTitle } }: Props) => {
                         })()
                       }
                     <div className=' flex gap-1'>
-                        <p className=' text-[17px] font-[500] text-blue-400 hover:underline cursor-pointer'>Show Map</p>
+                        <p className=' text-[17px] font-[500] text-black hover:underline cursor-pointer'>Show Map</p>
                         <ChevronDown className='text-blue-400' size={24} />
                     </div>
                 </div>
             </div>
             </div>
 
             <div className='mb-6'>
-              <h1 className='font-[500] px-4 my-3 mt-6 text-[20px]'>Duration of the event</h1>
+              <h1 className='font-[500] px-4 my-3 mt-6 text-[20px] text-[#311b92]'>Duration of the event</h1>
               <div className='px-4 flex gap-2 text-[17px]'><span><Clock/></span><div>{eventObject.durationOfEvent} hours</div></div>
 
             </div>
@@ -419,15 +419,15 @@ const EventDetailsPage = ({ params: { eventTitle } }: Props) => {
             </div>
 
             <div className=' p-4 mt-1'>
-            <h1 className=' font-[500] text-[20px] mb-4 '>Description</h1>
+            <h1 className=' font-[500] text-[20px] mb-4 text-[#311b92]'>Description</h1>
             <div className=' font-medium my-3 mt-6'>
                   <div className=''>
                       <p className=' text-[17px] font-[400]'>{eventObject.description && parse(eventObject.description)}</p>
                   </div>
             </div>
             </div>
 
-            <div className='rounded-md p-4'>
+            {/* <div className='rounded-md p-4'>
   <table className='border border-[#d3d3d3] border-collapse w-full rounded-md'>
     <thead>
       <tr>
@@ -462,7 +462,7 @@ const EventDetailsPage = ({ params: { eventTitle } }: Props) => {
       </tr>
     </tbody>
   </table>
-</div>
+</div> */}
 
 
             <div className=' p-4 mb-5 mt-2'>
@@ -658,7 +658,20 @@ const EventDetailsPage = ({ params: { eventTitle } }: Props) => {
 
        <div className="w-[21.3rem] top-0 h-fit md:hidden lg:block">
 
-        <div className='mt-[4rem] sm:block hidden col-span-2 sticky overflow-hidden h-fit rounded-2xl border border-gray-300'>
+       <div className='mt-[4rem] sm:block hidden col-span-2 sticky overflow-hidden h-fit rounded-2xl border border-gray-300'>
+          <Card x-chunk="dashboard-01-chunk-5">
+              <CardContent className="mt-[1.5rem]">
+                <div className='text-[18px]'><span className='font-[700] mr-[1rem]'>Pre-Conference Date :</span><span>{eventObject.preConferenceDate && eventObject.preConferenceDate.toDate().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</span></div>
+                <div className='text-[18px]'><span className='font-[700]  mr-[1rem]'>Registration Start Date :</span><span>{eventObject.registrationStartDate && eventObject.registrationStartDate.toDate().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</span></div>
+                <div className='text-[18px]'><span className='font-[700]  mr-[1rem]'>Registration End Date :</span><span>{eventObject.registrationEndDate && eventObject.registrationEndDate.toDate().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</span></div>
+                <div className='text-[18px]'><span className='font-[700] mr-[1rem]'>Early Bird Registration Fee :</span><span>{eventObject.earlyBirdRegistrationFee}</span></div>
+                <div className='text-[18px]'><span className='font-[700]  mr-[1rem]' >Late Registration Fee :</span><span>{eventObject.lateRegistrationFee}</span></div>
+                <div className='text-[18px]'><span className='font-[700]  mr-[1rem]'>Contact Number :</span><span>{eventObject.contactNumber}</span></div>
+              </CardContent>
+          </Card>
+        </div>
+
+        <div className='mt-3 sm:block hidden col-span-2 sticky overflow-hidden h-fit rounded-2xl border border-gray-300'>
         <Card x-chunk="dashboard-01-chunk-5">
             <CardHeader>
               <CardTitle className='text-[24px] font-[500]'>Created By</CardTitle>
@@ -709,7 +722,7 @@ const EventDetailsPage = ({ params: { eventTitle } }: Props) => {
                 <div className='text-xs text-muted-foreground'>Few events comes with Govt. recognized credits. <span className='text-black'>Check Info*</span></div>
               </CardHeader>
               <CardContent className="">
-                <h1 className=' text-[30px] flex items-center justify-center mx-auto'>
+                <h1 className=' text-[30px] flex items-center justify-center mx-auto text-[#311b92]'>
                   {
                     eventObject.creditPoints 
                     ?

diff --git a/app/events/page.tsx b/app/events/page.tsx
@@ -798,16 +798,17 @@ export default function MusicPage() {
   // }, [changeE])
   const [location, setLocation] = useState("all");
 
-  const handleLocationChange = ()=>{
-
+  const handleLocationChange = (event:any)=>{
+    const value = event.target.value;
+    setLocation(value); 
   }
 
   const handleChangeCat = (event:any)=>{
     const value = event.target.value;
     handleSelectChange(value);
   }
 
-  const locations:any = [];
+  const locations:any = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua &amp; Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia &amp; Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Cape Verde","Cayman Islands","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cruise Ship","Cuba","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kuwait","Kyrgyz Republic","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Mauritania","Mauritius","Mexico","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Namibia","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","Norway","Oman","Pakistan","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre &amp; Miquelon","Samoa","San Marino","Satellite","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","South Africa","South Korea","Spain","Sri Lanka","St Kitts &amp; Nevis","St Lucia","St Vincent","St. Lucia","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad &amp; Tobago","Tunisia","Turkey","Turkmenistan","Turks &amp; Caicos","Uganda","Ukraine","United Arab Emirates","United Kingdom","Uruguay","Uzbekistan","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];
 
   useEffect(()=>{
     const getCat=async()=>{
@@ -836,7 +837,7 @@ export default function MusicPage() {
 
   return (
     <>
-      <div>
+      <div className="w-full">
       <Image
               src={BImage}
               alt="BannerImage"
@@ -846,9 +847,9 @@ export default function MusicPage() {
                 "h-full w-full object-cover",
               )}
             />
-            <div className="top-[18.5rem] left-[12rem] absolute text-[42px] font-[700] italic text-pink-500">Find Your Next Experience</div>
-            <div className="top-[24rem] left-[12rem] absolute text-[76px] font-[800] w-[60rem] leading-[69px] text-white">Discover & Promote Upcoming Event</div>
-            <div className="h-[5rem] top-[36rem] w-[65rem] bg-white absolute left-[12rem] rounded-2xl">
+            <h1 className="lg:top-[18.5rem] top-[6rem] left-[1rem] eventSubHeading lg:left-[12rem] absolute text-[27px] lg:text-[42px] font-[700] italic text-pink-500">Find Your Next Experience</h1>
+            <h1 className="lg:top-[24rem] lg:left-[12rem] top-[9rem] left-[1rem] eventHeading absolute [text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-[35px] leading-9 lg:text-[76px] font-[800] lg:w-[60rem] lg:leading-[69px] text-white">Discover & Promote Upcoming Event</h1>
+            <div className="hidden lg:block h-[5rem] top-[36rem] w-[65rem] bg-white absolute left-[12rem] rounded-2xl">
             <div className="search-box absolute top-[11.5px] left-[1rem]">
 
           {/* <Input className=" pl-10 w-[40rem]" placeholder="Search" /> */}
@@ -911,10 +912,11 @@ export default function MusicPage() {
           <option value="all" selected>
             Choose a location
           </option>
+          <option value="all">World Wide</option>
           { locations&&
-            locations.map((categoryD:any, index:any) => (
-              <option key={index} value={categoryD.id}>
-                {categoryD.id.split('|').join('/')}
+            locations.map((location:any, index:any) => (
+              <option key={index} value={location}>
+                {location}
               </option>
             ))}
         </select>
@@ -927,12 +929,12 @@ export default function MusicPage() {
         </div>
             </div>
       </div>
-      <div className="lg:container lg:max-w-[93.5rem] lg:mx-auto font-dmsans mt-[5rem]">
+      <div className="lg:container lg:max-w-[93.5rem] lg:mx-auto font-dmsans mt-[1rem] lg:mt-[5rem]">
       <div className="mb-8">
         <div className="font-[700] text-[32px] text-center text-red-500 italic">Upcoming Events</div>
-        <div className="text-[46px] font-[900] text-center">Featured Events</div>
+        <div className="lg:text-[46px] text-[37px] font-[900] text-center">Featured Events</div>
       </div>
-      <div className="flex flex-col mx-[9.5rem]">
+      <div className="flex flex-col lg:mx-[9.5rem]">
                           <div className="grid lg:grid-cols-3 md:grid-cols-3 grid-cols-1 gap-[1rem] pb-4">
                             {searchResult && searchResult.length > 0 ?(
                               searchResult.map((hit: any) => {

diff --git a/app/globals.css b/app/globals.css
@@ -180,6 +180,18 @@ span {
     color: #212121;
 }
 
+select {
+    font-family: 'Plus Jakarta Sans';
+}
+
+input {
+    font-family: 'Plus Jakarta Sans';
+}
+
+.eventSubHeading {
+    font-family: 'Plus Jakarta Sans';
+}
+
 ol li p {
     font-family: 'Plus Jakarta Sans';
     font-size: 14px;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -56,7 +56,7 @@ export default function RootLayout({
         <body className={cn(GeistSans.className, `antialiased min-h-screen pt-12 bg-[#e8eaf6] dark:bg-[#181818] ${dmSans_init.variable}`)}>
           <Providers>
             <Navbar />
-            <div className="h-full pt-4 ">
+            <div className="h-full lg:pt-4 ">
             {children}
             </div>
             <Toaster />

diff --git a/components/MobileSidebar.tsx b/components/MobileSidebar.tsx
@@ -22,7 +22,7 @@ const MobileSidebar = () => {
   return (
     <Sheet>
       <SheetTrigger className="font-dmsans">
-        <Button variant="ghost" size="icon" className=" md:hidden">
+        <Button variant="ghost" size="icon" className=" md:hidden text-white">
           <Menu />
         </Button>
       </SheetTrigger>