Hugging Face's logo

Spaces:
edmonthird
/
campusconnect-galaxy
Running

App Files Community
campusconnect-galaxy
File size: 8,800 Bytes
f3067bf
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Explore | Campus Connect</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        body {
            font-family: 'Poppins', sans-serif;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #6366f1 0%, #10b981 100%);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Navigation -->
    <nav class="bg-white shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <a href="index.html" class="flex-shrink-0 flex items-center">
                        <i data-feather="users" class="h-8 w-8 text-primary-600"></i>
                        <span class="ml-2 text-xl font-bold text-gray-900">Campus Connect</span>
                    </a>
                </div>
                <div class="hidden md:ml-6 md:flex md:items-center space-x-8">
                    <a href="index.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Home</a>
                    <a href="explore.html" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-primary-500 text-sm font-medium">Explore</a>
                    <a href="events.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Events</a>
                    <a href="messages.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Messages</a>
                    <a href="groups.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Groups</a>
                </div>
                <div class="flex items-center">
                    <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-200">Sign In</button>
                    <button class="ml-4 bg-secondary-500 hover:bg-secondary-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-200">Register</button>
                </div>
            </div>
        </div>
    </nav>

    <!-- Explore Content -->
    <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        <div class="mb-8">
            <h2 class="text-2xl font-bold text-gray-900">Discover People</h2>
            <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                <!-- User Card 1 -->
                <div class="bg-white rounded-lg shadow-sm overflow-hidden transition duration-300 card-hover">
                    <img src="http://static.photos/people/320x240/1" alt="User" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-lg font-medium text-gray-900">Alex Johnson</h3>
                        <p class="mt-1 text-sm text-gray-500">Computer Science</p>
                        <button class="mt-3 w-full bg-primary-500 hover:bg-primary-600 text-white py-2 rounded-md text-sm font-medium">Connect</button>
                    </div>
                </div>
                <!-- User Card 2 -->
                <div class="bg-white rounded-lg shadow-sm overflow-hidden transition duration-300 card-hover">
                    <img src="http://static.photos/people/320x240/2" alt="User" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-lg font-medium text-gray-900">Maria Garcia</h3>
                        <p class="mt-1 text-sm text-gray-500">Business Administration</p>
                        <button class="mt-3 w-full bg-primary-500 hover:bg-primary-600 text-white py-2 rounded-md text-sm font-medium">Connect</button>
                    </div>
                </div>
                <!-- User Card 3 -->
                <div class="bg-white rounded-lg shadow-sm overflow-hidden transition duration-300 card-hover">
                    <img src="http://static.photos/people/320x240/3" alt="User" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-lg font-medium text-gray-900">Jamal Williams</h3>
                        <p class="mt-1 text-sm text-gray-500">Engineering</p>
                        <button class="mt-3 w-full bg-primary-500 hover:bg-primary-600 text-white py-2 rounded-md text-sm font-medium">Connect</button>
                    </div>
                </div>
                <!-- User Card 4 -->
                <div class="bg-white rounded-lg shadow-sm overflow-hidden transition duration-300 card-hover">
                    <img src="http://static.photos/people/320x240/4" alt="User" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-lg font-medium text-gray-900">Sarah Chen</h3>
                        <p class="mt-1 text-sm text-gray-500">Biology</p>
                        <button class="mt-3 w-full bg-primary-500 hover:bg-primary-600 text-white py-2 rounded-md text-sm font-medium">Connect</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-12">
            <h2 class="text-2xl font-bold text-gray-900">Popular Groups</h2>
            <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                <!-- Group Card 1 -->
                <div class="bg-white rounded-lg shadow-sm overflow-hidden transition duration-300 card-hover">
                    <img src="http://static.photos/education/320x240/1" alt="Group" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-lg font-medium text-gray-900">CS Coders Club</h3>
                        <p class="mt-1 text-sm text-gray-500">256 members</p>
                        <button class="mt-3 w-full bg-secondary-500 hover:bg-secondary-600 text-white py-2 rounded-md text-sm font-medium">Join</button>
                    </div>
                </div>
                <!-- Group Card 2 -->
                <div class="bg-white rounded-lg shadow-sm overflow-hidden transition duration-300 card-hover">
                    <img src="http://static.photos/education/320x240/2" alt="Group" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-lg font-medium text-gray-900">Business Leaders</h3>
                        <p class="mt-1 text-sm text-gray-500">189 members</p>
                        <button class="mt-3 w-full bg-secondary-500 hover:bg-secondary-600 text-white py-2 rounded-md text-sm font-medium">Join</button>
                    </div>
                </div>
                <!-- Group Card 3 -->
                <div class="bg-white rounded-lg shadow-sm overflow-hidden transition duration-300 card-hover">
                    <img src="http://static.photos/education/320x240/3" alt="Group" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-lg font-medium text-gray-900">Art & Design</h3>
                        <p class="mt-1 text-sm text-gray-500">143 members</p>
                        <button class="mt-3 w-full bg-secondary-500 hover:bg-secondary-600 text-white py-2 rounded-md text-sm font-medium">Join</button>
                    </div>
                </div>
                <!-- Group Card 4 -->
                <div class="bg-white rounded-lg shadow-sm overflow-hidden transition duration-300 card-hover">
                    <img src="http://static.photos/education/320x240/4" alt="Group" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-lg font-medium text-gray-900">Sports Enthusiasts</h3>
                        <p class="mt-1 text-sm text-gray-500">321 members</p>
                        <button class="mt-3 w-full bg-secondary-500 hover:bg-secondary-600 text-white py-2 rounded-md text-sm font-medium">Join</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

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