|
| 1 | +'use client'; |
| 2 | + |
| 3 | +import React from 'react'; |
| 4 | +import Image from 'next/image'; |
| 5 | +import { Button } from '@/components/ui/button'; |
| 6 | + |
| 7 | +const handleRedirect = (url: string) => { |
| 8 | + if (typeof window !== 'undefined') { |
| 9 | + window.open(url, '_blank'); |
| 10 | + } |
| 11 | +}; |
| 12 | + |
| 13 | +const SpeakDetails: React.FC = () => { |
| 14 | + return ( |
| 15 | + <section> |
| 16 | + <div className="flex-column max-w-7xl mx-auto pl-8 md:pl-12 lg:pl-16"> |
| 17 | + {/* Main Container - Always Horizontal */} |
| 18 | + <div className="flex flex-row items-center justify-start w-full mt-8 md:mt-10 lg:mt-10"> |
| 19 | + {/* Left Section - Text & Small Logo */} |
| 20 | + <div className="w-1/2"> |
| 21 | + <h1 className="text-[#FFFFFF] [@media(max-width:380px)]:text-[20px] text-[25px] sm:text-[44px] md:text-[47px] lg:text-[65px] font-black leading-[1.3]"> |
| 22 | + Share Your <br /> |
| 23 | + Knowledge <br /> |
| 24 | + <div className="flex items-center space-x-2 md:space-x-5"> |
| 25 | + <span>with</span> |
| 26 | + <Image |
| 27 | + src="/assets/speakIcons/logoName.svg" |
| 28 | + alt="DurianPy" |
| 29 | + width={0} |
| 30 | + height={0} |
| 31 | + className="mt-1 sm:mt-1 md:mt-1 w-auto [@media(max-width:380px)]:h-6 h-8 sm:h-14 md:h-15 lg:h-20" |
| 32 | + /> |
| 33 | + </div> |
| 34 | + </h1> |
| 35 | + <p className="text-gray-300 my-4 md:my-8 lg:my-12 leading-tight [@media(max-width:392px)]:text-[6px] text-[8px] sm:text-[12px] md:text-[14px] lg:text-[18px]"> |
| 36 | + We are excited to have you as a speaker. <br /> |
| 37 | + <span>Help inspire the Python community in Davao.</span> |
| 38 | + </p> |
| 39 | + <Button |
| 40 | + onClick={() => |
| 41 | + handleRedirect('https://forms.gle/x2cc6CrRhbhDeaxe9') |
| 42 | + } |
| 43 | + className="bg-yellow-500 text-black font-medium py-2 md:py-2 lg:py-3 px-4 md:px-5 lg:px-7 [@media(max-width:320px)]:text-[6px] text-[10px] md:text-[14px] lg:text-[18px] rounded-full hover:bg-yellow-600 transition-all duration-300 ease-out hover:scale-105" |
| 44 | + > |
| 45 | + Submit a Talk Proposal |
| 46 | + </Button> |
| 47 | + </div> |
| 48 | + |
| 49 | + {/* Right Section - Large Logo */} |
| 50 | + <div className="w-1/2"> |
| 51 | + <div className="ml-4 flex justify-end md:mt-5 lg:mt-10 relative "> |
| 52 | + <Image |
| 53 | + src="/assets/speakIcons/glowBg.svg" |
| 54 | + alt="Glow BG" |
| 55 | + width={0} |
| 56 | + height={0} |
| 57 | + className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] h-[300px] md:w-[700px] md:h-[700px] lg:w-[800px] lg:h-[1000px] rounded-full blur-3xl saturate-100 brightness-150 z-0" |
| 58 | + /> |
| 59 | + <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[125px] h-[150px] md:w-[300px] md:h-[300px] lg:w-[400px] lg:h-[400px] bg-green-600/20 rounded-full blur-3xl z-0"></div> |
| 60 | + |
| 61 | + {/* Logo */} |
| 62 | + <Image |
| 63 | + src="/assets/speakIcons/logoIcon.svg" |
| 64 | + alt="DurianPy Logo" |
| 65 | + width={0} |
| 66 | + height={0} |
| 67 | + className="w-[250px] sm:w-[350px] md:w-[400px] lg:w-[500px] relative z-10" |
| 68 | + /> |
| 69 | + </div> |
| 70 | + </div> |
| 71 | + </div> |
| 72 | + <div className="container text-white mt-10 "> |
| 73 | + <h1 className="[@media(max-width:380px)]:text-[20px] text-[25px] sm:text-[45px] md:text-[50px] lg:text-[60px] font-bold mb-6 lg:mb-8"> |
| 74 | + Submission <span className="text-[#FFC201]">Guidelines </span> |
| 75 | + </h1> |
| 76 | + |
| 77 | + <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 gap-8 mr-8 md:mr-12 lg:mr-20 mx-10 lg:mx-0"> |
| 78 | + {/* Left Column */} |
| 79 | + <div className="space-y-8"> |
| 80 | + {/* What to be Mindful of */} |
| 81 | + <div className="relative pl-3 before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[0.25px] before:bg-white"> |
| 82 | + <h2 className="[@media(max-width:380px)]:text-[16px] text-[16px] sm:text-[20px] md:text-[25px] lg:text-[28px] font-semibold mb-2"> |
| 83 | + What to be Mindful of |
| 84 | + </h2> |
| 85 | + <p className="[@media(max-width:392px)]:text-[8px] text-[8px] sm:text-[12px] md:text-[14px] lg:text-[16px] text-gray-300"> |
| 86 | + DurianPy welcomes developers of <br /> all experience levels - |
| 87 | + beginners to experts |
| 88 | + </p> |
| 89 | + </div> |
| 90 | + |
| 91 | + {/* What to Avoid */} |
| 92 | + <div className="relative pl-3 before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[0.25px] before:bg-white"> |
| 93 | + <h2 className="[@media(max-width:380px)]:text-[16px] text-[16px] sm:text-[20px] md:text-[25px] lg:text-[28px] font-semibold mb-2"> |
| 94 | + What to Avoid |
| 95 | + </h2> |
| 96 | + <div className="[@media(max-width:392px)]:text-[8px] text-[8px] sm:text-[12px] md:text-[14px] lg:text-[16px]"> |
| 97 | + <p className="text-gray-300"> |
| 98 | + Too much code without explanation.{' '} |
| 99 | + </p>{' '} |
| 100 | + <span>Proprietary code with no open-source reference </span> |
| 101 | + </div> |
| 102 | + </div> |
| 103 | + </div> |
| 104 | + |
| 105 | + {/* Right Column */} |
| 106 | + <div className="space-y-8"> |
| 107 | + {/* What to Include */} |
| 108 | + <div className="relative pl-3 before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[0.25px] before:bg-white"> |
| 109 | + <h2 className="[@media(max-width:380px)]:text-[16px] text-[16px] sm:text-[20px] md:text-[25px] lg:text-[28px] font-semibold mb-2"> |
| 110 | + What to Include |
| 111 | + </h2> |
| 112 | + <div className="[@media(max-width:392px)]:text-[8px] text-[8px] sm:text-[12px] md:text-[14px] lg:text-[16px]"> |
| 113 | + <p className=" text-gray-300">How can people reach you? </p>{' '} |
| 114 | + <span>Where they can find your slides or code </span> |
| 115 | + </div> |
| 116 | + </div> |
| 117 | + |
| 118 | + {/* Helpful Resources */} |
| 119 | + <div className="relative pl-3 before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[0.25px] before:bg-white"> |
| 120 | + <h2 className="[@media(max-width:380px)]:text-[16px] text-[16px] sm:text-[20px] md:text-[25px] lg:text-[28px] font-semibold mb-2"> |
| 121 | + Helpful Resources |
| 122 | + </h2> |
| 123 | + <div className="[@media(max-width:392px)]:text-[8px] text-[8px] sm:text-[12px] md:text-[14px] lg:text-[16px]"> |
| 124 | + <a |
| 125 | + onClick={() => |
| 126 | + handleRedirect( |
| 127 | + 'https://us.pycon.org/2014/speaking/proposal_advice/' |
| 128 | + ) |
| 129 | + } |
| 130 | + className="hover:underline block cursor-pointer" |
| 131 | + > |
| 132 | + Great Advice for Giving Talks |
| 133 | + </a> |
| 134 | + <a |
| 135 | + onClick={() => |
| 136 | + handleRedirect('https://forms.gle/x2cc6CrRhbhDeaxe9') |
| 137 | + } |
| 138 | + className="hover:underline block cursor-pointer" |
| 139 | + > |
| 140 | + Submit Talk |
| 141 | + </a> |
| 142 | + </div> |
| 143 | + </div> |
| 144 | + </div> |
| 145 | + </div> |
| 146 | + <div className="mt-8 lg:mt-14"> |
| 147 | + |
| 148 | + <Button |
| 149 | + onClick={() => handleRedirect('mailto:durianpy.davao@gmail.com')} |
| 150 | + className="bg-yellow-500 text-black font-medium py-2 md:py-2 lg:py-3 px-4 md:px-5 lg:px-7 [@media(max-width:320px)]:text-[6px] text-[10px] md:text-[14px] lg:text-[18px] rounded-full hover:bg-yellow-600 transition-all duration-300 ease-out hover:scale-105" |
| 151 | + > |
| 152 | + Have Questions? |
| 153 | + </Button> |
| 154 | + </div> |
| 155 | + </div> |
| 156 | + |
| 157 | + <div className="container text-white mt-10 lg:mt-20"> |
| 158 | + <h1 className="[@media(max-width:380px)]:text-[20px] text-[28px] sm:text-[40px] md:text-[45px] lg:text-[60px] font-bold"> |
| 159 | + Google <span className="text-[#FFC201]"> Forms </span> |
| 160 | + </h1> |
| 161 | + <div className="[@media(max-width:392px)]:text-[8px] text-[8px] sm:text-[12px] md:text-[14px] lg:text-[16px] text-gray-300 mt-3 mb-7 lg:mb-5 "> |
| 162 | + <p> |
| 163 | + Please fill out the Google Form for the Call for Speakers, |
| 164 | + providing your bio, topic, and relevant experience.{' '} |
| 165 | + </p>{' '} |
| 166 | + <span> We look forward to reviewing your application </span> |
| 167 | + </div> |
| 168 | + <div |
| 169 | + className="mr-10 relative p-[5px] bg-gradient-to-l from-yellow-400 via-green-400 to-green-600" |
| 170 | + style={{ |
| 171 | + borderTopLeftRadius: '75px', |
| 172 | + borderBottomRightRadius: '75px', |
| 173 | + borderTopRightRadius: '0px', |
| 174 | + borderBottomLeftRadius: '0px', |
| 175 | + }} |
| 176 | + > |
| 177 | + <iframe |
| 178 | + src="https://docs.google.com/forms/d/e/1FAIpQLScTPUrZ8Xkfl2hsSlUZt0qzN7tE3zKt5e30d1OcI52YOsnrQg/viewform?embedded=true" |
| 179 | + width="100%" |
| 180 | + height="550" |
| 181 | + className="h-[250px] md:h-[350px] lg:h-[550px] bg-white rounded-lg" |
| 182 | + style={{ |
| 183 | + border: 'none', |
| 184 | + borderTopLeftRadius: '75px', |
| 185 | + borderBottomRightRadius: '75px', |
| 186 | + borderTopRightRadius: '0px', |
| 187 | + borderBottomLeftRadius: '0px', |
| 188 | + overflow: 'hidden', |
| 189 | + }} |
| 190 | + allowFullScreen |
| 191 | + ></iframe> |
| 192 | + </div> |
| 193 | + </div> |
| 194 | + </div> |
| 195 | + </section> |
| 196 | + ); |
| 197 | +}; |
| 198 | + |
| 199 | +export default SpeakDetails; |
0 commit comments