From a866d1e4ce944c54fb2d08cc896836870ca6aa3b Mon Sep 17 00:00:00 2001 From: v0 Date: Sun, 2 Nov 2025 19:00:32 +0000 Subject: [PATCH] Initialized repository for chat Podcast website Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com> --- .gitignore | 27 + README.md | 30 + app/about/page.tsx | 170 + app/contact/page.tsx | 131 + app/episodes/page.tsx | 183 + app/globals.css | 154 + app/layout.tsx | 29 + app/page.tsx | 141 + components.json | 21 + components/contact-form.tsx | 98 + components/footer.tsx | 62 + components/navigation.tsx | 77 + components/theme-provider.tsx | 11 + components/ui/badge.tsx | 46 + components/ui/button.tsx | 60 + components/ui/card.tsx | 92 + components/ui/input.tsx | 21 + components/ui/label.tsx | 24 + components/ui/select.tsx | 185 + components/ui/textarea.tsx | 18 + lib/utils.ts | 6 + next.config.mjs | 14 + package.json | 73 + pnpm-lock.yaml | 3212 +++++++++++++++++ postcss.config.mjs | 8 + ...f-rich-dark-soil-with-green-moss-and-f.jpg | Bin 0 -> 161668 bytes public/placeholder-logo.png | Bin 0 -> 568 bytes public/placeholder-logo.svg | 1 + public/placeholder-user.jpg | Bin 0 -> 1635 bytes public/placeholder.jpg | Bin 0 -> 1064 bytes public/placeholder.svg | 1 + ...ophone-with-plants-and-soil-in-natural.jpg | Bin 0 -> 114851 bytes ...podcast-host-sammy-davis-in-natural-se.jpg | Bin 0 -> 146754 bytes ...y-davis-in-garden-with-plants-and-soil.jpg | Bin 0 -> 179098 bytes styles/globals.css | 125 + tsconfig.json | 27 + 36 files changed, 5047 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 app/about/page.tsx create mode 100644 app/contact/page.tsx create mode 100644 app/episodes/page.tsx create mode 100644 app/globals.css create mode 100644 app/layout.tsx create mode 100644 app/page.tsx create mode 100644 components.json create mode 100644 components/contact-form.tsx create mode 100644 components/footer.tsx create mode 100644 components/navigation.tsx create mode 100644 components/theme-provider.tsx create mode 100644 components/ui/badge.tsx create mode 100644 components/ui/button.tsx create mode 100644 components/ui/card.tsx create mode 100644 components/ui/input.tsx create mode 100644 components/ui/label.tsx create mode 100644 components/ui/select.tsx create mode 100644 components/ui/textarea.tsx create mode 100644 lib/utils.ts create mode 100644 next.config.mjs create mode 100644 package.json create mode 100644 pnpm-lock.yaml create mode 100644 postcss.config.mjs create mode 100644 public/close-up-of-rich-dark-soil-with-green-moss-and-f.jpg create mode 100644 public/placeholder-logo.png create mode 100644 public/placeholder-logo.svg create mode 100644 public/placeholder-user.jpg create mode 100644 public/placeholder.jpg create mode 100644 public/placeholder.svg create mode 100644 public/podcast-microphone-with-plants-and-soil-in-natural.jpg create mode 100644 public/portrait-of-podcast-host-sammy-davis-in-natural-se.jpg create mode 100644 public/sammy-davis-in-garden-with-plants-and-soil.jpg create mode 100644 styles/globals.css create mode 100644 tsconfig.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f650315 --- /dev/null +++ b/.gitignore @@ -0,0 +1,27 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules + +# next.js +/.next/ +/out/ + +# production +/build + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files +.env* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..888b996 --- /dev/null +++ b/README.md @@ -0,0 +1,30 @@ +# Podcast website + +*Automatically synced with your [v0.app](https://v0.app) deployments* + +[![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/jeff-emmetts-projects/v0-podcast-website) +[![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/ruIpGcNLead) + +## Overview + +This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). +Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). + +## Deployment + +Your project is live at: + +**[https://vercel.com/jeff-emmetts-projects/v0-podcast-website](https://vercel.com/jeff-emmetts-projects/v0-podcast-website)** + +## Build your app + +Continue building your app on: + +**[https://v0.app/chat/ruIpGcNLead](https://v0.app/chat/ruIpGcNLead)** + +## How It Works + +1. Create and modify your project using [v0.app](https://v0.app) +2. Deploy your chats from the v0 interface +3. Changes are automatically pushed to this repository +4. Vercel deploys the latest version from this repository \ No newline at end of file diff --git a/app/about/page.tsx b/app/about/page.tsx new file mode 100644 index 0000000..882bf23 --- /dev/null +++ b/app/about/page.tsx @@ -0,0 +1,170 @@ +import { Navigation } from "@/components/navigation" +import { Footer } from "@/components/footer" +import { Card, CardContent } from "@/components/ui/card" +import { Button } from "@/components/ui/button" +import { Music, Instagram, Sprout, BookOpen, Mic, Heart } from "lucide-react" +import Link from "next/link" + +export const metadata = { + title: "About | Soul Speaks Soil", + description: "Learn about Sammy Davis and the Soul Speaks Soil podcast", +} + +export default function AboutPage() { + return ( +
+ + +
+ {/* About Sammy Section */} +
+
+
+
+
+
+ Sammy Davis in her garden +
+
+
+

Meet Sammy Davis

+
+

+ Sammy Davis is a passionate advocate for sustainable living, regenerative agriculture, and the + profound connection between human consciousness and the natural world. +

+

+ With a background in environmental science and a deep love for storytelling, Sammy created Soul + Speaks Soil to bridge the gap between ancient wisdom and modern sustainability practices. +

+

+ Through authentic conversations with farmers, activists, artists, and thought leaders, Sammy + explores how we can cultivate a more harmonious relationship with the earth and each other. +

+
+
+ + +
+
+
+
+
+
+ + {/* About the Podcast Section */} +
+
+
+
+
+ + The Podcast +
+

+ About Soul Speaks Soil +

+

+ A podcast exploring the intersection of consciousness, sustainability, and our relationship with the + earth. +

+
+ +
+ + +
+
+ +
+

Deep Conversations

+

+ Hour-long episodes diving deep into topics that matter for our planet and our souls. +

+
+
+
+ + + +
+
+ +
+

Diverse Topics

+

+ From regenerative farming to mindfulness, permaculture to social justice. +

+
+
+
+ + + +
+
+ +
+

Community Focused

+

+ Building a community of listeners committed to positive change. +

+
+
+
+
+ + + +

Our Mission

+

+ Soul Speaks Soil exists to inspire and empower individuals to reconnect with the earth, cultivate + sustainable practices, and foster a deeper understanding of our interconnectedness with all living + things. Through storytelling and authentic dialogue, we aim to plant seeds of change that grow into + a more regenerative future. +

+ +
+
+
+
+
+ + {/* Consulting Section */} +
+
+
+

Work with Sammy

+

+ Sammy is available for consulting, speaking engagements, and podcast collaborations. Whether you're + looking to start your own sustainability initiative or want to feature Sammy on your podcast, let's + connect. +

+ +
+
+
+
+ +
+
+ ) +} diff --git a/app/contact/page.tsx b/app/contact/page.tsx new file mode 100644 index 0000000..60809ad --- /dev/null +++ b/app/contact/page.tsx @@ -0,0 +1,131 @@ +import { Navigation } from "@/components/navigation" +import { Footer } from "@/components/footer" +import { ContactForm } from "@/components/contact-form" +import { Card, CardContent } from "@/components/ui/card" +import { Mail, Instagram, Music, MessageSquare } from "lucide-react" + +export const metadata = { + title: "Contact | Soul Speaks Soil", + description: "Get in touch with Sammy Davis for consulting, podcast collaborations, and more", +} + +export default function ContactPage() { + return ( +
+ + +
+ {/* Header Section with organic texture */} +
+
+
+

Get in Touch

+

+ Whether you're interested in consulting, podcast collaborations, speaking engagements, or just want to + say hello, I'd love to hear from you. +

+
+
+
+ + {/* Contact Options with mycelial pattern */} +
+
+
+
+ + +
+
+ +
+

Consulting

+

+ Sustainability strategy, regenerative practices, and organizational transformation +

+
+
+
+ + + +
+
+ +
+

Podcast Guest

+

+ Invite Sammy to be a guest on your podcast or collaborate on content +

+
+
+
+ + + +
+
+ +
+

Speaking

+

+ Book Sammy for conferences, workshops, and speaking engagements +

+
+
+
+
+
+
+
+ + {/* Contact Form Section */} +
+
+
+ + + + + +
+
+
+ + {/* Social Links with organic texture background */} +
+
+
+

Connect on Social Media

+

+ Follow Soul Speaks Soil for updates, behind-the-scenes content, and community discussions. +

+ +
+
+
+
+ +
+
+ ) +} diff --git a/app/episodes/page.tsx b/app/episodes/page.tsx new file mode 100644 index 0000000..9bdf3df --- /dev/null +++ b/app/episodes/page.tsx @@ -0,0 +1,183 @@ +import { Navigation } from "@/components/navigation" +import { Footer } from "@/components/footer" +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" +import { Button } from "@/components/ui/button" +import { Badge } from "@/components/ui/badge" +import { Music, Calendar, Clock } from "lucide-react" + +export const metadata = { + title: "Episodes | Soul Speaks Soil", + description: "Browse all episodes of the Soul Speaks Soil podcast", +} + +// Sample episode data - this would typically come from a CMS or API +const episodes = [ + { + id: 1, + title: "Regenerative Agriculture with Maria Santos", + guest: "Maria Santos", + description: + "Maria Santos, a pioneer in regenerative farming, shares her journey from conventional agriculture to building a thriving regenerative farm. We discuss soil health, biodiversity, and how farming can heal both the land and our communities.", + date: "January 15, 2025", + duration: "58 min", + season: 1, + episode: 12, + }, + { + id: 2, + title: "Mindfulness and Nature Connection with Dr. James Chen", + guest: "Dr. James Chen", + description: + "Dr. James Chen, a psychologist and nature therapy practitioner, explores the profound mental health benefits of connecting with nature. We dive into forest bathing, ecotherapy, and how spending time in nature can transform our wellbeing.", + date: "January 8, 2025", + duration: "62 min", + season: 1, + episode: 11, + }, + { + id: 3, + title: "Indigenous Wisdom and Land Stewardship with Sarah Blackfeather", + guest: "Sarah Blackfeather", + description: + "Sarah Blackfeather shares indigenous perspectives on land stewardship and the sacred relationship between people and place. We discuss traditional ecological knowledge and what modern society can learn from indigenous practices.", + date: "January 1, 2025", + duration: "55 min", + season: 1, + episode: 10, + }, + { + id: 4, + title: "Urban Farming and Food Justice with Marcus Johnson", + guest: "Marcus Johnson", + description: + "Marcus Johnson, founder of an urban farming collective, talks about bringing fresh food to food deserts and building community through agriculture. We explore the intersection of food justice, urban planning, and grassroots activism.", + date: "December 25, 2024", + duration: "51 min", + season: 1, + episode: 9, + }, + { + id: 5, + title: "Permaculture Design Principles with Elena Rodriguez", + guest: "Elena Rodriguez", + description: + "Elena Rodriguez, a permaculture designer and educator, breaks down the core principles of permaculture and how they can be applied to gardens, farms, and even our daily lives. We discuss working with nature rather than against it.", + date: "December 18, 2024", + duration: "64 min", + season: 1, + episode: 8, + }, + { + id: 6, + title: "Climate Action and Hope with Dr. Aisha Patel", + guest: "Dr. Aisha Patel", + description: + "Climate scientist Dr. Aisha Patel shares the latest research on climate change while maintaining a message of hope and actionable solutions. We discuss individual and collective actions that can make a real difference.", + date: "December 11, 2024", + duration: "59 min", + season: 1, + episode: 7, + }, +] + +export default function EpisodesPage() { + return ( +
+ + +
+ {/* Header Section with organic texture */} +
+
+
+

All Episodes

+

+ Explore our collection of conversations with farmers, activists, artists, and thought leaders who are + working to create a more sustainable and connected world. +

+ +
+
+
+ + {/* Episodes List with mycelial pattern */} +
+
+
+ {episodes.map((episode) => ( + + +
+
+
+ + S{episode.season}E{episode.episode} + +
+ {episode.title} +
+
+ + {episode.date} +
+
+ + {episode.duration} +
+
+
+
+
+ +

{episode.description}

+
+ Guest: + {episode.guest} +
+
+
+ ))} +
+
+
+ + {/* CTA Section with mycelial pattern overlay */} +
+
+
+
+
+
+

Never Miss an Episode

+

+ Subscribe on Spotify to get notified when new episodes drop. Join our growing community of listeners + committed to positive change. +

+ +
+
+
+
+ +
+
+ ) +} diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..762d002 --- /dev/null +++ b/app/globals.css @@ -0,0 +1,154 @@ +@import "tailwindcss"; +@import "tw-animate-css"; + +@custom-variant dark (&:is(.dark *)); + +:root { + /* Deep earthy palette with rich browns, forest greens, and organic tones */ + --background: oklch(0.97 0.015 75); + --foreground: oklch(0.22 0.025 65); + --card: oklch(0.98 0.01 80); + --card-foreground: oklch(0.22 0.025 65); + --popover: oklch(0.98 0.01 80); + --popover-foreground: oklch(0.22 0.025 65); + --primary: oklch(0.38 0.06 135); + --primary-foreground: oklch(0.98 0.01 80); + --secondary: oklch(0.42 0.08 55); + --secondary-foreground: oklch(0.98 0.01 80); + --muted: oklch(0.88 0.02 75); + --muted-foreground: oklch(0.48 0.03 65); + --accent: oklch(0.52 0.1 145); + --accent-foreground: oklch(0.98 0.01 80); + --destructive: oklch(0.577 0.245 27.325); + --destructive-foreground: oklch(0.98 0.01 80); + --border: oklch(0.82 0.02 75); + --input: oklch(0.82 0.02 75); + --ring: oklch(0.38 0.06 135); + --chart-1: oklch(0.38 0.06 135); + --chart-2: oklch(0.42 0.08 55); + --chart-3: oklch(0.52 0.1 145); + --chart-4: oklch(0.32 0.05 125); + --chart-5: oklch(0.58 0.08 150); + --radius: 0.75rem; + --sidebar: oklch(0.98 0.01 80); + --sidebar-foreground: oklch(0.22 0.025 65); + --sidebar-primary: oklch(0.38 0.06 135); + --sidebar-primary-foreground: oklch(0.98 0.01 80); + --sidebar-accent: oklch(0.88 0.02 75); + --sidebar-accent-foreground: oklch(0.22 0.025 65); + --sidebar-border: oklch(0.82 0.02 75); + --sidebar-ring: oklch(0.38 0.06 135); +} + +.dark { + /* Dark mode with deep soil and forest tones */ + --background: oklch(0.15 0.02 65); + --foreground: oklch(0.94 0.01 80); + --card: oklch(0.18 0.025 65); + --card-foreground: oklch(0.94 0.01 80); + --popover: oklch(0.15 0.02 65); + --popover-foreground: oklch(0.94 0.01 80); + --primary: oklch(0.52 0.1 135); + --primary-foreground: oklch(0.15 0.02 65); + --secondary: oklch(0.48 0.09 55); + --secondary-foreground: oklch(0.15 0.02 65); + --muted: oklch(0.25 0.025 65); + --muted-foreground: oklch(0.62 0.03 75); + --accent: oklch(0.58 0.12 145); + --accent-foreground: oklch(0.15 0.02 65); + --destructive: oklch(0.396 0.141 25.723); + --destructive-foreground: oklch(0.94 0.01 80); + --border: oklch(0.25 0.025 65); + --input: oklch(0.25 0.025 65); + --ring: oklch(0.52 0.1 135); + --chart-1: oklch(0.52 0.1 135); + --chart-2: oklch(0.48 0.09 55); + --chart-3: oklch(0.58 0.12 145); + --chart-4: oklch(0.42 0.07 125); + --chart-5: oklch(0.62 0.1 150); + --sidebar: oklch(0.18 0.025 65); + --sidebar-foreground: oklch(0.94 0.01 80); + --sidebar-primary: oklch(0.52 0.1 135); + --sidebar-primary-foreground: oklch(0.15 0.02 65); + --sidebar-accent: oklch(0.25 0.025 65); + --sidebar-accent-foreground: oklch(0.94 0.01 80); + --sidebar-border: oklch(0.25 0.025 65); + --sidebar-ring: oklch(0.52 0.1 135); +} + +@theme inline { + --font-sans: "Geist", "Geist Fallback"; + --font-mono: "Geist Mono", "Geist Mono Fallback"; + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } +} + +/* Adding mycelial network pattern overlay */ +@layer utilities { + .mycelial-pattern { + position: relative; + } + + .mycelial-pattern::before { + content: ""; + position: absolute; + inset: 0; + background-image: radial-gradient(circle at 20% 30%, oklch(0.38 0.06 135 / 0.03) 0%, transparent 50%), + radial-gradient(circle at 80% 70%, oklch(0.42 0.08 55 / 0.03) 0%, transparent 50%), + radial-gradient(circle at 40% 80%, oklch(0.52 0.1 145 / 0.02) 0%, transparent 50%), + radial-gradient(circle at 70% 20%, oklch(0.38 0.06 135 / 0.02) 0%, transparent 50%); + pointer-events: none; + } + + .organic-texture { + background-image: repeating-linear-gradient( + 90deg, + oklch(0.38 0.06 135 / 0.02) 0px, + transparent 1px, + transparent 40px + ), repeating-linear-gradient(0deg, oklch(0.42 0.08 55 / 0.02) 0px, transparent 1px, transparent 40px); + } +} diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..d49c05d --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,29 @@ +import type React from "react" +import type { Metadata } from "next" +import { Geist, Geist_Mono } from "next/font/google" +import { Analytics } from "@vercel/analytics/next" +import "./globals.css" + +const _geist = Geist({ subsets: ["latin"] }) +const _geistMono = Geist_Mono({ subsets: ["latin"] }) + +export const metadata: Metadata = { + title: "Soul Speaks Soil | A Podcast by Sammy Davis", + description: "Exploring the connection between soul and soil through meaningful conversations", + generator: "v0.app", +} + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode +}>) { + return ( + + + {children} + + + + ) +} diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..444bdc0 --- /dev/null +++ b/app/page.tsx @@ -0,0 +1,141 @@ +import Link from "next/link" +import { Button } from "@/components/ui/button" +import { Card, CardContent } from "@/components/ui/card" +import { Navigation } from "@/components/navigation" +import { Footer } from "@/components/footer" +import { Music, Instagram, Sprout, Heart, Users } from "lucide-react" + +export default function HomePage() { + return ( +
+ + + {/* Hero Section with mycelial pattern overlay */} +
+
+
+
+ + Where Soul Meets Soil +
+

+ Soul Speaks Soil +

+

+ Join host Sammy Davis for deep conversations exploring the profound connection between our inner world and + the earth beneath our feet. +

+
+ + +
+
+
+
+ + {/* Featured Image Section with soil and moss imagery */} +
+
+
+
+ Rich soil with moss and ferns - Soul Speaks Soil Podcast +
+
+
+
+ + {/* About Preview Section with organic texture background */} +
+
+
+
+ + +
+
+ +
+

Authentic Conversations

+

+ Real, unfiltered discussions about sustainability, growth, and connection. +

+
+
+
+ + + +
+
+ +
+

Diverse Guests

+

+ Featuring farmers, activists, artists, and thought leaders. +

+
+
+
+ + + +
+
+ +
+

Rooted in Nature

+

+ Exploring our relationship with the earth and each other. +

+
+
+
+
+
+
+
+ + {/* CTA Section with deeper earth tones */} +
+
+
+
+
+
+

Join the Conversation

+

+ Follow us on Instagram for behind-the-scenes content, episode updates, and community discussions. +

+ +
+
+
+ +
+
+ ) +} diff --git a/components.json b/components.json new file mode 100644 index 0000000..4ee62ee --- /dev/null +++ b/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "", + "css": "app/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "iconLibrary": "lucide" +} diff --git a/components/contact-form.tsx b/components/contact-form.tsx new file mode 100644 index 0000000..2b40f7c --- /dev/null +++ b/components/contact-form.tsx @@ -0,0 +1,98 @@ +"use client" + +import type React from "react" + +import { useState } from "react" +import { Button } from "@/components/ui/button" +import { Input } from "@/components/ui/input" +import { Textarea } from "@/components/ui/textarea" +import { Label } from "@/components/ui/label" +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" +import { Send } from "lucide-react" + +export function ContactForm() { + const [isSubmitting, setIsSubmitting] = useState(false) + const [isSubmitted, setIsSubmitted] = useState(false) + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault() + setIsSubmitting(true) + + // Simulate form submission + await new Promise((resolve) => setTimeout(resolve, 1500)) + + setIsSubmitting(false) + setIsSubmitted(true) + + // Reset form after 3 seconds + setTimeout(() => { + setIsSubmitted(false) + ;(e.target as HTMLFormElement).reset() + }, 3000) + } + + return ( +
+
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ + +
+ +
+ +