-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhome.php
206 lines (184 loc) · 10.5 KB
/
home.php
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
<?php
// Start output buffering to prevent "headers already sent" errors
ob_start();
// Get latest news
$news_query = "SELECT * FROM news ORDER BY created_at DESC LIMIT 3";
$news_result = mysqli_query($conn, $news_query);
?>
<div class="container">
<!-- Hero Section -->
<div class="row align-items-center py-5">
<div class="col-md-6">
<h1 class="display-4 fw-bold text-primary">Welcome to BuggyBank</h1>
<p class="lead">Your trusted banking partner for all your financial needs.</p>
<p>Experience the convenience of online banking with modern features and services!</p>
<?php if (!$logged_in): ?>
<div class="d-grid gap-2 d-md-flex justify-content-md-start mt-4">
<a href="index.php?page=login" class="btn btn-primary btn-lg px-4 me-md-2">
<i class="fas fa-sign-in-alt me-2"></i>Login
</a>
<a href="index.php?page=register" class="btn btn-outline-primary btn-lg px-4">
<i class="fas fa-user-plus me-2"></i>Register
</a>
</div>
<?php else: ?>
<div class="d-grid gap-2 d-md-flex justify-content-md-start mt-4">
<a href="index.php?page=dashboard" class="btn btn-primary btn-lg px-4 me-md-2">
<i class="fas fa-tachometer-alt me-2"></i>Go to Dashboard
</a>
</div>
<?php endif; ?>
</div>
<div class="col-md-6">
<div class="card shadow-lg border-0 rounded-lg overflow-hidden">
<svg width="600" height="400" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg" class="img-fluid">
<!-- Background -->
<rect width="600" height="400" fill="#f8f9fa"/>
<!-- Bank Building -->
<rect x="150" y="150" width="300" height="200" fill="#4a6da7" stroke="#2c3e50" stroke-width="2"/>
<!-- Roof -->
<polygon points="150,150 300,80 450,150" fill="#2c3e50" stroke="#2c3e50" stroke-width="2"/>
<!-- Door -->
<rect x="275" y="270" width="50" height="80" fill="#f1c40f" stroke="#2c3e50" stroke-width="2"/>
<circle cx="315" cy="310" r="5" fill="#2c3e50"/>
<!-- Windows -->
<rect x="180" y="180" width="40" height="40" fill="#ecf0f1" stroke="#2c3e50" stroke-width="2"/>
<rect x="240" y="180" width="40" height="40" fill="#ecf0f1" stroke="#2c3e50" stroke-width="2"/>
<rect x="320" y="180" width="40" height="40" fill="#ecf0f1" stroke="#2c3e50" stroke-width="2"/>
<rect x="380" y="180" width="40" height="40" fill="#ecf0f1" stroke="#2c3e50" stroke-width="2"/>
<!-- Columns -->
<rect x="170" y="150" width="15" height="200" fill="#34495e" stroke="#2c3e50" stroke-width="1"/>
<rect x="415" y="150" width="15" height="200" fill="#34495e" stroke="#2c3e50" stroke-width="1"/>
<!-- Steps -->
<rect x="250" y="350" width="100" height="10" fill="#95a5a6" stroke="#2c3e50" stroke-width="1"/>
<rect x="260" y="360" width="80" height="10" fill="#95a5a6" stroke="#2c3e50" stroke-width="1"/>
<rect x="270" y="370" width="60" height="10" fill="#95a5a6" stroke="#2c3e50" stroke-width="1"/>
<!-- Text -->
<text x="300" y="230" font-family="Arial, sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="#ffffff">BuggyBank</text>
<text x="300" y="130" font-family="Arial, sans-serif" font-size="18" font-weight="bold" text-anchor="middle" fill="#2c3e50">Established 2023</text>
<!-- Dollar Sign -->
<text x="300" y="280" font-family="Arial, sans-serif" font-size="60" font-weight="bold" text-anchor="middle" fill="#f1c40f">$</text>
</svg>
<div class="card-img-overlay d-flex align-items-end">
<div class="bg-dark bg-opacity-75 text-white p-3 w-100">
<h5 class="mb-0">Secure Banking Solutions</h5>
</div>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<div class="row py-5">
<div class="col-12 text-center mb-4">
<h2 class="text-primary">Our Features</h2>
<p class="lead">Discover what makes BuggyBank special</p>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100 shadow-sm border-0 hover-card">
<div class="card-body text-center p-4">
<div class="feature-icon bg-primary bg-opacity-10 text-primary rounded-circle p-3 d-inline-block mb-3">
<i class="fas fa-exchange-alt fa-2x"></i>
</div>
<h5 class="card-title">Easy Transfers</h5>
<p class="card-text">Transfer money between accounts quickly and efficiently with our streamlined process.</p>
</div>
<div class="card-footer bg-transparent border-0 text-center pb-4">
<a href="index.php?page=login" class="btn btn-sm btn-outline-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100 shadow-sm border-0 hover-card">
<div class="card-body text-center p-4">
<div class="feature-icon bg-primary bg-opacity-10 text-primary rounded-circle p-3 d-inline-block mb-3">
<i class="fas fa-mobile-alt fa-2x"></i>
</div>
<h5 class="card-title">Mobile Banking</h5>
<p class="card-text">Access your account from anywhere with our responsive mobile interface.</p>
</div>
<div class="card-footer bg-transparent border-0 text-center pb-4">
<a href="index.php?page=login" class="btn btn-sm btn-outline-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100 shadow-sm border-0 hover-card">
<div class="card-body text-center p-4">
<div class="feature-icon bg-primary bg-opacity-10 text-primary rounded-circle p-3 d-inline-block mb-3">
<i class="fas fa-shield-alt fa-2x"></i>
</div>
<h5 class="card-title">Security</h5>
<p class="card-text">We use modern security practices to protect your financial information.</p>
</div>
<div class="card-footer bg-transparent border-0 text-center pb-4">
<a href="index.php?page=login" class="btn btn-sm btn-outline-primary">Learn More</a>
</div>
</div>
</div>
</div>
<!-- Latest News Section -->
<div class="row py-5">
<div class="col-12 text-center mb-4">
<h2>Latest News</h2>
<p class="lead">Stay updated with BuggyBank</p>
</div>
<?php if ($news_result && mysqli_num_rows($news_result) > 0): ?>
<?php while ($news = mysqli_fetch_assoc($news_result)): ?>
<div class="col-md-4 mb-4">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h5 class="card-title"><?php echo htmlspecialchars($news['title']); ?></h5>
<p class="card-text"><?php echo substr(htmlspecialchars($news['content']), 0, 150) . '...'; ?></p>
</div>
<div class="card-footer bg-transparent">
<small class="text-muted">
By <?php echo htmlspecialchars($news['author']); ?> on
<?php echo date('F j, Y', strtotime($news['created_at'])); ?>
</small>
</div>
</div>
</div>
<?php endwhile; ?>
<?php else: ?>
<div class="col-12">
<div class="alert alert-info">No news available at the moment.</div>
</div>
<?php endif; ?>
<div class="col-12 text-center mt-3">
<a href="index.php?page=news" class="btn btn-outline-primary">View All News</a>
</div>
</div>
<!-- Testimonials Section -->
<div class="row py-5 bg-light rounded">
<div class="col-12 text-center mb-4">
<h2>What Our Customers Say</h2>
<p class="lead">Hear from our satisfied customers</p>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body">
<div class="d-flex justify-content-center mb-3">
<i class="fas fa-quote-left fa-2x text-primary"></i>
</div>
<p class="card-text text-center">BuggyBank has made my financial life so much easier. Their intuitive interface and quick transfers have simplified my banking experience!</p>
<div class="text-center">
<h5 class="card-title mb-0">John Smith</h5>
<small class="text-muted">Customer since 2020</small>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body">
<div class="d-flex justify-content-center mb-3">
<i class="fas fa-quote-left fa-2x text-primary"></i>
</div>
<p class="card-text text-center">I appreciate how BuggyBank makes managing my finances straightforward and accessible. Their customer service is always helpful!</p>
<div class="text-center">
<h5 class="card-title mb-0">Jane Doe</h5>
<small class="text-muted">Customer since 2021</small>
</div>
</div>
</div>
</div>