diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..1c04d38 --- /dev/null +++ b/app/page.tsx @@ -0,0 +1,24 @@ +import Link from "next/link"; +import { FC } from "react"; +import TutorialCard from "@/components/home-page-cards/tutorialCard"; + +interface pageProps {} + +const page: FC = ({}) => { + return ( + <> +
+
+
+ + Tutorials + +
+ +
+
+ + ); +}; + +export default page; diff --git a/app/unconventional-tabs/page.tsx b/app/unconventional-tabs/page.tsx new file mode 100644 index 0000000..dc69a39 --- /dev/null +++ b/app/unconventional-tabs/page.tsx @@ -0,0 +1,49 @@ +export const metadata = { + title: 'Unconventional Tabs - Cruip Tutorials', + description: 'Page description', + } + + import TabImage01 from '@/public/tabs-image-01.jpg' + import Tab0Image2 from '@/public/tabs-image-02.jpg' + import Tab0Image3 from '@/public/tabs-image-03.jpg' + import UnconventionalTabs from '@/components/unconventional-tabs' + import Banner from '@/components/banner' + + export default function UnconventionalTabsPage() { + + const tabs = [ + { + title: 'Lassen Peak', + img: TabImage01, + tag: 'Mountain', + excerpt: "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.", + link: '#0' + }, + { + title: 'Mount Shasta', + img: Tab0Image2, + tag: 'Mountain', + excerpt: "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.", + link: '#0' + }, + { + title: 'Eureka Peak', + img: Tab0Image3, + tag: 'Mountain', + excerpt: "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.", + link: '#0' + }, + ] + + return ( + <> +
+
+ +
+
+ + + + ) + } \ No newline at end of file diff --git a/components/home-page-cards/tutorial-links.ts b/components/home-page-cards/tutorial-links.ts new file mode 100644 index 0000000..5e208fe --- /dev/null +++ b/components/home-page-cards/tutorial-links.ts @@ -0,0 +1,39 @@ +export type tutorials = { + name: string; + href: string; + }; + + export const tutorials: { + name: string; + href: string; + }[] = [ + { + name: "Fancy Testimonials Slider", + href: "/fancy-testimonials-slider", + }, + { + name: "Modal Video", + href: "/modal-video", + }, + { + name: "Particle Animation", + href: "/particle-animation", + }, + { + name: "Pricing Table", + href: "/pricing-table", + }, + { + name: "Spotlight Effect", + href: "/spotlight-effect", + }, + { + name: "Vertical Timelines", + href: "/vertical-timelines", + }, + { + name: "Unconventional Tabs", + href: "/unconventional-tabs", + }, + ]; + \ No newline at end of file diff --git a/components/home-page-cards/tutorialCard.tsx b/components/home-page-cards/tutorialCard.tsx new file mode 100644 index 0000000..002e633 --- /dev/null +++ b/components/home-page-cards/tutorialCard.tsx @@ -0,0 +1,34 @@ +"use client"; +import React, { useState } from "react"; +import { tutorials } from "./tutorial-links"; +import Link from "next/link"; + +const TutorialCard = () => { + return ( +
+
+
+ {tutorials.map((tutorial, index) => ( +
+
+

{tutorial.name}

+

+ + View + +
+
+ ))} +
+
+
+ ); +}; + +export default TutorialCard; diff --git a/components/unconventional-tabs.tsx b/components/unconventional-tabs.tsx new file mode 100644 index 0000000..e499e9d --- /dev/null +++ b/components/unconventional-tabs.tsx @@ -0,0 +1,104 @@ +'use client' + +import { useRef, useEffect, Fragment } from 'react' +import Image, { StaticImageData } from 'next/image' +import { Tab } from '@headlessui/react' +import { Transition } from '@headlessui/react' +import { Caveat } from 'next/font/google' + +const caveat = Caveat({ + subsets: ['latin'], + variable: '--font-caveat', + display: 'swap' +}) + +interface Tab { + title: string + img: StaticImageData + tag: string + excerpt: string + link: string +} + +export default function UnconventionalTabs({ tabs }: { tabs: Tab[] }) { + + const tabsRef = useRef(null) + + const heightFix = () => { + if (tabsRef.current && tabsRef.current.parentElement) tabsRef.current.parentElement.style.height = `${tabsRef.current.clientHeight}px` + } + + useEffect(() => { + heightFix() + }, []) + + return ( + + {({ selectedIndex }) => ( +
+ {/* Buttons */} +
+ + {tabs.map((tab, index) => ( + + + + ))} + +
+ + {/* Tab panels */} + +
+ + {tabs.map((tab, index) => ( + + heightFix()} + > +
+ {tab.title} +
+
+
+
+
{tab.tag}
+

{tab.title}

+
+ +
+
{tab.excerpt}
+ +
+ + + ))} + +
+ +
+ )} + + ) +} \ No newline at end of file diff --git a/public/tabs-image-01.jpg b/public/tabs-image-01.jpg new file mode 100644 index 0000000..4f15833 Binary files /dev/null and b/public/tabs-image-01.jpg differ diff --git a/public/tabs-image-02.jpg b/public/tabs-image-02.jpg new file mode 100644 index 0000000..0095457 Binary files /dev/null and b/public/tabs-image-02.jpg differ diff --git a/public/tabs-image-03.jpg b/public/tabs-image-03.jpg new file mode 100644 index 0000000..ed1cc32 Binary files /dev/null and b/public/tabs-image-03.jpg differ