create about page ios ui

app-ios/Modules/Package.swift

@@ -24,7 +24,10 @@ var package = Package(
         .target(
             name: "About",
             dependencies: [
+                "Assets",
                 "shared",
+                "Model",
+                "Theme",
             ]
         ),
         .testTarget(

app-ios/Modules/Sources/About/AboutView.swift

@@ -1,12 +1,125 @@
+import Assets
 import SwiftUI
+import Theme
 
 public struct AboutView: View {
     public init() {}
     public var body: some View {
-        Text("About View")
+        NavigationStack {
+            ScrollView {
+                VStack(spacing: 0) {
+                    Assets.Images.aboutKeyVisual.swiftUIImage
+                    Spacer().frame(height: 16)
+                    Text("DroidKaigiはAndroid技術情報の共有とコミュニケーションを目的に開催されるエンジニアが主役のAndroidカンファレンスです。")
+                        .font(Font.system(size: 16))
+                    Spacer().frame(height: 12)
+                    VStack(alignment: .leading, spacing: 12) {
+                        HStack(spacing: 0) {
+                            Assets.Icons.info.swiftUIImage
+                            Spacer().frame(width: 8)
+                            Text("日時")
+                                .font(Font.system(size: 14, weight: .semibold))
+                            Spacer().frame(width: 12)
+                            Text("2023.09.14(木) 〜 16(土) 3日間")
+                                .font(Font.system(size: 14, weight: .semibold))
+                        }
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                        .foregroundStyle(
+                            AssetColors.Surface.onSurfaceVariant.swiftUIColor
+                        )
+                        HStack(spacing: 0) {
+                            Assets.Icons.info.swiftUIImage
+                            Spacer().frame(width: 8)
+                            Text("場所")
+                                .font(Font.system(size: 14, weight: .semibold))
+                            Spacer().frame(width: 12)
+                            Text("ベルサール渋谷ガーデン")
+                                .font(Font.system(size: 14, weight: .semibold))
+                            Spacer().frame(width: 8)
+                            Button {
+                                // TODO: Open map
+                            } label: {
+                                Text("地図を見る")
+                                    .font(Font.system(size: 14, weight: .semibold))
+                                    .underline()
+                                    .foregroundStyle(AssetColors.Primary.primary.swiftUIColor)
+                            }
+                        }
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                        .foregroundStyle(
+                            AssetColors.Surface.onSurfaceVariant.swiftUIColor
+                        )
+                    }
+                    .padding(.vertical, 20)
+                    .padding(.horizontal, 16)
+                    // TODO: Use SurfaceContainerLow
+                    .background(AssetColors.Surface.surfaceContainer.swiftUIColor)
+                    .clipShape(RoundedRectangle(cornerRadius: 12))
+                    Spacer().frame(height: 32)
+                    SectionTitle(title: "Credits")
+                    ListTile(
+                        icon: Assets.Icons.sentimentVerySatisfied.swiftUIImage,
+                        title: "スタッフ"
+                    )
+                    Divider()
+                    ListTile(
+                        icon: Assets.Icons.diversity.swiftUIImage,
+                        title: "コントリビューター"
+                    )
+                    Divider()
+                    ListTile(
+                        icon: Assets.Icons.apartment.swiftUIImage,
+                        title: "スポンサー"
+                    )
+                    Divider()
+                    SectionTitle(title: "Others")
+                    ListTile(
+                        icon: Assets.Icons.gavel.swiftUIImage,
+                        title: "行動規範"
+                    )
+                    Divider()
+                    ListTile(
+                        icon: Assets.Icons.fileCopy.swiftUIImage,
+                        title: "ライセンス"
+                    )
+                    Divider()
+                    ListTile(
+                        icon: Assets.Icons.privacyTip.swiftUIImage,
+                        title: "プライバシーポリシー"
+                    )
+                    Divider()
+                    HStack(spacing: 12) {
+                        Button {
+                            // TODO: open youtube
+                        } label: {
+                            Assets.Icons.youtube.swiftUIImage
+                        }
+                        Button {
+                            // TODO: open Twitter
+                        } label: {
+                            Assets.Icons.twitter.swiftUIImage
+                        }
+                        Button {
+                            // TODO: open medium
+                        } label: {
+                            Assets.Icons.medium.swiftUIImage
+                        }
+                    }
+                    .padding(.vertical, 24)
+
+                    Text("アプリバージョン")
+                        .font(Font.system(size: 14, weight: .medium))
+                    Spacer().frame(height: 8)
+                    Text("1.2")
+                        .font(Font.system(size: 14, weight: .medium))
+                }
+                .padding(.horizontal, 16)
+            }
+            .navigationTitle("About")
+        }
     }
 }
 
-// #Preview {
-//     AboutView()
-// }
+ #Preview {
+     AboutView()
+ }

app-ios/Modules/Sources/About/ListTile.swift

@@ -0,0 +1,28 @@
+import SwiftUI
+import Theme
+
+struct ListTile: View {
+    let icon: Image
+    let title: String
+
+    var body: some View {
+        HStack(spacing: 12) {
+            icon
+                .renderingMode(.template)
+                .foregroundStyle(AssetColors.Surface.onSurfaceVariant.swiftUIColor)
+            Text(title)
+                .font(Font.system(size: 14, weight: .medium))
+                .foregroundStyle(AssetColors.Surface.onSurface.swiftUIColor)
+        }
+        .padding(.horizontal, 12)
+        .padding(.vertical, 24)
+        .frame(maxWidth: .infinity, alignment: .leading)
+    }
+}
+
+#Preview {
+    ListTile(
+        icon: Image(systemName: "calendar"),
+        title: "カレンダー"
+    )
+}

app-ios/Modules/Sources/About/SectionTitle.swift

@@ -0,0 +1,16 @@
+import SwiftUI
+
+struct SectionTitle: View {
+    let title: String
+
+    var body: some View {
+        Text(title)
+            .font(Font.system(size: 16, weight: .medium))
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .padding(.top, 16)
+    }
+}
+
+#Preview {
+    SectionTitle(title: "SectionTitle")
+}

app-ios/Modules/Sources/Assets/Resources/Icons.xcassets/apartment.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "ic_apartment.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

app-ios/Modules/Sources/Assets/Resources/Icons.xcassets/diversity.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "ic_diversity_1.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

app-ios/Modules/Sources/Assets/Resources/Icons.xcassets/file_copy.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "ic_file_copy.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

app-ios/Modules/Sources/Assets/Resources/Icons.xcassets/gavel.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "ic_gavel.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

app-ios/Modules/Sources/Assets/Resources/Icons.xcassets/medium.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "medium.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

app-ios/Modules/Sources/Assets/Resources/Icons.xcassets/privacy_tip.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "ic_privacy_tip.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

app-ios/Modules/Sources/Assets/Resources/Icons.xcassets/sentiment_very_satisfied.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "ic_sentiment_very_satisfied.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

app-ios/Modules/Sources/Assets/Resources/Icons.xcassets/twitter.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "twitter.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

app-ios/Modules/Sources/Assets/Resources/Icons.xcassets/youtube.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "youtube.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

app-ios/Modules/Sources/Assets/Resources/Images.xcassets/AboutKeyVisual.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "img_AboutKeyVisual.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}