Home page was missing

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<pageProps> = ({}) => {
+  return (
+    <>
+      <main className="relative min-h-screen flex flex-col justify-center bg-slate-50 overflow-hidden">
+        <div className="w-full max-w-6xl mx-auto px-4 md:px-6 py-16">
+          <div className="flex justify-center">
+            <span className="bg-gradient-to-r bg-clip-text text-transparent from-yellow-500 via-pink-500 to-orange-500 text-5xl font-bold">
+              Tutorials
+            </span>
+          </div>
+          <TutorialCard />
+        </div>
+      </main>
+    </>
+  );
+};
+
+export default page;

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 (
+      <>
+        <main className="relative min-h-screen flex flex-col justify-center bg-white overflow-hidden">
+          <div className="w-full max-w-6xl mx-auto px-4 md:px-6 py-24">
+            <UnconventionalTabs tabs={tabs} />
+          </div>
+        </main>
+
+        <Banner tutorialUrl="https://cruip.com/using-tailwind-css-and-next-js-to-create-animated-and-accessible-tabs/" downloadUrl="https://github.com/cruip/cruip-tutorials-next/blob/main/components/unconventional-tabs.tsx" />
+      </>
+    )
+  }

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",
+    },
+  ];
+

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 (
+    <div className="bg-white py-6 sm:py-8 lg:py-12">
+      <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+        <div className="grid gap-y-10 sm:grid-cols-1 sm:gap-y-12 lg:grid-cols-3">
+          {tutorials.map((tutorial, index) => (
+            <div
+              key={index}
+              className="flex flex-col items-center gap-4 sm:px-4 md:gap-6 lg:px-2  "
+            >
+              <div className="p-16 flex flex-col justify-center items-center text-2xl font-bold capitalize shadow-xl border border-gray-200 rounded-lg bg-gray-50 w-80 h-60">
+                <h1 className="text-xl text-center">{tutorial.name}</h1>
+                <h2 className="text-base text-slate-600 text-center"></h2>
+                <Link
+                  href={tutorial.href}
+                  className="mt-10 items-center justify-center w-full py-2.5 text-center text-white duration-200 bg-black border-2 border-black rounded-full nline-flex hover:bg-transparent hover:border-black hover:text-black focus:outline-none  focus-visible:outline-black text-sm focus-visible:ring-black  "
+                >
+                  View
+                </Link>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TutorialCard;

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<HTMLDivElement>(null)
+
+  const heightFix = () => {
+    if (tabsRef.current && tabsRef.current.parentElement) tabsRef.current.parentElement.style.height = `${tabsRef.current.clientHeight}px`
+  }
+
+  useEffect(() => {
+    heightFix()
+  }, [])
+
+  return (
+    <Tab.Group>
+      {({ selectedIndex }) => (
+        <div className={`${caveat.variable}`}>
+          {/* Buttons */}
+          <div className="flex justify-center">
+            <Tab.List className="max-[480px]:max-w-[180px] inline-flex flex-wrap justify-center bg-slate-200 rounded-[20px] p-1 mb-8 min-[480px]:mb-12">
+              {tabs.map((tab, index) => (
+                <Tab key={index} as={Fragment}>
+                  <button
+                    className={`flex-1 text-sm font-medium h-8 px-4 rounded-2xl whitespace-nowrap focus-visible:outline-none ui-focus-visible:outline-none ui-focus-visible:ring ui-focus-visible:ring-indigo-300 transition-colors duration-150 ease-in-out ${selectedIndex === index ? 'bg-white text-slate-900' : 'text-slate-600 hover:text-slate-900'}}`}>{tab.title}</button>
+                </Tab>
+              ))}
+            </Tab.List>
+          </div>
+
+          {/* Tab panels */}
+          <Tab.Panels className="max-w-[640px] mx-auto">
+            <div className="relative flex flex-col" ref={tabsRef}>
+
+              {tabs.map((tab, index) => (
+                <Tab.Panel
+                  key={index}
+                  as={Fragment}
+                  static={true}
+                >
+                  <Transition
+                    as="article"
+                    show={selectedIndex === index}
+                    unmount={false}
+                    className="w-full bg-white rounded-2xl shadow-xl min-[480px]:flex items-stretch focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300"
+                    enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-700 transform order-first"
+                    enterFrom="opacity-0 -translate-y-8"
+                    enterTo="opacity-100 translate-y-0"
+                    leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute"
+                    leaveFrom="opacity-100 translate-y-0"
+                    leaveTo="opacity-0 translate-y-12"
+                    beforeEnter={() => heightFix()}
+                  >
+                    <figure className="min-[480px]:w-1/2 p-2">
+                      <Image className="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" width="304" height="214" src={tab.img} alt={tab.title} />
+                    </figure>
+                    <div className="min-[480px]:w-1/2 flex flex-col justify-center p-5 pl-3">
+                      <div className="flex justify-between mb-1">
+                        <header>
+                          <div className="font-caveat text-xl font-medium text-sky-500">{tab.tag}</div>
+                          <h1 className="text-xl font-bold text-slate-900">{tab.title}</h1>
+                        </header>
+                        <button className="shrink-0 h-[30px] w-[30px] border border-slate-200 hover:border-slate-300 rounded-full shadow inline-flex items-center justify-center focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors duration-150 ease-in-out" aria-label="Like">
+                          <svg className="fill-red-500" xmlns="http://www.w3.org/2000/svg" width="14" height="13">
+                            <path d="M6.985 1.635C5.361.132 2.797.162 1.21 1.7A3.948 3.948 0 0 0 0 4.541a3.948 3.948 0 0 0 1.218 2.836l5.156 4.88a.893.893 0 0 0 1.223 0l5.165-4.886a3.925 3.925 0 0 0 .061-5.663C11.231.126 8.62.094 6.985 1.635Zm4.548 4.53-4.548 4.303-4.54-4.294a2.267 2.267 0 0 1 0-3.275 2.44 2.44 0 0 1 3.376 0c.16.161.293.343.398.541a.915.915 0 0 0 .766.409c.311 0 .6-.154.767-.409.517-.93 1.62-1.401 2.677-1.142 1.057.259 1.797 1.181 1.796 2.238a2.253 2.253 0 0 1-.692 1.63Z" />
+                          </svg>
+                        </button>
+                      </div>
+                      <div className="text-slate-500 text-sm line-clamp-3 mb-2">{tab.excerpt}</div>
+                      <div className="text-right">
+                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors duration-150 ease-out" href={tab.link}>Read more -&gt;</a>
+                      </div>
+                    </div>
+                  </Transition>
+                </Tab.Panel>
+              ))}
+
+            </div>
+          </Tab.Panels>
+        </div>
+      )}
+    </Tab.Group>
+  )
+}