I'd be happy to create UI mockups for key features of your mobile application, including a login page, announcement section, campus navigation interface, and emergency contact page. I'll use React Native components to create these mockups, incorporating features like maps, images, and horizontal scrolling to give a realistic feel.

Let's start by creating these mockups one by one:

These mockups provide a visual representation of the key features you requested for your mobile application. Here's a summary of what each screen includes:

1. Login Screen: Features a logo, app title, input fields for username and password, a login button, and a "Forgot Password" link.
2. Announcement Screen: Displays a horizontally scrollable list of announcements with images and titles.
3. Campus Navigation Screen: Shows a map of the campus with markers for important buildings.
4. Emergency Contact Screen: Presents a list of emergency contacts with their names, phone numbers, and call buttons.

These mockups incorporate features like maps (using react-native-maps) and horizontal scrolling (using FlatList with horizontal prop) to give a realistic feel. The designs are clean and user-friendly, with a consistent color scheme and styling across all screens.

To further enhance the mockups, you could consider adding:

1. Navigation between screens (e.g., using React Navigation)
2. More interactive elements (e.g., expandable announcement details)
3. User profile or settings screen
4. A dashboard or home screen that combines elements from different features

Would you like me to make any adjustments or additions to these mockups?

You're right, we should use React for web applications instead of React Native. Let's create these mockups using React and tailwind CSS for styling. We'll create components for each screen and use modern web practices.

These mockups provide a visual representation of the key features you requested for your web application. Here's a summary of what each page includes:

1. Login Page: Features a logo, app title, input fields for username and password, a login button, and a "Forgot Password" link.
2. Announcement Page: Displays a horizontally scrollable list of announcements with images and titles using CSS scroll-snap.
3. Campus Navigation Page: Shows a map of the campus with markers for important buildings using react-leaflet.
4. Emergency Contact Page: Presents a list of emergency contacts with their names, phone numbers, and call buttons.

These mockups incorporate features like maps (using react-leaflet) and horizontal scrolling (using CSS scroll-snap) to give a realistic feel. The designs are clean and user-friendly, with a consistent color scheme and styling across all pages using Tailwind CSS.

To further enhance the mockups, you could consider adding:

1. A navigation menu or sidebar for easy access to different pages
2. More interactive elements (e.g., expandable announcement details)
3. User profile or settings page
4. A dashboard or home page that combines elements from different features

Would you like me to make any adjustments or additions to these mockups?