Skip to content

Commit

Permalink
update Programs using the new plugin
Browse files Browse the repository at this point in the history
arefzarezadeh committed Dec 24, 2023
1 parent f93bb6c commit c4b2afa
Showing 2 changed files with 47 additions and 55 deletions.
Binary file added frontend/public/arrow--right@2x.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
102 changes: 47 additions & 55 deletions frontend/src/app/Programs.js
Original file line number Diff line number Diff line change
@@ -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 = "/arrow--right@2x.png"
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>
)
}
}

0 comments on commit c4b2afa

Please sign in to comment.