Updated home screen

app/src/main/java/com/example/estiaseek/ui/HomeScreen.kt

@@ -1,90 +1,154 @@
 package com.example.estiaseek.ui
 
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.verticalScroll
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
+import androidx.compose.material3.OutlinedButton
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import com.example.estiaseek.R
-import com.example.estiaseek.ui.theme.EstiaSeekTheme
+import com.example.estiaseek.ui.theme.estiaSeekRed
 
 @Composable
 fun HomeScreen(
     onSearchButtonClicked: () -> Unit,
     onCreateApplicantButtonClicked: () -> Unit,
 ) {
-    EstiaSeekTheme { // Ensure the app's theme is applied
-        Surface(
-            modifier = Modifier.fillMaxSize(),
-            color = MaterialTheme.colorScheme.background // Consistent background
+
+    Box(
+        modifier = Modifier.fillMaxSize()
+    ) {
+        // Background image
+        Image(
+            painter = painterResource(id = R.drawable.background),
+            contentDescription = null,
+            contentScale = ContentScale.FillHeight,
+            modifier = Modifier
+                .fillMaxWidth()
+                .fillMaxHeight()
+        )
+
+        // This might look stupid but it ensures its always 3/8 red with a sudden change!
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(
+                    brush = Brush.verticalGradient(
+                        colors = listOf(
+                            Color.Transparent,
+                            Color.Transparent,
+                            Color.Transparent,
+                            Color.Transparent,
+                            Color.Transparent,
+
+                            estiaSeekRed,
+                            estiaSeekRed,
+                            estiaSeekRed
+                        )
+                    )
+                )
+        )
+
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(16.dp),
+            verticalArrangement = Arrangement.Top,
+            horizontalAlignment = Alignment.CenterHorizontally
         ) {
-            Box(
+            Image(
+                painter = painterResource(id = R.drawable.es),
+                contentDescription = null,
+                contentScale = ContentScale.FillHeight,
+                modifier = Modifier.height(80.dp).clip(RoundedCornerShape(16.dp))
+            )
+        }
+
+
+        // Box for welcome text and card, positioned from bottom
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(16.dp),
+            verticalArrangement = Arrangement.Bottom,
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            // Welcome text above the white box
+            Column(
                 modifier = Modifier
-                    .fillMaxSize()
-                    .verticalScroll(rememberScrollState())
-                    .safeDrawingPadding()
-                    .padding(horizontal = 40.dp)
+                    .padding(bottom = 24.dp)
+            ) {
+                Text(
+                    text = stringResource(R.string.welcome),
+                    style = MaterialTheme.typography.headlineLarge.copy(
+                        fontWeight = FontWeight.SemiBold
+                    ),
+                    color = Color.White
+                )
+            }
+
+            Card(
+                modifier = Modifier
+                    .fillMaxWidth(0.85f)
+                    .wrapContentHeight()
+                    .align(Alignment.CenterHorizontally)
+                    .padding(bottom = 32.dp), // Add padding at bottom
+                colors = CardDefaults.cardColors(containerColor = Color.White),
+                shape = RoundedCornerShape(16.dp)
             ) {
                 Column(
                     modifier = Modifier
-                        .fillMaxSize()
-                        .padding(10.dp),
-                    verticalArrangement = Arrangement.Center,
+                        .padding(24.dp),
+                    verticalArrangement = Arrangement.spacedBy(10.dp),
                     horizontalAlignment = Alignment.CenterHorizontally
                 ) {
-                    Spacer(modifier = Modifier.height(16.dp))
-                    // Heading
-                    Text(
-                        text = "Welcome to EstiaSeek",
-                        style = MaterialTheme.typography.headlineMedium.copy(
-                            fontWeight = FontWeight.Bold // Make the text bold
-                        ),
-                        modifier = Modifier.padding(bottom = 24.dp)
-                    )
-
-                    // Image
-                    Image(
-                        painter = painterResource(id = R.drawable.emp),
-                        contentDescription = "Example Image",
-                        modifier = Modifier
-                            .size(300.dp)
-                            .padding(bottom = 24.dp)
-                    )
-
-                    // First Button
+                    // Call to action
                     Button(
-                        onClick = {
-                            onSearchButtonClicked()
-                        },
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(horizontal = 32.dp)
+                        onClick = onSearchButtonClicked,
+                        modifier = Modifier.fillMaxWidth(),
+                        colors = ButtonDefaults.buttonColors(
+                            containerColor = estiaSeekRed
+                        )
                     ) {
-                        Text(text = "Search for Candidates")
+                        Text(
+                            text = stringResource(R.string.search_button),
+                            color = Color.White,
+                            fontSize = 14.sp
+                        )
                     }
 
-                    Spacer(modifier = Modifier.height(16.dp))
-
-                    // Second Button
-                    Button(
-                        onClick = {
-                            onCreateApplicantButtonClicked()
-                        },
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(horizontal = 32.dp)
+                    // Secondary call to action
+                    OutlinedButton(
+                        onClick = onCreateApplicantButtonClicked,
+                        modifier = Modifier.fillMaxWidth(),
+                        border = BorderStroke(2.dp, estiaSeekRed),
+                        colors = ButtonDefaults.outlinedButtonColors(
+                            contentColor = estiaSeekRed
+                        )
                     ) {
-                        Text(text = "Create Candidates")
+                        Text(
+                            text = stringResource(R.string.form_button),
+                            fontSize = 14.sp
+                        )
                     }
                 }
             }

app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@drawable/ic_launcher_background" />
-    <foreground android:drawable="@drawable/ic_launcher_foreground" />
-    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
+    <foreground android:drawable="@drawable/es_large" />
+    <monochrome android:drawable="@drawable/es_large" />
 </adaptive-icon>

app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@drawable/ic_launcher_background" />
-    <foreground android:drawable="@drawable/ic_launcher_foreground" />
-    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
+    <foreground android:drawable="@drawable/es_large" />
+    <monochrome android:drawable="@drawable/es_large" />
 </adaptive-icon>

app/src/main/res/values/colors.xml

@@ -7,4 +7,5 @@
     <color name="teal_700">#FF018786</color>
     <color name="black">#FF000000</color>
     <color name="white">#FFFFFFFF</color>
+    <color name="estiaSeekRed">#FFF11C33</color>
 </resources>

app/src/main/res/values/strings.xml

@@ -1,6 +1,11 @@
 <resources>
     <string name="app_name">EstiaSeek</string>
 
+    <!-- Home screen Strings -->
+    <string name="welcome">Welcome to EstiaSeek</string>
+    <string name="search_button">Search for Candidates</string>
+    <string name="form_button">Create Candidates</string>
+
     <!-- Create Applicants Strings -->
     <string name="name">Name</string>
     <string name="email">Email</string>