jeffemmett
/
nusqool-replica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add all subpages, shared components, and real images 

- Created shared Navigation, Footer, and Newsletter components
- Added 13 images from nusqool.com (portraits, sessions, retreats)
- Created subpages: About Thu, Growth Adventure, TRE, Coaching,
  Testimonials, Work with Chris, Events, Peace Pole, Contact Thu,
  Contact Chris, Care Tent
- Updated homepage with real images and working navigation links
- Updated embodiment-circle page to use shared navigation
- All nav links now route to proper subpages

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-09 14:52:50 +00:00
parent a08c6208ec
commit 4c94511a5a
29 changed files with 1809 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/caretent.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 668 KiB

BIN
public/images/chris-portrait.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 948 KiB

BIN
public/images/chris-studio.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 267 KiB

BIN
public/images/cloud-formations.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 931 KiB

BIN
public/images/coaching-portrait.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 198 KiB

BIN
public/images/embodiment-hero.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 367 KiB

BIN
public/images/nusqool-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
public/images/retreat-closing.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 142 KiB

BIN
public/images/retreat-opening.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
public/images/thu-portrait.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

BIN
public/images/tre-nature.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 499 KiB

BIN
public/images/tre-outdoors.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
public/images/tre-session.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 808 KiB

195
src/app/about-thu/page.tsx Normal file
View File

@ -0,0 +1,195 @@
import Image from "next/image";
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import Newsletter from "@/components/Newsletter";
export const metadata = {
title: "About Thu — Nusqool",
description: "Thu Nguyen is a resilience coach that helps connect you to your courage, conviction and creativity.",
};
export default function AboutThu() {
return (
<main>
<Navigation />
{/* Hero */}
<section className="pt-28 pb-16 px-6 bg-nusqool-cream">
<div className="max-w-4xl mx-auto text-center">
<h1 className="heading-xl text-nusqool-brown mb-6">
I am a resilience coach that helps connect you to your courage, conviction and creativity to be the change you wish to see in the world.
</h1>
</div>
</section>
{/* Bio with Image */}
<section className="section-padding bg-white">
<div className="max-w-7xl mx-auto">
<div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-start">
<div className="relative aspect-[4/5] rounded-sm overflow-hidden">
<Image
src="/images/thu-portrait.jpg"
alt="Thu Nguyen"
fill
className="object-cover"
/>
</div>
<div className="space-y-6 body-text">
<p>
Thu graduated from University of Waterloo with a degree in Computer Engineering. She spent 10+ years in semiconductor and telecom companies in R&amp;D and application engineering roles, followed by 10+ years in startup leadership positions including Simply Good and LogDNA, plus co-founding Instadoodle and Flowzo.
</p>
<p>
She became a certified coach through Co-Active Training Institute (CTI) in 2019, received ACC certification from International Coaching Federation (ICF) in 2020, and PCC certification in 2022.
</p>
<p>
Her background spans supporting Fortune 500 leaders, academic professors, and non-profit social change leaders. She facilitates workshops on Positive Intelligence, Body Intelligence, Authentic Leadership, and Gender Equity &amp; Reconciliation.
</p>
<p>
She created the 12-week Embodied Self Circle starting in 2022, now in its fifth year.
</p>
</div>
</div>
</div>
</section>
{/* Philosophy */}
<section className="section-padding bg-nusqool-cream">
<div className="max-w-4xl mx-auto">
<blockquote className="text-center">
<p className="heading-lg text-nusqool-brown italic mb-6">
&ldquo;Rarely are there safe spaces where someone gets you, sees your whole self and holds you.&rdquo;
</p>
</blockquote>
<div className="space-y-6 body-text mt-8">
<p>
I take a Whole Person approach, knowing that personal thriving is related to professional outcomes. I am a good listener, compassionate, and creative. I take a collaborative and practical approach to coaching, weaving together somatic practices, nervous system regulation, and leadership development.
</p>
</div>
</div>
</section>
{/* Credentials */}
<section className="section-padding bg-white">
<div className="max-w-5xl mx-auto">
<h2 className="heading-lg text-nusqool-brown mb-12 text-center">Credentials &amp; Experience</h2>
<div className="grid md:grid-cols-2 gap-12">
<div>
<h3 className="text-xl font-serif text-nusqool-brown mb-4">Executive Coaching</h3>
<ul className="space-y-3 body-text">
<li className="flex items-start">
<span className="text-nusqool-yellow mr-3 mt-1">&#10003;</span>
Co-Active Professional Coaching Certification (CPCC)
</li>
<li className="flex items-start">
<span className="text-nusqool-yellow mr-3 mt-1">&#10003;</span>
Professional Certified Coach (PCC) through ICF
</li>
<li className="flex items-start">
<span className="text-nusqool-yellow mr-3 mt-1">&#10003;</span>
Distinguished Fellow Coach at BetterUp
</li>
</ul>
</div>
<div>
<h3 className="text-xl font-serif text-nusqool-brown mb-4">Somatic &amp; Stress Practices</h3>
<ul className="space-y-3 body-text">
<li className="flex items-start">
<span className="text-nusqool-yellow mr-3 mt-1">&#10003;</span>
Medical Qi Gong Level 1 and 2 Therapist
</li>
<li className="flex items-start">
<span className="text-nusqool-yellow mr-3 mt-1">&#10003;</span>
Certified TRE&reg; Provider
</li>
<li className="flex items-start">
<span className="text-nusqool-yellow mr-3 mt-1">&#10003;</span>
Certified in Coaching, Neuroscience and Relational Trauma with Ann Betz
</li>
<li className="flex items-start">
<span className="text-nusqool-yellow mr-3 mt-1">&#10003;</span>
Neuroscience of Change training with Coaches Rising
</li>
<li className="flex items-start">
<span className="text-nusqool-yellow mr-3 mt-1">&#10003;</span>
The Resilient Heart&trade;: Trauma-Sensitive HeartMath Certification
</li>
</ul>
</div>
<div>
<h3 className="text-xl font-serif text-nusqool-brown mb-4">Facilitation</h3>
<ul className="space-y-3 body-text">
<li className="flex items-start">
<span className="text-nusqool-yellow mr-3 mt-1">&#10003;</span>
Certified Gender Equity and Reconciliation Facilitator
</li>
<li className="flex items-start">
<span className="text-nusqool-yellow mr-3 mt-1">&#10003;</span>
Kindness Kitchen Toronto volunteer facilitator (100+ volunteers, 1000+ meals)
</li>
<li className="flex items-start">
<span className="text-nusqool-yellow mr-3 mt-1">&#10003;</span>
Wednesday Heart Circles meditation facilitator (since 2018)
</li>
<li className="flex items-start">
<span className="text-nusqool-yellow mr-3 mt-1">&#10003;</span>
Hammock Stories podcast co-host
</li>
</ul>
</div>
<div>
<h3 className="text-xl font-serif text-nusqool-brown mb-4">Engineering &amp; Startups</h3>
<ul className="space-y-3 body-text">
<li className="flex items-start">
<span className="text-nusqool-yellow mr-3 mt-1">&#10003;</span>
B.A.Sc Computer Engineering, University of Waterloo (2005)
</li>
<li className="flex items-start">
<span className="text-nusqool-yellow mr-3 mt-1">&#10003;</span>
Application Engineer at Marvell&apos;s Emerging Wireless ($1M to $500M growth)
</li>
<li className="flex items-start">
<span className="text-nusqool-yellow mr-3 mt-1">&#10003;</span>
TechStars Boston (Winter 2011) &mdash; Loop app team
</li>
<li className="flex items-start">
<span className="text-nusqool-yellow mr-3 mt-1">&#10003;</span>
CEO/Co-Founder of Flowzo (Alchemist Accelerator Class XV)
</li>
<li className="flex items-start">
<span className="text-nusqool-yellow mr-3 mt-1">&#10003;</span>
Early team member at LogDNA (YC W15, $60M funding)
</li>
</ul>
</div>
</div>
</div>
</section>
{/* CTA */}
<section className="section-padding bg-nusqool-brown text-white text-center">
<div className="max-w-2xl mx-auto">
<h2 className="heading-lg text-nusqool-yellow mb-6">Ready to Connect?</h2>
<p className="text-white/80 text-lg mb-8">
Book a call to explore how we might work together.
</p>
<a
href="https://calendly.com/nusqool/connect"
target="_blank"
rel="noopener noreferrer"
className="btn-primary"
>
Book a Call
</a>
</div>
</section>
<Newsletter />
<Footer />
</main>
);
}

129
src/app/care-tent/page.tsx Normal file
View File

@ -0,0 +1,129 @@
import Image from "next/image";
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import Newsletter from "@/components/Newsletter";
export const metadata = {
title: "Care Tent — Nusqool",
description: "A pop-up sanctuary for conferences, festivals, and events. Rest, regulation, and gentle reconnection.",
};
export default function CareTent() {
return (
<main>
<Navigation />
{/* Hero */}
<section className="relative pt-28 pb-20 px-6 bg-nusqool-cream">
<div className="max-w-4xl mx-auto text-center">
<span className="text-sm uppercase tracking-wider text-nusqool-sage font-medium">Pop-Up Sanctuary</span>
<h1 className="heading-xl text-nusqool-brown mt-2 mb-6">The Care Tent</h1>
<p className="body-text max-w-2xl mx-auto">
A pop-up sanctuary for conferences, festivals, and events &mdash; a space for rest, regulation, and gentle reconnection.
</p>
</div>
</section>
{/* Image + Description */}
<section className="section-padding bg-white">
<div className="max-w-5xl mx-auto">
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div className="relative aspect-[4/3] rounded-sm overflow-hidden">
<Image
src="/images/caretent.jpg"
alt="Care Tent at Coralus UnSummit 2025"
fill
className="object-cover"
/>
</div>
<div>
<h2 className="heading-lg text-nusqool-brown mb-6">What is the Care Tent?</h2>
<div className="space-y-4 body-text">
<p>
Launched at the Coralus 10th Year Anniversary at Saunders Farm (Fall 2025), the Care Tent is a pop-up sanctuary designed to provide rest and regulation at large gatherings.
</p>
<ul className="space-y-3 pl-4">
<li className="flex items-start">
<span className="text-nusqool-yellow mr-3">&#8226;</span>
Rest spaces with hammocks, rugs, and pillows
</li>
<li className="flex items-start">
<span className="text-nusqool-yellow mr-3">&#8226;</span>
Self-guided practices and art supplies
</li>
<li className="flex items-start">
<span className="text-nusqool-yellow mr-3">&#8226;</span>
Books, reflection cards, and journaling prompts
</li>
<li className="flex items-start">
<span className="text-nusqool-yellow mr-3">&#8226;</span>
Nervous system reset tools
</li>
<li className="flex items-start">
<span className="text-nusqool-yellow mr-3">&#8226;</span>
Optional 1:1 somatic sessions
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
{/* Invite the Care Tent */}
<section className="section-padding bg-nusqool-cream">
<div className="max-w-xl mx-auto">
<h2 className="heading-lg text-nusqool-brown mb-4 text-center">Invite the Care Tent</h2>
<p className="body-text text-center mb-8">
If you would like to invite the Care Tent to your event, festival, or conference, please let us know!
</p>
<form className="space-y-6">
<div>
<label htmlFor="name" className="block text-sm font-medium text-nusqool-brown mb-2">
Name
</label>
<input
type="text"
id="name"
className="w-full px-4 py-3 border border-nusqool-brown/20 rounded-sm bg-white focus:outline-none focus:border-nusqool-yellow transition-colors"
/>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-nusqool-brown mb-2">
Email <span className="text-nusqool-yellow">*</span>
</label>
<input
type="email"
id="email"
required
className="w-full px-4 py-3 border border-nusqool-brown/20 rounded-sm bg-white focus:outline-none focus:border-nusqool-yellow transition-colors"
/>
</div>
<div>
<label htmlFor="event-details" className="block text-sm font-medium text-nusqool-brown mb-2">
Please share your event and ideas <span className="text-nusqool-yellow">*</span>
</label>
<textarea
id="event-details"
required
rows={6}
className="w-full px-4 py-3 border border-nusqool-brown/20 rounded-sm bg-white focus:outline-none focus:border-nusqool-yellow transition-colors resize-vertical"
/>
</div>
<button type="submit" className="btn-primary w-full">
Send
</button>
</form>
</div>
</section>
<Newsletter />
<Footer />
</main>
);
}

130
src/app/coaching/page.tsx Normal file
View File

@ -0,0 +1,130 @@
import Image from "next/image";
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import Newsletter from "@/components/Newsletter";
export const metadata = {
title: "Coaching — Nusqool",
description: "Thu Nguyen is a somatic leadership coach who empowers the helpers by reconnecting them to their true selves.",
};
export default function Coaching() {
return (
<main>
<Navigation />
{/* Hero */}
<section className="pt-28 pb-16 px-6 bg-nusqool-cream">
<div className="max-w-4xl mx-auto text-center">
<h1 className="heading-xl text-nusqool-brown mb-6">
Thu Nguyen is a somatic leadership coach who empowers the helpers by reconnecting them to their true selves
</h1>
</div>
</section>
{/* Intro */}
<section className="section-padding bg-white">
<div className="max-w-5xl mx-auto">
<div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
<div className="relative aspect-[4/5] rounded-sm overflow-hidden">
<Image
src="/images/coaching-portrait.jpg"
alt="Thu Nguyen coaching"
fill
className="object-cover"
/>
</div>
<div className="space-y-6 body-text">
<p>
Thu blends powerful somatic and nervous system regulation practices (TRE, Medical Qi Gong, Meditation) and leadership coaching (PCC, CPCC, CRTC) to help changemakers overcome burnout, stress, and trauma while unlocking their capacity to embody the change they wish to see in the world.
</p>
<p>
As a BetterUp Fellow Coach, Thu has supported hundreds of founders, leaders, and executives across diverse industries &mdash; Tech, Finance, Aerospace, Energy, Education, and Social Change &mdash; in creating sustainable success by addressing both personal and professional challenges.
</p>
<p>
With 20 years in tech and three startups, she understands VUCA (Volatile, Uncertain, Complex, Ambiguous) environments. After cancer, chronic illness, and burnout, she transitioned from tech to coaching, helping others transform adversity into opportunity and loss into purpose.
</p>
</div>
</div>
</div>
</section>
{/* Services */}
<section className="section-padding bg-nusqool-cream">
<div className="max-w-5xl mx-auto">
<h2 className="heading-lg text-nusqool-brown mb-12 text-center">How We Can Work Together</h2>
<div className="grid md:grid-cols-2 gap-8">
<div className="p-8 bg-white rounded-sm">
<div className="text-3xl mb-4">&#128172;</div>
<h3 className="text-xl font-serif text-nusqool-brown mb-3">Coaching</h3>
<p className="body-text text-sm">
Thu coaches conscientious and compassionate leaders through personal and professional transformation, focusing on inner self-discovery and deepening emotional, social, body, and positive intelligence. She holds PCC with ICF, trained through CTI, offering 1:1 and group coaching.
</p>
</div>
<div className="p-8 bg-white rounded-sm">
<div className="text-3xl mb-4">&#127793;</div>
<h3 className="text-xl font-serif text-nusqool-brown mb-3">Workshops</h3>
<p className="body-text text-sm">
Thu hosts and co-facilitates workshops on stress and tension release, TRE practices, Qi Gong, Tai Chi, Gender Equity &amp; Reconciliation, and deep listening. She teaches weekly 1:1 and group classes in Inner Flow.
</p>
</div>
<div className="p-8 bg-white rounded-sm">
<div className="text-3xl mb-4">&#9898;</div>
<h3 className="text-xl font-serif text-nusqool-brown mb-3">Circles</h3>
<p className="body-text text-sm">
Thu hosts virtual and in-person circles and community events amplifying stillness, sharing, authenticity, creativity, and kindness. She has hosted a weekly Wednesday circle for four years as a safe contemplation and connection space.
</p>
</div>
<div className="p-8 bg-white rounded-sm">
<div className="text-3xl mb-4">&#127908;</div>
<h3 className="text-xl font-serif text-nusqool-brown mb-3">Speaking Engagements</h3>
<p className="body-text text-sm">
Thu speaks at tech startups, schools, meetup groups, and podcasts on Authentic Leadership, Gender Identity and Expression, Burnout, Stress, Ikigai, Diversity, and Resilience.
</p>
</div>
</div>
</div>
</section>
{/* Testimonial */}
<section className="section-padding bg-nusqool-brown text-white">
<div className="max-w-3xl mx-auto text-center">
<blockquote>
<p className="text-xl md:text-2xl font-serif italic leading-relaxed text-white/90">
&ldquo;Thu possesses that rare combination of incredible gentleness and immense strength. From my first conversation with her I felt the genuine warmth of her care and compassion and I was immediately struck by her ability to impart wisdom with great kindness. She has put me onto a path of great healing; mind, body and spirit.&rdquo;
</p>
<footer className="mt-6 text-nusqool-yellow font-medium">
&mdash; Ideshini Naidoo, Head of Engineering, Thomson Reuters
</footer>
</blockquote>
</div>
</section>
{/* CTA */}
<section className="section-padding bg-white text-center">
<div className="max-w-2xl mx-auto">
<h2 className="heading-lg text-nusqool-brown mb-6">Connect with Thu</h2>
<p className="body-text mb-8">
Book a free consultation to explore how coaching can support your journey.
</p>
<a
href="https://calendly.com/nusqool/connect"
target="_blank"
rel="noopener noreferrer"
className="btn-primary"
>
Book a Call
</a>
</div>
</section>
<Newsletter />
<Footer />
</main>
);
}

82
src/app/contact-chris/page.tsx Normal file
View File

@ -0,0 +1,82 @@
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
export const metadata = {
title: "Contact Chris — Nusqool",
description: "Get in touch with Chris Harris at Nusqool Audio. Audio engineering, mastering, and studio work.",
};
export default function ContactChris() {
return (
<main>
<Navigation />
{/* Hero */}
<section className="pt-28 pb-16 px-6 bg-nusqool-cream">
<div className="max-w-4xl mx-auto text-center">
<h1 className="heading-xl text-nusqool-brown mb-6">Contact Chris</h1>
<p className="body-text max-w-2xl mx-auto">
Fill out this form to get more info, work with or visit the studio, or find him on Facebook or{" "}
<a
href="https://instagram.com/nusqoolaudio"
target="_blank"
rel="noopener noreferrer"
className="text-nusqool-yellow hover:underline"
>
@nusqoolaudio
</a>
</p>
</div>
</section>
{/* Form */}
<section className="section-padding bg-white">
<div className="max-w-xl mx-auto">
<form className="space-y-6">
<div>
<label htmlFor="name" className="block text-sm font-medium text-nusqool-brown mb-2">
Name <span className="text-nusqool-yellow">*</span>
</label>
<input
type="text"
id="name"
required
className="w-full px-4 py-3 border border-nusqool-brown/20 rounded-sm bg-white focus:outline-none focus:border-nusqool-yellow transition-colors"
/>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-nusqool-brown mb-2">
Email Address <span className="text-nusqool-yellow">*</span>
</label>
<input
type="email"
id="email"
required
className="w-full px-4 py-3 border border-nusqool-brown/20 rounded-sm bg-white focus:outline-none focus:border-nusqool-yellow transition-colors"
/>
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium text-nusqool-brown mb-2">
Message <span className="text-nusqool-yellow">*</span>
</label>
<textarea
id="message"
required
rows={6}
className="w-full px-4 py-3 border border-nusqool-brown/20 rounded-sm bg-white focus:outline-none focus:border-nusqool-yellow transition-colors resize-vertical"
/>
</div>
<button type="submit" className="btn-primary w-full">
Submit
</button>
</form>
</div>
</section>
<Footer />
</main>
);
}

119
src/app/contact-thu/page.tsx Normal file
View File

@ -0,0 +1,119 @@
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
export const metadata = {
title: "Contact Thu — Nusqool",
description: "Get in touch with Thu Nguyen at Nusqool. Coaching, workshops, collaborations, and volunteering.",
};
export default function ContactThu() {
return (
<main>
<Navigation />
{/* Hero */}
<section className="pt-28 pb-16 px-6 bg-nusqool-cream">
<div className="max-w-4xl mx-auto text-center">
<h1 className="heading-xl text-nusqool-brown mb-6">Contact Thu</h1>
<p className="body-text max-w-2xl mx-auto">
If you&apos;d like to learn more about ways of working with, learning, volunteering, or collaborating with Thu, feel free to fill out this form or find her on{" "}
<a
href="https://ca.linkedin.com/in/2cre8tive"
target="_blank"
rel="noopener noreferrer"
className="text-nusqool-yellow hover:underline"
>
LinkedIn
</a>{" "}
or{" "}
<a
href="https://instagram.com/connectthu"
target="_blank"
rel="noopener noreferrer"
className="text-nusqool-yellow hover:underline"
>
@connectthu
</a>
</p>
</div>
</section>
{/* Form */}
<section className="section-padding bg-white">
<div className="max-w-xl mx-auto">
<form className="space-y-6">
<div>
<label htmlFor="name" className="block text-sm font-medium text-nusqool-brown mb-2">
Name <span className="text-nusqool-yellow">*</span>
</label>
<input
type="text"
id="name"
required
className="w-full px-4 py-3 border border-nusqool-brown/20 rounded-sm bg-white focus:outline-none focus:border-nusqool-yellow transition-colors"
/>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-nusqool-brown mb-2">
Email Address <span className="text-nusqool-yellow">*</span>
</label>
<input
type="email"
id="email"
required
className="w-full px-4 py-3 border border-nusqool-brown/20 rounded-sm bg-white focus:outline-none focus:border-nusqool-yellow transition-colors"
/>
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium text-nusqool-brown mb-2">
Message <span className="text-nusqool-yellow">*</span>
</label>
<textarea
id="message"
required
rows={6}
className="w-full px-4 py-3 border border-nusqool-brown/20 rounded-sm bg-white focus:outline-none focus:border-nusqool-yellow transition-colors resize-vertical"
/>
</div>
<button type="submit" className="btn-primary w-full">
Submit
</button>
</form>
<div className="mt-12 text-center space-y-4">
<p className="body-text">Or reach out directly:</p>
<div className="flex items-center justify-center gap-6">
<a
href="mailto:thu@nusqool.net"
className="text-nusqool-brown hover:text-nusqool-yellow transition-colors"
>
thu@nusqool.net
</a>
<a
href="https://instagram.com/connectthu"
target="_blank"
rel="noopener noreferrer"
className="text-nusqool-brown hover:text-nusqool-yellow transition-colors"
>
@connectthu
</a>
<a
href="https://ca.linkedin.com/in/2cre8tive"
target="_blank"
rel="noopener noreferrer"
className="text-nusqool-brown hover:text-nusqool-yellow transition-colors"
>
LinkedIn
</a>
</div>
</div>
</div>
</section>
<Footer />
</main>
);
}

32
src/app/embodiment-circle/page.tsx
View File

@ -2,29 +2,12 @@
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import Navigation from "@/components/Navigation";
export default function EmbodimentCircle() { export default function EmbodimentCircle() {
return ( return (
<main className="bg-nusqool-cream"> <main className="bg-nusqool-cream">
{/* Navigation */} <Navigation />
<nav className="fixed top-0 left-0 right-0 z-50 bg-nusqool-cream/95 backdrop-blur-sm border-b border-nusqool-brown/10">
<div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<Link href="/" className="text-2xl font-serif text-nusqool-yellow font-bold">
Nusqool
</Link>
<div className="flex items-center gap-6">
<a href="#pricing" className="text-nusqool-brown hover:text-nusqool-yellow transition-colors">
Pricing
</a>
<a
href="https://dandelion.nusqool.com/login"
className="px-6 py-2 bg-nusqool-yellow text-nusqool-brown font-medium rounded-sm hover:bg-opacity-90 transition-all"
>
Join Today
</a>
</div>
</div>
</nav>
{/* Hero Section */} {/* Hero Section */}
<section className="relative min-h-[80vh] flex items-center pt-20"> <section className="relative min-h-[80vh] flex items-center pt-20">
@ -662,14 +645,17 @@ export default function EmbodimentCircle() {
</section> </section>
{/* Footer */} {/* Footer */}
<footer className="bg-nusqool-cream py-8 px-6 border-t border-nusqool-brown/10"> <footer className="bg-nusqool-brown text-white py-12 px-6">
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-7xl mx-auto text-center">
<Link href="/" className="text-xl font-serif text-nusqool-yellow font-bold"> <Link href="/" className="text-2xl font-serif text-nusqool-yellow font-bold">
Nusqool Nusqool
</Link> </Link>
<p className="text-nusqool-warmGray text-sm mt-2"> <p className="text-white/60 text-sm mt-2">
Where old souls come to grow new roots Where old souls come to grow new roots
</p> </p>
<div className="border-t border-white/10 mt-8 pt-8 text-white/40 text-sm">
<p>&copy; {new Date().getFullYear()} Nusqool. Rural Ontario, Canada.</p>
</div>
</div> </div>
</footer> </footer>
</main> </main>

150
src/app/events/page.tsx Normal file
View File

@ -0,0 +1,150 @@
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import Newsletter from "@/components/Newsletter";
export const metadata = {
title: "Events — Nusqool",
description: "Upcoming events, workshops, and classes at Nusqool. TRE, Embodiment Circle, Neurogenic Dancing, and more.",
};
const upcomingEvents = [
{
title: "Embodiment Circle — Cohort #5",
date: "January 22 – April 22, 2026",
time: "Thursdays, 7–9pm EST",
description: "A 12-week journey rooted in safety, creativity, courage, and lived wisdom. Guided by a diverse circle of facilitators.",
price: "$1,010 CAD (or $88/month)",
link: "https://dandelion.nusqool.com/login",
featured: true,
},
{
title: "Opening Retreat — Listening to Your Becoming",
date: "Sunday, January 18, 2026",
time: "11:00am – 5:00pm",
description: "In-person retreat at Nusqool, Reaboro, Ontario. Somatic inquiry, Neurogenic Tremoring, Qi Gong Gardening.",
price: "$177 + HST",
link: "https://dandelion.nusqool.com/login",
},
{
title: "Closing Retreat — Celebrating Your Becoming",
date: "Saturday, April 18, 2026",
time: "11:00am – 5:00pm",
description: "In-person retreat at The Farm, Hillsdale, Ontario. Poetry, expressive arts, visual creation, singing, dancing.",
price: "$177 + HST",
link: "https://dandelion.nusqool.com/login",
},
{
title: "TRE Drop-in Practice Sessions",
date: "Bi-weekly Fridays",
time: "12:00 – 1:00pm EST",
description: "Regular practice sessions for those who have completed a TRE intro workshop. Virtual via Zoom.",
price: "Drop-in rate",
link: "https://lu.ma/nusqool",
},
{
title: "Neurogenic Dancing",
date: "Tuesday evenings (multiple dates)",
time: "Evening sessions",
description: "Movement-based sessions combining tremoring with ecstatic dancing to release stress and tension while building body connection.",
price: "$22",
link: "https://lu.ma/nusqool",
},
{
title: "Intro to TRE (Virtual)",
date: "Monthly workshops",
time: "5:00 – 7:00pm EST",
description: "Learn the foundations of Tension and Trauma Release Exercises in a supportive group setting.",
price: "$88",
link: "https://calendly.com/nusqool/connect",
},
];
export default function Events() {
return (
<main>
<Navigation />
{/* Hero */}
<section className="pt-28 pb-16 px-6 bg-nusqool-cream">
<div className="max-w-4xl mx-auto text-center">
<h1 className="heading-xl text-nusqool-brown mb-6">Events</h1>
<p className="body-text max-w-2xl mx-auto">
Join us for workshops, circles, retreats, and weekly practice sessions. All events are designed to help you reconnect with your body, your community, and your true self.
</p>
</div>
</section>
{/* Events List */}
<section className="section-padding bg-white">
<div className="max-w-4xl mx-auto">
<div className="space-y-8">
{upcomingEvents.map((event, index) => (
<div
key={index}
className={`p-8 rounded-sm ${
event.featured
? "bg-nusqool-brown text-white"
: "bg-nusqool-cream"
}`}
>
{event.featured && (
<span className="text-xs uppercase tracking-wider text-nusqool-yellow font-medium mb-2 block">
Featured
</span>
)}
<h3 className={`text-xl font-serif mb-2 ${
event.featured ? "text-nusqool-yellow" : "text-nusqool-brown"
}`}>
{event.title}
</h3>
<div className={`flex flex-wrap gap-4 text-sm mb-4 ${
event.featured ? "text-white/70" : "text-nusqool-warmGray"
}`}>
<span>{event.date}</span>
<span>&#8226;</span>
<span>{event.time}</span>
<span>&#8226;</span>
<span>{event.price}</span>
</div>
<p className={`mb-6 ${
event.featured ? "text-white/80" : "body-text"
} text-sm`}>
{event.description}
</p>
<a
href={event.link}
target="_blank"
rel="noopener noreferrer"
className={event.featured ? "btn-primary" : "btn-secondary text-sm"}
>
Learn More
</a>
</div>
))}
</div>
</div>
</section>
{/* Luma Calendar CTA */}
<section className="section-padding bg-nusqool-sage/10 text-center">
<div className="max-w-2xl mx-auto">
<h2 className="heading-lg text-nusqool-brown mb-6">Full Event Calendar</h2>
<p className="body-text mb-8">
View all upcoming events, register, and add them to your calendar.
</p>
<a
href="https://lu.ma/nusqool"
target="_blank"
rel="noopener noreferrer"
className="btn-primary"
>
View on Lu.ma
</a>
</div>
</section>
<Newsletter />
<Footer />
</main>
);
}

220
src/app/grow/page.tsx Normal file
View File

@ -0,0 +1,220 @@
import Image from "next/image";
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import Newsletter from "@/components/Newsletter";
export const metadata = {
title: "Choose Your Own Growth Adventure — Nusqool",
description: "Leave the city. Step off the grid. Return to your true self. Self-directed retreat experiences at Nusqool.",
};
export default function GrowthAdventure() {
return (
<main>
<Navigation />
{/* Hero */}
<section className="relative pt-28 pb-20 px-6 bg-nusqool-cream">
<div className="max-w-4xl mx-auto text-center">
<h1 className="heading-xl text-nusqool-brown mb-6">
Choose Your Own Growth Adventure
</h1>
<p className="text-xl md:text-2xl font-serif text-nusqool-warmGray italic mb-8">
Leave the city. Step off the grid. Return to your true self.
</p>
<p className="body-text max-w-2xl mx-auto">
What if your retreat was designed by your soul? At Nusqool, you choose your own pace and focus. We walk alongside you through a co-created experience at our century-old rural schoolhouse in Mount Horeb, Ontario.
</p>
</div>
</section>
{/* Chapter 1: The Seed */}
<section className="section-padding bg-white">
<div className="max-w-5xl mx-auto">
<div className="text-center mb-12">
<span className="text-sm uppercase tracking-wider text-nusqool-sage font-medium">Chapter 1</span>
<h2 className="heading-lg text-nusqool-brown mt-2">The Seed</h2>
<p className="body-text mt-4 max-w-2xl mx-auto">Choose your retreat window and set your intention.</p>
</div>
<div className="grid md:grid-cols-2 gap-8">
<div className="p-8 bg-nusqool-cream rounded-sm">
<div className="text-4xl mb-4">&#127793;</div>
<h3 className="text-xl font-serif text-nusqool-brown mb-3">Gentle Drop-In Session</h3>
<p className="text-sm text-nusqool-sage font-medium mb-3">1.5 hours</p>
<p className="body-text text-sm">
Reset and reconnect with your truth. A gentle introduction to the Nusqool experience.
</p>
<a
href="https://calendly.com/nusqool/connect"
target="_blank"
rel="noopener noreferrer"
className="btn-primary mt-6 inline-block text-sm"
>
Book 1.5 Hours
</a>
</div>
<div className="p-8 bg-nusqool-cream rounded-sm">
<div className="text-4xl mb-4">&#127804;</div>
<h3 className="text-xl font-serif text-nusqool-brown mb-3">Deeper Transformation</h3>
<p className="text-sm text-nusqool-sage font-medium mb-3">3 hours</p>
<p className="body-text text-sm">
Step into an extended adventure with more time for exploration, healing, and integration.
</p>
<a
href="https://calendly.com/nusqool/connect"
target="_blank"
rel="noopener noreferrer"
className="btn-primary mt-6 inline-block text-sm"
>
Book 3 Hours
</a>
</div>
</div>
<div className="mt-12 p-8 bg-nusqool-sage/10 rounded-sm text-center">
<p className="body-text">
Upon arrival, select your opening tea from locally-harvested herbs: <span className="font-medium text-nusqool-brown">dandelion, lemon balm, nettle, tulsi, rose, and mint</span> &mdash; setting your intention with the first sip.
</p>
</div>
</div>
</section>
{/* Chapter 2: The Sprout */}
<section className="section-padding bg-nusqool-cream">
<div className="max-w-5xl mx-auto">
<div className="text-center mb-12">
<span className="text-sm uppercase tracking-wider text-nusqool-sage font-medium">Chapter 2</span>
<h2 className="heading-lg text-nusqool-brown mt-2">The Sprout</h2>
<p className="body-text mt-4 max-w-2xl mx-auto">Choose your care modalities.</p>
</div>
<div className="grid md:grid-cols-3 gap-8">
<div className="p-6 bg-white rounded-sm">
<h3 className="text-lg font-serif text-nusqool-brown mb-4">Hands on Healing</h3>
<ul className="space-y-3 body-text text-sm">
<li className="flex items-start">
<span className="text-nusqool-yellow mr-2">&#8226;</span>
Nervous System Calibration
</li>
<li className="flex items-start">
<span className="text-nusqool-yellow mr-2">&#8226;</span>
Access Bars (32-point head energy practice)
</li>
</ul>
</div>
<div className="p-6 bg-white rounded-sm">
<h3 className="text-lg font-serif text-nusqool-brown mb-4">Guided Movement</h3>
<ul className="space-y-3 body-text text-sm">
<li className="flex items-start">
<span className="text-nusqool-yellow mr-2">&#8226;</span>
TRE (Trauma &amp; Tension Release Exercises)
</li>
<li className="flex items-start">
<span className="text-nusqool-yellow mr-2">&#8226;</span>
Medical Qi Gong
</li>
</ul>
</div>
<div className="p-6 bg-white rounded-sm">
<h3 className="text-lg font-serif text-nusqool-brown mb-4">Soul Conversations</h3>
<ul className="space-y-3 body-text text-sm">
<li className="flex items-start">
<span className="text-nusqool-yellow mr-2">&#8226;</span>
Coaching Conversation
</li>
<li className="flex items-start">
<span className="text-nusqool-yellow mr-2">&#8226;</span>
Intuitive Somatic Coaching
</li>
</ul>
</div>
</div>
</div>
</section>
{/* Chapter 3: Bloom */}
<section className="section-padding bg-white">
<div className="max-w-4xl mx-auto text-center">
<span className="text-sm uppercase tracking-wider text-nusqool-sage font-medium">Chapter 3</span>
<h2 className="heading-lg text-nusqool-brown mt-2 mb-6">Bloom</h2>
<p className="body-text max-w-2xl mx-auto mb-8">
After your session, choose your own integration path: explore the grounds, rest in hammocks, journal, walk barefoot in the grass, or sit in quiet reflection.
</p>
</div>
</section>
{/* About the Guide */}
<section className="section-padding bg-nusqool-cream">
<div className="max-w-5xl mx-auto">
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div className="relative aspect-[4/5] rounded-sm overflow-hidden">
<Image
src="/images/coaching-portrait.jpg"
alt="Thu Nguyen"
fill
className="object-cover"
/>
</div>
<div>
<h2 className="heading-lg text-nusqool-brown mb-6">Meet Your Guide</h2>
<p className="body-text mb-4">
<strong>Thu Nguyen</strong> (she/her) is a somatic leadership coach and Nusqool founder. PCC-certified through the International Coach Federation with expertise in Co-Active Coaching, neuroscience of change, relational trauma coaching, and financial trauma.
</p>
<p className="body-text">
Her personal journey navigated cancer, chronic illness, burnout, complex PTSD, and near-death experiences, redirecting her toward body-centered healing work. She brings 20 years of tech startup experience across Toronto and Silicon Valley.
</p>
</div>
</div>
</div>
</section>
{/* FAQ */}
<section className="section-padding bg-white">
<div className="max-w-3xl mx-auto">
<h2 className="heading-lg text-nusqool-brown mb-12 text-center">Frequently Asked Questions</h2>
<div className="space-y-8">
<div>
<h3 className="text-xl font-serif text-nusqool-brown mb-3">Is this for me?</h3>
<p className="body-text">
Yes, if you&apos;re seeking reconnection, nervous system regulation, or creative birth. No prior experience necessary.
</p>
</div>
<div>
<h3 className="text-xl font-serif text-nusqool-brown mb-3">How does it work?</h3>
<ol className="space-y-2 body-text list-decimal pl-6">
<li>Book your adventure and complete the intake form</li>
<li>Optional clarification call</li>
<li>Arrive in comfortable clothing</li>
<li>Bring a journal and pen</li>
<li>Let the land facilitate your transformation</li>
</ol>
</div>
<div>
<h3 className="text-xl font-serif text-nusqool-brown mb-3">Where is Nusqool?</h3>
<p className="body-text">
Mount Horeb x Hillhead Road, north of Highway 115 on Route 35 (Kawartha Lakes). About 1.5 hours from Toronto, 30 minutes from Peterborough. GO Bus alternative available from the Oshawa-Peterborough route with pickup option.
</p>
</div>
<div>
<h3 className="text-xl font-serif text-nusqool-brown mb-3">What about meals?</h3>
<p className="body-text">
Snacks are included. Optional nourishing soup and salad available for $22, or bring your own. Nearby chip truck (10 min) and Lindsay dining options (20 min).
</p>
</div>
</div>
</div>
</section>
<Newsletter />
<Footer />
</main>
);
}

275
src/app/page.tsx
View File

@ -1,129 +1,14 @@
"use client"; "use client";
import { useState } from "react";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link";
// Navigation Component import Navigation from "@/components/Navigation";
function Navigation() { import Footer from "@/components/Footer";
const [isOpen, setIsOpen] = useState(false);
const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
const menuItems = [
{
label: "Work with Thu",
submenu: [
"About Thu",
"Growth Adventure",
"Embodiment Circle",
"TRE",
"Coaching",
"Testimonials",
],
},
{ label: "Work with Chris", submenu: null },
{ label: "Events", submenu: null },
{ label: "Peace Pole", submenu: null },
{ label: "Contact Us", submenu: null },
];
return (
<nav className="fixed top-0 left-0 right-0 z-50 bg-nusqool-cream/95 backdrop-blur-sm">
<div className="max-w-7xl mx-auto px-6 py-4">
<div className="flex items-center justify-between">
{/* Logo */}
<a href="/" className="flex items-center">
<span className="text-2xl md:text-3xl font-serif text-nusqool-yellow font-bold tracking-wide">
Nusqool
</span>
</a>
{/* Desktop Menu */}
<div className="hidden lg:flex items-center space-x-8">
{menuItems.map((item) => (
<div
key={item.label}
className="relative"
onMouseEnter={() => setActiveDropdown(item.label)}
onMouseLeave={() => setActiveDropdown(null)}
>
<button className="text-nusqool-brown hover:text-nusqool-yellow transition-colors py-2">
{item.label}
{item.submenu && (
<span className="ml-1 text-xs">▼</span>
)}
</button>
{item.submenu && activeDropdown === item.label && (
<div className="absolute top-full left-0 bg-white shadow-lg rounded-sm py-2 min-w-48">
{item.submenu.map((subItem) => (
<a
key={subItem}
href="#"
className="block px-4 py-2 text-nusqool-brown hover:bg-nusqool-cream hover:text-nusqool-yellow transition-colors"
>
{subItem}
</a>
))}
</div>
)}
</div>
))}
<button className="text-nusqool-brown hover:text-nusqool-yellow transition-colors">
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
</button>
</div>
{/* Mobile Menu Button */}
<button
className="lg:hidden text-nusqool-brown"
onClick={() => setIsOpen(!isOpen)}
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
{isOpen ? (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
) : (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
)}
</svg>
</button>
</div>
{/* Mobile Menu */}
{isOpen && (
<div className="lg:hidden mt-4 pb-4 border-t border-nusqool-brown/10">
{menuItems.map((item) => (
<div key={item.label} className="py-2">
<a href="#" className="block text-nusqool-brown hover:text-nusqool-yellow py-2">
{item.label}
</a>
{item.submenu && (
<div className="pl-4">
{item.submenu.map((subItem) => (
<a
key={subItem}
href="#"
className="block text-nusqool-warmGray hover:text-nusqool-yellow py-1 text-sm"
>
{subItem}
</a>
))}
</div>
)}
</div>
))}
</div>
)}
</div>
</nav>
);
}
// Hero Section // Hero Section
function Hero() { function Hero() {
return ( return (
<section className="relative min-h-screen flex items-center justify-center"> <section className="relative min-h-screen flex items-center justify-center">
{/* Background Image */}
<Image <Image
src="/dandelion-hero.png" src="/dandelion-hero.png"
alt="Dandelion meadow in golden sunlight" alt="Dandelion meadow in golden sunlight"
@ -131,10 +16,7 @@ function Hero() {
priority priority
className="object-cover" className="object-cover"
/> />
{/* Overlay for text readability */}
<div className="absolute inset-0 bg-gradient-to-b from-nusqool-cream/70 via-nusqool-cream/40 to-nusqool-cream/80" /> <div className="absolute inset-0 bg-gradient-to-b from-nusqool-cream/70 via-nusqool-cream/40 to-nusqool-cream/80" />
<div className="relative z-10 text-center max-w-4xl mx-auto px-6 pt-20"> <div className="relative z-10 text-center max-w-4xl mx-auto px-6 pt-20">
<h1 className="heading-xl text-nusqool-brown mb-6"> <h1 className="heading-xl text-nusqool-brown mb-6">
Nusqool: where old souls come to grow new roots Nusqool: where old souls come to grow new roots
@ -142,12 +24,10 @@ function Hero() {
<p className="body-text max-w-2xl mx-auto mb-10"> <p className="body-text max-w-2xl mx-auto mb-10">
A sanctuary for healing, growth, and reconnection in the heart of rural Ontario. A sanctuary for healing, growth, and reconnection in the heart of rural Ontario.
</p> </p>
<a href="https://dandelion.nusqool.com" className="btn-primary"> <a href="https://dandelion.nusqool.com/login" className="btn-primary">
Join the Next Embodiment Circle Join the Next Embodiment Circle
</a> </a>
</div> </div>
{/* Scroll indicator */}
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce"> <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
<svg className="w-6 h-6 text-nusqool-brown/50" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-6 h-6 text-nusqool-brown/50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
@ -163,17 +43,14 @@ function About() {
<section id="about" className="section-padding bg-white"> <section id="about" className="section-padding bg-white">
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center"> <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
{/* Image */} <div className="relative aspect-[4/5] rounded-sm overflow-hidden">
<div className="relative aspect-[4/5] bg-nusqool-sage/20 rounded-sm overflow-hidden"> <Image
<div className="absolute inset-0 flex items-center justify-center text-nusqool-sage/40"> src="/images/thu-portrait.jpg"
<svg className="w-24 h-24" fill="currentColor" viewBox="0 0 24 24"> alt="Thu Nguyen, founder of Nusqool"
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/> fill
</svg> className="object-cover"
</div> />
<div className="absolute bottom-0 left-0 right-0 h-1/3 bg-gradient-to-t from-nusqool-brown/20 to-transparent" />
</div> </div>
{/* Content */}
<div> <div>
<h2 className="heading-lg text-nusqool-brown mb-6"> <h2 className="heading-lg text-nusqool-brown mb-6">
There comes a moment when your old ways of being no longer fits your becoming There comes a moment when your old ways of being no longer fits your becoming
@ -193,9 +70,9 @@ function About() {
</p> </p>
</div> </div>
<div className="mt-8"> <div className="mt-8">
<a href="#" className="btn-secondary"> <Link href="/about-thu" className="btn-secondary">
Learn more about Thu Learn more about Thu
</a> </Link>
</div> </div>
</div> </div>
</div> </div>
@ -210,7 +87,6 @@ function TheSpace() {
<section className="section-padding bg-nusqool-cream"> <section className="section-padding bg-nusqool-cream">
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center"> <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
{/* Content */}
<div className="lg:order-2"> <div className="lg:order-2">
<h2 className="heading-lg text-nusqool-brown mb-6"> <h2 className="heading-lg text-nusqool-brown mb-6">
So we converted an old school house into a space for healing, creative expression So we converted an old school house into a space for healing, creative expression
@ -230,13 +106,19 @@ function TheSpace() {
</p> </p>
</div> </div>
</div> </div>
{/* Image Grid */}
<div className="lg:order-1 grid grid-cols-2 gap-4"> <div className="lg:order-1 grid grid-cols-2 gap-4">
<div className="aspect-square bg-nusqool-sage/20 rounded-sm" /> <div className="relative aspect-square rounded-sm overflow-hidden">
<div className="aspect-square bg-nusqool-yellow/20 rounded-sm" /> <Image src="/images/tre-nature.jpg" alt="Nature at Nusqool" fill className="object-cover" />
<div className="aspect-square bg-nusqool-brown/10 rounded-sm" /> </div>
<div className="aspect-square bg-nusqool-sage/30 rounded-sm" /> <div className="relative aspect-square rounded-sm overflow-hidden">
<Image src="/images/retreat-opening.jpg" alt="Retreat at Nusqool" fill className="object-cover" />
</div>
<div className="relative aspect-square rounded-sm overflow-hidden">
<Image src="/images/tre-outdoors.jpg" alt="Outdoor practice" fill className="object-cover" />
</div>
<div className="relative aspect-square rounded-sm overflow-hidden">
<Image src="/images/caretent.jpg" alt="Care Tent" fill className="object-cover" />
</div>
</div> </div>
</div> </div>
</div> </div>
@ -250,32 +132,38 @@ function Services() {
{ {
title: "Virtual Sessions", title: "Virtual Sessions",
description: "1:1 support that meets you where you are — weaving somatics, coaching, and embodied leadership", description: "1:1 support that meets you where you are — weaving somatics, coaching, and embodied leadership",
icon: "💻", icon: "\uD83D\uDCBB",
href: "/coaching",
}, },
{ {
title: "In Person Sessions", title: "In Person Sessions",
description: "Custom days at Nusqool including self-reflection with tea, movement, nature, and deep rest", description: "Custom days at Nusqool including self-reflection with tea, movement, nature, and deep rest",
icon: "🌿", icon: "\uD83C\uDF3F",
href: "/grow",
}, },
{ {
title: "Group Workshops", title: "Group Workshops",
description: "Rooted in lived experience and uplifting collaborations", description: "Rooted in lived experience and uplifting collaborations",
icon: "👥", icon: "\uD83D\uDC65",
href: "/events",
}, },
{ {
title: "Team Building & Offsites", title: "Team Building & Offsites",
description: "Indoor and outdoor space for groups to slow down and reconnect", description: "Indoor and outdoor space for groups to slow down and reconnect",
icon: "🏡", icon: "\uD83C\uDFE1",
href: "/grow",
}, },
{ {
title: "Keynotes & Speaking", title: "Keynotes & Speaking",
description: "Topics include authenticity, worthiness, belonging, burnout, and nervous system healing", description: "Topics include authenticity, worthiness, belonging, burnout, and nervous system healing",
icon: "🎤", icon: "\uD83C\uDFA4",
href: "/coaching",
}, },
{ {
title: "Neurogenic Dancing", title: "Neurogenic Dancing",
description: "Music and movement for conscious gatherings, weaving Ecstatic Dance with Neurogenic Tremoring", description: "Music and movement for conscious gatherings, weaving Ecstatic Dance with Neurogenic Tremoring",
icon: "💃", icon: "\uD83D\uDC83",
href: "/events",
}, },
]; ];
@ -295,8 +183,9 @@ function Services() {
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{services.map((service, index) => ( {services.map((service, index) => (
<div <Link
key={index} key={index}
href={service.href}
className="group p-8 bg-nusqool-cream rounded-sm hover:shadow-lg transition-all duration-300" className="group p-8 bg-nusqool-cream rounded-sm hover:shadow-lg transition-all duration-300"
> >
<div className="text-4xl mb-4">{service.icon}</div> <div className="text-4xl mb-4">{service.icon}</div>
@ -304,7 +193,7 @@ function Services() {
{service.title} {service.title}
</h3> </h3>
<p className="body-text text-sm">{service.description}</p> <p className="body-text text-sm">{service.description}</p>
</div> </Link>
))} ))}
</div> </div>
</div> </div>
@ -318,16 +207,14 @@ function CareTent() {
<section className="section-padding bg-nusqool-sage/10"> <section className="section-padding bg-nusqool-sage/10">
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center"> <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
{/* Image */} <div className="relative aspect-video rounded-sm overflow-hidden">
<div className="relative aspect-video bg-nusqool-sage/20 rounded-sm overflow-hidden"> <Image
<div className="absolute inset-0 flex items-center justify-center text-nusqool-sage/40"> src="/images/caretent.jpg"
<svg className="w-16 h-16" fill="currentColor" viewBox="0 0 24 24"> alt="The Care Tent at Coralus UnSummit 2025"
<path d="M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"/> fill
</svg> className="object-cover"
</div> />
</div> </div>
{/* Content */}
<div> <div>
<span className="text-sm uppercase tracking-wider text-nusqool-sage font-medium"> <span className="text-sm uppercase tracking-wider text-nusqool-sage font-medium">
Pop-Up Sanctuary Pop-Up Sanctuary
@ -343,27 +230,27 @@ function CareTent() {
</p> </p>
<ul className="space-y-2 pl-4"> <ul className="space-y-2 pl-4">
<li className="flex items-start"> <li className="flex items-start">
<span className="text-nusqool-yellow mr-2">•</span> <span className="text-nusqool-yellow mr-2">&#8226;</span>
Rest spaces with hammocks, rugs, and pillows Rest spaces with hammocks, rugs, and pillows
</li> </li>
<li className="flex items-start"> <li className="flex items-start">
<span className="text-nusqool-yellow mr-2">•</span> <span className="text-nusqool-yellow mr-2">&#8226;</span>
Self-guided practices and art supplies Self-guided practices and art supplies
</li> </li>
<li className="flex items-start"> <li className="flex items-start">
<span className="text-nusqool-yellow mr-2">•</span> <span className="text-nusqool-yellow mr-2">&#8226;</span>
Nervous system reset tools Nervous system reset tools
</li> </li>
<li className="flex items-start"> <li className="flex items-start">
<span className="text-nusqool-yellow mr-2">•</span> <span className="text-nusqool-yellow mr-2">&#8226;</span>
Optional 1:1 somatic sessions Optional 1:1 somatic sessions
</li> </li>
</ul> </ul>
</div> </div>
<div className="mt-8"> <div className="mt-8">
<a href="#" className="btn-primary"> <Link href="/care-tent" className="btn-primary">
Get in touch Get in touch
</a> </Link>
</div> </div>
</div> </div>
</div> </div>
@ -389,14 +276,6 @@ function Manifesto() {
<span className="text-nusqool-yellow font-medium"> but Transformation.</span> <span className="text-nusqool-yellow font-medium"> but Transformation.</span>
</p> </p>
</div> </div>
<div className="mt-10">
<a
href="#"
className="inline-block px-8 py-3 bg-nusqool-yellow text-nusqool-brown font-medium rounded-sm hover:bg-opacity-90 transition-all duration-300"
>
Read our Dandelion Manifesto
</a>
</div>
</div> </div>
</section> </section>
); );
@ -457,54 +336,6 @@ function Newsletter() {
); );
} }
// Footer
function Footer() {
return (
<footer className="bg-nusqool-brown text-white py-12 px-6">
<div className="max-w-7xl mx-auto">
<div className="grid md:grid-cols-3 gap-8 items-center">
{/* Logo */}
<div>
<span className="text-2xl font-serif text-nusqool-yellow font-bold">
Nusqool
</span>
<p className="text-white/60 mt-2 text-sm">
Where old souls come to grow new roots
</p>
</div>
{/* Social */}
<div className="text-center">
<a
href="https://instagram.com/nusqool"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center text-white/80 hover:text-nusqool-yellow transition-colors"
>
<svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
</svg>
@nusqool
</a>
</div>
{/* Press */}
<div className="text-right">
<p className="text-white/60 text-sm">
Featured in <span className="text-white">Toronto Life</span>
</p>
<p className="text-white/40 text-xs">October 2020</p>
</div>
</div>
<div className="border-t border-white/10 mt-8 pt-8 text-center text-white/40 text-sm">
<p>© {new Date().getFullYear()} Nusqool. Rural Ontario, Canada.</p>
</div>
</div>
</footer>
);
}
// Main Page Component // Main Page Component
export default function Home() { export default function Home() {
return ( return (

123
src/app/peace-pole/page.tsx Normal file
View File

@ -0,0 +1,123 @@
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import Newsletter from "@/components/Newsletter";
import Link from "next/link";
export const metadata = {
title: "Peace Pole — Nusqool",
description: "May Peace Prevail on Earth. A peace pole planted at Nusqool in Kawartha Lakes, Ontario.",
};
const prayers = [
{
text: "We ask that the planting of this peace pole becomes a perpetual prayer for peace, a beacon of hope, and a reminder that we are all connected in our desire for a more peaceful world.",
author: "JM",
},
{
text: "May we be filled with so much love and grace, that every action we perform is gentle, that every word we speak is kind, and that every thought we think is compassionate.",
author: "PK",
},
{
text: "Where those who have forgotten to listen, begin to. Where those who have forgotten to feel, remember. Where those who have forgotten their belonging, come home.",
author: "LT",
},
];
export default function PeacePole() {
return (
<main>
<Navigation />
{/* Hero */}
<section className="pt-28 pb-20 px-6 bg-nusqool-brown text-white">
<div className="max-w-4xl mx-auto text-center">
<h1 className="heading-xl text-nusqool-yellow mb-6">
May Peace Prevail on Earth
</h1>
<p className="text-white/80 text-lg max-w-2xl mx-auto">
Over 250,000 peace poles exist worldwide in communities, schools, parks, and sacred spaces, representing collective intentions for global peace.
</p>
</div>
</section>
{/* About */}
<section className="section-padding bg-white">
<div className="max-w-4xl mx-auto">
<div className="space-y-6 body-text">
<p>
Our peace pole was planted in <strong>Kawartha Lakes at Nusqool in July 2023</strong>. It stands as a symbol of community peace and intention.
</p>
<p>
We encourage community participation through peace prayers and drawings. A time capsule is being created with wishes from friends and communities around the world.
</p>
</div>
</div>
</section>
{/* Why a Peace Pole */}
<section className="section-padding bg-nusqool-cream">
<div className="max-w-4xl mx-auto">
<h2 className="heading-lg text-nusqool-brown mb-8 text-center">
So why put a Peace Pole in an old school house?
</h2>
<div className="space-y-6 body-text">
<p>
This schoolhouse intends to serve as a space where visitors can slow down, connect with nature, and experience peace and joy. The peace pole was inspired by Masami Saionji&apos;s healing story and the global peace pole movement.
</p>
<p>
Our pole is now listed on{" "}
<a
href="https://www.worldpeace.org/peace-pole-map-2/"
target="_blank"
rel="noopener noreferrer"
className="text-nusqool-yellow hover:underline"
>
WorldPeace.org
</a>{" "}
as a community resource, connecting us to a worldwide network of peace intentions.
</p>
</div>
</div>
</section>
{/* Prayers */}
<section className="section-padding bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="heading-lg text-nusqool-brown mb-12 text-center">Prayers for Peace</h2>
<div className="space-y-8">
{prayers.map((prayer, index) => (
<blockquote
key={index}
className="p-8 bg-nusqool-cream rounded-sm"
>
<p className="font-serif text-lg text-nusqool-brown italic leading-relaxed">
&ldquo;{prayer.text}&rdquo;
</p>
<footer className="mt-4 text-nusqool-warmGray font-medium">
&mdash; {prayer.author}
</footer>
</blockquote>
))}
</div>
</div>
</section>
{/* Submit Prayer */}
<section className="section-padding bg-nusqool-sage/10 text-center">
<div className="max-w-2xl mx-auto">
<h2 className="heading-lg text-nusqool-brown mb-6">Share Your Prayer for Peace</h2>
<p className="body-text mb-8">
We invite you to add your peace prayer to our growing collection and time capsule.
</p>
<Link href="/contact-thu" className="btn-primary">
Send Your Peace Prayer
</Link>
</div>
</section>
<Newsletter />
<Footer />
</main>
);
}

105
src/app/testimonials/page.tsx Normal file
View File

@ -0,0 +1,105 @@
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import Newsletter from "@/components/Newsletter";
export const metadata = {
title: "Testimonials — Nusqool",
description: "What people are saying about working with Thu Nguyen at Nusqool.",
};
const testimonials = [
{
quote: "Thu has a deep insight, understanding of and compassion for type A or driven personalities. She has experienced the extreme end of burnout and has a unique take on how coaching can help people through these challenges. She brings a really beautiful combination of both Eastern and Western approaches to coaching, allowing her to create a holistic approach that addresses the mind, body, and spirit.",
name: "Jane Murray",
title: "CEO, Peacebeam",
},
{
quote: "Thu possesses that rare combination of incredible gentleness and immense strength. From my first conversation with her I felt the genuine warmth of her care and compassion and I was immediately struck by her ability to impart wisdom with great kindness. She has put me onto a path of great healing; mind, body and spirit.",
name: "Ideshini Naidoo",
title: "Head of Engineering - Legal Practice, Thomson Reuters",
},
{
quote: "Thu's greatest strength is that she walks the talk. Unlike other coaches, Thu is not trying to sell you a formula or a framework. She is deeply committed to her own growth and healing, and she brings that authenticity to every interaction. She creates a safe space where you can be vulnerable and honest, and she meets you with compassion and wisdom.",
name: "Patrick Suen",
title: "",
},
{
quote: "Thu has been a great coach. As an independent entrepreneur and researcher I wanted to make sure I had the right support system in place to navigate the challenges of building a business while staying true to my values. Thu helped me see my blind spots, develop my leadership capacity, and build resilience for the long journey ahead.",
name: "Anonymous",
title: "Partner, Probably Studio",
},
{
quote: "Thu's greatest strength is listening. More than being heard, Thu can decrypt what is being said and what is not being said. She has an uncanny ability to reflect back what you're feeling in a way that makes you feel truly seen and understood. That depth of listening is a rare gift.",
name: "Anonymous",
title: "",
},
{
quote: "The thing that I like most about working with Thu as her coaching client is her openness, her vulnerability, and her willingness to share her own journey. It makes the coaching relationship feel reciprocal and genuine, not transactional. She creates a container of trust that allows you to go deeper than you thought possible.",
name: "Anonymous",
title: "",
},
];
export default function Testimonials() {
return (
<main>
<Navigation />
{/* Hero */}
<section className="pt-28 pb-16 px-6 bg-nusqool-cream">
<div className="max-w-4xl mx-auto text-center">
<h1 className="heading-xl text-nusqool-brown mb-6">Testimonials</h1>
<p className="body-text max-w-2xl mx-auto">
What people are saying about working with Thu.
</p>
</div>
</section>
{/* Testimonials Grid */}
<section className="section-padding bg-white">
<div className="max-w-5xl mx-auto">
<div className="grid md:grid-cols-2 gap-8">
{testimonials.map((testimonial, index) => (
<div
key={index}
className="p-8 bg-nusqool-cream rounded-sm"
>
<div className="text-4xl text-nusqool-yellow/40 font-serif mb-4">&ldquo;</div>
<blockquote className="body-text text-sm mb-6 italic">
{testimonial.quote}
</blockquote>
<div>
<p className="font-medium text-nusqool-brown">{testimonial.name}</p>
{testimonial.title && (
<p className="text-sm text-nusqool-warmGray">{testimonial.title}</p>
)}
</div>
</div>
))}
</div>
</div>
</section>
{/* CTA */}
<section className="section-padding bg-nusqool-brown text-white text-center">
<div className="max-w-2xl mx-auto">
<h2 className="heading-lg text-nusqool-yellow mb-6">Ready to Begin Your Journey?</h2>
<p className="text-white/80 text-lg mb-8">
Book a free consultation to explore how we can work together.
</p>
<a
href="https://calendly.com/nusqool/connect"
target="_blank"
rel="noopener noreferrer"
className="btn-primary"
>
Book a Call
</a>
</div>
</section>
<Newsletter />
<Footer />
</main>
);
}

168
src/app/tre/page.tsx Normal file
View File

@ -0,0 +1,168 @@
import Image from "next/image";
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import Newsletter from "@/components/Newsletter";
export const metadata = {
title: "TRE - Tension and Stress Release Exercises — Nusqool",
description: "TRE is a gentle and effective way to ground your nervous system and let go of tension and stress.",
};
export default function TRE() {
return (
<main>
<Navigation />
{/* Hero */}
<section className="pt-28 pb-16 px-6 bg-nusqool-cream">
<div className="max-w-4xl mx-auto text-center">
<h1 className="heading-xl text-nusqool-brown mb-6">
TRE&reg; is a gentle and effective way to ground your nervous system and let go of tension and stress
</h1>
</div>
</section>
{/* What is TRE */}
<section className="section-padding bg-white">
<div className="max-w-5xl mx-auto">
<div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
<div className="relative aspect-[4/3] rounded-sm overflow-hidden">
<Image
src="/images/tre-session.jpg"
alt="TRE session"
fill
className="object-cover"
/>
</div>
<div>
<h2 className="heading-lg text-nusqool-brown mb-6">What is TRE&reg;?</h2>
<div className="space-y-4 body-text">
<p>
Tension and Trauma Release Exercises are a simple set of exercises that trigger a natural gentle tremor response in the body to reboot our overprotective reflexes in our nervous system.
</p>
<p>
This shaking can release deep rooted tension and stress accumulated from the body. These gentle tremors reverberate from the psoas muscles, along the spine throughout the body from the sacrum to the cranium, allowing the body and nervous system to feel at ease, grounded and safe.
</p>
<p>
The process is simple, can be done in the comfort of your own home, and the goal is to enable you to get rooted into a self-directed practice where you can trust that the body will do its own healing and shake off overwhelming experiences.
</p>
</div>
</div>
</div>
</div>
</section>
{/* Science */}
<section className="section-padding bg-nusqool-cream">
<div className="max-w-4xl mx-auto">
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div>
<h2 className="heading-lg text-nusqool-brown mb-6">The Science</h2>
<div className="space-y-4 body-text">
<p>
The body physiology of trauma is relatively simple while the psychology of trauma is complex. In trauma, the body and brain are stuck in patterns of survival, of fight-or-flight or freeze, and have their set of defences up.
</p>
<p>
TRE resets and down-regulates our neurophysiology. This technique is also used to shake off everyday circumstances of life &mdash; stressful and toxic workplaces, natural disasters, and life transitions.
</p>
<p>
The technique was created by <strong>Dr. David Berceli</strong>, inspired by his work providing trauma relief workshops and designing recovery programs for organizations around the world.
</p>
</div>
</div>
<div className="relative aspect-[4/3] rounded-sm overflow-hidden">
<Image
src="/images/tre-outdoors.jpg"
alt="TRE outdoors practice"
fill
className="object-cover"
/>
</div>
</div>
</div>
</section>
{/* Quote */}
<section className="section-padding bg-nusqool-brown text-white">
<div className="max-w-3xl mx-auto text-center">
<blockquote>
<p className="text-xl md:text-2xl font-serif italic leading-relaxed text-white/90">
&ldquo;One of the best things each of us can do is to metabolize our pain and heal our trauma. When we heal our nervous systems, we heal the world.&rdquo;
</p>
<footer className="mt-6 text-nusqool-yellow font-medium">
&mdash; Resmaa Menakem
</footer>
</blockquote>
</div>
</section>
{/* Learn with Thu */}
<section className="section-padding bg-white">
<div className="max-w-5xl mx-auto">
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div className="relative aspect-[4/3] rounded-sm overflow-hidden">
<Image
src="/images/tre-nature.jpg"
alt="Nature and healing"
fill
className="object-cover"
/>
</div>
<div>
<h2 className="heading-lg text-nusqool-brown mb-6">Learn TRE&reg; with Thu</h2>
<div className="space-y-4 body-text">
<p>
I offer monthly TRE&reg; Intro workshops for groups and on-going one-to-one TRE&reg; sessions. You will learn the exercises, learn how to feel and work with the tremors, and learn how to self-regulate the process.
</p>
<p>
For online sessions, you will need a yoga mat and a camera angle to show the length of the mat.
</p>
<p>
I am based outside of Toronto (EST) and offer TRE classes virtually to clients all over the world through Zoom. If you can&apos;t find a time that works in your time zone, feel free to contact me for a 1:1 introductory class.
</p>
</div>
<div className="mt-8 flex flex-wrap gap-4">
<a
href="https://calendly.com/nusqool/connect"
target="_blank"
rel="noopener noreferrer"
className="btn-primary"
>
Book with Thu
</a>
<a
href="https://calendly.com/nusqool/connect"
target="_blank"
rel="noopener noreferrer"
className="btn-secondary"
>
Book a 30 min Consult
</a>
</div>
</div>
</div>
</div>
</section>
{/* Weekly Practice */}
<section className="section-padding bg-nusqool-sage/10">
<div className="max-w-3xl mx-auto text-center">
<h2 className="heading-lg text-nusqool-brown mb-6">Weekly Practice Sessions</h2>
<p className="body-text mb-8">
If you&apos;d like to get back into a regular practice or deepen your practice, we have weekly drop-ins on Tuesdays and Fridays. Check the calendar and plan to drop in!
</p>
<a href="/events" className="btn-primary">
View Schedule
</a>
</div>
</section>
<Newsletter />
<Footer />
</main>
);
}

111
src/app/work-with-chris/page.tsx Normal file
View File

@ -0,0 +1,111 @@
import Image from "next/image";
import Link from "next/link";
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import Newsletter from "@/components/Newsletter";
export const metadata = {
title: "Work with Chris — Nusqool",
description: "New school audio engineering and mastering studio. Chris Harris has 20+ years experience in audio production.",
};
const portfolio = [
{ title: "Tiesto: The Business Remix Competition", date: "Apr 11, 2021" },
{ title: "Peacebeam: Creating a Forgiveness Practice", date: "Mar 5, 2021" },
{ title: "Peacebeam: Heartbreak Series", date: "Feb 26, 2021" },
{ title: "Peacebeam: How To Be Kind", date: "Feb 1, 2021" },
{ title: "Tyler Bopp: Kind, Sober & Fully Dressed", date: "Jan 22, 2021" },
{ title: "The Mindful Gupshup Podcast", date: "Nov 2, 2020" },
{ title: "Peacebeam: Letters to A Young Woman", date: "Nov 2, 2020" },
{ title: "Tombz the Nish", date: "Aug 19, 2020" },
{ title: "Hammock Stories", date: "Aug 19, 2020", description: "A podcast featuring everyday heroes in a hammock." },
];
export default function WorkWithChris() {
return (
<main>
<Navigation />
{/* Hero */}
<section className="relative pt-28 pb-20 px-6 bg-nusqool-brown text-white">
<div className="max-w-4xl mx-auto text-center">
<h1 className="heading-xl text-nusqool-yellow mb-6">
New school audio engineering and mastering studio
</h1>
<Link href="/contact-chris" className="btn-primary">
Get Connected
</Link>
</div>
</section>
{/* About Chris */}
<section className="section-padding bg-white">
<div className="max-w-5xl mx-auto">
<div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
<div className="relative aspect-[4/3] rounded-sm overflow-hidden">
<Image
src="/images/chris-portrait.jpg"
alt="Chris Harris"
fill
className="object-cover"
/>
</div>
<div>
<h2 className="heading-lg text-nusqool-brown mb-6">Meet Chris Harris</h2>
<p className="body-text">
Chris is the Chief Engineer at Nusqool Audio and has 20+ years experience in audio production. He has worked with top artists in Toronto and collaborated with musicians at the Rehearsal Factory. He makes music and has been featured at many events such as the World of Drum and Bass.
</p>
<div className="mt-8">
<Link href="/contact-chris" className="btn-secondary">
Contact Chris
</Link>
</div>
</div>
</div>
</div>
</section>
{/* Studio Image */}
<section className="section-padding bg-nusqool-cream">
<div className="max-w-5xl mx-auto">
<div className="relative aspect-video rounded-sm overflow-hidden mb-8">
<Image
src="/images/chris-studio.jpg"
alt="Nusqool Audio Studio"
fill
className="object-cover"
/>
</div>
</div>
</section>
{/* Portfolio */}
<section className="section-padding bg-white">
<div className="max-w-3xl mx-auto">
<h2 className="heading-lg text-nusqool-brown mb-12 text-center">Sounds We&apos;ve Elevated</h2>
<div className="space-y-6">
{portfolio.map((item, index) => (
<div
key={index}
className="flex items-center justify-between p-4 bg-nusqool-cream rounded-sm hover:shadow-md transition-shadow"
>
<div>
<h3 className="font-serif text-nusqool-brown">{item.title}</h3>
{item.description && (
<p className="text-sm text-nusqool-warmGray mt-1">{item.description}</p>
)}
</div>
<span className="text-sm text-nusqool-warmGray whitespace-nowrap ml-4">{item.date}</span>
</div>
))}
</div>
</div>
</section>
<Newsletter />
<Footer />
</main>
);
}

67
src/components/Footer.tsx Normal file
View File

@ -0,0 +1,67 @@
export default function Footer() {
return (
<footer className="bg-nusqool-brown text-white py-12 px-6">
<div className="max-w-7xl mx-auto">
<div className="grid md:grid-cols-3 gap-8 items-center">
<div>
<span className="text-2xl font-serif text-nusqool-yellow font-bold">
Nusqool
</span>
<p className="text-white/60 mt-2 text-sm">
Where old souls come to grow new roots
</p>
</div>
<div className="text-center space-y-2">
<a
href="https://instagram.com/nusqool"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center text-white/80 hover:text-nusqool-yellow transition-colors"
>
<svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
</svg>
@nusqool
</a>
<div className="flex items-center justify-center space-x-4">
<a
href="https://instagram.com/connectthu"
target="_blank"
rel="noopener noreferrer"
className="text-white/60 hover:text-nusqool-yellow transition-colors text-sm"
>
@connectthu
</a>
<a
href="https://ca.linkedin.com/in/2cre8tive"
target="_blank"
rel="noopener noreferrer"
className="text-white/60 hover:text-nusqool-yellow transition-colors text-sm"
>
LinkedIn
</a>
<a
href="mailto:thu@nusqool.net"
className="text-white/60 hover:text-nusqool-yellow transition-colors text-sm"
>
thu@nusqool.net
</a>
</div>
</div>
<div className="text-right">
<p className="text-white/60 text-sm">
Featured in <span className="text-white">Toronto Life</span>
</p>
<p className="text-white/40 text-xs">October 2020</p>
</div>
</div>
<div className="border-t border-white/10 mt-8 pt-8 text-center text-white/40 text-sm">
<p>&copy; {new Date().getFullYear()} Nusqool. Rural Ontario, Canada.</p>
</div>
</div>
</footer>
);
}

125
src/components/Navigation.tsx Normal file
View File

@ -0,0 +1,125 @@
"use client";
import { useState } from "react";
import Link from "next/link";
const menuItems = [
{
label: "Work with Thu",
href: "/about-thu",
submenu: [
{ label: "About Thu", href: "/about-thu" },
{ label: "Growth Adventure", href: "/grow" },
{ label: "Embodiment Circle", href: "/embodiment-circle" },
{ label: "TRE", href: "/tre" },
{ label: "Coaching", href: "/coaching" },
{ label: "Testimonials", href: "/testimonials" },
],
},
{ label: "Work with Chris", href: "/work-with-chris", submenu: null },
{ label: "Events", href: "/events", submenu: null },
{ label: "Peace Pole", href: "/peace-pole", submenu: null },
{
label: "Contact Us",
href: "/contact-thu",
submenu: [
{ label: "Contact Thu", href: "/contact-thu" },
{ label: "Contact Chris", href: "/contact-chris" },
{ label: "Care Tent", href: "/care-tent" },
],
},
];
export default function Navigation() {
const [isOpen, setIsOpen] = useState(false);
const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
return (
<nav className="fixed top-0 left-0 right-0 z-50 bg-nusqool-cream/95 backdrop-blur-sm">
<div className="max-w-7xl mx-auto px-6 py-4">
<div className="flex items-center justify-between">
<Link href="/" className="flex items-center">
<span className="text-2xl md:text-3xl font-serif text-nusqool-yellow font-bold tracking-wide">
Nusqool
</span>
</Link>
<div className="hidden lg:flex items-center space-x-8">
{menuItems.map((item) => (
<div
key={item.label}
className="relative"
onMouseEnter={() => setActiveDropdown(item.label)}
onMouseLeave={() => setActiveDropdown(null)}
>
<Link
href={item.href}
className="text-nusqool-brown hover:text-nusqool-yellow transition-colors py-2"
>
{item.label}
{item.submenu && <span className="ml-1 text-xs">&#9660;</span>}
</Link>
{item.submenu && activeDropdown === item.label && (
<div className="absolute top-full left-0 bg-white shadow-lg rounded-sm py-2 min-w-48">
{item.submenu.map((subItem) => (
<Link
key={subItem.label}
href={subItem.href}
className="block px-4 py-2 text-nusqool-brown hover:bg-nusqool-cream hover:text-nusqool-yellow transition-colors"
>
{subItem.label}
</Link>
))}
</div>
)}
</div>
))}
</div>
<button
className="lg:hidden text-nusqool-brown"
onClick={() => setIsOpen(!isOpen)}
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
{isOpen ? (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
) : (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
)}
</svg>
</button>
</div>
{isOpen && (
<div className="lg:hidden mt-4 pb-4 border-t border-nusqool-brown/10">
{menuItems.map((item) => (
<div key={item.label} className="py-2">
<Link
href={item.href}
className="block text-nusqool-brown hover:text-nusqool-yellow py-2"
onClick={() => setIsOpen(false)}
>
{item.label}
</Link>
{item.submenu && (
<div className="pl-4">
{item.submenu.map((subItem) => (
<Link
key={subItem.label}
href={subItem.href}
className="block text-nusqool-warmGray hover:text-nusqool-yellow py-1 text-sm"
onClick={() => setIsOpen(false)}
>
{subItem.label}
</Link>
))}
</div>
)}
</div>
))}
</div>
)}
</div>
</nav>
);
}

23
src/components/Newsletter.tsx Normal file
View File

@ -0,0 +1,23 @@
export default function Newsletter() {
return (
<section className="section-padding bg-nusqool-cream">
<div className="max-w-2xl mx-auto text-center">
<h2 className="heading-lg text-nusqool-brown mb-4">Stay Connected</h2>
<p className="body-text mb-8">
Join our community and receive updates on events, offerings, and musings on growth and healing.
</p>
<form className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
<input
type="email"
placeholder="Your email address"
className="flex-1 px-4 py-3 border border-nusqool-brown/20 rounded-sm bg-white focus:outline-none focus:border-nusqool-yellow transition-colors"
/>
<button type="submit" className="btn-primary whitespace-nowrap">
Subscribe
</button>
</form>
<p className="text-sm text-nusqool-warmGray/60 mt-4">We respect your privacy.</p>
</div>
</section>
);
}