100th Year Update (#1)

* feat: initial layout for 100.yil

* feat: disable indexing for preview site

* feat: 100. yil stuff

* feat: adjust header images on desktop

* feat: improvements

* feat: visual improvements

* feat: change forms link to current

site.config.ts

@@ -1,3 +1,3 @@
 export default {
-  disableIndexing: false,
+  disableIndexing: true,
 };

src/components/Header.astro

@@ -12,18 +12,20 @@ import aiSocLogo from '@/assets/logo.png';
       src={iztechLogo}
       alt='logo of Izmir Institute of Technology'
       loading='eager'
-      class='w-1/2 h-auto max-w-[300px] transition-all duration-150 ease-in shadow-lg shadow-[rgba(0,0,0,0.4)] dark:shadow-gray-800 cursor-default focus:ring-2 focus:ring-blue hover:ring-2 hover:ring-blue active:ring-2 active:ring-blue rounded-full'
+      class='w-1/2 h-auto max-w-[250px] transition-all duration-150 ease-in shadow-lg shadow-[rgba(0,0,0,0.4)] dark:shadow-gray-800 cursor-default focus:ring-2 focus:ring-blue hover:ring-2 hover:ring-blue active:ring-2 active:ring-blue rounded-full'
     />
     <Image
       src={aiSocLogo}
       alt='logo of Iztech AI society'
       loading='eager'
-      class='w-1/2 h-auto max-w-[300px] transition-all duration-150 ease-in shadow-lg shadow-[rgba(0,0,0,0.4)] dark:shadow-gray-800 cursor-default focus:ring-2 focus:ring-blue hover:ring-2 hover:ring-blue active:ring-2 active:ring-blue rounded-full'
+      class='w-1/2 h-auto max-w-[250px] transition-all duration-150 ease-in shadow-lg shadow-[rgba(0,0,0,0.4)] dark:shadow-gray-800 cursor-default focus:ring-2 focus:ring-blue hover:ring-2 hover:ring-blue active:ring-2 active:ring-blue rounded-full'
     />
   </div>
-  <h1
-    class='font-heading text-6xl lg:text-7xl mb-8 sm:mb-12 lg:mb-14 text-center'
-  >
-    Iztech AI Society
-  </h1>
+  <a href='/'>
+    <h1
+      class='font-heading text-6xl lg:text-7xl mb-8 sm:mb-12 lg:mb-14 text-center'
+    >
+      Iztech AI Society
+    </h1>
+  </a>
 </header>

src/components/ImageGallery.astro

@@ -0,0 +1,34 @@
+---
+import { Image } from 'astro:assets';
+import { prompts } from '@/config/prompts';
+
+const images = await Astro.glob('../assets/100-yil/*.{png,jpeg,jpg,webp}');
+---
+
+<ol
+  class='flex flex-col xl:flex-row xl:flex-wrap xl:justify-center gap-y-6 xl:gap-x-6 sm:gap-y-14'
+>
+  {
+    images.map((image, idx) => (
+      <li class='relative'>
+        <div class='absolute top-1 left-2'>
+          <span class='text-white font-bold text-2xl bg-iztechred/60 rounded p-1'>
+            {idx + 1}
+          </span>
+        </div>
+        <figure>
+          <Image
+            src={image.default}
+            alt='100 yıl'
+            width={500}
+            height={500}
+            class='rounded-lg mb-2 sm:mb-4'
+          />
+          <figcaption class='text-sm md:text-base px-3 max-w-[500px]'>
+            {prompts[idx]}
+          </figcaption>
+        </figure>
+      </li>
+    ))
+  }
+</ol>

src/components/Link.astro

@@ -3,17 +3,18 @@ export interface Props {
   href: string;
   ariaLabel: string;
   className?: string;
+  type?: 'external' | 'internal';
 }
 
-const { href, ariaLabel, className = '' } = Astro.props;
+const { href, ariaLabel, className = '', type = 'external' } = Astro.props;
 ---
 
 <a
   href={href}
   class='w-fit'
   aria-label={ariaLabel}
-  target='_blank'
-  rel='noopener noreferrer'
+  target={type === 'external' ? '_blank' : '_self'}
+  rel={type === 'external' ? 'noopener noreferrer' : ''}
 >
   <div
     class={`relative after:absolute after:bg-foreground after:-bottom-1 after:left-0 after:h-[2px] after:w-full after:origin-bottom-left after:scale-x-100 hover:after:origin-bottom-right hover:after:scale-x-0 after:transition-transform after:ease-in-out after:duration-300 ${className}`}

src/components/Vote100Yil.astro

@@ -0,0 +1,10 @@
+<a
+  href='https://docs.google.com/forms/d/e/1FAIpQLSfx9R2O-9gOMooqdjI85f2QyxaUM-w-7o3dE5TrLGXkSneUVg/viewform'
+  title='Resimleri Oyla'
+  aria-label='Resimleri Oyla'
+  target='_blank'
+  rel='noopener noreferrer'
+  class='bg-iztechred mx-auto w-full max-w-sm rounded-lg flex items-center justify-center active:scale-90 hover:scale-105 transition-all duration-100 ease-in-out p-2 drop-shadow-md'
+>
+  <span class='text-xl font-bold text-foreground'>Resimleri Oyla</span>
+</a>

src/config/prompts.ts

@@ -0,0 +1,13 @@
+export const prompts = [
+  "Vector design of a swirling Turkish flag vortex, pulling in elements of technology, history, and culture. Circling the vortex are holographic projections of 'Turkiye', 'IZTECH', 'AI', and '100th', symbolizing the journey and achievements of the past century.",
+  "Photo of a vast digital landscape with the Turkish flag waving gracefully in the wind. Embedded within the flag's patterns are the words 'Türkiye', 'İZTECH', and 'AI', shining brilliantly.",
+  "Vector design of the Turkish flag, where the star and crescent are composed of interconnected AI circuits. Floating around are holographic projections of the words 'Türkiye', 'İZTECH', and 'AI'.",
+  "Watercolor painting of the Bosphorus Bridge in Istanbul. The bridge lights up with 'Turkiye' and '100. YIL'. Beneath, AI boats sail with digital displays of the Turkish flag, and 'AI' is reflected in the water's shimmer.",
+  "Illustration of a traditional Turkish pottery workshop. The ceramics showcase designs of '100. YIL', the Turkish flag, and 'AI' symbols. AI robotic artisans mold and paint the pottery, merging age-old crafts with modern tech.",
+  "Illustration of a futuristic city skyline with holographic Turkish flags waving amidst advanced AI-driven structures. Above, 'IYTE Ai Society' is illuminated, with the date '29 Ekim' glowing prominently, celebrating Cumhuriyet Bayramı.",
+  "Illustration of a futuristic city skyline with holographic Turkish flags waving amidst advanced AI-driven structures. Above, 'Iztech Ai Society' is prominently displayed, with the words 'October 29th Republic Day' glowing.",
+  "Photo-themed representation celebrating the '100. yıl' milestone. The image showcases iconic symbols of the Cumhuriyet (Republic) and elements that highlight Türkiye's rich history and culture. Intertwined with these symbols are futuristic elements representing 'yapay zeka' (artificial intelligence), emphasizing the nation's progress in the field of AI.",
+  "A depiction of the charming robot with a cartoonish design, its antenna glowing with AI symbols. The robot is excitedly presenting the birthday cake with '100. yıl' written on it towards an abstract representation of the Cumhuriyet (Republic). Surrounding the robot are more pronounced digital motifs representing artificial intelligence. The backdrop prominently features the Turkish flag, standing tall and proud.",
+  "Illustration of a futuristic robot holding a birthday cake in its hands, facing us with a welcoming gaze. The cake has '100. yıl' inscribed on it, celebrating the milestone. In the background, the Turkish flag waves majestically, adding context and national pride to the scene.",
+  "Illustration based on the third picture: A humanoid robot, emblematic of the advancements and aspirations of the IZTECH AI Society, gracefully opens a door. The inner side of the door offers a luminous display of artificial neural networks, symbolizing the AI innovations. Adjacent to the door, the Turkish flag and the IZTECH flag wave harmoniously side by side. The phrase 'Cumhuriyetimiz 100 Yaşında' (Our Republic is 100 Years Old) is elegantly integrated into the scene, celebrating the centenary of the Republic and the contributions of the IZTECH community.",
+];

src/pages/100-yil.astro

@@ -0,0 +1,22 @@
+---
+import ImageGallery from '@/components/ImageGallery.astro';
+import Vote100Yil from '@/components/Vote100Yil.astro';
+import Layout from '@/layouts/Layout.astro';
+---
+
+<Layout
+  title='100. Yıl Resimleri - iztechai'
+  description='Cumhuriyetimizin 100. yılı için yapay zeka (DALLE-3) ile oluşturduğumuz resimler'
+>
+  <div class='mb-4 md:mb-8'>
+    <a
+      href='/'
+      class='text-white text-lg md:text-xl xl:text-2xl underline decoration-iztechred decoration-dotted decoration-4 underline-offset-4 md:underline-offset-[6px]'
+      >Geri Dön</a
+    >
+  </div>
+  <div class='mb-4 md:mb-8 w-full max-w-sm'>
+    <Vote100Yil />
+  </div>
+  <ImageGallery />
+</Layout>

src/pages/index.astro

@@ -3,12 +3,22 @@ import Layout from '@/layouts/Layout.astro';
 import JoinCTA from '@/components/JoinCTA.astro';
 import Socials from '@/components/Socials.astro';
 import MemberCount from '@/components/MemberCount.tsx';
+import Link from '@/components/Link.astro';
 ---
 
 <Layout>
   <main>
-    <JoinCTA />
     <div class='mt-4 sm:mt-8 sm:max-w-[65ch] lg:text-lg'>
+      <p class='mb-4 sm:mb-8 text-xl lg:text-2xl'>
+        Cumhuriyetimizin 100. yılı için yapay zeka (DALLE-3) ile oluşturduğumuz
+        görselleri keşfetmek ve oylama yapmak için <a
+          href='/100-yil'
+          aria-label='100. Yil Resimleri'
+          class='text-white drop-shadow-glow underline underline-offset-[6px] decoration-iztechred decoration-4 decoration-dotted'
+          >buraya tıklayınız</a
+        >
+      </p>
+
       <p class='mb-4 sm:mb-8'>
         <span class='font-bold text-lg lg:text-xl text-foreground/90'
           >Merhaba!</span

tailwind.config.cjs

@@ -23,6 +23,9 @@ module.exports = {
           ...defaultTheme.fontFamily.sans,
         ],
       },
+      dropShadow: {
+        glow: ['0 0px 15px rgba(222, 229, 229, 0.85)'],
+      },
     },
   },
   plugins: [],