update onboarding screen

composeApp/src/androidMain/composeResources/drawable/coop.xml

@@ -0,0 +1,32 @@
+<!--
+  ~ Copyright (C) 2026 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="750dp"
+    android:height="750dp"
+    android:viewportWidth="750"
+    android:viewportHeight="750">
+  <path
+      android:pathData="M353.02,681C488.9,681 599.05,570.85 599.05,434.98C599.05,422.63 589.03,412.61 576.68,412.61H129.37C117.01,412.61 107,422.63 107,434.98C107,570.85 217.15,681 353.02,681Z"
+      android:fillColor="#000000"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M461.72,151.67L317.71,156.11C317.71,156.11 307.55,142.16 308.32,132.29C309.29,119.83 317.72,109.73 328.88,105.93C328.22,103.04 327.53,100.13 327.77,97.03C329.07,80.3 343.74,67.8 360.51,69.09C370.4,69.85 378.36,75.51 383.33,83.23C389.44,76.36 398.21,72.01 408.1,72.77C423.68,73.97 435.15,86.83 435.69,102.04C437.83,101.74 439.89,101.08 442.14,101.26C458.92,102.55 471.44,117.15 470.14,133.88C469.51,142.02 461.72,151.67 461.72,151.67Z"
+      android:fillColor="#000000"/>
+  <path
+      android:pathData="M150.95,389.09C150.95,253.21 261.1,143.06 396.98,143.06C532.84,143.06 643,253.21 643,389.09C643,401.44 632.98,411.45 620.63,411.45H173.32C160.96,411.45 150.95,401.44 150.95,389.09ZM505.67,259.28C504.32,258.9 502.97,258.71 501.6,258.71C500.23,258.71 498.88,258.9 497.54,259.28C496.19,259.66 494.89,260.23 493.62,260.98C492.36,261.73 491.16,262.65 490.02,263.74C488.88,264.83 487.83,266.07 486.86,267.45C485.89,268.84 485.03,270.35 484.27,271.98C483.51,273.61 482.87,275.33 482.34,277.14C481.82,278.95 481.43,280.82 481.16,282.74C480.89,284.66 480.76,286.6 480.76,288.57C480.76,290.53 480.89,292.47 481.16,294.39C481.43,296.31 481.82,298.17 482.34,299.99C482.87,301.8 483.51,303.52 484.27,305.15C485.03,306.78 485.89,308.29 486.86,309.67C487.83,311.06 488.88,312.3 490.02,313.39C491.16,314.48 492.36,315.4 493.62,316.14C494.89,316.89 496.19,317.46 497.54,317.85C498.88,318.23 500.23,318.42 501.6,318.42C502.97,318.42 504.32,318.23 505.67,317.85C507.01,317.46 508.31,316.89 509.57,316.14C510.84,315.4 512.05,314.48 513.18,313.39C514.32,312.3 515.38,311.06 516.34,309.67C517.31,308.29 518.17,306.78 518.93,305.15C519.7,303.52 520.33,301.8 520.86,299.99C521.38,298.17 521.78,296.31 522.04,294.39C522.31,292.47 522.45,290.53 522.45,288.57C522.45,286.6 522.31,284.66 522.04,282.74C521.78,280.82 521.38,278.95 520.86,277.14C520.33,275.33 519.7,273.61 518.93,271.98C518.17,270.35 517.31,268.84 516.34,267.45C515.38,266.07 514.32,264.83 513.18,263.74C512.05,262.65 510.84,261.73 509.57,260.98C508.31,260.23 507.01,259.66 505.67,259.28Z"
+      android:fillColor="#000000"
+      android:fillType="evenOdd"/>
+</vector>

composeApp/src/androidMain/composeResources/drawable/ic_scanner.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+    <path
+        android:fillColor="#000000"
+        android:pathData="M80,280L80,80L280,80L280,160L160,160L160,280L80,280ZM80,880L80,680L160,680L160,800L280,800L280,880L80,880ZM680,880L680,800L800,800L800,680L880,680L880,880L680,880ZM800,280L800,160L680,160L680,80L880,80L880,280L800,280ZM700,700L760,700L760,760L700,760L700,700ZM700,580L760,580L760,640L700,640L700,580ZM640,640L700,640L700,700L640,700L640,640ZM580,700L640,700L640,760L580,760L580,700ZM520,640L580,640L580,700L520,700L520,640ZM640,520L700,520L700,580L640,580L640,520ZM580,580L640,580L640,640L580,640L580,580ZM520,520L580,520L580,580L520,580L520,520ZM760,200L760,440L520,440L520,200L760,200ZM440,520L440,760L200,760L200,520L440,520ZM440,200L440,440L200,440L200,200L440,200ZM380,700L380,580L260,580L260,700L380,700ZM380,380L380,260L260,260L260,380L380,380ZM700,380L700,260L580,260L580,380L700,380Z" />
+</vector>

composeApp/src/androidMain/kotlin/su/reya/coop/screens/OnboardingScreen.kt

@@ -1,29 +1,180 @@
 package su.reya.coop.screens
 
+import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.FilledTonalButton
+import androidx.compose.material3.FilledTonalIconButton
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButtonDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.drawscope.rotate
+import androidx.compose.ui.graphics.drawscope.translate
+import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.unit.dp
+import coop.composeapp.generated.resources.Res
+import coop.composeapp.generated.resources.coop
+import coop.composeapp.generated.resources.ic_scanner
+import org.jetbrains.compose.resources.painterResource
+import su.reya.coop.LocalSnackbarHostState
 
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
 @Composable
 fun OnboardingScreen(onOpenImport: () -> Unit, onOpenNew: () -> Unit) {
-    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+    val snackbarHostState = LocalSnackbarHostState.current
-        Column(horizontalAlignment = Alignment.CenterHorizontally) {
+    val logoPainter = painterResource(Res.drawable.coop)
-            Text("Onboarding Screen")
+
-            Spacer(modifier = Modifier.height(16.dp))
+    Scaffold(
-            Button(onClick = onOpenImport) {
+        containerColor = MaterialTheme.colorScheme.surfaceContainer,
-                Text("Import")
+        snackbarHost = { SnackbarHost(snackbarHostState) },
+        content = { innerPadding ->
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(bottom = innerPadding.calculateBottomPadding())
+            ) {
+                LogoRepeatingBackground(
+                    painter = logoPainter,
+                    logosPerRow = 6,
+                    rotationDegrees = -25f,
+                    horizontalOffset = 0.5f
+                )
+                Column(
+                    modifier = Modifier.fillMaxSize(),
+                ) {
+                    Box(
+                        modifier = Modifier
+                            .weight(2f)
+                            .fillMaxWidth(),
+                        contentAlignment = Alignment.Center,
+                    ) {
+                        // TODO: Add headline
+                    }
+                    Box(
+                        modifier = Modifier
+                            .weight(1f)
+                            .fillMaxWidth()
+                            .padding(bottom = innerPadding.calculateBottomPadding()),
+                        contentAlignment = Alignment.BottomEnd,
+                    ) {
+                        Column(
+                            modifier = Modifier.padding(horizontal = innerPadding.calculateBottomPadding()),
+                        ) {
+                            Button(
+                                onClick = onOpenNew,
+                                modifier = Modifier
+                                    .fillMaxWidth()
+                                    .size(ButtonDefaults.LargeContainerHeight),
+                            ) {
+                                Text(
+                                    text = "Start messaging",
+                                    style = MaterialTheme.typography.titleLargeEmphasized,
+                                )
+                            }
+                            Spacer(modifier = Modifier.size(16.dp))
+                            Row(
+                                modifier = Modifier.fillMaxWidth(),
+                            ) {
+                                FilledTonalButton(
+                                    onClick = onOpenImport,
+                                    modifier = Modifier
+                                        .weight(2f)
+                                        .height(ButtonDefaults.MediumContainerHeight),
+                                ) {
+                                    Text(
+                                        text = "Import identity",
+                                        style = MaterialTheme.typography.titleMediumEmphasized,
+                                    )
+                                }
+                                Spacer(modifier = Modifier.width(8.dp))
+                                FilledTonalIconButton(
+                                    onClick = onOpenImport,
+                                    modifier = Modifier
+                                        .weight(1f)
+                                        .height(ButtonDefaults.MediumContainerHeight),
+                                    colors = IconButtonDefaults.filledTonalIconButtonColors(
+                                        containerColor = MaterialTheme.colorScheme.tertiaryContainer,
+                                        contentColor = MaterialTheme.colorScheme.onTertiaryContainer
+                                    )
+                                ) {
+                                    Icon(
+                                        painter = painterResource(Res.drawable.ic_scanner),
+                                        contentDescription = "Scan QR"
+                                    )
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    )
+}
+
+@Composable
+fun LogoRepeatingBackground(
+    painter: Painter,
+    logosPerRow: Int,
+    rotationDegrees: Float = 0f,
+    horizontalOffset: Float = 0.5f
+) {
+    val tintColor = MaterialTheme.colorScheme.primary
+
+    Canvas(modifier = Modifier.fillMaxSize()) {
+        val canvasWidth = size.width
+        val canvasHeight = size.height
+        val logoSize = canvasWidth / logosPerRow
+
+        val offsetX = logoSize * horizontalOffset
+        val extraPadding = 2
+
+        val cols = logosPerRow + (extraPadding * 2)
+        val rows = (canvasHeight / logoSize).toInt() + 1
+
+        for (row in 0 until rows) {
+            for (col in -extraPadding until cols) {
+                val px = (col * logoSize) - offsetX
+                val py = row * logoSize
+
+                rotate(
+                    degrees = rotationDegrees,
+                    pivot = Offset(
+                        px + logoSize / 2,
+                        py + logoSize / 2
+                    )
+                ) {
+                    translate(left = px, top = py) {
+                        with(painter) {
+                            draw(
+                                size = Size(logoSize, logoSize),
+                                alpha = 0.1f,
+                                colorFilter = ColorFilter.tint(
+                                    tintColor
+                                )
+                            )
+                        }
+                    }
                 }
-            Spacer(modifier = Modifier.height(8.dp))
-            Button(onClick = onOpenNew) {
-                Text("New")
             }
         }
     }