Frutiger Aero

class FrutigerAeroScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        // Sky/Grass background
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter, end: Alignment.bottomCenter,
            colors: [Color(0xFF87CEEB), Color(0xFFE0F6FF), Color(0xFF98FB98)],
          ),
        ),
        child: Center(
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(25),
              boxShadow: const [BoxShadow(color: Colors.black38, blurRadius: 6, offset: Offset(0, 4))],
              // Glossy Gel Button
              gradient: const LinearGradient(
                begin: Alignment.topCenter, end: Alignment.bottomCenter,
                stops: [0.0, 0.5, 0.5, 1.0], // Sharp transition at 50%
                colors: [
                  Color(0xFF73C8F8), // Light top
                  Color(0xFF1583D7), // Mid top
                  Color(0xFF0361A3), // Dark mid (creates the glass horizon)
                  Color(0xFF299EEF), // Bright bottom reflection
                ],
              ),
              border: Border.all(color: Colors.white.withOpacity(0.5), width: 1),
            ),
            child: Material(
              color: Colors.transparent,
              child: InkWell(
                borderRadius: BorderRadius.circular(25),
                onTap: () {},
                child: const Padding(
                  padding: EdgeInsets.symmetric(horizontal: 40, vertical: 16),
                  child: Text(
                    'Media Player',
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      shadows: [Shadow(color: Colors.black54, offset: Offset(0, -1))],
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

import LinearGradient from 'react-native-linear-gradient';

const FrutigerAeroScreen = () => {
  return (
    <LinearGradient
      colors={['#87CEEB', '#E0F6FF', '#98FB98']}
      style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
    >
      <View style={{
        shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, 
        shadowOpacity: 0.3, shadowRadius: 5, elevation: 8
      }}>
        <LinearGradient
          colors={['#73C8F8', '#1583D7', '#0361A3', '#299EEF']}
          locations={[0, 0.5, 0.5, 1]} // The sharp glass horizon
          style={{
            borderRadius: 25,
            paddingVertical: 16,
            paddingHorizontal: 40,
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,0.6)',
            borderTopWidth: 2 // Stronger specular highlight on top
          }}
        >
          <Text style={{ 
            color: '#FFF', 
            fontWeight: 'bold', 
            textShadowColor: 'rgba(0,0,0,0.5)', 
            textShadowOffset: { width: 0, height: -1 }, 
            textShadowRadius: 1 
          }}>
            Glossy Button
          </Text>
        </LinearGradient>
      </View>
    </LinearGradient>
  );
};

@Composable
fun FrutigerAeroScreen() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(
                Brush.verticalGradient(listOf(Color(0xFF87CEEB), Color(0xFFE0F6FF), Color(0xFF98FB98)))
            ),
        contentAlignment = Alignment.Center
    ) {
        // Glossy Button
        val glassBrush = Brush.verticalGradient(
            0.0f to Color(0xFF73C8F8),
            0.49f to Color(0xFF1583D7),
            0.5f to Color(0xFF0361A3), // Sharp reflection line
            1.0f to Color(0xFF299EEF)
        )

        Box(
            modifier = Modifier
                .shadow(8.dp, RoundedCornerShape(25.dp))
                .background(glassBrush, RoundedCornerShape(25.dp))
                .border(
                    width = 1.dp,
                    brush = Brush.verticalGradient(listOf(Color.White, Color.Transparent)), // Top highlight
                    shape = RoundedCornerShape(25.dp)
                )
                .clickable { }
                .padding(horizontal = 40.dp, vertical = 16.dp)
        ) {
            Text(
                text = "Eco Tech",
                color = Color.White,
                fontWeight = FontWeight.Bold,
                style = TextStyle(
                    shadow = Shadow(color = Color.Black.copy(alpha = 0.5f), offset = Offset(0f, -2f), blurRadius = 2f)
                )
            )
        }
    }
}