Add src/app/documentary/page.tsx
This commit is contained in:
152
src/app/documentary/page.tsx
Normal file
152
src/app/documentary/page.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroOverlay from "@/components/sections/hero/HeroOverlay";
|
||||
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
||||
import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
|
||||
export default function DocumentaryPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Projects", id: "/projects" },
|
||||
{ name: "Vision", id: "/about" },
|
||||
{ name: "Connect", id: "/connect" },
|
||||
{ name: "Writing", id: "/writing" },
|
||||
{ name: "Violin", id: "/violin" },
|
||||
{ name: "Documentary", id: "/documentary" },
|
||||
{ name: "Navo", id: "/navo" },
|
||||
{ name: "Stanford", id: "/stanford" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Projects", href: "/projects" },
|
||||
{ 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: "Blog", href: "/writing" },
|
||||
{ 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="Portfolio"
|
||||
bottomLeftText="Crafted with intention"
|
||||
bottomRightText="Let's connect"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Documentary Feature Film"
|
||||
description="A cinematic exploration of real stories, authentic voices, and the human experience. This documentary captures moments of transformation, resilience, and the subtle beauty found in everyday life."
|
||||
tag="Film Production"
|
||||
tagAnimation="blur-reveal"
|
||||
textPosition="bottom-left"
|
||||
showBlur={true}
|
||||
showDimOverlay={true}
|
||||
imageSrc="https://images.unsplash.com/photo-1533000971552-74f7b2265582?w=1200&h=600&fit=crop"
|
||||
imageAlt="Documentary film scene"
|
||||
buttons={[
|
||||
{ text: "Watch Trailer", href: "#" },
|
||||
{ text: "Learn More", href: "#" }
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="Storytelling Through Film"
|
||||
description={[
|
||||
"Documentary filmmaking is about capturing truth in its rawest form. <i>It requires patience, empathy, and an unwavering commitment to the subjects' stories.</i> Every frame is a decision, every cut a statement about what matters most.", "This feature film explores narratives that traditional media overlooks—the quiet moments that define us, the challenges that shape our character, and the interconnections that bind us together. <i>Through cinematography, sound design, and thoughtful editing, we transform lived experience into visual poetry.</i>"
|
||||
]}
|
||||
useInvertedBackground={true}
|
||||
showBorder={true}
|
||||
buttons={[{ text: "View Full Details", href: "#" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardMedia
|
||||
title="Film Production Highlights"
|
||||
description="Key elements that bring the documentary to life"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
tag="Production"
|
||||
tagAnimation="blur-reveal"
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Cinematography", description: "<i>Visual storytelling through carefully composed frames.</i> Capturing authentic moments with artistic intent and technical precision.", tag: "Visual Art", imageSrc: "https://images.unsplash.com/photo-1533000971552-74f7b2265582?w=500&h=400&fit=crop", imageAlt: "Camera equipment"
|
||||
},
|
||||
{
|
||||
id: "2", title: "Sound Design", description: "<i>The voice of film is often unheard.</i> Through strategic sound design, we amplify emotion and create an immersive auditory landscape.", tag: "Audio", imageSrc: "https://images.unsplash.com/photo-1514320291840-2e0a9bf2a9ae?w=500&h=400&fit=crop", imageAlt: "Sound equipment"
|
||||
},
|
||||
{
|
||||
id: "3", title: "Editing & Narrative", description: "<i>The edit suite is where stories find their rhythm.</i> Precise editing transforms raw footage into cohesive narrative that resonates with audiences.", tag: "Post-Production", imageSrc: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=500&h=400&fit=crop", imageAlt: "Editing workstation"
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-cta" data-section="contact-cta">
|
||||
<ContactCTA
|
||||
tag="Film & Vision"
|
||||
title="Interested in the project?"
|
||||
description="Explore the full documentary feature and discover the stories that shaped this cinematic journey."
|
||||
background={{ variant: "plain" }}
|
||||
buttons={[
|
||||
{ text: "View Screening Schedule", href: "#" },
|
||||
{ text: "Get In Touch", href: "/contact" },
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={footerColumns}
|
||||
copyrightText="© 2025 Portfolio. Crafted with intention and creative vision."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user