forked from FrontendFreaks/Official-Website
-
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.
1. Rewrote the existing code with tailwind CSS only (tracks.tsx) 2. The supporting CSS file has been removed from styles dir -----------------------------------------------
- Loading branch information
1 parent
fe4c010
commit 1f53c91
Showing
2 changed files
with
43 additions
and
83 deletions.
There are no files selected for viewing
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 |
|---|---|---|
| @@ -1,83 +1,53 @@ | ||
| import Image from "next/image"; | ||
| import { buttonVariants } from "./ui/button"; | ||
| import Link from "next/link"; | ||
| import { cn } from "@/lib/utils"; | ||
| import { buttonVariants } from "./ui/button"; | ||
| import styles from "../styles/tracks.module.css"; // Import the CSS module | ||
| import React from "react"; // Import React | ||
|
|
||
| function TrackCard({ title, description, imageSrc, linkHref }) { | ||
| return ( | ||
| <div className="flex flex-col gap-3 items-center border p-4 rounded-lg"> | ||
| type Props = {}; | ||
|
|
||
| <div className={styles["image-container"]}> | ||
| export default function Tracks({}: Props) { | ||
| return ( | ||
| <section className="text-center md:my-20 my-10"> | ||
| <h4 className="md:text-3xl text-xl text-black font-bold dark:text-white"> | ||
| Our Batches | ||
| </h4> | ||
| <p>Master the Frontend Development with Frontend Freaks</p> | ||
|
|
||
| <Link href={linkHref}> | ||
|
|
||
| <Image | ||
| src={imageSrc} | ||
| alt={title} | ||
| width={250} | ||
| height={250} | ||
| className="rounded bg-white" | ||
| /> | ||
| </Link> | ||
| </div> | ||
| <div className="flex flex-col gap-2 flex-grow"> | ||
| <h3 className="text-xl font-bold">{title}</h3> | ||
| <p className="text-md text-slate-600 max-w-md dark:text-white"> | ||
| {description} | ||
| </p> | ||
| </div> | ||
| <Link href={linkHref} className={cn(buttonVariants(), "rounded-full px-8 py-2 mt-4")}> | ||
| Join | ||
| </Link> | ||
| </div> | ||
| ); | ||
| <div className="flex gap-6 mt-8 md:flex-row flex-col"> | ||
| <BatchCard imageSrc="/learn_img.svg" title="Build Your Foundation" description="Make your foundation strong by learning HTML, CSS, JS, Git, and GitHub. Join this batch if you want to make your foundation as strong as concrete." href="/batch/learn/html/basic" /> | ||
| <BatchCard imageSrc="/dsa_in_javascript.svg" title="DSA In Javascript" description="Enroll for this batch to ace DSA skills with JavaScript, enhancing your skills for job success." href="/batch/dsa/loops" /> | ||
| <BatchCard imageSrc="/build_img.svg" title="Build Projects" description="Build the project with the latest technologies like React, Redux, and Next.js. Join this batch if you want to be a part of it." href="/batch/build/react/fundamentals" /> | ||
| <BatchCard imageSrc="/hire_img.svg" title="Get Hired" description="Enroll for this batch to ace interviews with tips, tricks, and mock sessions, enhancing your skills for job success." href="/batch/hire/hire" /> | ||
| </div> | ||
| </section> | ||
| ); | ||
| } | ||
|
|
||
| export default function Tracks() { | ||
| const trackData = [ | ||
| { | ||
| title: "Build Your Foundation", | ||
| description: | ||
| "Make your foundation strong by learning HTML, CSS, JS, Git, and GitHub. Join this batch if you want to make your foundation as strong as concrete.", | ||
| imageSrc: "/learn_img.svg", | ||
| linkHref: "/batch/learn/html/basic", | ||
| }, | ||
| { | ||
| title: "DSA In Javascript", | ||
| description: | ||
| "Enroll for this batch to ace DSA skills with javascript, enhancing your skills for job success.", | ||
| imageSrc: "/dsa_in_javascript.svg", | ||
| linkHref: "/batch/dsa/loops", | ||
| }, | ||
| { | ||
| title: "Build Projects", | ||
| description: | ||
| "Build the project with the latest technologies like React, Redux, and Next.js. Join this batch if you want to be a part of it.", | ||
| imageSrc: "/build_img.svg", | ||
| linkHref: "/batch/build/react/fundamentals", | ||
| }, | ||
| { | ||
| title: "Get Hired", | ||
| description: | ||
| "Enroll for this batch to ace interviews with tips, tricks, and mock sessions, enhancing your skills for job success.", | ||
| imageSrc: "/hire_img.svg", | ||
| linkHref: "/batch/hire/hire", | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <section className="text-center md:my-20 my-10"> | ||
| <h4 className="md:text-3xl text-xl text-black font-bold dark:text-white"> | ||
| Our Batches | ||
| </h4> | ||
| <p>Master Frontend Development with Frontend Freaks</p> | ||
|
|
||
| <div className="flex gap-6 mt-8 md:flex-row flex-col"> | ||
| {trackData.map((track, index) => ( | ||
| <TrackCard key={index} {...track} /> | ||
| ))} | ||
| function BatchCard({ imageSrc, title, description, href }) { | ||
| return ( | ||
| <div className="flex flex-col gap-3 items-center border p-4 rounded-lg group hover:scale-107 transition-transform"> | ||
| <a href={href}> | ||
| <img | ||
| src={imageSrc} | ||
| alt="learn" | ||
| width={250} | ||
| height={250} | ||
| className="rounded bg-white batch-card-image" | ||
| /> | ||
| </a> | ||
| <div className="flex flex-col gap-2 flex-grow"> | ||
| <h3 className="text-xl font-bold">{title}</h3> | ||
| <p className="text-md text-slate-600 max-w-md dark:text-white"> | ||
| {description} | ||
| </p> | ||
| </div> | ||
| <Link | ||
| href={href} | ||
| className={cn(buttonVariants(), "rounded-full px-8 py-2 mt-4")} | ||
| > | ||
| Join | ||
| </Link> | ||
| </div> | ||
| </section> | ||
| ); | ||
| ); | ||
| } |
This file was deleted.
Oops, something went wrong.