https://lechatbot.com/blog.html

1<!DOCTYPE html>
2<html lang="tr">
3
4<head><!-- SSR: ACTIVE (BLOG) -->
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Le Blog | Conversational UX & AI Design Insights</title>
8    <meta name="description"
9        content="Conversational UX, AI Design ve dijital asistanlar üzerine güncel yazılarımızı keşfedin.">
10    <meta name="keywords"
11        content="Le Chatbot, Conversational UX, AI Design, Chatbot, Blog, Yapay Zeka, UX Writing, Prompt Design, LLM, Türkiye">
12    <meta name="author" content="Le Chatbot">
13
14    <!-- Open Graph / Facebook -->
15    <meta property="og:type" content="website">
16    <meta property="og:url" content="https://lechatbot.com/blog.html">
17    <meta property="og:title" content="Le Blog | Conversational UX & AI Design Insights">
18    <meta property="og:description"
19        content="Conversational UX, AI Design ve dijital asistanlar üzerine güncel yazılarımızı keşfedin.">
20    <meta property="og:image" content="https://lechatbot.com/cover.png">
21    <meta property="og:site_name" content="Le Chatbot">
22
23    <!-- Twitter -->
24    <meta property="twitter:card" content="summary_large_image">
25    <meta property="twitter:url" content="https://lechatbot.com/blog.html">
26    <meta property="twitter:title" content="Le Blog | Conversational UX & AI Design Insights">
27    <meta property="twitter:description"
28        content="Conversational UX, AI Design ve dijital asistanlar üzerine güncel yazılarımızı keşfedin.">
29    <meta property="twitter:image" content="https://lechatbot.com/cover.png">
30
31    <link rel="canonical" href="https://lechatbot.com/blog.html">
32    <link rel="icon" type="image/png" href="/logo.png">
33    <link rel="apple-touch-icon" href="/logo.png">
34
35    <!-- Structured Data for Site Navigation -->
36    

36<script type="application/ld+json">
37    {
38      "@context": "https://schema.org",
39      "@type": "ItemList",
40      "itemListElement": [
41        {
42          "@type": "ListItem",
43          "position": 1,
44          "name": "Ana Sayfa",
45          "url": "https://lechatbot.com/"
46        },
47        {
48          "@type": "ListItem",
49          "position": 2,
50          "name": "Blog Yazıları",
51          "url": "https://lechatbot.com/blog.html"
52        }
53      ]
54    }
55    </script>

55
56
57    <link rel="preconnect" href="https://fonts.googleapis.com">
58    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
59    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"
60        rel="stylesheet">
61    

61<script src="https://unpkg.com/lucide@latest"></script>

61
62    <style>
63        :root {
64            --blog-teal: #469DAF;
65            --blog-bg: #f8f9fa;
66            --sidebar-width: 380px;
67            --header-height: 80px;
68        }
69
70        body {
71            background-color: var(--white);
72            margin: 0;
73            padding: 0;
74            height: 100vh;
75            display: flex;
76            flex-direction: column;
77            overflow: hidden;
78            font-family: var(--font-blog);
79        }
80
81        /* Header */
82        .blog-header {
83            height: var(--header-height);
84            background: var(--white);
85            display: flex;
86            align-items: center;
87            justify-content: space-between;
88            padding: 0 2rem;
89            border-bottom: 1px solid #eee;
90            z-index: 1100;
91        }
92
93        .header-logo {
94            height: 50px;
95            cursor: pointer;
96            transition: var(--transition);
97        }
98
99        .header-right {
100            display: flex;
101            align-items: center;
102            gap: 1.5rem;
103        }
104
105        #menu-toggle {
106            display: none;
107            background: none;
108            border: none;
109            color: var(--blog-teal);
110            cursor: pointer;
111            padding: 10px;
112            z-index: 1200;
113        }
114
115        .back-btn {
116            display: flex;
117            align-items: center;
118            gap: 8px;
119            text-decoration: none;
120            color: var(--dark);
121            font-weight: 600;
122            transition: var(--transition);
123        }
124
125        .back-btn:hover {
126            color: var(--blog-teal);
127        }
128
129        /* Layout Wrapper */
130        .blog-wrapper {
131            display: flex;
132            flex: 1;
133            overflow: hidden;
134            /* Handle scrolling in children */
135        }
136
137        /* Sidebar */
138        .blog-sidebar {
139            width: var(--sidebar-width);
140            background: var(--blog-bg);
141            border-right: 1px solid #eee;
142            display: flex;
143            flex-direction: column;
144            height: 100%;
145            transition: transform 0.3s ease;
146        }
147
148        .sidebar-filter {
149            padding: 1.5rem;
150            border-bottom: 1px solid #eee;
151        }
152
153        .filter-input {
154            width: 100%;
155            padding: 0.8rem 1rem;
156            border: 1px solid #ddd;
157            border-radius: 12px;
158            font-family: inherit;
159            font-size: 0.9rem;
160            outline: none;
161            transition: border-color 0.3s;
162        }
163
164        .filter-input:focus {
165            border-color: var(--blog-teal);
166        }
167
168        .posts-list {
169            flex: 1;
170            overflow-y: auto;
171            padding: 1rem;
172            display: flex;
173            flex-direction: column;
174            gap: 1rem;
175        }
176
177        .post-card {
178            background: white;
179            padding: 1.5rem;
180            border-radius: 15px;
181            border: 1px solid #eee;
182            cursor: pointer;
183            transition: all 0.3s;
184            display: flex;
185            flex-direction: column;
186            gap: 0.8rem;
187        }
188
189        .post-card:hover {
190            border-color: var(--blog-teal);
191            transform: translateY(-2px);
192            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
193        }
194
195        .post-card.active {
196            border-color: var(--blog-teal);
197            background: #f0f9fa;
198        }
199
200        .post-card-category {
201            font-size: 0.75rem;
202            text-transform: uppercase;
203            letter-spacing: 1px;
204            color: var(--blog-teal);
205            font-weight: 700;
206        }
207
208        .post-card-title {
209            font-size: 1.1rem;
210            font-weight: 700;
211            line-height: 1.4;
212            color: var(--dark);
213        }
214
215        .post-card-date {
216            font-size: 0.85rem;
217            color: #888;
218        }
219
220        /* Content Area */
221        .blog-content {
222            flex: 1;
223            overflow-y: auto;
224            background: var(--white);
225            padding: 4rem 2rem;
226        }
227
228        .content-inner {
229            max-width: 800px;
230            margin: 0 auto;
231        }
232
233        .content-hero-image {
234            width: 100%;
235            aspect-ratio: 16 / 9;
236            border-radius: 20px;
237            background-size: cover;
238            background-position: center;
239            margin-bottom: 3rem;
240            display: none;
241        }
242
243        .content-title {
244            font-size: 2.8rem;
245            line-height: 1.2;
246            color: var(--dark);
247            margin-bottom: 1.5rem;
248            font-weight: 700;
249        }
250
251        .content-meta {
252            color: #666;
253            margin-bottom: 3rem;
254            font-size: 0.95rem;
255        }
256
257        .content-body {
258            font-size: 1.15rem;
259            line-height: 1.8;
260            color: #333;
261        }
262
263        .content-body img {
264            max-width: 100%;
265            border-radius: 12px;
266            margin: 2rem 0;
267        }
268
269        .content-placeholder {
270            display: flex;
271            flex-direction: column;
272            align-items: center;
273            justify-content: center;
274            height: 100%;
275            color: #ccc;
276            text-align: center;
277        }
278
279        .content-placeholder i {
280            font-size: 4rem;
281            margin-bottom: 1rem;
282        }
283
284        @media (max-width: 992px) {
285            #menu-toggle {
286                display: block;
287            }
288
289            .header-right {
290                gap: 0.5rem;
291            }
292
293            .blog-sidebar {
294                position: fixed;
295                top: 0;
296                right: 0;
297                width: 100vw;
298                height: 100vh;
299                z-index: 1000;
300                transform: translateX(100%);
301                background: white;
302                padding-top: var(--header-height);
303            }
304
305            .blog-sidebar.active {
306                transform: translateX(0);
307            }
308
309            .blog-content {
310                width: 100%;
311                height: calc(100vh - var(--header-height));
312                padding: 2rem 1rem;
313            }
314
315            .content-title {
316                font-size: 2rem;
317            }
318        }
319    </style>
320  

320<script type="module" crossorigin src="/assets/blog-b61UW50k.js"></script>

320
321  <link rel="modulepreload" crossorigin href="/assets/firebase-BmbSka2m.js">
322  <link rel="modulepreload" crossorigin href="/assets/main-CLju4K6_.js">
323  <link rel="stylesheet" crossorigin href="/assets/firebase-BhM-JAE9.css">
324</head>
325
326<body>
327    <header class="blog-header">
328        <a href="https://lechatbot.com" class="back-btn">
329            <i data-lucide="arrow-left"></i>
330            Geri
331        </a>
332        <div class="header-right">
333            <a href="/blog.html">
334                <img src="/logo.png" alt="Le Chatbot Logo" class="header-logo">
335            </a>
336            <button id="menu-toggle" aria-label="Menüyü Aç">
337                <i data-lucide="menu"></i>
338            </button>
339        </div>
340    </header>
341
342    <div class="blog-wrapper">
343        <aside class="blog-sidebar">
344            <div class="sidebar-filter">
345                <input type="text" id="filter-input" class="filter-input" placeholder="Yazılarda ara...">
346            </div>
347            <div id="posts-list" class="posts-list">
348                <!-- Posts injected here -->
349            </div>
350        </aside>
351
352        <main id="blog-content" class="blog-content">
353            <div id="content-placeholder" class="content-placeholder">
354                <i data-lucide="book-open"></i>
355                <p>Okumak için bir yazı seçin</p>
356            </div>
357            <div id="content-viewer" class="content-inner" style="display: none;">
358                <div id="content-image" class="content-hero-image"></div>
359                <h1 id="content-title" class="content-title"></h1>
360                <div id="content-meta" class="content-meta"></div>
361                <div id="content-body" class="content-body"></div>
362            </div>
363        </main>
364    </div>
365
366</body>
367
368</html>