update Programs using the new plugin

Winter-Seminar-Series · Dec 24, 2023 · c4b2afa · c4b2afa
1 parent f93bb6c
commit c4b2afa
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 55 deletions.
diff --git a/frontend/public/[email protected] b/frontend/public/[email protected]
diff --git a/frontend/src/app/Programs.js b/frontend/src/app/Programs.js
@@ -1,77 +1,69 @@
 export default function Programs() {
 
   return (
-    <div className="relative bg-white w-full h-[1469px] overflow-hidden text-left text-lg text-lightslategray font-manrope">
-      <div className="absolute top-[205px] left-[-158px] rounded-[50%] bg-dodgerblue [filter:blur(516px)] w-[252px] h-[252px]" />
-      <div className="absolute top-[636px] left-[1284px] rounded-[50%] bg-darkslategray-200 [filter:blur(404px)] w-[277px] h-[277px]" />
-      {programsArea(programs, programs_overline)}    
-      {itemsTag()}
-      {button(buttonText, arrowPic)}
+    <div className="Programs w-full h-[1469px] relative bg-white overflow-hidden overflow-auto">
+      <div className="Ellipse absolute top-[636px] right-[-200px] w-72 h-72 bg-zinc-400 bg-opacity-30 rounded-full blur-3xl" />
+      <div className="Ellipse absolute top-[205px] left-[-200px] w-64 h-64 bg-pink-300 bg-opacity-30 rounded-full blur-3xl" />
+
+      <ProgramsArea />   
+      <ItemsTag />
+      <Button text={buttonText} img={arrowPic}/>
     </div>
     );
 }
 
 const arrowPic = "/[email protected]"
 const buttonText = "More About WSS"
-const programs_overline = "Overline Goes Here"
-const programs = "Programs"
 
 const items = [
-  {id: 1, title: 'Seminars', overline: 'Overline Goes Here', img: '', desc: 'The seminars comprise a four-day event where speakers present their research and ideas, sharing their findings and teaching related topics. Each day of the event features different speakers and topics, providing participants with a diverse range of perspectives and knowledge.'},
-  {id: 2, title: 'Round Tables', overline: 'Overline Goes Here', img: '', desc: 'The seminars comprise a four-day event where speakers present their research and ideas, sharing their findings and teaching related topics. Each day of the event features different speakers and topics, providing participants with a diverse range of perspectives and knowledge.'},
-  {id: 3, title: 'Lab Talks', overline: 'Overline Goes Here', img: '', desc: 'The seminars comprise a four-day event where speakers present their research and ideas, sharing their findings and teaching related topics. Each day of the event features different speakers and topics, providing participants with a diverse range of perspectives and knowledge.'},
+  {id: 1, title: 'Seminars', overline: 'Overline Goes Here', img: 'tmp', desc: 'The seminars comprise a four-day event where speakers present their research and ideas, sharing their findings and teaching related topics. Each day of the event features different speakers and topics, providing participants with a diverse range of perspectives and knowledge.'},
+  {id: 2, title: 'Round Tables', overline: 'Overline Goes Here', img: 'tmp', desc: 'The seminars comprise a four-day event where speakers present their research and ideas, sharing their findings and teaching related topics. Each day of the event features different speakers and topics, providing participants with a diverse range of perspectives and knowledge.'},
+  {id: 3, title: 'Lab Talks', overline: 'Overline Goes Here', img: 'tmp', desc: 'The seminars comprise a four-day event where speakers present their research and ideas, sharing their findings and teaching related topics. Each day of the event features different speakers and topics, providing participants with a diverse range of perspectives and knowledge.'},
 ];
 
-function programsArea(programs, overline) {
+function ProgramsArea() {
   return (
-      <div className="absolute top-[0px] left-[calc(50%_-_145px)] flex flex-col items-center justify-start">
-        <div className="relative tracking-[0.04em] uppercase font-medium">
-          {overline}
-        </div>
-        <b className="relative text-45xl tracking-[-0.02em] inline-block text-darkslategray-100 mt-[-8px]">
-          {programs}
-        </b>
-      </div>
+<div className="AutoLayoutVertical absolute top-[0px] left-[calc(50%_-_145px)] w-[290px] h-[104px] flex-col justify-start items-center inline-flex">
+  <div className="OverlineGoesHere text-neutral-400 text-lg font-medium font-['Manrope'] uppercase tracking-wide">Overline Goes Here</div>
+  <div className="Programs text-slate-800 text-[64px] font-bold font-['Manrope']">Programs</div>
+</div>
     )
 }
 
-function button(text, img) {
+
+function Button({text, img}) {
   return (
-      <div className="absolute top-[1298px] left-[calc(50%_-_121px)] rounded-md bg-darkslateblue h-16 overflow-hidden flex flex-row items-center justify-center py-0 px-8 box-border gap-[10px] text-white">
-        <b className="relative tracking-[-0.01em]">{text}</b>
+<div className="AutoLayoutHorizontal absolute top-[1298px] left-[calc(50%_-_121px)] w-52 h-16 px-8 bg-gray-700 rounded-md justify-center items-center gap-2.5 flex items-center">
+  <div className="MoreAboutWss text-white text-lg font-bold font-['Manrope']">{text}</div>
+  <div className="ArrowRight w-6 h-6 relative">
         <img
-          className="relative w-6 h-6 overflow-hidden shrink-0 object-cover"
+          className="relative w-6 h-6 overflow-hidden shrink-0 object-cover justify-center"
           alt="arrow"
           src={img}
         />
-      </div>
+  </div>
+</div>
     )
 }
 
-function itemText(title, overline, description) {
+function ItemText({title, overline, description}) {
   return (
-        <div className="shrink-0 flex flex-col items-start justify-start gap-[11px]">
-          <div className="shrink-0 flex flex-col items-start justify-start">
-            <div className="relative tracking-[0.04em] uppercase font-medium">
-              {overline}
-            </div>
-            <b className="relative text-33xl tracking-[-0.02em] text-darkslategray-100">
-              {title}
-            </b>
-          </div>
-          <div className="relative text-lg leading-[27px] inline-block w-[480px]">
-            {description}
-          </div>
-        </div>
-    )
+<div className="AutoLayoutVertical w-96 h-[100%] flex-col justify-start items-start gap-2.5 inline-flex">
+  <div className="AutoLayoutVertical flex-col justify-start items-start flex">
+    <div className="overline text-neutral-400 text-[16px] font-medium font-['Manrope'] uppercase tracking-wide">{overline}</div>
+    <div className="title text-slate-800 text-[48px] font-bold font-['Manrope']">{title}</div>
+  </div>
+  <div className="description w-96 text-neutral-400 text-[18px] font-normal font-['Manrope'] leading-relaxed">{description}</div>
+</div>
+);
 }
 
-function itemImg(img) {
+function ItemImg({img}) {
   if (img.localeCompare("") == 0) 
-    return <div className="flex-1 relative rounded-lg bg-whitesmoke h-[300px]" ></div>
+    return <div className="Image grow shrink basis-0 h-72 bg-gray-200 rounded-lg" />
   else
     return (
-        <div className="flex-1 relative rounded-lg h-[300px]" >
+        <div className="Image w-[433px] h-[300px] rounded-lg" >
           <img
             className="relative w-full h-full overflow-hidden shrink-0 object-cover"
             alt=""
@@ -81,29 +73,29 @@ function itemImg(img) {
       )
 }
 
-function getItemTag(item) {
+function ItemTag({item}) {
   if (item.id % 2 == 1)
     return (
-      <div className="self-stretch flex flex-row items-center justify-start gap-[80px]">
-        {itemText(item.title, item.overline, item.desc)}
-        {itemImg(item.img)}
+      <div className="AutoLayoutHorizontal w-[993px] h-[300px] justify-start items-center gap-20 flex items-center">
+        <ItemText title={item.title} overline={item.overline} description={item.desc} />
+        <ItemImg img={item.img} />
       </div>
       )
   else
     return (
-      <div className="self-stretch flex flex-row items-center justify-start gap-[80px]">
-        {itemImg(item.img)}
-        {itemText(item.title, item.overline, item.desc)}
+      <div className="AutoLayoutHorizontal w-[993px] h-[300px] justify-start items-center gap-20 inline-flex">
+        <ItemImg img={item.img} />
+        <ItemText title={item.title} overline={item.overline} description={item.desc} />
       </div>
       )
 }
 
-function itemsTag() {
+function ItemsTag() {
   return (
     <div className="relative top-[174px] left-[calc(50%_-_497px)] w-[993px] flex flex-col items-end justify-start gap-[72px] text-base">
-      {getItemTag(items[0])}
-      {getItemTag(items[1])}
-      {getItemTag(items[2])}
+      {items.map((item) => (
+      <ItemTag item={item} />
+    ))}
     </div>
     )
-}
+}