Improve styling of app
This commit is contained in:
Peter Stockings
@@ -1,22 +1,24 @@
|
||||
{% extends "_layout.html" %}
|
||||
{% block content %}
|
||||
<div class="bg-gray-50">
|
||||
<div class="bg-gray-50 pb-20">
|
||||
<!-- Hero Section -->
|
||||
<section class="bg-blue-600 text-white">
|
||||
<div class="container mx-auto px-4 py-20 text-center">
|
||||
<h1 class="text-4xl font-bold mb-6">
|
||||
<section
|
||||
class="bg-gradient-to-br from-primary-600 to-primary-800 text-white rounded-b-3xl shadow-xl overflow-hidden relative">
|
||||
<div class="absolute inset-0 bg-white/5 pattern-dots pointer-events-none"></div>
|
||||
<div class="container mx-auto px-4 py-24 text-center relative z-10">
|
||||
<h1 class="text-5xl md:text-6xl font-extrabold mb-6 tracking-tight">
|
||||
Welcome to BP Tracker
|
||||
</h1>
|
||||
<p class="text-lg mb-8">
|
||||
<p class="text-xl md:text-2xl mb-12 max-w-2xl mx-auto font-medium text-primary-50 leading-relaxed">
|
||||
Track your blood pressure and heart rate effortlessly. Take control of your health today!
|
||||
</p>
|
||||
<div class="flex justify-center space-x-4">
|
||||
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
|
||||
<a href="{{ url_for('auth.signup') }}"
|
||||
class="px-8 py-3 bg-white text-blue-600 font-semibold rounded-lg shadow hover:bg-gray-200">
|
||||
class="px-8 py-4 bg-white text-primary-700 font-bold text-lg rounded-xl shadow-xl hover:shadow-2xl hover:bg-gray-50 transition-all duration-300 transform hover:-translate-y-1">
|
||||
Get Started
|
||||
</a>
|
||||
<a href="{{ url_for('auth.login') }}"
|
||||
class="px-8 py-3 bg-blue-700 text-white font-semibold rounded-lg shadow hover:bg-blue-800">
|
||||
class="px-8 py-4 bg-primary-700 text-white border border-primary-500 font-bold text-lg rounded-xl shadow-lg hover:shadow-xl hover:bg-primary-600 transition-all duration-300 transform hover:-translate-y-1">
|
||||
Login
|
||||
</a>
|
||||
</div>
|
||||
@@ -24,35 +26,56 @@
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="container mx-auto px-4 py-16">
|
||||
<h2 class="text-3xl font-bold text-center mb-8">Why Choose BP Tracker?</h2>
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<div class="text-center bg-white p-6 rounded-lg shadow">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 text-blue-600 mx-auto mb-4" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8c2.21 0 4 1.79 4 4s-1.79 4-4 4-4-1.79-4-4 1.79-4 4-4z"></path>
|
||||
</svg>
|
||||
<h3 class="text-lg font-semibold mb-2">Accurate Tracking</h3>
|
||||
<p>Keep a detailed log of your blood pressure and heart rate over time.</p>
|
||||
<section class="container mx-auto px-4 pt-24">
|
||||
<div class="text-center mb-16">
|
||||
<span class="text-primary-600 font-bold tracking-wider uppercase text-sm mb-2 block">Why Track With
|
||||
Us</span>
|
||||
<h2 class="text-4xl font-extrabold text-gray-900 tracking-tight">Why Choose BP Tracker?</h2>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-3 gap-10">
|
||||
<div
|
||||
class="text-center bg-white p-10 rounded-3xl shadow-lg border border-gray-100 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
|
||||
<div
|
||||
class="w-20 h-20 mx-auto bg-primary-50 rounded-2xl flex items-center justify-center mb-6 shadow-inner text-primary-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8c2.21 0 4 1.79 4 4s-1.79 4-4 4-4-1.79-4-4 1.79-4 4-4z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Accurate Tracking</h3>
|
||||
<p class="text-gray-600 leading-relaxed">Keep a detailed log of your blood pressure and heart rate over
|
||||
time to share with your doctor.</p>
|
||||
</div>
|
||||
<div class="text-center bg-white p-6 rounded-lg shadow">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 text-blue-600 mx-auto mb-4" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9.75 16.5L15 12m0 0l-5.25-4.5m5.25 4.5H3"></path>
|
||||
</svg>
|
||||
<h3 class="text-lg font-semibold mb-2">Insightful Graphs</h3>
|
||||
<p>Visualize your progress and identify trends with intuitive charts.</p>
|
||||
|
||||
<div
|
||||
class="text-center bg-white p-10 rounded-3xl shadow-lg border border-gray-100 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
|
||||
<div
|
||||
class="w-20 h-20 mx-auto bg-primary-50 rounded-2xl flex items-center justify-center mb-6 shadow-inner text-primary-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9.75 16.5L15 12m0 0l-5.25-4.5m5.25 4.5H3"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Insightful Graphs</h3>
|
||||
<p class="text-gray-600 leading-relaxed">Visualize your progress and identify health trends with our
|
||||
intuitive, easy-to-read charts.</p>
|
||||
</div>
|
||||
<div class="text-center bg-white p-6 rounded-lg shadow">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 text-blue-600 mx-auto mb-4" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 20l-5.5-5.5M9 20V9m0 11h11"></path>
|
||||
</svg>
|
||||
<h3 class="text-lg font-semibold mb-2">Secure and Private</h3>
|
||||
<p>Your data is protected with state-of-the-art security measures.</p>
|
||||
|
||||
<div
|
||||
class="text-center bg-white p-10 rounded-3xl shadow-lg border border-gray-100 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
|
||||
<div
|
||||
class="w-20 h-20 mx-auto bg-primary-50 rounded-2xl flex items-center justify-center mb-6 shadow-inner text-primary-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 20l-5.5-5.5M9 20V9m0 11h11"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Secure and Private</h3>
|
||||
<p class="text-gray-600 leading-relaxed">Your medical data is protected with state-of-the-art security
|
||||
measures. Your privacy is paramount.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user