Hugging Face's logo

Spaces:
klostegj
/
miami-menu-matchmaker
Running

App Files Community
miami-menu-matchmaker
File size: 7,540 Bytes
ac33a4e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About | Miami Menu Matchmaker</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
        body {
            font-family: 'Poppins', sans-serif;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Navigation -->
    <nav class="bg-green-600 text-white shadow-lg">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i data-feather="utensils" class="w-6 h-6"></i>
                <span class="font-bold text-xl">Miami Menu Matchmaker</span>
            </div>
            <div>
                <a href="index.html" class="bg-white text-green-600 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition">Back to Home</a>
            </div>
        </div>
    </nav>

    <!-- About Content -->
    <div class="container mx-auto px-4 py-12">
        <div class="max-w-4xl mx-auto">
            <h1 class="text-4xl font-bold text-center mb-8 text-gray-800">About Miami Menu Matchmaker</h1>
            
            <div class="bg-white rounded-lg shadow-md p-8 mb-8">
                <h2 class="text-2xl font-bold mb-4 text-green-600">Our Mission</h2>
                <p class="text-gray-700 mb-4">
                    Miami Menu Matchmaker was created to help students with dietary restrictions or preferences find suitable meal options across Miami University's dining locations. We understand how challenging it can be to navigate campus dining with specific dietary needs.
                </p>
                <p class="text-gray-700">
                    Our platform provides detailed information about menu items, including ingredients and nutrition facts, to help students make informed dining choices.
                </p>
            </div>

            <div class="bg-white rounded-lg shadow-md p-8 mb-8">
                <h2 class="text-2xl font-bold mb-4 text-green-600">How It Works</h2>
                <ol class="list-decimal pl-6 space-y-4 text-gray-700">
                    <li>Select your dietary preference from our categorized options</li>
                    <li>Browse matching menu items across all campus dining locations</li>
                    <li>View detailed nutritional information and ingredients for each item</li>
                    <li>Find directions to your chosen dining location</li>
                </ol>
            </div>

            <div class="bg-white rounded-lg shadow-md p-8 mb-8">
                <h2 class="text-2xl font-bold mb-4 text-green-600">Our Team</h2>
                <p class="text-gray-700 mb-4">
                    Miami Menu Matchmaker was developed by a group of Miami University students who personally experienced the challenges of finding suitable meals on campus.
                </p>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="text-center">
                        <img src="http://static.photos/people/200x200/1" alt="Team member" class="rounded-full w-32 h-32 object-cover mx-auto mb-4">
                        <h3 class="font-bold">Alex Johnson</h3>
                        <p class="text-gray-600">Lead Developer</p>
                    </div>
                    <div class="text-center">
                        <img src="http://static.photos/people/200x200/2" alt="Team member" class="rounded-full w-32 h-32 object-cover mx-auto mb-4">
                        <h3 class="font-bold">Sarah Chen</h3>
                        <p class="text-gray-600">Nutrition Specialist</p>
                    </div>
                    <div class="text-center">
                        <img src="http://static.photos/people/200x200/3" alt="Team member" class="rounded-full w-32 h-32 object-cover mx-auto mb-4">
                        <h3 class="font-bold">Michael Rodriguez</h3>
                        <p class="text-gray-600">UI/UX Designer</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-md p-8">
                <h2 class="text-2xl font-bold mb-4 text-green-600">Contact Us</h2>
                <form class="space-y-4">
                    <div>
                        <label for="name" class="block text-gray-700 mb-2">Name</label>
                        <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-green-500">
                    </div>
                    <div>
                        <label for="email" class="block text-gray-700 mb-2">Email</label>
                        <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-green-500">
                    </div>
                    <div>
                        <label for="message" class="block text-gray-700 mb-2">Message</label>
                        <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-green-500"></textarea>
                    </div>
                    <button type="submit" class="bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 transition">Send Message</button>
                </form>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <h3 class="text-lg font-bold mb-4">Miami Menu Matchmaker</h3>
                    <p class="text-gray-400">Helping students find the perfect meal options that fit their dietary needs across Miami University's campus.</p>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-4">Quick Links</h3>
                    <ul class="space-y-2">
                        <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Feedback</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-4">Connect</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
                <p>© 2023 Miami Menu Matchmaker. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        feather.replace();
    </script>
</body>
</html>