Aevum Cars

A luxury car-finder with a hero banner, filter and sort controls, category tabs and a featured model.

AEVUM

Find Your Car

Sort by:Newest

ALLLUXSEDANSUVSPORTSEV

BMW i7

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin

// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CarFinderScreen(categories: List<String>, selectedTab: Int) {
    Column(Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background)) {
        Box(
            Modifier.fillMaxWidth().height(180.dp)
                .background(Brush.verticalGradient(
                    listOf(Color(0xFFBAE6FD), MaterialTheme.colorScheme.surfaceVariant))),
        ) {
            Row(Modifier.fillMaxWidth().padding(20.dp),
                horizontalArrangement = Arrangement.SpaceBetween) {
                Text("AEVUM", fontWeight = FontWeight.ExtraBold, letterSpacing = 2.sp)
                Icon(Icons.Filled.Menu, "Menu")
            }
            Text("Find Your Car", Modifier.align(Alignment.Center),
                color = Color.White, style = MaterialTheme.typography.headlineSmall,
                fontWeight = FontWeight.Bold)
        }
        Row(Modifier.fillMaxWidth().padding(16.dp),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically) {
            OutlinedButton(onClick = {}, shape = CircleShape) {
                Icon(Icons.Filled.Tune, null, Modifier.size(14.dp))
                Spacer(Modifier.width(4.dp)); Text("Filter")
            }
            Text("Sort by: Newest", style = MaterialTheme.typography.labelMedium)
        }
        ScrollableTabRow(selectedTabIndex = selectedTab, edgePadding = 16.dp) {
            categories.forEachIndexed { i, c ->
                Tab(selected = i == selectedTab, onClick = {},
                    text = { Text(c, style = MaterialTheme.typography.labelMedium) })
            }
        }
        Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            Text("BMW i7", style = MaterialTheme.typography.titleMedium,
                fontWeight = FontWeight.Bold)
        }
    }
}