feat: create ScheduleStartPage and schedule feature structure

apps/react/src/app/features/schedule/components/index.ts

@@ -0,0 +1 @@
+export { ScheduleFilter } from './schedule-filter'

apps/react/src/app/features/schedule/components/schedule-filter.scss

@@ -0,0 +1,3 @@
+.schedule-filter {
+  width: 100%;
+}

apps/react/src/app/features/schedule/components/schedule-filter.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import './schedule-filter.scss'
+
+export const ScheduleFilter: React.FC = () => {
+  return (
+    <div className="schedule-filter" data-testid="schedule-filter">
+      {/* Schedule filter will be implemented in next task */}
+    </div>
+  )
+}

apps/react/src/app/features/schedule/index.ts

@@ -0,0 +1,2 @@
+export * from './pages'
+export * from './components'

apps/react/src/app/features/schedule/pages/index.ts

@@ -0,0 +1 @@
+export { ScheduleStartPage } from './schedule-start-page'

apps/react/src/app/features/schedule/pages/schedule-start-page.scss

@@ -0,0 +1,60 @@
+.schedule-start-page {
+  width: 100%;
+}
+
+.schedule-start-page__content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.schedule-start-page__tiles {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 16px;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.schedule-start-page__tile {
+  padding: 20px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  }
+
+  h3 {
+    margin: 0 0 8px 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+  }
+
+  p {
+    margin: 0;
+    font-size: 14px;
+    color: #666;
+    line-height: 1.5;
+  }
+}
+
+.schedule-start-page__popular {
+  padding: 24px;
+
+  h2 {
+    margin: 0 0 16px 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: #333;
+  }
+}
+
+.schedule-start-page__popular-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+}

apps/react/src/app/features/schedule/pages/schedule-start-page.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { PageLayout } from '@app/components/page-layout'
+import { PageTabs } from '@app/components/page-tabs'
+import { Card } from '@app/components/card'
+import { useTranslation } from 'react-i18next'
+import { ScheduleFilter } from '../components/schedule-filter'
+import './schedule-start-page.scss'
+
+export const ScheduleStartPage: React.FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="schedule-start-page" data-testid="schedule-start-page">
+      <PageTabs />
+
+      <PageLayout
+        contentLeft={<ScheduleFilter />}
+      >
+        <div className="schedule-start-page__content">
+          {/* Info tiles section */}
+          <div className="schedule-start-page__tiles">
+            <Card className="schedule-start-page__tile" data-testid="tile-browse-schedule">
+              <h3>{t('SCHEDULE.BROWSE_SCHEDULE')}</h3>
+              <p>{t('SCHEDULE.BROWSE_SCHEDULE_DESC')}</p>
+            </Card>
+            <Card className="schedule-start-page__tile" data-testid="tile-weekly-view">
+              <h3>{t('SCHEDULE.WEEKLY_VIEW')}</h3>
+              <p>{t('SCHEDULE.WEEKLY_VIEW_DESC')}</p>
+            </Card>
+            <Card className="schedule-start-page__tile" data-testid="tile-route-schedule">
+              <h3>{t('SCHEDULE.ROUTE_SCHEDULE')}</h3>
+              <p>{t('SCHEDULE.ROUTE_SCHEDULE_DESC')}</p>
+            </Card>
+            <Card className="schedule-start-page__tile" data-testid="tile-download-schedule">
+              <h3>{t('SCHEDULE.DOWNLOAD_SCHEDULE')}</h3>
+              <p>{t('SCHEDULE.DOWNLOAD_SCHEDULE_DESC')}</p>
+            </Card>
+          </div>
+
+          {/* Popular routes section */}
+          <Card className="schedule-start-page__popular" data-testid="popular-routes">
+            <h2>{t('SCHEDULE.POPULAR_ROUTES')}</h2>
+            <div className="schedule-start-page__popular-list">
+              {/* Popular routes will be populated here later */}
+            </div>
+          </Card>
+        </div>
+      </PageLayout>
+    </div>
+  )
+}