Merge pull request #8 from TEDxNTUA/unmuted

src/app/unmuTED/page.js

@@ -1,76 +1,24 @@
-import NewsletterTitle from "@/components/NewsletterPages/NewsletterTitle";
-import IntroductionMedia from "@/components/NewsletterPages/Media/IntroductionMedia";
-import MediaSuggestions from "@/components/NewsletterPages/Media/MediaSuggestions";
+"use client";
+
 import NewFooter from "@/components/Footer/NewFooter";
+import UnmutedGrid from "@/components/Unuted/UnmutedGrid";
 
-export default function MediaNewsletter() {
+function UnmuTED() {
   return (
-    <div
-      className="bg-our-black" // bg-contain"
-      style={
-        {
-          // backgroundImage: `url('/newsletters/media/background.png')`,
-          // backgroundSize: `cover`,
-        }
-      }
-    >
-      <div className="h-8 md:h-12 lg:h-20 2xl:h-28 4xl:h-32"></div>
-      <NewsletterTitle />
-
-      <div className="h-8 md:h-12 lg:h-16 2xl:h-24"></div>
-      <div
-        id="body"
-        className="w-[80%] md:w-[60%] 3xl:w-[50%] 3xl:text-xl mx-auto"
-      >
-        <IntroductionMedia />
-
-        <MediaSuggestions />
-        <div className="flex flex-col gap-6">
-          {/* <span className="text-white text-lg mx-auto text-center flex self-center">
-            Keep in touch!
-          </span> */}
-          <p className="text-white text-xxs self-end">
-            xoxo...Media & Marketing Team
-            <span className="text-our-red">&lt;3</span>
-          </p>
-        </div>
+    <div className="bg-black">
+      <div className="text-white w-[75%] text-4xl lg:text-7xl font-bold  py-16 md:w-[80%] mx-auto text-center">
+        <p>
+          Unmu<span className="text-our-red italic">TED </span>{" "}
+        </p>
+        <p className="text-white italic text-center text-base pt-2">
+          It’s time to get unfiltered, uncensored, unmuTED!
+        </p>
       </div>
-      <div className="h-20"></div>
+
+      <UnmutedGrid />
       <NewFooter />
     </div>
   );
 }
 
-// // import Footer from "@/components/Footer/Footer";
-// import BlogCard from "@/components/Blog/BlogCard";
-// import NewFooter from "@/components/Footer/NewFooter";
-
-// function NewsletterPage() {
-//   return (
-//     <div
-//       className="bg-neutral-500"
-//       // style={{
-//       //   // backgroundImage: `url('/about/about4a.jpeg')`,
-//       //   backgroundImage: `url('BG.png.jpeg')`,
-//       //   backgroundSize: "cover", // Optional: adjust as needed
-//       // }}
-//     >
-//       <h1 className="text-white w-[75%] text-4xl lg:text-7xl text-left font-bold  py-16 md:w-[80%] mx-auto">
-//         <span className="text-our-red">TEDx</span>NTUA Organisers' Blog
-//       </h1>
-//       <li>
-//         <BlogCard
-//           bloglink="/newsletter/media"
-//           thumbnail="/blogpost/newsletter.png"
-//           title="Media-newsletter"
-//           content="Fresh fresh fresh"
-//           author="Media Team TEDxNTUA 2024"
-//         />
-//       </li>
-//       <NewFooter />
-//       {/* <Footer /> */}
-//     </div>
-//   );
-// }
-
-// export default NewsletterPage;
+export default UnmuTED;

src/app/unmuTED1/page.js

@@ -0,0 +1,102 @@
+"use client";
+import NewsletterTitle from "@/components/NewsletterPages/NewsletterTitle";
+import IntroductionMedia from "@/components/NewsletterPages/Media/IntroductionMedia";
+import MediaSuggestions from "@/components/NewsletterPages/Media/MediaSuggestions";
+import NewFooter from "@/components/Footer/NewFooter";
+import Link from "next/link";
+
+export default function MediaNewsletter() {
+  return (
+    <div
+      className="bg-our-black" // bg-contain"
+      style={
+        {
+          // backgroundImage: `url('/newsletters/media/background.png')`,
+          // backgroundSize: `cover`,
+        }
+      }
+    >
+      <div className="absolute p-1 lg:p-10">
+        <Link
+          href="/unmuTED"
+          className="w-full flex items-center justify-center lg:px-5 px-2 py-2 text-sm text-white transition-colors duration-200 bg-transparent hover:bg-black border border-our-red rounded-lg gap-x-2 sm:w-auto"
+        >
+          <svg
+            className="text-our-red w-5 h-5 rtl:rotate-180"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth="1.5"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinejoin="round"
+              d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18"
+            />
+          </svg>
+          <span className="italic text-xs">Go back</span>
+        </Link>
+      </div>
+
+      <div className="h-8 md:h-12 lg:h-20 2xl:h-28 4xl:h-32"></div>
+      <NewsletterTitle
+        date_image={"./newsletters/media/media-date_03_03_2024.png"}
+      />
+
+      <div className="h-8 md:h-12 lg:h-16 2xl:h-24"></div>
+      <div
+        id="body"
+        className="w-[80%] md:w-[60%] 3xl:w-[50%] 3xl:text-xl mx-auto"
+      >
+        <IntroductionMedia />
+
+        <MediaSuggestions />
+        <div className="flex flex-col gap-6">
+          {/* <span className="text-white text-lg mx-auto text-center flex self-center">
+            Keep in touch!
+          </span> */}
+          <p className="text-white text-xxs self-end">
+            xoxo...Media & Marketing Team
+            <span className="text-our-red">&lt;3</span>
+          </p>
+        </div>
+      </div>
+      <div className="h-20"></div>
+      <NewFooter />
+    </div>
+  );
+}
+
+// // import Footer from "@/components/Footer/Footer";
+// import BlogCard from "@/components/Blog/BlogCard";
+// import NewFooter from "@/components/Footer/NewFooter";
+
+// function NewsletterPage() {
+//   return (
+//     <div
+//       className="bg-neutral-500"
+//       // style={{
+//       //   // backgroundImage: `url('/about/about4a.jpeg')`,
+//       //   backgroundImage: `url('BG.png.jpeg')`,
+//       //   backgroundSize: "cover", // Optional: adjust as needed
+//       // }}
+//     >
+//       <h1 className="text-white w-[75%] text-4xl lg:text-7xl text-left font-bold  py-16 md:w-[80%] mx-auto">
+//         <span className="text-our-red">TEDx</span>NTUA Organisers' Blog
+//       </h1>
+//       <li>
+//         <BlogCard
+//           bloglink="/newsletter/media"
+//           thumbnail="/blogpost/newsletter.png"
+//           title="Media-newsletter"
+//           content="Fresh fresh fresh"
+//           author="Media Team TEDxNTUA 2024"
+//         />
+//       </li>
+//       <NewFooter />
+//       {/* <Footer /> */}
+//     </div>
+//   );
+// }
+
+// export default NewsletterPage;

src/app/unmuTED2/page.js

@@ -0,0 +1,66 @@
+"use client";
+import NewsletterTitle from "@/components/NewsletterPages/NewsletterTitle";
+import IntroductionExperience from "@/components/NewsletterPages/Experience/IntroductionExperience";
+import ExperienceMainContent from "@/components/NewsletterPages/Experience/ExperienceMainContent";
+import NewFooter from "@/components/Footer/NewFooter";
+import Link from "next/link";
+
+export default function ExperienceNewsletter() {
+  return (
+    <div
+      className="bg-our-black" // bg-contain"
+      style={
+        {
+          // backgroundImage: `url('/newsletters/media/background.png')`,
+          // backgroundSize: `cover`,
+        }
+      }
+    >
+      <div className="absolute p-1 lg:p-10">
+        <Link
+          href="/unmuTED"
+          className="w-full flex items-center justify-center lg:px-5 px-2 py-2 text-sm text-white transition-colors duration-200 bg-transparent hover:bg-black border border-our-red rounded-lg gap-x-2 sm:w-auto"
+        >
+          <svg
+            className="text-our-red w-5 h-5 rtl:rotate-180"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth="1.5"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinejoin="round"
+              d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18"
+            />
+          </svg>
+          <span className="italic text-xs">Go back</span>
+        </Link>
+      </div>
+      <div className="h-8 md:h-12 lg:h-20 2xl:h-28 4xl:h-32"></div>
+      <NewsletterTitle
+        date_image={"./newsletters/experience/experience-date_17_03_2024.png"}
+      />
+      <div className="h-8 md:h-12 lg:h-16 2xl:h-24"></div>
+      <div
+        id="body"
+        className="w-[80%] md:w-[60%] 3xl:w-[50%] 3xl:text-xl mx-auto"
+      >
+        <IntroductionExperience />
+
+        <ExperienceMainContent />
+        <div className="flex flex-col gap-6">
+          {/* <span className="text-white text-lg mx-auto text-center flex self-center">
+            Keep in touch!
+          </span> */}
+          <p className="text-white text-xxs self-end">
+            xoxo...Experience & Workshops Team
+            <span className="text-our-red">&lt;3</span>
+          </p>
+        </div>
+      </div>
+      <div className="h-20"></div>
+      <NewFooter />
+    </div>
+  );
+}

src/components/NewsletterPages/Experience/ExperienceMainContent.js

@@ -0,0 +1,18 @@
+import NewsletterSubtitle from "../NewsletterSubtitle";
+import Nagia from "./TeamMembers/Nagia";
+import Paris from "./TeamMembers/Paris";
+import Lito from "./TeamMembers/Lito";
+import Fanh from "./TeamMembers/Fanh";
+
+function ExperienceSuggestions() {
+  return (
+    <div className="text-white text-justify">
+      <Paris />
+      <Nagia />
+      <Lito />
+      <Fanh />
+    </div>
+  );
+}
+
+export default ExperienceSuggestions;

src/components/NewsletterPages/Experience/IntroductionExperience.js

@@ -0,0 +1,25 @@
+function IntroductionExperience() {
+  return (
+    <div className="text-justify text-white flex flex-col gap-6 bg-our-red rounded-md py-8 px-6 md:px-8">
+      <p className="text-justify">
+        It’s time to get unfiltered, uncensored,{" "}
+        <span className="italic">unmuTED</span>!
+      </p>
+
+      <p className="text-justify">
+        Αγαπημένοι λιλιπούτειοι καρναβαλιστές, νομίζουμε πως ήρθε η ώρα να
+        γνωρίσεις την ομάδα Experience &amp; Workshops (a.k.a. την πιο cute
+        ομάδα) του TEDxNTUA 2024!
+      </p>
+      <p className="text-justify">
+        Είμαστε η <span className="font-bold">Φανή</span>, η{" "}
+        <span className="font-bold">Νάγια</span>, η{" "}
+        <span className="font-bold">Λητώ</span> και ο{" "}
+        <span className="font-bold">Πάρης</span> και είμαστε ενθουσιασμένοι που
+        θα κάνουμε curate το δεύτερο και το πιο cute unmuTED!
+      </p>
+    </div>
+  );
+}
+
+export default IntroductionExperience;

src/components/NewsletterPages/Experience/TeamMembers/Fanh.js

@@ -0,0 +1,71 @@
+import Image from "next/image";
+
+function Fanh() {
+  return (
+    <div id="Fanh">
+      <p className="my-8 italics  text-md md:text-base underline 2xl:text-xl 3xl:text-2xl 4xl:text-3xl text-justify">
+        Η <span className="font-bold">Φανή </span> σας έχει την πιο ψαγμένη
+        πρόταση:
+      </p>
+      <div className="w-full flex flex-col gap-8">
+        <div className="flex flex-col lg:flex-row gap-8 items-center lg:items-start">
+          <div className="w-full flex flex-col gap-8">
+            <p>
+              Η <span className="text-our-red">Isabel Allende</span>, μία από
+              τις σημαντικότερες συγγραφείς του 20ου αιώνα, έχει τη δύναμη να
+              ζωντανεύει τους χαρακτήρες της με μια εξαιρετική οξυδέρκεια. Στο "
+              <span className="text-our-red">Σπίτι των Πνευμάτων</span>" η
+              Allende δημιουργεί έναν κόσμο όπου οι ψυχολογικές εντάσεις, οι
+              οικογενειακές σχέσεις και οι πνευματικές διαδρομές συνδέονται με
+              εντυπωσιακό τρόπο.
+            </p>
+            <p>
+              Το "Σπίτι των Πνευμάτων" είναι ένα συναρπαστικό μυθιστόρημα που
+              εκτείνεται σε <span className="text-our-red">πολλές γενιές</span>,
+              συνδυάζοντας στοιχεία μαγικού ρεαλισμού με ιστορική μυθοπλασία. Η
+              πλοκή περιστρέφεται γύρω από την{" "}
+              <span className="text-our-red">οικογένεια Trueba</span>, της
+              οποίας οι ζωές είναι συνυφασμένες με τις πολιτικές και κοινωνικές
+              ανατροπές της χώρας τους.
+            </p>
+          </div>
+          <img
+            src="./newsletters/experience/thehouseofspirit_book.jpg"
+            alt="i_dunamh_tou_tora"
+            className="w-[50%] lg:w-[25%] h-auto max-w-[2268px]"
+          />
+        </div>
+
+        <div className="flex flex-col gap-8">
+          <p>
+            Η ιστορία ξεκινά με τον πατριάρχη της οικογένειας, Esteban Trueba,
+            έναν πλούσιο γαιοκτήμονα που ερωτεύεται την Clara del Valle, μια
+            μυστηριώδη και διορατική νεαρή γυναίκα. Παρά τις ταξικές τους
+            διαφορές, ο Esteban είναι αποφασισμένος να παντρευτεί την Clara.
+          </p>
+
+          <p>
+            Το μυθιστόρημα διερευνά{" "}
+            <span className="text-our-red">θέματα αγάπης</span>,{" "}
+            <span className="text-our-red">εξουσίας </span> και{" "}
+            <span className="text-our-red">κοινωνικής δικαιοσύνης</span> στο
+            πλαίσιο της πολιτικής αναταραχής σε μια χώρα της Λατινικής Αμερικής.
+            Η Allende συνδυάζει επιδέξια στοιχεία φαντασίας και πραγματικότητας,
+            ενσωματώνοντας μαγικά στοιχεία όπως οι ψυχικές ικανότητες της Κλάρα
+            και η παρουσία πνευμάτων στο σπίτι της Τρουέμπα.
+          </p>
+
+          <p>
+            Τελικά, το "Σπίτι των Πνευμάτων"  είναι ένα σαρωτικό έπος που
+            φωτίζει την <span className="text-our-red">πολυπλοκότητα</span> της
+            ανθρώπινης φύσης και τη διαρκή{" "}
+            <span className="text-our-red">δύναμη της αγάπης</span> και της
+            ανθεκτικότητας απέναντι στις αντιξοότητες.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Fanh;