style: add responsive top padding to akademi-hero section

style: add teal button styles to truncgil-akademi template
refactor: rebrand Trunçgil Akademi theme from yellow to teal and add route alias for the academy page.
2026-05-26 21:34:50 +03:00 · 2026-05-26 21:29:22 +03:00 · 2026-05-26 21:29:14 +03:00
3 changed files with 50 additions and 30 deletions
@@ -71,13 +71,14 @@ class PageController extends Controller
        return $this->handleShow('truncgil-akademi');
    }

-    /**
-     * Unified show logic
-     */
    protected function handleShow($slug)
    {
        $settings = $this->getSettings();

+        if ($slug === 'akademi') {
+            $slug = 'truncgil-akademi';
+        }
+
        // Redirection logic disabled for rendering the page locally on main domain.
        
        // 1. Statik View Kontrolü
@@ -23,7 +23,7 @@
  }
 </style>

-<header class="relative wrapper !bg-[#fff8ee]">
+<header class="relative wrapper !bg-[#e8f4f6]">
  <nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
    <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
      <div class="navbar-brand w-full">
@@ -87,7 +87,7 @@
    }
    .akademi-section .accordion-wrapper .card-header button:hover,
    .akademi-section .accordion-wrapper .card-header button {
-        color: #fab758 !important;
+        color: #1D8595 !important;
    }

    /* Academy Card Micro-animations */
@@ -96,7 +96,7 @@
    }
    .akademi-card:hover {
        transform: translateY(-8px) scale(1.03);
-        box-shadow: 0 1.25rem 2.5rem rgba(250, 183, 88, 0.15) !important;
+        box-shadow: 0 1.25rem 2.5rem rgba(29, 133, 149, 0.15) !important;
    }

    /* Header adjustments to overlay the gradient */
@@ -113,12 +113,31 @@
        box-shadow: none !important;
    }

-    .bg-gradient-yellow-light {
-        background: linear-gradient(180deg, #fff8ee 0%, rgba(255, 255, 255, 0) 100%) !important;
+    .akademi-hero {
+        padding-top: 80px !important;
    }
-    .btn-soft-yellow {
-        background-color: #fff8ee !important;
-        color: #fab758 !important;
+    @media (min-width: 992px) {
+        .akademi-hero {
+            padding-top: 140px !important;
+        }
+    }
+
+    .bg-gradient-teal-light {
+        background: linear-gradient(180deg, #e8f4f6 0%, rgba(255, 255, 255, 0) 100%) !important;
+    }
+    .btn-soft-teal {
+        background-color: #e8f4f6 !important;
+        color: #1D8595 !important;
+    }
+    .btn-teal {
+        background-color: #1D8595 !important;
+        border-color: #1D8595 !important;
+        color: #ffffff !important;
+    }
+    .btn-teal:hover {
+        background-color: #23636E !important;
+        border-color: #23636E !important;
+        color: #ffffff !important;
    }

    /* Floating tech logo lists inside cards */
@@ -149,7 +168,7 @@
@endphp

 {{-- Hero Section (inspired by demo1.html layout) --}}
-<section class="wrapper bg-gradient-yellow-light ">
+<section class="wrapper bg-gradient-teal-light akademi-hero">
    <div class="container pt-10 xl:pt-[6.5rem] lg:pt-[6.5rem] md:pt-[6.5rem] pb-8 !text-center">
        <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
            <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full" data-cue="slideInLeft" data-duration="800">
@@ -160,13 +179,13 @@
            <!-- /column -->
            <div class="md:w-10/12 lg:w-5/12 xl:w-5/12 md:!ml-[8.33333333%] lg:!ml-0 xl:!ml-0 flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full text-center lg:text-left xl:text-left" data-cues="slideInDown" data-group="page-title" data-delay="600">
                <h1 class="!text-[calc(1.375rem_+_1.5vw)] font-bold !leading-[1.15] xl:!text-[2.5rem] !mb-5 md:mx-[-1.25rem] lg:mx-0">
-                    {!! t('Trunçgil Akademi ile') !!} <br><span class="text-gradient" style="background-image: linear-gradient(135deg, #fab758 0%, #e2626b 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">{!! t('Geleceği Şekillendirin') !!}</span>
+                    {!! t('Trunçgil Akademi ile') !!} <br><span class="text-gradient" style="background-image: linear-gradient(135deg, #1D8595 0%, #23636E 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">{!! t('Geleceği Şekillendirin') !!}</span>
                </h1>
                <p class="lead !text-[1.1rem] !leading-[1.55] !mb-7">
                    {!! t('Vibe Coding, Yapay Zeka, Web ve Uygulama Geliştirme, Müzik Prodüksiyonu gibi günümüzün en popüler alanlarında uzman kadromuzdan profesyonel ve uygulamalı eğitimler alın.') !!}
                </p>
                <span>
-                    <a href="#egitimler" class="btn btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#e09e3f] hover:!border-[#e09e3f] !text-[.85rem] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(250,183,88,0.25)]">
+                    <a href="#egitimler" class="btn btn-teal !text-white !bg-[#1D8595] border-[#1D8595] hover:text-white hover:bg-[#23636E] hover:!border-[#23636E] !text-[.85rem] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(29,133,149,0.25)]">
                        {!! t('Eğitimleri Keşfedin') !!}
                    </a>
                </span>
@@ -191,8 +210,8 @@
        </div>

        <div class="!relative">
-            <div class="shape !rounded-[50%] !bg-[#fff8ee] rellax !w-[6rem] !h-[6rem] !absolute z-[1]" data-rellax-speed="1" style="bottom: -0.5rem; right: -2.2rem; z-index: 0;"></div>
-            <div class="shape bg-dot primary rellax !w-[6rem] !h-[7rem] absolute opacity-50 bg-[radial-gradient(#fab758_2px,transparent_2.5px)]" data-rellax-speed="1" style="top: -0.5rem; left: -2.5rem; z-index: 0;"></div>
+            <div class="shape !rounded-[50%] !bg-[#e8f4f6] rellax !w-[6rem] !h-[6rem] !absolute z-[1]" data-rellax-speed="1" style="bottom: -0.5rem; right: -2.2rem; z-index: 0;"></div>
+            <div class="shape bg-dot primary rellax !w-[6rem] !h-[7rem] absolute opacity-50 bg-[radial-gradient(#1D8595_2px,transparent_2.5px)]" data-rellax-speed="1" style="top: -0.5rem; left: -2.5rem; z-index: 0;"></div>

            <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px] !text-center" data-cues="slideInUp" data-group="akademi-cards" data-interval="-100" data-duration="500">
                
@@ -201,7 +220,7 @@
                    <div class="card h-full !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] akademi-card">
                        <div class="card-body flex-[1_1_auto] p-[40px] flex flex-col justify-between">
                            <div>
-                                <div class="icon btn btn-circle btn-lg btn-soft-yellow pointer-events-none !mb-4 w-12 h-12 !inline-flex !items-center !justify-center !leading-none !rounded-full bg-[#fff8ee] text-[#fab758]">
+                                <div class="icon btn btn-circle btn-lg btn-soft-teal pointer-events-none !mb-4 w-12 h-12 !inline-flex !items-center !justify-center !leading-none !rounded-full bg-[#e8f4f6] text-[#1D8595]">
                                    <span class="material-symbols-outlined !text-[1.6rem]">bolt</span>
                                </div>
                                <h4 class="!text-[1.1rem] !font-bold !mb-2 text-[#343f52]">{!! t('Vibe Coding') !!}</h4>
@@ -222,7 +241,7 @@
                    <div class="card h-full !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] akademi-card">
                        <div class="card-body flex-[1_1_auto] p-[40px] flex flex-col justify-between">
                            <div>
-                                <div class="icon btn btn-circle btn-lg btn-soft-yellow pointer-events-none !mb-4 w-12 h-12 !inline-flex !items-center !justify-center !leading-none !rounded-full bg-[#fff8ee] text-[#fab758]">
+                                <div class="icon btn btn-circle btn-lg btn-soft-teal pointer-events-none !mb-4 w-12 h-12 !inline-flex !items-center !justify-center !leading-none !rounded-full bg-[#e8f4f6] text-[#1D8595]">
                                    <span class="material-symbols-outlined !text-[1.6rem]">psychology</span>
                                </div>
                                <h4 class="!text-[1.1rem] !font-bold !mb-2 text-[#343f52]">{!! t('Yapay Zeka & ML') !!}</h4>
@@ -243,7 +262,7 @@
                    <div class="card h-full !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] akademi-card">
                        <div class="card-body flex-[1_1_auto] p-[40px] flex flex-col justify-between">
                            <div>
-                                <div class="icon btn btn-circle btn-lg btn-soft-yellow pointer-events-none !mb-4 w-12 h-12 !inline-flex !items-center !justify-center !leading-none !rounded-full bg-[#fff8ee] text-[#fab758]">
+                                <div class="icon btn btn-circle btn-lg btn-soft-teal pointer-events-none !mb-4 w-12 h-12 !inline-flex !items-center !justify-center !leading-none !rounded-full bg-[#e8f4f6] text-[#1D8595]">
                                    <span class="material-symbols-outlined !text-[1.6rem]">language</span>
                                </div>
                                <h4 class="!text-[1.1rem] !font-bold !mb-2 text-[#343f52]">{!! t('Web Uygulamaları') !!}</h4>
@@ -264,7 +283,7 @@
                    <div class="card h-full !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] akademi-card">
                        <div class="card-body flex-[1_1_auto] p-[40px] flex flex-col justify-between">
                            <div>
-                                <div class="icon btn btn-circle btn-lg btn-soft-yellow pointer-events-none !mb-4 w-12 h-12 !inline-flex !items-center !justify-center !leading-none !rounded-full bg-[#fff8ee] text-[#fab758]">
+                                <div class="icon btn btn-circle btn-lg btn-soft-teal pointer-events-none !mb-4 w-12 h-12 !inline-flex !items-center !justify-center !leading-none !rounded-full bg-[#e8f4f6] text-[#1D8595]">
                                    <span class="material-symbols-outlined !text-[1.6rem]">music_note</span>
                                </div>
                                <h4 class="!text-[1.1rem] !font-bold !mb-2 text-[#343f52]">{!! t('Müzik Prodüksiyonu') !!}</h4>
@@ -284,7 +303,7 @@
 </section>

 {{-- Training Methodology (Our Strategy - inspired by demo1.html process) --}}
-<section class="wrapper !bg-[#ffffff] angled upper-start lower-start relative border-0 before:border-[#fff8ee] after:border-[#fff8ee] before:top-[-4rem] before:content-[''] before:block before:absolute before:z-0 before:border-l-[100vw] before:border-r-transparent before:border-t-[4rem] before:border-y-transparent before:border-solid before:right-0 after:bottom-[-4rem] after:content-[''] after:block after:absolute after:z-0 after:border-l-[100vw] after:border-r-transparent after:border-b-[4rem] after:border-y-transparent after:border-solid after:right-0">
+<section class="wrapper !bg-[#ffffff] angled upper-start lower-start relative border-0 before:border-[#e8f4f6] after:border-[#e8f4f6] before:top-[-4rem] before:content-[''] before:block before:absolute before:z-0 before:border-l-[100vw] before:border-r-transparent before:border-t-[4rem] before:border-y-transparent before:border-solid before:right-0 after:bottom-[-4rem] after:content-[''] after:block after:absolute after:z-0 after:border-l-[100vw] after:border-r-transparent after:border-b-[4rem] after:border-y-transparent after:border-solid after:right-0">
    <div class="container py-[4.5rem] xl:pt-28 lg:pt-28 md:pt-28 xl:pb-20 lg:pb-20 md:pb-20">
        <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] !mb-[4.5rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem] items-center">
            
@@ -293,7 +312,7 @@
                    <div class="card-body p-6">
                        <div class="flex flex-row">
                            <div>
-                                <span class="icon btn btn-circle btn-lg btn-soft-yellow pointer-events-none !mr-4 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]">
+                                <span class="icon btn btn-circle btn-lg btn-soft-teal pointer-events-none !mr-4 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]">
                                    <span class="number table-cell text-center align-middle text-[1.1rem] font-bold m-[0_auto]">01</span>
                                </span>
                            </div>
@@ -309,7 +328,7 @@
                    <div class="card-body p-6">
                        <div class="flex flex-row">
                            <div>
-                                <span class="icon btn btn-circle btn-lg btn-soft-yellow pointer-events-none !mr-4 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]">
+                                <span class="icon btn btn-circle btn-lg btn-soft-teal pointer-events-none !mr-4 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]">
                                    <span class="number table-cell text-center align-middle text-[1.1rem] font-bold m-[0_auto]">02</span>
                                </span>
                            </div>
@@ -325,7 +344,7 @@
                    <div class="card-body p-6">
                        <div class="flex flex-row">
                            <div>
-                                <span class="icon btn btn-circle btn-lg btn-soft-yellow pointer-events-none !mr-4 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]">
+                                <span class="icon btn btn-circle btn-lg btn-soft-teal pointer-events-none !mr-4 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]">
                                    <span class="number table-cell text-center align-middle text-[1.1rem] font-bold m-[0_auto]">03</span>
                                </span>
                            </div>
@@ -346,7 +365,7 @@
                <p class="!mb-6">
                    {!! t('Sektörün ihtiyaç duyduğu modern teknolojileri en efektif öğrenme metotlarıyla birleştiriyoruz. Eğitmenlerimiz sadece teorik bilgi aktarmaz; güncel endüstri projelerinde yer alan deneyimli profesyonellerdir.') !!}
                </p>
-                <a href="{{ $contactUrl }}" class="btn btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#e09e3f] hover:!border-[#e09e3f] !text-[.85rem] !rounded-[50rem] !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(250,183,88,0.25)]">
+                <a href="{{ $contactUrl }}" class="btn btn-teal !text-white !bg-[#1D8595] border-[#1D8595] hover:text-white hover:bg-[#23636E] hover:!border-[#23636E] !text-[.85rem] !rounded-[50rem] !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(29,133,149,0.25)]">
                    {!! t('Akademiye Başvurun') !!}
                </a>
            </div>
@@ -369,7 +388,7 @@
                <div class="accordion accordion-wrapper" id="accordionAcademy">
                    <div class="card plain accordion-item">
                        <div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingOne">
-                            <button class="accordion-button !text-[0.9rem] before:!text-[#fab758] hover:!text-[#fab758]" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                            <button class="accordion-button !text-[0.9rem] before:!text-[#1D8595] hover:!text-[#1D8595]" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                {!! t('Vibe Coding Nedir ve Neden Öğretiliyor?') !!}
                            </button>
                        </div>
@@ -382,7 +401,7 @@
                    
                    <div class="card plain accordion-item">
                        <div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingTwo">
-                            <button class="collapsed !text-[0.9rem] before:!text-[#fab758] hover:!text-[#fab758]" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                            <button class="collapsed !text-[0.9rem] before:!text-[#1D8595] hover:!text-[#1D8595]" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                {!! t('Eğitim Sonunda Sertifika Veriliyor mu?') !!}
                            </button>
                        </div>
@@ -395,7 +414,7 @@
                    
                    <div class="card plain accordion-item">
                        <div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingThree">
-                            <button class="collapsed !text-[0.9rem] before:!text-[#fab758] hover:!text-[#fab758]" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                            <button class="collapsed !text-[0.9rem] before:!text-[#1D8595] hover:!text-[#1D8595]" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                {!! t('Eğitimler Online mı Yoksa Yüz Yüze mi?') !!}
                            </button>
                        </div>
@@ -420,14 +439,14 @@
                <div class="container">
                    <div class="flex flex-wrap mx-[-15px] !text-center">
                        <div class="xl:w-11/12 xxl:w-9/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto" data-cue="slideInUp" data-duration="600">
-                            <h2 class="!text-[0.8rem] !tracking-[0.02rem] !leading-[1.35] uppercase text-gradient !mb-3" style="background-image: linear-gradient(135deg, #fab758 0%, #e2626b 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">{!! t('Geleceğinizi Bugün Planlayın') !!}</h2>
+                            <h2 class="!text-[0.8rem] !tracking-[0.02rem] !leading-[1.35] uppercase text-gradient !mb-3" style="background-image: linear-gradient(135deg, #1D8595 0%, #23636E 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">{!! t('Geleceğinizi Bugün Planlayın') !!}</h2>
                            <h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] font-bold !leading-[1.25] !mb-7 lg:!px-[7rem] xl:!px-[7rem]">
                                {!! t('Teknolojik dönüşümde yerinizi almak ve Trunçgil Akademi eğitimlerine katılmak için hazır mısınız?') !!}
                            </h3>
                        </div>
                    </div>
                    <div class="flex justify-center" data-cue="slideInUp" data-delay="300" data-duration="600">
-                        <a href="{{ $contactUrl }}" class="btn btn-lg btn-yellow rounded-full shadow-lg font-semibold !text-white !bg-[#fab758] border-[#fab758] hover:bg-[#e09e3f] hover:border-[#e09e3f]">{!! t('Başvuru Formunu Doldurun') !!}</a>
+                        <a href="{{ $contactUrl }}" class="btn btn-lg btn-teal rounded-full shadow-lg font-semibold !text-white !bg-[#1D8595] border-[#1D8595] hover:bg-[#23636E] hover:border-[#23636E]">{!! t('Başvuru Formunu Doldurun') !!}</a>
                    </div>
                </div>
            </div>
Author	SHA1	Message	Date
Ümit Tunç	6fb2bfb265	style: add responsive top padding to akademi-hero section	2026-05-26 21:34:50 +03:00
Ümit Tunç	5f6c468a4b	style: add teal button styles to truncgil-akademi template	2026-05-26 21:29:22 +03:00
Ümit Tunç	48ae773e85	refactor: rebrand Trunçgil Akademi theme from yellow to teal and add route alias for the academy page.	2026-05-26 21:29:14 +03:00