index.html

---
layout: default
title: Ana Sayfa
---
<div class="relative flex min-h-screen w-full items-center justify-center overflow-hidden">
  <div class="group">
    <div
      class="
        bg-primary group-hover:bg-secondary
        absolute
        top-1/2 left-1/2
        -z-10 h-96
        w-96
        -translate-x-1/2 -translate-y-1/2 rounded-full
        bg-gradient-to-br
        opacity-60
        blur-[100px]
        transition-all
        duration-1000 group-hover:scale-110 group-hover:opacity-70
        group-hover:blur-[120px]
      "
    ></div>
    <div class="relative z-10 px-8 text-center select-none">
      <h1
        class="
          font-anton
          from-secondary
          to-primary
          text-primary
          mb-4 transform
          bg-gradient-to-r
          bg-clip-text
          text-5xl font-bold tracking-wider
          transition-all
          duration-1000
          ease-in-out
          group-hover:scale-110
          group-hover:text-transparent
          md:text-7xl
          lg:text-8xl
        "
      >
        SOFTWEAL
      </h1>

      <div
        x-data="
          {
              text: '',
              textArray : [
              'Enhance your technology experiences',
              'Web AI',
              'AR-XR',
              'Cyber Security'
              ],
              textIndex: 0,
              charIndex: 0,
              typeSpeed: 110,
              cursorSpeed: 550,
              pauseEnd: 1500,
              pauseStart: 20,
              direction: 'forward',
          }
        "
        x-init="
          $nextTick(() => {
              let typingInterval = setInterval(startTyping, $data.typeSpeed);

              function startTyping(){
                  let current = $data.textArray[ $data.textIndex ];

                  // check to see if we hit the end of the string
                  if($data.charIndex > current.length){
                          $data.direction = 'backward';
                          clearInterval(typingInterval);

                          setTimeout(function(){
                              typingInterval = setInterval(startTyping, $data.typeSpeed);
                          }, $data.pauseEnd);
                  }

                  $data.text = current.substring(0, $data.charIndex);

                  if($data.direction == 'forward')
                  {
                      $data.charIndex += 1;
                  }
                  else
                  {
                      if($data.charIndex == 0)
                      {
                          $data.direction = 'forward';
                          clearInterval(typingInterval);
                          setTimeout(function(){
                              $data.textIndex += 1;
                              if($data.textIndex >= $data.textArray.length)
                              {
                                  $data.textIndex = 0;
                              }
                              typingInterval = setInterval(startTyping, $data.typeSpeed);
                          }, $data.pauseStart);
                      }
                      $data.charIndex -= 1;
                  }
              }

              setInterval(function(){
                  if($refs.cursor.classList.contains('hidden'))
                  {
                      $refs.cursor.classList.remove('hidden');
                  }
                  else
                  {
                      $refs.cursor.classList.add('hidden');
                  }
              }, $data.cursorSpeed);

          })
        "
        class="mx-auto flex min-h-20 max-w-7xl items-center justify-center text-center"
      >
        <div class="relative flex h-auto items-center justify-center">
          <p
            class="
              text-primary font-momo to-secondary from-primary bg-gradient-to-r
              bg-clip-text
              text-2xl
              leading-tight
              font-black
              transition-all
              duration-1000
              ease-in-out
              group-hover:scale-110
              group-hover:text-transparent
              md:text-xl
            "
            x-text="text"
          ></p>
          <span class="bg-primary absolute right-0 -mr-2 h-full w-1" x-ref="cursor"></span>
        </div>
      </div>

      <div class="text-primary text-md mx-auto mt-16 max-w-4xl leading-relaxed">
        <p>© {{ 'now' | date: '%Y' }}</p>
      </div>
    </div>
  </div>
</div>

<div class="text-primary relative flex min-h-screen w-full justify-center overflow-hidden select-none">
  <div class="flex w-full max-w-6xl flex-col items-center justify-center gap-16 p-8">
    <h1 class="font-anton text-center text-3xl">TAKIMIMIZ</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      {% for author in site.authors %}
        <div
          class="card-animate card md:card-side bg-base-200 group w-full overflow-hidden border border-white/5 opacity-0 shadow-xl"
          data-direction="{% cycle 'left', 'right' %}"
        >
          <figure>
            <a href="{{ author.url }}" class="h-full w-full">
              <img
                src="/assets/avatars/{{ author.avatar }}"
                alt="{{ author.name }}"
                class="h-64 w-64 rounded bg-gray-200 object-cover transition-all duration-200 ease-in-out select-none group-hover:scale-110"
              >
            </a>
          </figure>
          <div class="card-body relative md:w-2/3">
            <a href="{{ author.url }}" class="block">
              <h2 class="card-title font-anton group-hover:text-neutral mb-2 text-3xl transition-colors">
                {{ author.name }}
              </h2>
              <p class="text-base-content/70 group-hover:text-neutral leading-relaxed transition-colors">
                {{ author.position }}
              </p>
            </a>

            <div class="card-actions justify-end">
              {% for entry in author.social %}
                {% assign platform = entry | first | first %}
                {% assign handle = entry | first | last %}
                {% assign config = site.data.social[platform] %}

                {% if config %}
                  {% assign final_url = config.url | append: handle %}
                  {% if platform == 'url' %}
                    {% assign final_url = handle %}
                  {% endif %}

                  <a
                    href="{{ final_url }}"
                    target="_blank"
                    class="btn btn-ghost btn-circle btn-sm hover:bg-primary transition-all hover:text-white"
                    title="{{ platform | capitalize }}"
                  >
                    <i class="{{ config.icon }} text-xl"></i>
                  </a>
                {% endif %}
              {% endfor %}
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</div>

<!--
<div
  x-data
  x-init="
    $nextTick(() => {
        const content = $refs.content;
        const item = $refs.item;
        const clone = item.cloneNode(true);
        content.appendChild(clone);
    });
  "
  class="container-block bg-base-100 relative w-full space-y-4 py-24 select-none"
>
  <h1 class="font-anton mb-12 text-center text-3xl">SPONSORLARIMIZ</h1>
  <div
    class="text-primary-content bg-secondary relative mx-auto w-full max-w-7xl -rotate-1 transform overflow-hidden py-4 text-lg tracking-wide uppercase italic shadow-xl transition-transform duration-500 hover:rotate-0 sm:text-xs md:text-sm lg:text-base xl:text-xl 2xl:text-2xl"
  >
    <div class="from-secondary absolute left-0 z-20 h-full w-40 bg-gradient-to-r to-transparent"></div>
    <div class="from-secondary absolute right-0 z-20 h-full w-40 bg-gradient-to-l to-transparent"></div>
    <div x-ref="content" class="animate-marquee flex">
      <div x-ref="item" class="flex w-full flex-shrink-0 items-center justify-around space-x-12 py-2 text-white">
        {% for i in (1..8) %}
          <span class="flex items-center gap-4 text-sm font-bold text-nowrap">
            <i class="ai-star-filled"></i>
            LÜTFEN SPONSOR OLMAK İÇİN İLETİŞİME GEÇİN
          </span>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
-->

<!-- Interactive Scripts -->
<script>
  if (typeof gsap !== 'undefined') {
    // Staggered animation for grid
    gsap.to('.card-animate', {
      opacity: 1,
      y: 0,
      duration: 1,
      stagger: 0.2,
      ease: 'power3.out',
      scrollTrigger: {
        trigger: '.card-animate',
        start: 'top 80%',
      },
    });

    // Initial setup for animation
    gsap.set('.card-animate', { y: 100, opacity: 0 });
  }
</script>