sami.fix: adding the workshop section

RealEskalate · Jul 15, 2024 · 2d4b04e · 2d4b04e
1 parent 816d197
commit 2d4b04e
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 51 deletions.
diff --git a/dist/hacks-website/index.html b/dist/hacks-website/index.html
@@ -60,5 +60,5 @@
         <div class="square" id="sq9"></div>
       </div>
     </app-root>
-  <script src="runtime.fa4c12334e562a2f.js" type="module"></script><script src="polyfills.ca0382e1ab6cf5f7.js" type="module"></script><script src="scripts.0e5b01af3f8fe401.js" defer></script><script src="vendor.6fe0bbdfb751e2a1.js" type="module"></script><script src="main.2d23b7b5ca558256.js" type="module"></script></body>
+  <script src="runtime.fa4c12334e562a2f.js" type="module"></script><script src="polyfills.ca0382e1ab6cf5f7.js" type="module"></script><script src="scripts.0e5b01af3f8fe401.js" defer></script><script src="vendor.6fe0bbdfb751e2a1.js" type="module"></script><script src="main.74c2de4941419920.js" type="module"></script></body>
 </html>
diff --git a/dist/hacks-website/main.2d23b7b5ca558256.js b/dist/hacks-website/main.2d23b7b5ca558256.js
diff --git a/dist/hacks-website/main.74c2de4941419920.js b/dist/hacks-website/main.74c2de4941419920.js
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -48,6 +48,10 @@
   <app-prize2024></app-prize2024>
 </div>
 
+<div id="workshops" class="relative z-40">
+  <app-workshop></app-workshop>
+</div>
+
 <div id="info" class="relative z-40">
   <app-info></app-info>
 </div>
@@ -105,8 +109,7 @@
   <app-footer></app-footer>
 </div>
 
-
- <div
+<div
   *ngIf="!modalOpen"
   class="fixed {{
     showChat ? 'h-5/6 w-1/3' : 'h-auto w-auto'
@@ -133,13 +136,13 @@
         d="M312.54 415.38a165.32 165.32 0 01-23.26 2.05c-42.43 0-82.5-11.2-115-32.2a184.09 184.09 0 01-53.09-49.32c-26.08-34.57-40.3-78.51-40.3-124.49 0-3.13.11-6.14.22-9.16a4.34 4.34 0 00-7.54-3.12 158.76 158.76 0 00-14.86 195.24c2.47 3.77 3.87 6.68 3.44 8.62l-14.09 72.26a4 4 0 005.22 4.53l68-24.24a16.85 16.85 0 0112.92.22c20.35 8 42.86 12.92 65.37 12.92a169.45 169.45 0 00116.63-46 4.29 4.29 0 00-3.66-7.31z"
       />
     </svg>
-     <!-- <img
+    <!-- <img
       *ngIf="!showChat"
       src="assets/mingcute_message-4-fill.svg"
       alt="..."
       class="w-8 h-8"
     />  -->
-<svg
+    <svg
       *ngIf="showChat"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"

diff --git a/src/app/pages/prize2024/prize2024.component.html b/src/app/pages/prize2024/prize2024.component.html
@@ -2,8 +2,8 @@
   id="prize2024"
   class="flex fade min-h-screen py-24 max-sm:px-4 max-md:py-16 max-xl:px-12 px-32 flex-col justify-center"
 >
-  <div class="mb-16">
-    <!-- This is the video content -->
+<!-- This is the video content -->
+  <!-- <div class="mb-16">
     <div class="stack w-full" id="bigVideo">
       <div class="text-center aspect-[96/54] w-4/5 max-sm:w-full card bg-black">
         <div
@@ -34,7 +34,7 @@
         class="text-center aspect-[92/58] card w-4/5 max-sm:w-full bg-indigo-800"
       ></div>
     </div>
-  </div>
+  </div> -->
 
   <p class="sm:text-[4rem] text-center text-4xl font-semibold mb-4 text-white">
     $30K Prize

diff --git a/src/app/shared/header/header.component.html b/src/app/shared/header/header.component.html
@@ -40,6 +40,16 @@
         }}"
         >Projects</a
       > -->
+
+      <a
+      (click)="scrollToSection('workshop')"
+      class="text-sm max-xl:text-[0.75rem] cursor-pointer  font-semibold leading-6 hover:text-indigo-600 nav-item {{
+        currentSection.toString() == 'workshop'
+          ? 'text-indigo-600'
+          : 'text-gray-200'
+      }} "
+      >Workshop </a
+    >
       <a
         (click)="scrollToSection('info')"
         class="text-sm max-xl:text-[0.75rem] cursor-pointer font-semibold leading-6 hover:text-indigo-600 nav-item {{
@@ -454,6 +464,15 @@
               class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-200 hover:bg-gray-800"
               >A2SV Interview Partners</a
             > -->
+            <a
+            (click)="scrollToSection('workshop')"
+            class="text-sm max-xl:text-[0.75rem] cursor-pointer  font-semibold leading-6 hover:text-indigo-600 nav-item {{
+              currentSection.toString() == 'workshop'
+                ? 'text-indigo-600'
+                : 'text-gray-200'
+            }} "
+            >Workshop </a
+          >
             <a
               (click)="scrollToSection('info'); toggleMenu()"
               class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-200 hover:bg-gray-800"

diff --git a/src/app/shared/workshop/workshop.component.html b/src/app/shared/workshop/workshop.component.html
@@ -1,9 +1,9 @@
-<section class="m-auto md:px-20 px-4">
+<section id="workshop" class="m-auto md:px-20 py-5 px-4  flex flex-col items-center ">
   <div class="container flex items-center justify-center">
     <button class="mt-2" (click)="toggleCards()">
-      <span class="flex items-center">
+      <span class="flex items-center  py-5">
         <p
-          class="sm:text-4xl text-center text-2xl pt-8 mb-12 font-bold text-transparent bg-gradient-to-r from-indigo-600 to-pink-500 bg-clip-text"
+          class="sm:text-4xl text-center text-2xl  mb-12 font-bold text-transparent bg-gradient-to-r from-indigo-600 to-pink-500 bg-clip-text"
         >
           Our Workshop Summary
         </p>
@@ -45,52 +45,33 @@
   <p
     class="lg:w-2/3 mx-auto leading-relaxed text-base text-white text-justify justify-between"
   >
-    Unlock valuable data and information in the form of videos used by our
-    participants during the hackathon. Gain profound insights into hackathon
-    dynamics, AI applications, and implementation strategies through
-    our exclusive workshop videos. See the intersection of theory and practice
-    with valuable insights from industry leaders, helping you prepare
-    effectively for building tech projects.
+  Our hackathon featured a series of insightful workshops designed to equip participants with essential skills for success. Topics included preparing effective presentations, Git, GitHub, and version control, UI/UX design and prototyping, and the effective use of generative AI and AI tools.
+  We encourage you to check out the recorded sessions of these valuable workshops to gain insights and boost your skills. Don't miss the opportunity to learn from our expert-led sessions and take your projects to the next level!  
   </p>
 
   <div *ngIf="showCards">
     <div
-      class="grid grid-cols-1 max-sm:px-0 px-12 md:grid-cols-3 sm:grid-cols-2 gap-2"
+      class="grid grid-cols-1 max-sm:px-0 px-12  lg:grid-cols-3 sm:grid-cols-2 gap-2"
     >
-      <div class="container px-5 py-5 mx-auto">
+      <div *ngFor="let workshop of workshops_lists;let i = index " class="container px-5 py-5 mx-auto">
         <div class="h-full border-2 border-gray-800 rounded-lg overflow-hidden">
           <iframe
             class="lg:h-48 md:h-36 w-full object-cover object-center"
-            src="https://www.youtube.com/embed/7FlRWgVGmUA?si=xT8jLc1Bi-W9XmL_"
+            [src]="workshop.src"
           ></iframe>
           <div class="p-6">
             <h1 class="title-font text-lg font-medium text-white mb-3">
-              Innovative Idea Generation
+              {{workshop.title}}
             </h1>
-            <p class="leading-relaxed mb-3 text-gray-600">
-              Learn to brainstorm and refine groundbreaking ideas for project
-              success. Grasp the role of innovative ideas, harness effective
-              brainstorming techniques, apply SWOT analysis and feasibility
-              checks, and adopt a customer-oriented approach.
+            <p class="leading-relaxed mb-3 text-gray-400">
+              {{workshop.description}}
             </p>
-            <a class="inline-flex items-center">
-              <img
-                alt="blog"
-                src="/assets/yekta.jpg"
-                class="w-8 h-8 rounded-full flex-shrink-0 object-cover object-center"
-              />
-              <span class="flex-grow flex flex-col pl-3">
-                <span class="title-font font-medium text-gray-300">
-                  Yekta Ozcan Ozozer: Managing Partner &#64; Sürekli Gelişim
-                  Danışmanlık ve Eğitim Ltd.</span
-                >
-              </span>
-            </a>
+
           </div>
         </div>
       </div>
 
-      <div class="container px-5 py-5 mx-auto">
+      <!-- <div class="container px-5 py-5 mx-auto">
         <div class="h-full border-2 border-gray-800 rounded-lg overflow-hidden">
           <iframe
             class="lg:h-48 md:h-36 w-full object-cover object-center"
@@ -250,7 +231,7 @@ <h1 class="title-font text-lg font-medium text-white mb-3">
             </a>
           </div>
         </div>
-      </div>
+      </div> -->
     </div>
   </div>
 </section>
diff --git a/src/app/shared/workshop/workshop.component.ts b/src/app/shared/workshop/workshop.component.ts
@@ -1,23 +1,30 @@
-import {Component, Input} from '@angular/core';
-import {SafeResourceUrl} from "@angular/platform-browser";
+import { Component, Input } from "@angular/core";
+import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
 
-
-export interface  Workshop {
+export interface Workshop {
   title: string;
   description: string;
   author: string;
   authorDescription: string;
 }
 @Component({
-  selector: 'app-workshop',
-  templateUrl: './workshop.component.html',
-  styleUrls: ['./workshop.component.css']
+  selector: "app-workshop",
+  templateUrl: "./workshop.component.html",
+  styleUrls: ["./workshop.component.css"],
 })
 export class WorkshopComponent {
-
   @Input() workshop: Workshop | undefined;
   showCards = false; // Initialize as true
-
+
+  constructor(private sanitizer: DomSanitizer) {
+  }
+
+  workshops_lists: any[] = [
+    { title: "UI Design and Styling ", description: "Join us and understand the principles of user experience (UX) design and learn how to create user-friendly interfaces while staying updated with the latest trends in UI design. This workshop will focus on designing with the user in mind to enhance usability and satisfaction, and provide insights into modern visual design practices, including color theory, typography, and responsive design.", src: this.sanitizer.bypassSecurityTrustResourceUrl("https://www.youtube.com/embed/t7WsFtUGTqE?si=OMPabAqBPqphZUTX") },
+    { title: "Project Management Tools", description: "Join us as this workshop will introduce essential tools and techniques for effective collaboration. Learn about project management tools that can streamline teamwork and enhance productivity.", src:this.sanitizer.bypassSecurityTrustResourceUrl("https://www.youtube.com/embed/TS61L2gXb68?si=bVgw6gwzJfM7DDat") },
+    { title: "Generative AI and its Applications", description: "Join us and explore the various application areas of Large Language Models (LLMs) in different sectors such as environment, commerce, health, education, and more. This comprehensive workshop will delve into real-world examples and case studies demonstrating the transformative impact of LLMs across various industries.",src: this.sanitizer.bypassSecurityTrustResourceUrl("https://www.youtube.com/embed/gYxDZ3N7uwA?si=xgO1wkqORkLhlbdO") },
+    { title: "Pitching and Presentation Skills", description: "Learn how to craft compelling pitches that attract investment, including storytelling techniques and presentation skills. This workshop will help you refine your pitch to make a memorable impact on your audience.", src : this.sanitizer.bypassSecurityTrustResourceUrl("https://www.youtube.com/embed/fjar3OI2HJs?si=wLFzGbgst8yhg1bE") },
+  ];
 
   toggleCards() {
     this.showCards = !this.showCards; // Toggle the visibility