diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..174b5fa --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,152 @@ +:root { + --primary-color: #6f42c1; + --secondary-color: #0df2c9; + --dark-bg: #1a1a2e; + --card-bg: #1f203a; + --light-text: #f0f0f0; + --muted-text: #a0a0b0; +} + +body { + background-color: var(--dark-bg); + color: var(--light-text); + font-family: 'Poppins', sans-serif; +} + +.navbar { + transition: background-color 0.3s ease, padding 0.3s ease; + background-color: transparent; +} + +.navbar.scrolled { + background-color: rgba(26, 26, 46, 0.9); + backdrop-filter: blur(10px); + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.navbar-brand { + font-weight: bold; + color: var(--light-text); +} + +.nav-link { + color: var(--muted-text); + transition: color 0.2s; +} + +.nav-link:hover, .nav-link.active { + color: var(--light-text); +} + +.btn-primary { + background-color: var(--primary-color); + border-color: var(--primary-color); + transition: background-color 0.2s, transform 0.2s; +} + +.btn-primary:hover { + background-color: #5a35a1; + transform: translateY(-2px); +} + +.hero { + padding: 10rem 0; + background: linear-gradient(45deg, #1a1a2e, #16213e); + text-align: center; +} + +.hero h1 { + font-size: 3.5rem; + font-weight: 700; +} + +.hero p { + font-size: 1.25rem; + color: var(--muted-text); +} + +.store-buttons .btn { + background-color: #333; + color: white; + border: none; + margin: 0.5rem; + padding: 0.75rem 1.5rem; +} + +.phone-mockup { + margin-top: 4rem; + max-width: 300px; +} + +.section { + padding: 6rem 0; +} + +.section-title { + text-align: center; + margin-bottom: 4rem; + font-weight: 700; +} + +.feature-card, .review-card { + background-color: var(--card-bg); + border-radius: 1rem; + padding: 2rem; + margin-bottom: 2rem; + border: 1px solid #3a3b5c; + transition: transform 0.3s, box-shadow 0.3s; +} + +.feature-card:hover, .review-card:hover { + transform: translateY(-10px); + box-shadow: 0 10px 20px rgba(0,0,0,0.2); +} + +.feature-card .icon { + font-size: 3rem; + color: var(--secondary-color); + margin-bottom: 1rem; +} + +.review-card img { + width: 80px; + height: 80px; + border-radius: 50%; + margin-bottom: 1rem; +} + +#newsletter { + background-color: var(--card-bg); + padding: 4rem 0; + border-radius: 1rem; +} + +.form-control { + background-color: #2a2b4a; + border: 1px solid #3a3b5c; + color: var(--light-text); +} + +.form-control:focus { + background-color: #2a2b4a; + border-color: var(--primary-color); + color: var(--light-text); + box-shadow: none; +} + +.footer { + background-color: #16213e; + padding: 3rem 0; + margin-top: 6rem; +} + +.footer a { + color: var(--muted-text); + text-decoration: none; + transition: color 0.2s; +} + +.footer a:hover { + color: var(--light-text); +} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..b4b4802 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,54 @@ + +document.addEventListener('DOMContentLoaded', function () { + // Shrinking navbar on scroll + const navbar = document.querySelector('.navbar'); + if (navbar) { + window.addEventListener('scroll', function () { + if (window.scrollY > 50) { + navbar.classList.add('scrolled'); + } else { + navbar.classList.remove('scrolled'); + } + }); + } + + // Smooth scrolling for anchor links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const targetId = this.getAttribute('href'); + const targetElement = document.querySelector(targetId); + if(targetElement){ + targetElement.scrollIntoView({ behavior: 'smooth' }); + } + }); + }); + + // Newsletter form validation + const newsletterForm = document.getElementById('newsletter-form'); + const newsletterSuccess = document.getElementById('newsletter-success'); + if (newsletterForm) { + newsletterForm.addEventListener('submit', function (e) { + e.preventDefault(); + const emailInput = newsletterForm.querySelector('input[type="email"]'); + if (emailInput.checkValidity()) { + // Here you would typically send the email to your server + newsletterSuccess.style.display = 'block'; + emailInput.value = ''; // Clear input + setTimeout(() => { newsletterSuccess.style.display = 'none'; }, 5000); + } else { + emailInput.classList.add('is-invalid'); + } + }); + + // Remove validation error on input + const emailInput = newsletterForm.querySelector('input[type="email"]'); + if(emailInput) { + emailInput.addEventListener('input', () => { + if (emailInput.classList.contains('is-invalid')) { + emailInput.classList.remove('is-invalid'); + } + }); + } + } +}); diff --git a/assets/pasted-20250910-100610-19510dee.png b/assets/pasted-20250910-100610-19510dee.png new file mode 100644 index 0000000..da9e78b Binary files /dev/null and b/assets/pasted-20250910-100610-19510dee.png differ diff --git a/contact.php b/contact.php new file mode 100644 index 0000000..5676750 --- /dev/null +++ b/contact.php @@ -0,0 +1,96 @@ + + + + + + + Contact Us - TrailGo + + + + + +
+
+

Contact Us

+ + + + + + + + + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/index.php b/index.php index e13ae95..dfad48e 100644 --- a/index.php +++ b/index.php @@ -1,131 +1,184 @@ - - + - - - New Style - - - - + + + TrailGo - Explore the World + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

Flatlogic AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- + + + + + +
+
+
+
+

Explore the World, One Trail at a Time

+

The ultimate companion for hikers, bikers, and adventurers.

+ + A smartphone displaying the TrailGo app's map interface on a scenic trail background. +
+
+
+
+ + +
+
+

How It Works

+
+
+
+
1
+

Discover Trails

+

Find the best trails near you with our curated map.

+
+
+
+
+
2
+

Track Your Journey

+

Record your progress with real-time GPS tracking.

+
+
+
+
+
3
+

Share Your Adventures

+

Share your completed trails with friends and the community.

+
+
+
+
+
+ + +
+
+

App Features

+
+
+
+
+
Offline Maps
+

Download maps for offline use and never get lost.

+
+
+
+
+
+
Trail Discovery
+

Find new trails filtered by difficulty, length, and rating.

+
+
+
+
+
+
Community Reviews
+

Read reviews from other hikers to pick the perfect trail.

+
+
+
+
+
+
Progress Tracking
+

Monitor your stats like distance, elevation, and speed.

+
+
+
+
+
+ + +
+
+

What Our Users Say

+
+
+
+ Avatar of a happy TrailGo user. +

"TrailGo has changed the way I hike. The offline maps are a lifesaver!"

+ - Alex Johnson +
+
+
+
+ Avatar of a happy TrailGo user. +

"I love discovering new trails and seeing my progress. Highly recommend!"

+ - Maria Garcia +
+
+
+
+ Avatar of a happy TrailGo user. +

"A must-have app for any outdoor enthusiast. The community features are fantastic."

+ - Chris Lee +
+
+
+
+
+ + +
+
+
+
+

Stay in the Loop

+

Sign up for our newsletter to get the latest updates and trail news.

+
+
+ +
Please enter a valid email address.
+
+
+ +
+
+ +
+
+
+
+ + + + + + - + \ No newline at end of file