SoulLift/design-showcase.html at main · M-R-Saad/SoulLift · GitHub

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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SoulLift - Design Showcase</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        .glass-effect {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }

        .glass-card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .gradient-text {
            background: linear-gradient(135deg, #14b8a6, #7c3aed);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-pattern {
            background-image:
                radial-gradient(circle at 25% 25%, rgba(20, 184, 166, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(124, 58, 237, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.05) 0%, transparent 50%);
        }
    </style>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f0fdfa',
                            100: '#ccfbf1',
                            200: '#99f6e4',
                            300: '#5eead4',
                            400: '#2dd4bf',
                            500: '#14b8a6',
                            600: '#0d9488',
                            700: '#0f766e',
                            800: '#115e59',
                            900: '#134e4a',
                        },
                        secondary: {
                            50: '#faf5ff',
                            100: '#f3e8ff',
                            200: '#e9d5ff',
                            300: '#d8b4fe',
                            400: '#c084fc',
                            500: '#a855f7',
                            600: '#9333ea',
                            700: '#7c3aed',
                            800: '#6b21a8',
                            900: '#581c87',
                        }
                    },
                    fontFamily: {
                        'inter': ['Inter', 'sans-serif'],
                        'poppins': ['Poppins', 'sans-serif'],
                    }
                }
            }
        }
    </script>
</head>
<body class="min-h-screen bg-gradient-to-br from-slate-50 via-white to-primary-50 font-inter hero-pattern">
    <!-- Header -->
    <header class="glass-effect sticky top-0 z-50 border-b border-white/20">
        <div class="container mx-auto px-6">
            <nav class="flex justify-between items-center py-4">
                <!-- Logo -->
                <a href="#" class="flex items-center space-x-3 group">
                    <div class="relative">
                        <img src="resources/soullift-logo.svg" alt="SoulLift Logo" class="h-10 w-auto group-hover:scale-105 transition-transform duration-300">
                    </div>
                </a>

                <!-- Navigation -->
                <ul class="hidden lg:flex items-center space-x-8">
                    <li><a href="Homepage.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Homepage</a></li>
                    <li><a href="user_profile.php" class="text-gray-700 hover:text-primary-600 transition-colors font-medium px-4 py-2 rounded-xl hover:bg-white/50">Profile Page</a></li>
                    <li><a href="#showcase" class="text-primary-600 font-semibold px-4 py-2 rounded-xl bg-primary-50/50 backdrop-blur-sm">Design Showcase</a></li>
                </ul>

                <div class="flex items-center space-x-4">
                    <span class="bg-gradient-to-r from-success-100 to-success-200 text-success-800 px-4 py-2 rounded-xl font-medium text-sm">
                        <i class="fas fa-check-circle mr-2"></i>
                        Design Complete
                    </span>
                </div>
            </nav>
        </div>
    </header>

    <!-- Content -->
    <main class="container mx-auto px-6 py-16">
        <!-- Header Section -->
        <div class="text-center mb-16">
            <h1 class="text-5xl lg:text-6xl font-bold text-gray-800 mb-6 font-poppins">
                SoulLift <span class="gradient-text">Design System</span>
            </h1>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
                Consistent, professional design across all pages with modern glass morphism, beautiful typography, and the new custom logo.
            </p>

            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="Homepage.php" class="bg-gradient-to-r from-primary-500 to-primary-600 text-white px-8 py-4 rounded-2xl font-bold text-lg shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
                    <i class="fas fa-home mr-3"></i>
                    View Homepage
                </a>
                <a href="user_profile.php" class="glass-card text-gray-700 px-8 py-4 rounded-2xl font-bold text-lg shadow-lg hover:shadow-xl transition-all duration-300 border border-white/50 hover:-translate-y-1">
                    <i class="fas fa-user mr-3 text-primary-600"></i>
                    View Profile Page
                </a>
            </div>
        </div>

        <!-- Design Features Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16" id="showcase">
            <!-- Logo Feature -->
            <div class="glass-card rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 border border-white/50">
                <div class="text-center">
                    <img src="resources/soullift-logo.svg" alt="SoulLift Logo" class="h-16 w-auto mx-auto mb-4">
                    <h3 class="text-2xl font-bold text-gray-800 mb-4">Custom Logo</h3>
                    <p class="text-gray-600 leading-relaxed">
                        Professional SVG logo combining brain and heart symbols, representing mental wellness with animated floating elements.
                    </p>
                </div>
            </div>

            <!-- Glass Morphism -->
            <div class="glass-card rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 border border-white/50">
                <div class="w-16 h-16 glass-effect rounded-2xl flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-magic text-primary-600 text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-gray-800 mb-4 text-center">Glass Morphism</h3>
                <p class="text-gray-600 text-center leading-relaxed">
                    Modern glass effects with backdrop blur, transparency, and subtle borders for a contemporary look.
                </p>
            </div>

            <!-- Typography -->
            <div class="glass-card rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 border border-white/50">
                <div class="text-center">
                    <div class="text-3xl font-bold gradient-text mb-4">Aa</div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-4">Professional Typography</h3>
                    <p class="text-gray-600 leading-relaxed">
                        Inter and Poppins fonts for optimal readability and modern aesthetic across all devices.
                    </p>
                </div>
            </div>

            <!-- Color Palette -->
            <div class="glass-card rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 border border-white/50">
                <div class="flex justify-center space-x-3 mb-4">
                    <div class="w-8 h-8 bg-gradient-to-r from-teal-400 to-teal-600 rounded-full"></div>
                    <div class="w-8 h-8 bg-gradient-to-r from-purple-400 to-purple-600 rounded-full"></div>
                    <div class="w-8 h-8 bg-gradient-to-r from-orange-400 to-orange-600 rounded-full"></div>
                    <div class="w-8 h-8 bg-gradient-to-r from-green-400 to-green-600 rounded-full"></div>
                </div>
                <h3 class="text-2xl font-bold text-gray-800 mb-4 text-center">Mental Health Colors</h3>
                <p class="text-gray-600 text-center leading-relaxed">
                    Carefully chosen color palette that evokes trust, calm, and healing - perfect for mental health platforms.
                </p>
            </div>

            <!-- Responsive Design -->
            <div class="glass-card rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 border border-white/50">
                <div class="w-16 h-16 bg-gradient-to-r from-secondary-100 to-secondary-200 rounded-2xl flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-mobile-alt text-secondary-600 text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-gray-800 mb-4 text-center">Fully Responsive</h3>
                <p class="text-gray-600 text-center leading-relaxed">
                    Mobile-first design that works beautifully on all devices with collapsible navigation and touch-friendly interactions.
                </p>
            </div>

            <!-- Animations -->
            <div class="glass-card rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 border border-white/50">
                <div class="w-16 h-16 bg-gradient-to-r from-primary-100 to-primary-200 rounded-2xl flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-sparkles text-primary-600 text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-gray-800 mb-4 text-center">Smooth Animations</h3>
                <p class="text-gray-600 text-center leading-relaxed">
                    AOS library integration with custom keyframes for beautiful scroll animations and micro-interactions.
                </p>
            </div>
        </div>

        <!-- Consistency Note -->
        <div class="glass-card rounded-3xl p-12 shadow-2xl border border-white/50 text-center">
            <h2 class="text-3xl font-bold text-gray-800 mb-6 font-poppins">
                Design <span class="gradient-text">Consistency</span>
            </h2>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto mb-8">
                Both the Homepage and Profile page now share the same modern design language, ensuring a cohesive user experience throughout the platform.
            </p>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
                <div class="bg-white/70 backdrop-blur-sm p-6 rounded-2xl border border-white/50">
                    <h4 class="font-bold text-gray-800 mb-3">✅ Consistent Elements</h4>
                    <ul class="text-gray-600 text-left space-y-2">
                        <li>• Same navigation structure</li>
                        <li>• Identical logo placement</li>
                        <li>• Matching color schemes</li>
                        <li>• Unified typography</li>
                        <li>• Glass morphism effects</li>
                    </ul>
                </div>

                <div class="bg-white/70 backdrop-blur-sm p-6 rounded-2xl border border-white/50">
                    <h4 class="font-bold text-gray-800 mb-3">🎨 Professional Features</h4>
                    <ul class="text-gray-600 text-left space-y-2">
                        <li>• Custom SVG logo design</li>
                        <li>• Modern button styles</li>
                        <li>• Professional imagery</li>
                        <li>• Smooth transitions</li>
                        <li>• Mobile-optimized layout</li>
                    </ul>
                </div>
            </div>
        </div>
    </main>
</body>
</html>