Merge pull request #30 from IEEEUCSC/dev/ecertificate

fix: certificates layout issues

Author: Dinil-Thilakarathne

components/Competition/index.tsx

@@ -40,13 +40,11 @@ const Competition = () => {
             Claim prestigious prizes and connect with top professionals.
           </ScrollBaseText>
         </div>
-        <div className="flex w-full items-center justify-between gap-x-6">
+        <div className="flex w-full flex-col items-center justify-between gap-6 md:flex-row">
           <AnimatedButton text="Download Booklet" to="/CodeQuest.pdf" />
-          <ECertificateButton/>
+          <ECertificateButton />
         </div>
-        
       </div>
-      
     </section>
   );
 };

components/ECertificate/CertificatePreview.tsx

@@ -14,6 +14,9 @@ const CertificatePreview = ({ data }: { data: CertificateData }) => {
     const canvas = await html2canvas(certificateRef.current);
     const imgData = canvas.toDataURL("image/png");
 
+    canvas.width = 2000;
+    canvas.height = 1350;
+
     const pdf = new jsPDF({
       orientation: "landscape",
       unit: "px",
@@ -25,10 +28,10 @@ const CertificatePreview = ({ data }: { data: CertificateData }) => {
   };
 
   return (
-    <div className="lg:mt-6 flex flex-col items-center justify-center lg:gap-y-4 py-4 lg:py-16 text-center">
+    <div className="flex flex-col items-center justify-center py-4 text-center lg:mt-6 lg:gap-y-4 lg:py-16">
       <div
         ref={certificateRef}
-        className="relative flex h-[675px] w-[1000px] scale-55 lg:scale-none flex-row items-center justify-center"
+        className="relative flex w-[375px] h-[253.125px] md:h-[675px] md:w-[1000px]  flex-row items-center justify-center lg:scale-none"
       >
         <img
           src="/ecertificate/CERTIFICATE.png"
@@ -42,7 +45,7 @@ const CertificatePreview = ({ data }: { data: CertificateData }) => {
           }}
         />
         <div
-          className="absolute text-center text-4xl font-semibold text-white"
+          className="absolute text-center text-base md:text-4xl font-semibold text-white"
           style={{
             fontFamily: rusticRoadway.style.fontFamily,
             top: "57%",
@@ -58,7 +61,7 @@ const CertificatePreview = ({ data }: { data: CertificateData }) => {
       <AnimatedButton
         text="Download Certificate"
         onClick={() => handleDownload()}
-        className="bg-primary-400 background-glow -translate-y-[100px] inline-block cursor-pointer rounded-2xl px-4 py-2 text-white"
+        className="bg-primary-400 background-glow inline-block translate-y-[50px] cursor-pointer rounded-2xl px-4 py-2 text-white"
       />
     </div>
   );

libs/data.ts

@@ -59,13 +59,13 @@ export const timelineItems: TimelineItem[] = [
     time: "00:00 IST",
   },
   {
-    date: { day: "09", month: "MAY" },
+    date: { day: "13", month: "MAY" },
     header: "Final Round Awareness Session",
     content: " ",
     time: "00:00 IST",
   },
   {
-    date: { day: "10", month: "MAY" },
+    date: { day: "14", month: "MAY" },
     header: "Final Round",
     content: "Physical CTF Hackathon",
     time: "00:00 IST",