Business Card codelab layout

I am on this part of the android dev course:https://developer.android.com/codelabs/basic-android-kotlin-compose-business-card?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fandroid-basics-compose-unit-1-pathway-3%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fbasic-android-kotlin-compose-business-card#1

We are suppose to build a business card with an Icon in the center, and use a combo of row and col to make it.

The below code is what I have so far, I can't figure out how to make ComposeNameTile bit center, and the ComposeEmailSocialPhone land on the bottom.

It renders like this:

and we are aiming for this:

I did find a bit of a cheat in that if I just make two Rows they would overlap each other, then make one row center vertically and the other row align bottom, I could get something similar to what the goal wants, but I think that would be a bad design right? since if the screen changes it would look all wrong?

I found a similar question to this but I am trying to understand how row and col play so I don't want to touch Constrained/Box stuff yet.

class MainActivity : ComponentActivity() {    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContent {            BusinessCardTheme {                // A surface container using the 'background' color from the theme                Surface(                    modifier = Modifier.fillMaxSize(),                    color = MaterialTheme.colorScheme.background,                ) {                    ComposeMainInfo()                }            }        }    }}@Composablefun ComposeMainInfo() {    Column(        modifier = Modifier            .fillMaxHeight()            .fillMaxWidth()            .background(Color(0xFFB69DF8)),        horizontalAlignment = Alignment.CenterHorizontally,    ) {        Column(            modifier = Modifier                .background(Color(0xFFEADDFF)),            horizontalAlignment = Alignment.CenterHorizontally,            verticalArrangement = Arrangement.Center,        ) {            ComposeNameTitle()        }        Spacer(Modifier.height(20.dp))        Column(            modifier = Modifier                .background(Color(0xFFD0BCFF)),            horizontalAlignment = Alignment.CenterHorizontally,            verticalArrangement = Arrangement.Bottom,        ) {            ComposeEmailSocialPhone()        }    }}@Composablefun ComposeEmailSocialPhone() {    ComposeMainInfoTexts(name = "+1 564565165474")    ComposeMainInfoTexts(name = "@facebook")    ComposeMainInfoTexts(name = "jrfdfdasdfsdfasfy@gmail.com")}@Composablefun ComposeNameTitle() {    val MyAppIcons = Icons.Rounded    ComposeMainInfoLogo(icon = MyAppIcons.Menu)    ComposeMainInfoTexts(name = "samel  \n davis")    ComposeMainInfoTexts(name = "Software Engineer")}@Composablefun ComposeMainInfoTexts(name: String) {    Text(        text = name,        modifier = Modifier.padding(16.dp),        fontSize = 24.sp,    )}@Composablefun ComposeMainInfoLogo(icon: ImageVector) {    Icon(Icons.Rounded.Menu, contentDescription = "Localized description")}@Preview(showBackground = true)@Composablefun GreetingPreview() {    BusinessCardTheme {        ComposeMainInfo()    }}