-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
eaf4fce
commit f29a27f
Showing
9 changed files
with
461 additions
and
26 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| 'use client' | ||
| import { InfiniteMovingCards } from "./ui/infinite-moving-cards"; | ||
|
|
||
| const musicSchoolTestimonials=[ | ||
| { | ||
| quote: | ||
| 'Joining the music school transformed my understanding of music and helped me to truly discover my own sound. The instructors are world-class!', | ||
| name: 'Alex Johnson', | ||
| title: 'Guitar Student', | ||
| }, | ||
| { | ||
| quote: | ||
| "The community and support at this school are unmatched. I've grown not just as a pianist, but also as a performer, thanks to their comprehensive approach.", | ||
| name: 'Samantha Lee', | ||
| title: 'Piano Student', | ||
| }, | ||
| { | ||
| quote: | ||
| "This school offered me the tools and confidence to take my singing to the next level. I'm endlessly grateful for the personalized coaching.", | ||
| name: 'Michael Chen', | ||
| title: 'Vocal Student', | ||
| }, | ||
| { | ||
| quote: | ||
| 'As a violinist, finding the right mentor can be challenging, but this school matched me with a teacher who truly understands my goals and challenges.', | ||
| name: 'Emily Taylor', | ||
| title: 'Violin Student', | ||
| }, | ||
| { | ||
| quote: | ||
| 'The production courses here opened my eyes to the intricacies of music production. Highly recommend for any aspiring producers!', | ||
| name: 'Chris Morales', | ||
| title: 'Music Production Student', | ||
| }, | ||
| ]; | ||
| function MusicSchoolTestimonial() { | ||
|
|
||
|
|
||
| return ( | ||
| <div className="h-[40rem] w-full dark:bg-black dark:bg-grid-white/[0.2] relative flex flex-col items-center justify-center overflow-hidden"> | ||
| <h2 className="text-3xl font-bold text-center mb-8 z-10 text-white">Hear our Harmony: Voies of Success</h2> | ||
| <div className="flex justify-center w-full overflow-hidden px-4 sm:px-6 lg:px-8"> | ||
| <div className="w-full max-w-6xl"> | ||
| <InfiniteMovingCards | ||
| items={musicSchoolTestimonials} | ||
| direction="right" | ||
| speed="slow" | ||
| /> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default MusicSchoolTestimonial |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| "use client"; | ||
|
|
||
| import Link from "next/link"; | ||
| import { HoverEffect } from "./ui/card-hover-effect"; | ||
|
|
||
| function UpcomingWebinars() { | ||
| const featuredWebinars = [ | ||
| { | ||
| title: 'Understanding Music Theory', | ||
| description: | ||
| 'Dive deep into the fundamentals of music theory and enhance your musical skills.', | ||
| slug: 'understanding-music-theory', | ||
| isFeatured: true, | ||
| }, | ||
| { | ||
| title: 'The Art of Songwriting', | ||
| description: | ||
| 'Learn the craft of songwriting from experienced musicians and songwriters.', | ||
| slug: 'the-art-of-songwriting', | ||
| isFeatured: true, | ||
| }, | ||
| { | ||
| title: 'Mastering Your Instrument', | ||
| description: | ||
| 'Advanced techniques to master your musical instrument of choice.', | ||
| slug: 'mastering-your-instrument', | ||
| isFeatured: true, | ||
| }, | ||
| { | ||
| title: 'Music Production Essentials', | ||
| description: | ||
| 'Get started with music production with this comprehensive overview.', | ||
| slug: 'music-production-essentials', | ||
| isFeatured: true, | ||
| }, | ||
| // Added two more webinars | ||
| { | ||
| title: 'Live Performance Techniques', | ||
| description: | ||
| 'Enhance your live performance skills with expert tips and strategies.', | ||
| slug: 'live-performance-techniques', | ||
| isFeatured: true, | ||
| }, | ||
| { | ||
| title: 'Digital Music Marketing', | ||
| description: | ||
| 'Learn how to promote your music effectively in the digital age.', | ||
| slug: 'digital-music-marketing', | ||
| isFeatured: true, | ||
| }, | ||
| ]; | ||
| return ( | ||
| <div className="py-12 bg-gray-900"> | ||
| <div className="max-w-7xl mx-auto px-4 sm:px-6"> | ||
| <div className="text-center"> | ||
| <h2 className="text-base text-teal-600 font-semibold tracking-wide uppercase"> | ||
| FEATURED WEBINARS | ||
| </h2> | ||
| <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> | ||
| Enhance Your Musical Journey | ||
| </p> | ||
| </div> | ||
|
|
||
| <div className="mt-10"> | ||
| <HoverEffect | ||
| items={featuredWebinars.map(webinar=>({ | ||
| title: webinar.title, | ||
| description:webinar.description, | ||
| link:'/' | ||
| } | ||
| ))} | ||
| /> | ||
| </div> | ||
| <div className="mt-10 text-center"> | ||
| <Link | ||
| href={"/"} | ||
| className="px-4 py-2 rounded border border-neutral-600 text-neutral-700 bg-white hover:bg-gray-100 transition duration-200" | ||
| > | ||
| View All webinars | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default UpcomingWebinars; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| import { cn } from "@/utils/cn"; | ||
| import { AnimatePresence, motion } from "framer-motion"; | ||
| import Link from "next/link"; | ||
| import { useState } from "react"; | ||
|
|
||
| export const HoverEffect = ({ | ||
| items, | ||
| className, | ||
| }: { | ||
| items: { | ||
| title: string; | ||
| description: string; | ||
| link: string; | ||
| }[]; | ||
| className?: string; | ||
| }) => { | ||
| let [hoveredIndex, setHoveredIndex] = useState<number | null>(null); | ||
|
|
||
| return ( | ||
| <div | ||
| className={cn( | ||
| "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 py-10", | ||
| className | ||
| )} | ||
| > | ||
| {items.map((item, idx) => ( | ||
| <Link | ||
| href={item?.link} | ||
| key={item?.link} | ||
| className="relative group block p-2 h-full w-full" | ||
| onMouseEnter={() => setHoveredIndex(idx)} | ||
| onMouseLeave={() => setHoveredIndex(null)} | ||
| > | ||
| <AnimatePresence> | ||
| {hoveredIndex === idx && ( | ||
| <motion.span | ||
| className="absolute inset-0 h-full w-full bg-neutral-200 dark:bg-slate-800/[0.8] block rounded-3xl" | ||
| layoutId="hoverBackground" | ||
| initial={{ opacity: 0 }} | ||
| animate={{ | ||
| opacity: 1, | ||
| transition: { duration: 0.15 }, | ||
| }} | ||
| exit={{ | ||
| opacity: 0, | ||
| transition: { duration: 0.15, delay: 0.2 }, | ||
| }} | ||
| /> | ||
| )} | ||
| </AnimatePresence> | ||
| <Card> | ||
| <CardTitle>{item.title}</CardTitle> | ||
| <CardDescription>{item.description}</CardDescription> | ||
| </Card> | ||
| </Link> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export const Card = ({ | ||
| className, | ||
| children, | ||
| }: { | ||
| className?: string; | ||
| children: React.ReactNode; | ||
| }) => { | ||
| return ( | ||
| <div | ||
| className={cn( | ||
| "rounded-2xl h-full w-full p-4 overflow-hidden bg-black border border-transparent dark:border-white/[0.2] group-hover:border-slate-700 relative z-20", | ||
| className | ||
| )} | ||
| > | ||
| <div className="relative z-50"> | ||
| <div className="p-4">{children}</div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
| export const CardTitle = ({ | ||
| className, | ||
| children, | ||
| }: { | ||
| className?: string; | ||
| children: React.ReactNode; | ||
| }) => { | ||
| return ( | ||
| <h4 className={cn("text-zinc-100 font-bold tracking-wide mt-4", className)}> | ||
| {children} | ||
| </h4> | ||
| ); | ||
| }; | ||
| export const CardDescription = ({ | ||
| className, | ||
| children, | ||
| }: { | ||
| className?: string; | ||
| children: React.ReactNode; | ||
| }) => { | ||
| return ( | ||
| <p | ||
| className={cn( | ||
| "mt-8 text-zinc-400 tracking-wide leading-relaxed text-sm", | ||
| className | ||
| )} | ||
| > | ||
| {children} | ||
| </p> | ||
| ); | ||
| }; |
Oops, something went wrong.