fix(style): Seperate CSS style to src\styles

src/components/UseCases.astro

@@ -1,36 +1,35 @@
 ---
-const rows = [
-  { title: 'Personal Conversations', desc: 'Message friends, family, and close contacts in a simple private chat experience.' },
-  { title: 'Communities',            desc: 'Join group conversations and stay active in shared interest spaces.' },
-  { title: 'Teams and Projects',     desc: 'Coordinate discussions, updates, and quick decisions in group chats.' },
-  { title: 'News and Updates',       desc: 'Follow channels for announcements, information, and community content.' },
-]
+import type { Translations } from '../i18n/translations'
+
+export interface Props {
+  t: Translations['useCases']
+}
+
+const { t } = Astro.props
 ---
 
-<section id="use-cases" class="bg-[#fef0eb] w-full flex items-start justify-center py-16 lg:py-[120px] px-4 lg:px-[130px]">
-  <div class="flex flex-col lg:flex-row lg:gap-[40px] lg:items-center gap-8 w-full max-w-[1280px] mx-auto">
-    <!-- Left: heading -->
-    <div class="flex flex-col gap-[24px] items-start overflow-clip shrink-0 w-full lg:w-[540px] lg:shrink-0">
-      <div class="bg-white border border-[#fbbfa3] flex items-center justify-center px-[24px] py-[12px] rounded-[9999px] shrink-0">
-        <span class="font-bold text-[#f08458] text-[14px] text-center tracking-[-0.04px] whitespace-nowrap leading-normal">USE CASES</span>
+<section id="use-cases" class="use-cases">
+  <div class="use-cases__inner">
+    <div class="use-cases__copy">
+      <div class="section-eyebrow">
+        <span class="section-eyebrow__text">{t.eyebrow}</span>
       </div>
-      <p class="font-bold text-[#1a1a1a] text-[32px] md:text-[40px] lg:text-[48px] tracking-[-1.16px] leading-[1.2] w-full">
-        Made for Personal, Social, and Community Communication
+      <p class="use-cases__title">
+        {t.title}
       </p>
-      <p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] w-full">
-        With separate spaces for every context, TalkPro keeps your personal, social, and professional communications distinct and organized.
+      <p class="use-cases__description">
+        {t.description}
       </p>
     </div>
 
-    <!-- Right: rows -->
-    <div class="flex flex-1 flex-col items-start min-w-0 overflow-clip rounded-[30px] gap-px">
-      {rows.map(row => (
-        <div class="bg-[#faede8] flex flex-col sm:flex-row sm:h-[120px] items-stretch overflow-clip w-full shrink-0">
-          <div class="bg-[#f08458] flex items-center px-[24px] sm:px-[36px] py-[16px] sm:py-[24px] shrink-0 w-full sm:w-[300px]">
-            <p class="flex-1 font-semibold text-[18px] sm:text-[20px] text-white tracking-[-0.6px] leading-normal min-w-0">{row.title}</p>
+    <div class="use-cases__rows">
+      {t.rows.map(row => (
+        <div class="use-case-row">
+          <div class="use-case-row__title-cell">
+            <p class="use-case-row__title">{row.title}</p>
           </div>
-          <div class="bg-white flex flex-1 items-center min-w-0 px-[24px] sm:px-[36px] py-[16px] sm:py-[24px]">
-            <p class="font-medium text-[#7a726d] text-[15px] leading-[1.5] flex-1 min-w-0">{row.desc}</p>
+          <div class="use-case-row__description-cell">
+            <p class="use-case-row__description">{row.desc}</p>
           </div>
         </div>
       ))}