From dfd267f852a9d4d87405fc7b108116178944b5c9 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gnerim.ru>
Date: Sun, 5 Apr 2026 21:16:40 +0300
Subject: [PATCH] feat: create ScheduleStartPage and schedule feature structure

---
 .../app/features/schedule/components/index.ts |  1 +
 .../schedule/components/schedule-filter.scss  |  3 +
 .../schedule/components/schedule-filter.tsx   | 10 ++++
 apps/react/src/app/features/schedule/index.ts |  2 +
 .../src/app/features/schedule/pages/index.ts  |  1 +
 .../schedule/pages/schedule-start-page.scss   | 60 +++++++++++++++++++
 .../schedule/pages/schedule-start-page.tsx    | 51 ++++++++++++++++
 7 files changed, 128 insertions(+)
 create mode 100644 apps/react/src/app/features/schedule/components/index.ts
 create mode 100644 apps/react/src/app/features/schedule/components/schedule-filter.scss
 create mode 100644 apps/react/src/app/features/schedule/components/schedule-filter.tsx
 create mode 100644 apps/react/src/app/features/schedule/index.ts
 create mode 100644 apps/react/src/app/features/schedule/pages/index.ts
 create mode 100644 apps/react/src/app/features/schedule/pages/schedule-start-page.scss
 create mode 100644 apps/react/src/app/features/schedule/pages/schedule-start-page.tsx

diff --git a/apps/react/src/app/features/schedule/components/index.ts b/apps/react/src/app/features/schedule/components/index.ts
new file mode 100644
index 000000000..6a52e0b6f
--- /dev/null
+++ b/apps/react/src/app/features/schedule/components/index.ts
@@ -0,0 +1 @@
+export { ScheduleFilter } from './schedule-filter'
diff --git a/apps/react/src/app/features/schedule/components/schedule-filter.scss b/apps/react/src/app/features/schedule/components/schedule-filter.scss
new file mode 100644
index 000000000..2bec4bf36
--- /dev/null
+++ b/apps/react/src/app/features/schedule/components/schedule-filter.scss
@@ -0,0 +1,3 @@
+.schedule-filter {
+  width: 100%;
+}
diff --git a/apps/react/src/app/features/schedule/components/schedule-filter.tsx b/apps/react/src/app/features/schedule/components/schedule-filter.tsx
new file mode 100644
index 000000000..ce952d935
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/apps/react/src/app/features/schedule/index.ts b/apps/react/src/app/features/schedule/index.ts
new file mode 100644
index 000000000..51c689e56
--- /dev/null
+++ b/apps/react/src/app/features/schedule/index.ts
@@ -0,0 +1,2 @@
+export * from './pages'
+export * from './components'
diff --git a/apps/react/src/app/features/schedule/pages/index.ts b/apps/react/src/app/features/schedule/pages/index.ts
new file mode 100644
index 000000000..dbb7659d0
--- /dev/null
+++ b/apps/react/src/app/features/schedule/pages/index.ts
@@ -0,0 +1 @@
+export { ScheduleStartPage } from './schedule-start-page'
diff --git a/apps/react/src/app/features/schedule/pages/schedule-start-page.scss b/apps/react/src/app/features/schedule/pages/schedule-start-page.scss
new file mode 100644
index 000000000..62088d0ea
--- /dev/null
+++ b/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;
+}
diff --git a/apps/react/src/app/features/schedule/pages/schedule-start-page.tsx b/apps/react/src/app/features/schedule/pages/schedule-start-page.tsx
new file mode 100644
index 000000000..e351dc975
--- /dev/null
+++ b/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>
+  )
+}