From e3413691ba73654a3abd2b564e47f2bd599d3e90 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Wed, 6 Aug 2025 23:34:11 +0000 Subject: [PATCH 1/2] feat: Create one-page counselling website I've created a new one-page website for a fictional counselling practice in Mount Barker, SA. The website includes: - A clean and professional design. - Sections for Home, About, Services, and Contact. - A responsive layout. - A contact form. The website is ready for deployment on Vercel. --- index.html | 68 +++++++++++++++++++++++ style.css | 152 ++++++++++++++++++++++++++++++++++++++++++++++++++++ vercel.json | 13 +++++ 3 files changed, 233 insertions(+) create mode 100644 index.html create mode 100644 style.css create mode 100644 vercel.json diff --git a/index.html b/index.html new file mode 100644 index 000000000000..d8a34d7c07b0 --- /dev/null +++ b/index.html @@ -0,0 +1,68 @@ + + + + + + Mount Barker Counselling + + + +
+ +
+ +
+
+

Your Path to a Brighter Tomorrow

+

Compassionate and professional counselling services in Mount Barker, SA.

+ Book an Appointment +
+
+ +
+

About Us

+

At Mount Barker Counselling, we provide a safe, confidential, and non-judgmental space for you to explore your thoughts and feelings. Our experienced therapists are dedicated to helping you navigate life's challenges and achieve your personal goals.

+
+ +
+

Our Services

+
+
+

Individual Counselling

+

One-on-one sessions to address a wide range of personal issues, including anxiety, depression, stress, and relationship difficulties.

+
+
+

Couples Counselling

+

Helping couples improve communication, resolve conflicts, and build stronger, more fulfilling relationships.

+
+
+

Family Therapy

+

Working with families to foster better understanding, communication, and harmony within the family unit.

+
+
+
+ +
+

Contact Us

+

Ready to take the first step? Reach out to us to schedule a confidential consultation.

+
+ + + + +
+
+ + + + diff --git a/style.css b/style.css new file mode 100644 index 000000000000..b739066683f3 --- /dev/null +++ b/style.css @@ -0,0 +1,152 @@ +/* General Body Styles */ +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + line-height: 1.6; + margin: 0; + padding: 0; + background-color: #f4f4f4; + color: #333; +} + +/* Header and Navigation */ +header { + background: #fff; + color: #333; + padding: 1rem 0; + position: fixed; + width: 100%; + top: 0; + z-index: 1000; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + width: 90%; + margin: 0 auto; +} + +nav .logo { + font-size: 1.5rem; + font-weight: bold; +} + +nav ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; +} + +nav ul li { + margin-left: 20px; +} + +nav ul li a { + color: #333; + text-decoration: none; + font-size: 1rem; +} + +/* Hero Section */ +#home { + padding-top: 100px; /* Offset for fixed header */ +} +.hero { + background: #a8d0e6; + color: #fff; + text-align: center; + padding: 100px 20px; +} + +.hero h1 { + font-size: 3rem; + margin-bottom: 10px; +} + +.hero p { + font-size: 1.2rem; + margin-bottom: 20px; +} + +.cta-button { + background: #374785; + color: #fff; + padding: 10px 20px; + text-decoration: none; + border-radius: 5px; + font-weight: bold; +} + +/* Sections */ +section { + padding: 60px 20px; + text-align: center; +} + +section h2 { + font-size: 2.5rem; + margin-bottom: 20px; +} + +/* Service Cards */ +.service-cards { + display: flex; + justify-content: center; + gap: 20px; + flex-wrap: wrap; +} + +.card { + background: #fff; + border: 1px solid #ddd; + border-radius: 5px; + padding: 20px; + width: 300px; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); +} + +.card h3 { + font-size: 1.5rem; + margin-bottom: 10px; +} + +/* Contact Form */ +#contact { + background-color: #e8e8e8; +} +form { + max-width: 600px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 10px; +} + +form input, form textarea { + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 1rem; +} + +form button { + background: #374785; + color: #fff; + padding: 10px 20px; + border: none; + border-radius: 5px; + font-weight: bold; + cursor: pointer; + font-size: 1rem; +} + +/* Footer */ +footer { + background: #333; + color: #fff; + text-align: center; + padding: 20px 0; +} diff --git a/vercel.json b/vercel.json new file mode 100644 index 000000000000..afa6262ce622 --- /dev/null +++ b/vercel.json @@ -0,0 +1,13 @@ +{ + "version": 2, + "public": true, + "name": "mount-barker-counselling", + "alias": ["mount-barker-counselling"], + "builds": [ + { "src": "*.html", "use": "@vercel/static" }, + { "src": "*.css", "use": "@vercel/static" } + ], + "routes": [ + { "src": "/(.*)", "dest": "/$1" } + ] +} From 50cc7be3fc2fa782f62eb327ddc2f96f03dc0983 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Wed, 6 Aug 2025 23:46:51 +0000 Subject: [PATCH 2/2] feat: Improve counselling website design and features This commit improves the design and adds new features to the one-page counselling website. Changes include: - Added a hero image to the homepage. - Improved the typography. - Refined the color scheme for a more professional look. - Added subtle animations and transitions. - Improved the layout and spacing for better readability. - Added a "scroll to top" button. - Added social media icons to the footer. --- index.html | 8 ++++ script.js | 41 ++++++++++++++++++++ style.css | 107 +++++++++++++++++++++++++++++++++++++++++++---------- 3 files changed, 136 insertions(+), 20 deletions(-) create mode 100644 script.js diff --git a/index.html b/index.html index d8a34d7c07b0..de462b03ca5b 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ Mount Barker Counselling +
@@ -62,7 +63,14 @@

Contact Us

+ ↑ + diff --git a/script.js b/script.js new file mode 100644 index 000000000000..9a2d5c78b349 --- /dev/null +++ b/script.js @@ -0,0 +1,41 @@ +document.addEventListener('DOMContentLoaded', function() { + const sections = document.querySelectorAll('section'); + const scrollTopButton = document.getElementById('scrollTopButton'); + + // Fade in sections on scroll + const observer = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = 1; + entry.target.style.transform = 'translateY(0)'; + } + }); + }, { + threshold: 0.1 + }); + + sections.forEach(section => { + section.style.opacity = 0; + section.style.transform = 'translateY(20px)'; + section.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; + observer.observe(section); + }); + + // Show/hide scroll to top button + window.addEventListener('scroll', () => { + if (window.scrollY > 300) { + scrollTopButton.style.display = 'block'; + } else { + scrollTopButton.style.display = 'none'; + } + }); + + // Scroll to top on click + scrollTopButton.addEventListener('click', (e) => { + e.preventDefault(); + window.scrollTo({ + top: 0, + behavior: 'smooth' + }); + }); +}); diff --git a/style.css b/style.css index b739066683f3..058a30ac9601 100644 --- a/style.css +++ b/style.css @@ -1,17 +1,24 @@ +@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@700&display=swap'); + /* General Body Styles */ body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-family: 'Lato', sans-serif; line-height: 1.6; margin: 0; padding: 0; - background-color: #f4f4f4; - color: #333; + background-color: #f8f9fa; + color: #343a40; +} + +h1, h2, h3 { + font-family: 'Montserrat', sans-serif; + color: #003366; /* Dark Blue */ } /* Header and Navigation */ header { - background: #fff; - color: #333; + background: #ffffff; + color: #343a40; padding: 1rem 0; position: fixed; width: 100%; @@ -55,8 +62,10 @@ nav ul li a { padding-top: 100px; /* Offset for fixed header */ } .hero { - background: #a8d0e6; - color: #fff; + background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); + background-size: cover; + background-position: center; + color: #ffffff; text-align: center; padding: 100px 20px; } @@ -72,40 +81,55 @@ nav ul li a { } .cta-button { - background: #374785; - color: #fff; + background: #007bff; /* Bright Blue */ + color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-weight: bold; + transition: background-color 0.3s ease; +} + +.cta-button:hover { + background: #0056b3; /* Darker Blue */ } /* Sections */ section { - padding: 60px 20px; + padding: 80px 20px; text-align: center; } +#about p { + max-width: 800px; + margin: 0 auto; +} + section h2 { font-size: 2.5rem; - margin-bottom: 20px; + margin-bottom: 40px; } /* Service Cards */ .service-cards { display: flex; justify-content: center; - gap: 20px; + gap: 40px; flex-wrap: wrap; } .card { - background: #fff; - border: 1px solid #ddd; + background: #ffffff; + border: 1px solid #dee2e6; border-radius: 5px; padding: 20px; width: 300px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); + transition: transform 0.3s ease; +} + +.card:hover { + transform: translateY(-5px); } .card h3 { @@ -115,7 +139,7 @@ section h2 { /* Contact Form */ #contact { - background-color: #e8e8e8; + background-color: #e9ecef; } form { max-width: 600px; @@ -127,26 +151,69 @@ form { form input, form textarea { padding: 10px; - border: 1px solid #ccc; + border: 1px solid #ced4da; border-radius: 5px; font-size: 1rem; } form button { - background: #374785; - color: #fff; + background: #007bff; /* Bright Blue */ + color: #ffffff; padding: 10px 20px; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; font-size: 1rem; + transition: background-color 0.3s ease; +} + +form button:hover { + background: #0056b3; /* Darker Blue */ } /* Footer */ footer { - background: #333; - color: #fff; + background: #343a40; + color: #ffffff; text-align: center; padding: 20px 0; } + +/* Scroll to Top Button */ +.scroll-top-button { + position: fixed; + bottom: 20px; + right: 20px; + background: #007bff; + color: #ffffff; + width: 50px; + height: 50px; + text-align: center; + line-height: 50px; + font-size: 24px; + border-radius: 50%; + text-decoration: none; + display: none; /* Hidden by default */ + transition: opacity 0.3s ease; +} + +.scroll-top-button:hover { + background: #0056b3; +} + +/* Social Media Icons */ +.social-media { + margin-bottom: 20px; +} + +.social-media a { + color: #ffffff; + font-size: 24px; + margin: 0 10px; + transition: color 0.3s ease; +} + +.social-media a:hover { + color: #007bff; +}