Skip to content

Commit

Permalink
Merge pull request #50 from sitcon-tw/feature/eary-bird-plan
Browse files Browse the repository at this point in the history 
Feature/eary bird plan
  • Loading branch information
@dada878
dada878 authored Nov 27, 2024
2 parents 6df417a + 08378b4 commit 51e6db5
Show file tree
Hide file tree
Showing 8 changed files with 527 additions and 111 deletions.
151 changes: 151 additions & 0 deletions app/cfp/(submission)/_components/early-bird.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
"use client";

import { AnimatePresence, motion } from "framer-motion";
import { useState } from "react";

export default function EarlyBird() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<button
onClick={() => setIsOpen(true)}
className="z-10 flex w-full cursor-pointer items-center gap-5 rounded-lg border border-accent bg-[#271A3A] px-7 py-5 text-xl font-bold text-accent transition hover:brightness-125"
>
<ExclamationMark />
早鳥投稿計劃
</button>
<Dialog isOpen={isOpen} setIsOpen={setIsOpen} />
</>
);
}

function Dialog({
isOpen,
setIsOpen,
}: {
isOpen: boolean;
setIsOpen: (isOpen: boolean) => void;
}) {
const emojiHandMotion = {
rest: { rotate: 0, y: 0, x: 0 },
hover: {
rotate: -15,
y: -2,
x: 3,
},
};
const emojiMouseMotion = {
rest: {
x: 0,
y: 0,
},
hover: {
x: [0, -1, -1, 0],
y: [-1, 1, 0, 0],
transition: {
repeat: Infinity,
duration: 0.2,
},
},
};
return (
<AnimatePresence>
{isOpen && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
style={{ pointerEvents: "auto" }}
className="fixed inset-0 z-50 m-0 flex scale-110 items-center justify-center bg-black/60"
onClick={() => {
setIsOpen(false);
}}
>
<motion.div
initial={{ scale: 0.8 }}
animate={{ scale: 0.9 }}
exit={{ scale: 0.8 }}
transition={{ duration: 0.2 }}
onClick={(e) => e.stopPropagation()}
className="absolute inset-5 flex flex-col items-center justify-between rounded-lg bg-background p-8 max-md:overflow-y-scroll md:static md:max-w-[70%] md:justify-start lg:max-w-[60%]"
>
<div>
<h2 className="mb-5 w-full text-start text-3xl font-bold text-primary">
早鳥投稿計劃
</h2>
<p className="text-lg leading-9">
為了鼓勵講者儘早送出稿件，讓您的精彩想法可以更早進入我們的視野。同時也能讓您提早規劃與完善內容，以充裕的時間打造更精彩的分享。今年我們新增了「早鳥投稿」的機制！
</p>
<p className="mt-5 text-lg leading-9">
凡是在早鳥投稿期間送出且{" "}
<span className="subTitle hightlight">成功錄取</span>{" "}
的稿件，我們將提供可在{" "}
<span className="subTitle hightlight">
年會當天使用的紀念品抵用券
</span>{" "}
，讓您盡情選購 SITCON 紀念品！
</p>
<p className="mt-5 text-lg leading-9">
早鳥投稿的截止時間為{" "}
<span className="subTitle hightlight">2024/12/25 23:59</span>
，請把握時間搶先投稿。已送出的稿件若有需要，也可以在 2025/1/21
23:59
投稿截止前修改稿件內容，在早鳥期限截止後編輯內容不會影響您早鳥投稿的資格與權利。
</p>
<p className="mt-5 text-lg leading-9">
此外，{" "}
<span className="subTitle hightlight">
早鳥投稿不會影響審稿過程
</span>{" "}
，所有稿件都將根據相同的審核標準進行公平評選。我們期望能透過早鳥投稿計劃為講者提供更多彈性和激勵，並期待收到更多創新、多元的議程投稿，讓
SITCON 年會更精彩！
</p>
</div>
<motion.button
whileHover="hover"
initial="rest"
exit="rest"
className="mt-5 flex w-full justify-center rounded-lg bg-background-light px-10 py-3 text-lg transition hover:brightness-125 md:w-1/2"
onClick={() => setIsOpen(false)}
>
<span>好欸 ( </span>
<motion.span
className="origin-bottom-left"
variants={emojiHandMotion}
>
੭
</motion.span>
<span>˙</span>
<motion.span variants={emojiMouseMotion}>ᗜ</motion.span>
<span>˙)</span>
<motion.span
className="origin-bottom-left"
variants={emojiHandMotion}
>
੭
</motion.span>
</motion.button>
</motion.div>
</motion.div>
)}
</AnimatePresence>
);
}

function ExclamationMark() {
return (
<svg
width="8"
height="25"
viewBox="0 0 8 25"
xmlns="http://www.w3.org/2000/svg"
className="exclamation-mark fill-current"
>
<path
d="M7.8125 21.0938C7.8125 23.2477 6.06016 25 3.90625 25C1.75234 25 0 23.2477 0 21.0938C0 18.9398 1.75234 17.1875 3.90625 17.1875C6.06016 17.1875 7.8125 18.9398 7.8125 21.0938ZM0.452148 1.23042L1.11621 14.5117C1.14741 15.1354 1.66216 15.625 2.28662 15.625H5.52588C6.15034 15.625 6.66509 15.1354 6.69629 14.5117L7.36035 1.23042C7.3938 0.561035 6.86016 0 6.18994 0H1.62256C0.952344 0 0.418701 0.561035 0.452148 1.23042Z"
className="fill-current"
/>
</svg>
);
}
209 changes: 209 additions & 0 deletions app/cfp/(submission)/_components/timeline copy.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,209 @@
import { ReactNode } from "react";

export default function Timeline({ isPoster }: { isPoster?: boolean }) {
return (
<>
{/* Desktop Layout */}
<div className="mx-auto hidden w-full md:block">
<div className="relative">
<div className="absolute mb-8 h-8 w-full">
<svg
width="100%"
height={32}
viewBox="0 0 800 32"
preserveAspectRatio="none"
>
{/* Main horizontal line */}
{/* Arrow */}
<path
id="arrowHead"
d="M770 16 L790 16 M780 8 L790 16 L780 24"
className="stroke-current text-foreground"
strokeWidth="3.5"
fill="none"
/>
<line
x1="2%"
y1="16"
x2="98%"
y2="16"
className="stroke-current text-foreground"
strokeWidth="3.5"
/>
</svg>
</div>

{/* 時程 */}
<div className="flex justify-between">
<div className="z-10 w-min">
<svg className="h-10 w-10">
<circle
key={1}
cx={10}
cy="16"
r="8"
className="fill-current text-primary"
/>
</svg>
<span className="material-icons-big">flag</span>
<p>2024-11-23</p>
<h3 className="w-max text-h3">開始徵稿</h3>
</div>

<TimelineItem
icon={
<span className="material-icons-big text-foreground">
featured_seasonal_and_gifts
</span>
}
date="01-21 23:59"
name="早鳥截止"
/>

<TimelineItem
icon={
<span className="material-icons-big text-foreground">
event_busy
</span>
}
date="01-21 23:59"
name="投稿截止"
/>

<TimelineItem
icon={<span className="material-icons-big">email</span>}
date="一月下旬"
name="錄取通知"
/>

{isPoster ? (
<div className="z-10 w-min">
<svg className="h-10 w-10">
<circle
key={1}
cx={10}
cy="16"
r="8"
className="fill-current text-primary"
/>
</svg>
<span className="material-icons-big">route</span>
<p>02-16</p>
<h3 className="w-max text-h3">錄取海報檔案上傳截止</h3>
</div>
) : (
<>
<div className="z-10 w-min">
<svg className="h-10 w-10">
<circle
key={1}
cx={10}
cy="16"
r="8"
className="fill-current text-primary"
/>
</svg>
<span className="material-icons-big">mic_none</span>
<p className="w-max">二月</p>
<h3 className="w-max text-h3">試講</h3>
</div>
<div className="z-10 w-min">
<svg className="h-10 w-10">
<circle
key={1}
cx={10}
cy="16"
r="8"
className="fill-current text-primary"
/>
</svg>
<span className="material-icons-big">route</span>
<p>03-07</p>
<h3 className="w-max text-h3">彩排</h3>
</div>
</>
)}

<TimelineItem
icon={
<span className="material-icons-big text-foreground">
groups
</span>
}
date="03-08"
name="年會"
/>
</div>
</div>
</div>

{/* Mobile Layout */}
<div className="mx-auto tracking-wider md:hidden">
<ul className="list-disc space-y-4 pl-5">
<li>
<span className="font-bold">開始徵稿</span>
：2024 年 11 月 22 日（六）
</li>
<li>
<span className="font-bold">投稿截止</span>
：2025 年 1 月 21 日（二） 23:59
</li>
<li>
<span className="font-bold">錄取通知</span>
：2025 年一月下旬
</li>
{isPoster ? (
<>
<li>
<span className="font-bold">錄取海報檔案上傳截止</span>
：2025 年 2 月 16 日（日）
</li>
</>
) : (
<>
<li>
<span className="font-bold">試講</span>
：2025 年二月
</li>
<li>
<span className="font-bold">彩排</span>
：2025 年 3 月 7 日（五）
</li>
</>
)}
<li>
<span className="font-bold">年會</span>
：2025 年 3 月 8 日（六）
</li>
</ul>
</div>
</>
);
}

function TimelineItem({
icon,
date,
name,
}: {
icon: ReactNode;
date: string;
name: string;
}) {
return (
<div className="z-10 w-min">
<svg className="h-10 w-10">
<circle
key={1}
cx={10}
cy="16"
r="8"
className="fill-current text-primary"
/>
</svg>
{icon}
<p>{date}</p>
<h3 className="w-max text-h3">{name}</h3>
</div>
);
}
Loading

0 comments on commit 51e6db5

Please sign in to comment.