Skip to content

Feat: Add new multi-page consulting website #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 4 commits into
base: feat/green-building-certs-website
Choose a base branch
from
Draft

Feat: Add new multi-page consulting website #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
232e94f
This commit introduces a complete, multi-page website for a sustainab…
google-labs-jules[bot] Oct 18, 2025
a184eab
Add initial content to README.md
Ashokkumar-linux Oct 18, 2025
db61e46
Refactor: Convert website to Single Page Application (SPA)
google-labs-jules[bot] Oct 18, 2025
3ec7c1d
Feat: Add dynamic UI animations and interactions
google-labs-jules[bot] Oct 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules/
jules-scratch/
48 changes: 36 additions & 12 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,44 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Green Building Certifications</title>
<link rel="stylesheet" href="style.css">
<title>GreenBuild Consulting - Accelerate Your Green Building Certification</title>
<link rel="stylesheet" href="styles/main.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
</head>
<body>
<header>
<h1>Green Building Certifications</h1>
<header class="header">
<div class="container">
<nav class="nav">
<a href="/" class="logo">GreenBuild</a>
<ul class="nav-list">
<li><a href="/" class="nav-link active" data-page="home">Home</a></li>
<li><a href="/services" class="nav-link" data-page="services">Services</a></li>
<li><a href="/projects" class="nav-link" data-page="projects">Our Projects</a></li>
<li><a href="/about" class="nav-link" data-page="about">About Us</a></li>
<li><a href="/contact" class="nav-link" data-page="contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section id="certs">
<h2>Our Certifications</h2>
<div class="cert-grid">
</div>
</section>

<main id="main-content">
<!-- Content will be loaded here dynamically -->
</main>
<script src="script.js"></script>

<footer class="footer">
<div class="container">
<p>&copy; 2024 GreenBuild Consulting. All Rights Reserved.</p>
</div>
</footer>

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="scripts/router.js"></script>
<script>
AOS.init({
duration: 800, // values from 0 to 3000, with step 50ms
easing: 'ease-in-out', // default easing for AOS animations
once: true // whether animation should happen only once - while scrolling down
});
</script>
</body>
</html>
</html>
56 changes: 56 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"dependencies": {
"playwright": "^1.56.1"
}
}
35 changes: 35 additions & 0 deletions pages/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<section class="page-header" data-aos="fade-in">
<div class="container">
<h1>About Us</h1>
<p>Driving the future of sustainable infrastructure.</p>
</div>
</section>

<section class="about-content">
<div class="container">
<div class="about-section" data-aos="fade-up">
<h2>Our Mission & Vision</h2>
<p>Our mission is to empower organizations to design, build, and operate buildings that are environmentally responsible, profitable, and healthy places to live and work. We envision a future where sustainable practices are the industry standard, and every building contributes positively to the planet.</p>
</div>
<div class="about-section team-section" data-aos="fade-up" data-aos-delay="100">
<h2>Meet Our Certified Experts</h2>
<div class="team-members">
<div class="team-member" data-aos="fade-up" data-aos-delay="200">
<img src="https://placehold.co/200x200/228B22/FFFFFF?text=Lead" alt="Team Member 1">
<h4>Dr. Evelyn Reed</h4>
<p>Lead Sustainability Strategist, LEED AP</p>
</div>
<div class="team-member" data-aos="fade-up" data-aos-delay="300">
<img src="https://placehold.co/200x200/4682B4/FFFFFF?text=Senior" alt="Team Member 2">
<h4>Ben Carter</h4>
<p>Senior Energy Analyst, GRIHA CP</p>
</div>
<div class="team-member" data-aos="fade-up" data-aos-delay="400">
<img src="https://placehold.co/200x200/32CD32/FFFFFF?text=Project" alt="Team Member 3">
<h4>Aisha Khan</h4>
<p>Project Manager, IGBC AP</p>
</div>
</div>
</div>
</div>
</section>
57 changes: 57 additions & 0 deletions pages/contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<section class="page-header" data-aos="fade-in">
<div class="container">
<h1>Contact Us</h1>
<p>Start your certification journey today.</p>
</div>
</section>

<section class="contact-form-section">
<div class="container">
<div class="contact-container">
<div class="contact-form" data-aos="fade-right">
<h2>Get a Free Consultation</h2>
<form action="mailto:contact@greenbuild.com" method="post" enctype="text/plain">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone">
</div>
<div class="form-group">
<label for="message">Message / Project Goal</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>
<div class="contact-map" data-aos="fade-left" data-aos-delay="100">
<h2>Our Location</h2>
<iframe
src="https://www.openstreetmap.org/export/embed.html?bbox=-74.0059,40.7128,-73.9959,40.7228&layer=mapnik"
width="100%"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
</div>
</div>
</div>
</section>

<section class="accreditations">
<div class="container">
<h2 data-aos="fade-up">Our Accreditations</h2>
<div class="logos" data-aos="fade-up" data-aos-delay="100">
<img src="https://placehold.co/150x80?text=USGBC" alt="USGBC Member Logo">
<img src="https://placehold.co/150x80?text=CII" alt="CII Member Logo">
<img src="https://placehold.co/150x80?text=TERI" alt="TERI Member Logo">
</div>
</div>
</section>
45 changes: 45 additions & 0 deletions pages/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<section class="hero">
<div class="container">
<div class="hero-content">
<h1 id="hero-headline">Accelerate Your Project to Green Building Certification</h1>
<p>We help you execute your sustainability goals and achieve globally recognized Green Building Certifications.</p>
<a href="/contact" class="nav-link btn btn-primary" data-page="contact">Get a Project Assessment</a>
</div>
</div>
</section>

<section class="services-summary">
<div class="container">
<h2 data-aos="fade-up">Our Core Services</h2>
<div class="service-blocks">
<div class="service-block" data-aos="fade-up" data-aos-delay="100">
<img src="https://placehold.co/100x100/228B22/FFFFFF?text=C" alt="Consulting Icon">
<h3>Project Consulting</h3>
<p>Expert guidance from project inception to completion, ensuring you meet your sustainability targets.</p>
</div>
<div class="service-block" data-aos="fade-up" data-aos-delay="200">
<img src="https://placehold.co/100x100/4682B4/FFFFFF?text=D" alt="Documentation Icon">
<h3>Documentation & Auditing</h3>
<p>Meticulous management of all required paperwork and audits for a seamless certification process.</p>
</div>
<div class="service-block" data-aos="fade-up" data-aos-delay="300">
<img src="https://placehold.co/100x100/32CD32/FFFFFF?text=S" alt="Certification Icon">
<h3>Certification Management</h3>
<p>End-to-end handling of the certification submission with bodies like LEED, IGBC, and GRIHA.</p>
</div>
</div>
</div>
</section>

<section class="trust-section">
<div class="container">
<h2 data-aos="fade-up">Globally Recognized Certifications</h2>
<div class="logos" data-aos="fade-up" data-aos-delay="100">
<img src="https://placehold.co/150x80?text=LEED" alt="LEED Logo">
<img src="https://placehold.co/150x80?text=IGBC" alt="IGBC Logo">
<img src="https://placehold.co/150x80?text=GRIHA" alt="GRIHA Logo">
<img src="https://placehold.co/150x80?text=WELL" alt="WELL Logo">
</div>
</div>
</section>
<script src="scripts/typing-animation.js"></script>
52 changes: 52 additions & 0 deletions pages/projects.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<section class="page-header" data-aos="fade-in">
<div class="container">
<h1>Our Projects</h1>
<p>Delivering certified, high-performance sustainable buildings.</p>
</div>
</section>

<section class="projects-gallery">
<div class="container">
<div class="filter-buttons" data-aos="fade-up">
<button class="btn filter-btn active" data-filter="all">All</button>
<button class="btn filter-btn" data-filter="commercial">Commercial</button>
<button class="btn filter-btn" data-filter="residential">Residential</button>
<button class="btn filter-btn" data-filter="industrial">Industrial</button>
</div>
<div class="projects-grid">
<div class="project-card" data-category="commercial" data-aos="fade-up" data-aos-delay="100">
<img src="https://placehold.co/600x400/228B22/FFFFFF?text=Project+Alpha" alt="Project Alpha">
<div class="card-content">
<h3>Corporate HQ, Metro City</h3>
<p><strong>Certification:</strong> LEED Platinum</p>
<p><strong>Key Metric:</strong> 45% Energy Reduction</p>
</div>
</div>
<div class="project-card" data-category="residential" data-aos="fade-up" data-aos-delay="200">
<img src="https://placehold.co/600x400/4682B4/FFFFFF?text=Project+Beta" alt="Project Beta">
<div class="card-content">
<h3>GreenView Apartments</h3>
<p><strong>Certification:</strong> IGBC Gold</p>
<p><strong>Key Metric:</strong> 30% Water Savings</p>
</div>
</div>
<div class="project-card" data-category="industrial" data-aos="fade-up" data-aos-delay="300">
<img src="https://placehold.co/600x400/32CD32/FFFFFF?text=Project+Gamma" alt="Project Gamma">
<div class="card-content">
<h3>Eco-Friendly Warehouse</h3>
<p><strong>Certification:</strong> GRIHA 5-Star</p>
<p><strong>Key Metric:</strong> 90% Waste Diversion</p>
</div>
</div>
<div class="project-card" data-category="commercial" data-aos="fade-up" data-aos-delay="400">
<img src="https://placehold.co/600x400/20B2AA/FFFFFF?text=Project+Delta" alt="Project Delta">
<div class="card-content">
<h3>Tech Park Tower II</h3>
<p><strong>Certification:</strong> WELL Certified</p>
<p><strong>Key Metric:</strong> Enhanced Air Quality</p>
</div>
</div>
</div>
</div>
</section>
<script src="../scripts/filter.js"></script>
54 changes: 54 additions & 0 deletions pages/services.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<section class="page-header" data-aos="fade-in">
<div class="container">
<h1>Our Services</h1>
<p>Comprehensive support for your green building projects.</p>
</div>
</section>

<section class="service-details">
<div class="container">
<div class="service-item" data-aos="fade-up" data-aos-delay="100">
<h3>Pre-Certification Audits</h3>
<p>We conduct thorough initial assessments to identify the most viable certification path for your project, evaluating everything from site selection to material sourcing. This foundational step ensures a clear roadmap and minimizes risks.</p>
</div>
<div class="service-item" data-aos="fade-up" data-aos-delay="200">
<h3>Design Optimization & Simulation</h3>
<p>Our experts work alongside your architectural team to optimize building design for energy efficiency, water conservation, and indoor environmental quality. We use advanced simulations to predict performance and secure maximum certification credits.</p>
</div>
<div class="service-item" data-aos="fade-up" data-aos-delay="300">
<h3>Final Submission Support & Documentation</h3>
<p>We manage the entire documentation process, compiling all necessary evidence and submitting a flawless application to the certification body. Our meticulous approach guarantees a smooth and successful review.</p>
</div>
</div>
</section>

<section class="process-flow">
<div class="container">
<h2 data-aos="fade-up">Our Certification Process</h2>
<div class="flow-diagram" data-aos="fade-up" data-aos-delay="100">
<div class="flow-step">
<div class="flow-step-number">1</div>
<div class="flow-step-title">Assessment</div>
<div class="flow-step-desc">Initial project review and goal setting.</div>
</div>
<div class="flow-arrow">&rarr;</div>
<div class="flow-step">
<div class="flow-step-number">2</div>
<div class="flow-step-title">Strategy</div>
<div class="flow-step-desc">Develop a tailored certification roadmap.</div>
</div>
<div class="flow-arrow">&rarr;</div>
<div class="flow-step">
<div class="flow-step-number">3</div>
<div class="flow-step-title">Implementation</div>
<div class="flow-step-desc">Guide design and construction phases.</div>
</div>
<div class="flow-arrow">&rarr;</div>
<div class="flow-step">
<div class="flow-step-number">4</div>
<div class="flow-step-title">Submission</div>
<div class="flow-step-desc">Compile and submit all documentation.</div>
</div>
</div>
</div>
</section>
Loading