feature: localization's first implmentation

frontend/src/app/[locale]/(public)/page.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { Link } from '@/i18n/navigation';
+import { useAuth } from '@/lib/hooks/useAuth';
+import { Button } from '@/components/ui/shared/Button';
+import { TopBarControls } from '@/components/ui/shared/TopBarControls';
+import { Building2, Beaker, Calendar, Shield, Clock, Users } from 'lucide-react';
+
+export default function HomePage() {
+  const t = useTranslations('landing');
+  const tAuth = useTranslations('auth');
+  const tCommon = useTranslations('common');
+  const { user } = useAuth();
+
+  return (
+    <div className="min-h-screen app-web-bg text-text-primary">
+      <header className="border-b border-border/70 bg-background-secondary/65 backdrop-blur-sm fixed top-0 w-full z-10">
+        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
+          <div className="text-2xl font-semibold text-text-primary">
+            {tCommon('appName')}
+          </div>
+
+          <div className="flex items-center gap-3">
+            <TopBarControls />
+            {user ? (
+              <Link href="/today">
+                <Button variant="primary">{tAuth('dashboard')}</Button>
+              </Link>
+            ) : (
+              <>
+                <Link href="/login">
+                  <Button variant="outline">{tAuth('login')}</Button>
+                </Link>
+                <Link href="/register">
+                  <Button variant="primary">{tAuth('startTrial')}</Button>
+                </Link>
+              </>
+            )}
+          </div>
+        </div>
+      </header>
+
+      <main className="container mx-auto px-4 pt-32 pb-20">
+        <div className="max-w-4xl mx-auto text-center">
+          <h1 className="text-5xl md:text-6xl font-semibold mb-6 leading-tight">
+            {t('heroTitle')}
+            <span className="text-primary"> {t('heroHighlight')}</span>
+          </h1>
+
+          <p className="text-lg text-text-secondary mb-8 max-w-2xl mx-auto">
+            {t('heroSubtitle')}
+          </p>
+
+          {!user && (
+            <Link href="/register">
+              <Button size="lg" variant="primary" className="px-8">
+                {tAuth('startFreeTrial')}
+              </Button>
+            </Link>
+          )}
+        </div>
+
+        <div className="mt-20 grid md:grid-cols-3 gap-6">
+          <FeatureCard
+            icon={<Building2 className="h-6 w-6 icon-flat" />}
+            title={t('featureClinicsTitle')}
+            description={t('featureClinicsDescription')}
+          />
+          <FeatureCard
+            icon={<Beaker className="h-6 w-6 icon-flat" />}
+            title={t('featureLabsTitle')}
+            description={t('featureLabsDescription')}
+          />
+          <FeatureCard
+            icon={<Users className="h-6 w-6 icon-flat" />}
+            title={t('featureTeamTitle')}
+            description={t('featureTeamDescription')}
+          />
+          <FeatureCard
+            icon={<Calendar className="h-6 w-6 icon-flat" />}
+            title={t('featureTrialTitle')}
+            description={t('featureTrialDescription')}
+          />
+          <FeatureCard
+            icon={<Clock className="h-6 w-6 icon-flat" />}
+            title={t('featureRealtimeTitle')}
+            description={t('featureRealtimeDescription')}
+          />
+          <FeatureCard
+            icon={<Shield className="h-6 w-6 icon-flat" />}
+            title={t('featureSecurityTitle')}
+            description={t('featureSecurityDescription')}
+          />
+        </div>
+      </main>
+
+      <footer className="border-t border-border/70 bg-background-secondary/80">
+        <div className="container mx-auto px-4 py-8 flex flex-col md:flex-row justify-between items-center text-sm text-text-secondary">
+          <div>{t('footerCopyright')}</div>
+
+          <div className="flex gap-6 mt-4 md:mt-0">
+            <Link href="/terms" className="hover:text-primary transition-colors">
+              {t('termsAndConditions')}
+            </Link>
+            <Link href="/privacy" className="hover:text-primary transition-colors">
+              {tAuth('privacyPolicy')}
+            </Link>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+function FeatureCard({
+  icon,
+  title,
+  description,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+}) {
+  return (
+    <div className="surface-card p-5 transition-all hover:border-primary/70 hover:shadow-[0_0_20px_rgba(0,194,255,0.12)]">
+      <div className="text-primary mb-4">{icon}</div>
+      <h3 className="text-base font-medium text-text-primary mb-2">{title}</h3>
+      <p className="text-sm text-text-secondary">{description}</p>
+    </div>
+  );
+}