Add src/app/thoughts/page.tsx
This commit is contained in:
164
src/app/thoughts/page.tsx
Normal file
164
src/app/thoughts/page.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
|
||||
export default function ThoughtsPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Explore My Works", id: "/explore" },
|
||||
{ name: "Vision", id: "/about" },
|
||||
{ name: "Connect", id: "/connect" },
|
||||
{ name: "Thoughts", id: "/thoughts" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Explore My Works", href: "/explore" },
|
||||
{ label: "Vision", href: "/about" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "Calendly", href: "https://calendly.com/karu-navolab/growth-engine-demo-navo-lab" },
|
||||
{ label: "Substack", href: "https://substack.com/@karuthompson" },
|
||||
{ label: "X", href: "https://x.com/KaruThompson" },
|
||||
{ label: "Email", href: "mailto:hello@example.com" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Newsletter", href: "#" },
|
||||
{ label: "Thoughts", href: "/thoughts" },
|
||||
{ label: "Privacy", href: "#" },
|
||||
{ label: "Terms", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="smallMedium"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Karu Thompson"
|
||||
bottomLeftText="Crafted with intention"
|
||||
bottomRightText="Let's connect"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="thoughts-content" data-section="thoughts-content" className="w-content-width mx-auto py-20 px-10">
|
||||
<h1 className="text-5xl font-bold mb-12">Thoughts & Reflections</h1>
|
||||
|
||||
<div className="space-y-12">
|
||||
<div className="mb-12">
|
||||
<h2 className="text-3xl font-bold mb-4"><i>On Intentional Design</i></h2>
|
||||
<p className="text-lg leading-relaxed text-foreground/80">
|
||||
Design is not merely about aesthetics; it's about <i>purposeful communication</i>. Every choice—from typography to spacing to color—should serve a deliberate intention. In a world of infinite possibilities, <i>constraints breed creativity</i>. The most compelling work emerges when creative vision is paired with strategic thinking.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-12">
|
||||
<h2 className="text-3xl font-bold mb-4"><i>The Art of Curation</i></h2>
|
||||
<p className="text-lg leading-relaxed text-foreground/80">
|
||||
In an age of abundance, <i>thoughtful curation</i> has become essential. Whether selecting projects to showcase, ideas to pursue, or collaborators to work with, the ability to discern quality from noise is invaluable. <i>Less is more</i>—quality over quantity creates space for meaningful engagement.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-12">
|
||||
<h2 className="text-3xl font-bold mb-4"><i>Learning Beyond Institutions</i></h2>
|
||||
<p className="text-lg leading-relaxed text-foreground/80">
|
||||
Traditional education has value, but so does <i>self-directed mastery</i>. The most fulfilling learning often happens when you pursue questions that genuinely interest you, rather than following a predetermined curriculum. <i>Curiosity</i> is the ultimate teacher, and discipline is the bridge between interest and expertise.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-12">
|
||||
<h2 className="text-3xl font-bold mb-4"><i>On Storytelling</i></h2>
|
||||
<p className="text-lg leading-relaxed text-foreground/80">
|
||||
Stories shape how we understand the world. Whether through film, design, music, or writing, <i>thoughtfully crafted narratives</i> have the power to transform perspectives and inspire action. The most effective stories are those that reveal <i>universal truths</i> through specific, authentic details.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-12">
|
||||
<h2 className="text-3xl font-bold mb-4"><i>Building With Purpose</i></h2>
|
||||
<p className="text-lg leading-relaxed text-foreground/80">
|
||||
Every project I undertake—whether it's a business, a creative work, or a platform—starts with a clear <i>sense of purpose</i>. What problem does it solve? Who does it serve? How does it contribute to something larger than itself? <i>Intention precedes execution</i>. When you know your why, the how becomes clear.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-12">
|
||||
<h2 className="text-3xl font-bold mb-4"><i>Bridging Disciplines</i></h2>
|
||||
<p className="text-lg leading-relaxed text-foreground/80">
|
||||
Some of the most innovative work happens at the <i>intersection of different fields</i>. Design informs business strategy. Music teaches rhythm and structure. Film composition reveals how to guide attention. By drawing from multiple disciplines, we create richer, more nuanced solutions.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-12">
|
||||
<h2 className="text-3xl font-bold mb-4"><i>The Power of Vulnerability</i></h2>
|
||||
<p className="text-lg leading-relaxed text-foreground/80">
|
||||
Sharing unfinished work, admitting uncertainty, and being <i>genuinely present</i> with others creates deeper connections than polished perfection ever could. <i>Vulnerability is not weakness</i>; it's the foundation of authentic communication and meaningful collaboration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-12">
|
||||
<h2 className="text-3xl font-bold mb-4"><i>On Growth and Evolution</i></h2>
|
||||
<p className="text-lg leading-relaxed text-foreground/80">
|
||||
The work you created a year ago doesn't define you forever. <i>Growth requires letting go</i>—of old ideas, outdated approaches, and yesterday's certainties. The most vibrant creative practice is one that continuously evolves while maintaining core principles. <i>Consistency of vision, flexibility of method.</i>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-12">
|
||||
<h2 className="text-3xl font-bold mb-4"><i>Why This Matters</i></h2>
|
||||
<p className="text-lg leading-relaxed text-foreground/80">
|
||||
These reflections emerge from lived experience—from failures and successes, from questioning conventions and building alternatives, from studying film and music and design, and from countless conversations with thoughtful people. They're not prescriptions but rather <i>invitations to think differently</i> about creativity, learning, and purpose.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-16 pt-12 border-t border-accent">
|
||||
<p className="text-lg text-foreground/80">
|
||||
For longer-form writing and regular reflections, subscribe to my <a href="https://substack.com/@karuthompson" target="_blank" rel="noopener noreferrer" className="text-primary-cta hover:underline"><i>Substack newsletter</i></a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contact-cta" data-section="contact-cta">
|
||||
<ContactCTA
|
||||
tag="Let's Connect"
|
||||
title="Share your thoughts"
|
||||
description="I'd love to hear your perspective on these ideas or discuss challenges you're facing. Reach out anytime."
|
||||
background={{ variant: "plain" }}
|
||||
buttons={[
|
||||
{ text: "Send Me a Message", href: "mailto:hello@example.com" },
|
||||
{ text: "Back to Home", href: "/" },
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={footerColumns}
|
||||
copyrightText="© 2025 Karu Thompson. Crafted with intention and creative vision."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user