style: Seperate and Reformat inline style into css seperate files

src/pages/[lang]/index.astro

@@ -0,0 +1,37 @@
+---
+import Base from '../../layouts/Base.astro'
+import Header from '../../components/Header.astro'
+import Hero from '../../components/Hero.astro'
+import WhyTalkPro from '../../components/WhyTalkPro.astro'
+import CoreSystem from '../../components/CoreSystem.astro'
+import Experience from '../../components/Experience.astro'
+import UseCases from '../../components/UseCases.astro'
+import Trust from '../../components/Trust.astro'
+import AppPreview from '../../components/AppPreview.astro'
+import DownloadCTA from '../../components/DownloadCTA.astro'
+import Footer from '../../components/Footer.astro'
+import { defaultLang, getTranslations, isLang, languages } from '../../i18n/translations'
+
+export function getStaticPaths() {
+  return languages
+    .filter(lang => lang !== defaultLang)
+    .map(lang => ({ params: { lang } }))
+}
+
+const currentLang = Astro.params.lang
+const lang = isLang(currentLang) ? currentLang : defaultLang
+const t = getTranslations(lang)
+---
+
+<Base lang={lang} title={t.meta.title} description={t.meta.description}>
+  <Header lang={lang} t={t.header} />
+  <Hero t={t.hero} />
+  <WhyTalkPro t={t.why} />
+  <CoreSystem t={t.core} />
+  <Experience t={t.experience} />
+  <UseCases t={t.useCases} />
+  <Trust t={t.trust} />
+  <AppPreview t={t.preview} />
+  <DownloadCTA t={t.download} />
+  <Footer t={t.footer} />
+</Base>