This repository has been archived by the owner on Dec 10, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add: features & testimonials section
- Loading branch information
Showing
30 changed files
with
695 additions
and
171 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,6 +1,4 @@ | ||
| { | ||
| "extends": "@ubus/tsconfig/base.json", | ||
| "include": [ | ||
| "routes" | ||
| ] | ||
| "include": ["routes"] | ||
| } |
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,9 +1,18 @@ | ||
| import { Contact } from "../_components/contact"; | ||
| import { EssentialFeatures, KeyFeatures } from "../_components/features"; | ||
| import { Hero } from "../_components/hero"; | ||
| import { OurTeam } from "../_components/our-team"; | ||
| import { Testimonials } from "../_components/testimonials"; | ||
|
|
||
| export default function HomePage() { | ||
| return ( | ||
| <> | ||
| <Hero /> | ||
| <KeyFeatures /> | ||
| <EssentialFeatures /> | ||
| <Testimonials /> | ||
| <OurTeam /> | ||
| <Contact /> | ||
| </> | ||
| ); | ||
| } |
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,23 +1,119 @@ | ||
| import React from "react"; | ||
| import type { IconProps } from "@tabler/icons-react"; | ||
| import Image from "next/image"; | ||
| import { | ||
| IconBusStop, | ||
| IconCalendarTime, | ||
| IconClipboardList, | ||
| IconMap2, | ||
| IconUserHeart, | ||
| } from "@tabler/icons-react"; | ||
|
|
||
| import { | ||
| Card, | ||
| CardContent, | ||
| CardDescription, | ||
| CardHeader, | ||
| CardTitle, | ||
| } from "@ubus/ui/card"; | ||
|
|
||
| const keyFeatures = [ | ||
| { | ||
| title: "Real-Time Tracking", | ||
| subtitle: | ||
| "View live bus locations and stay updated on their arrival times.", | ||
| icon: ({ ...props }: IconProps) => <IconMap2 {...props} />, | ||
| }, | ||
| { | ||
| title: "Schedule Notifications", | ||
| subtitle: | ||
| "Receive alerts about bus schedules and any impo-rtant service changes.", | ||
| icon: ({ ...props }: IconProps) => <IconCalendarTime {...props} />, | ||
| }, | ||
| ]; | ||
|
|
||
| export const KeyFeatures = () => { | ||
| return ( | ||
| <div> | ||
| <div> | ||
| <h2 className="text-display-medium">Discover the key benefits</h2> | ||
| <p> | ||
| Track buses in real-time and get instant notifications, all from an | ||
| easy-to-use dashboard. | ||
| </p> | ||
| </div> | ||
| <div> | ||
| <h3>Real-Time Tracking</h3> | ||
| <p>View live bus locations and stay updated on their arrival times.</p> | ||
| <div className="grid grid-cols-2 items-center py-8"> | ||
| <h2 className="text-headline-large font-bold leading-7 sm:text-display-medium lg:self-end"> | ||
| Discover the key benefits | ||
| </h2> | ||
| <Image | ||
| alt="bus picture" | ||
| className="h-36 lg:row-span-2 lg:h-auto xl:row-span-3 xl:pl-4" | ||
| src={"/bus.svg"} | ||
| height={563} | ||
| width={699} | ||
| /> | ||
| <p className="col-span-2 sm:pb-4 sm:text-headline-medium lg:col-span-1 lg:self-start lg:pb-0 lg:pt-4"> | ||
| Track buses in real-time and get instant notifications, all from an | ||
| easy-to-use dashboard. | ||
| </p> | ||
| <div className="col-span-2 gap-4 py-2 sm:flex md:-mt-8 lg:py-0 xl:col-span-1 xl:mt-0 xl:gap-6 xl:self-start"> | ||
| {keyFeatures.map((item) => ( | ||
| <div | ||
| key={item.title} | ||
| className="flex flex-col gap-2 py-4 md:gap-4 lg:py-0" | ||
| > | ||
| {item.icon({ size: 50 })} | ||
| <h3 className="text-headline-small font-bold">{item.title}</h3> | ||
| <p className="text-body-large md:text-headline-small"> | ||
| {item.subtitle} | ||
| </p> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const essentialFeatures = [ | ||
| { | ||
| title: "User-Friendly Dashboard ", | ||
| subtilte: | ||
| "The dashboard provides instant access to bus tracking, schedules, and notifications.", | ||
| icon: ({ ...props }: IconProps) => <IconUserHeart {...props} />, | ||
| }, | ||
| { | ||
| title: "Find Nearest Bus", | ||
| subtilte: "Find the nearest bus from your current location", | ||
| icon: ({ ...props }: IconProps) => <IconBusStop {...props} />, | ||
| }, | ||
| { | ||
| title: "Stay Informed with Our Notice Board", | ||
| subtilte: "Receive timely updates on schedules and important notices.", | ||
| icon: ({ ...props }: IconProps) => <IconClipboardList {...props} />, | ||
| }, | ||
| ]; | ||
|
|
||
| export const EssentialFeatures = () => { | ||
| return <div>EssentialFeatures</div>; | ||
| return ( | ||
| <div className="grid gap-3 py-8 lg:my-32 lg:grid-cols-6 lg:gap-y-12"> | ||
| <h2 className="text-headline-large font-bold leading-7 sm:text-display-medium lg:col-span-3 lg:self-end"> | ||
| Explore Our Essential Bus Tracking Features | ||
| </h2> | ||
| <p className="pb-4 text-justify text-body-large md:pb-6 lg:col-span-3 lg:pb-0 lg:text-base"> | ||
| Our bus tracking system offers three key features designed for student | ||
| convenience. Access real-time bus locations, view schedules, and stay | ||
| updated on important announcements all in one place. Experience seamless | ||
| navigation and timely information at your fingertips. | ||
| </p> | ||
| {essentialFeatures.map((item) => ( | ||
| <Card key={item.title} className="lg:col-span-2"> | ||
| <CardHeader className="gap-4"> | ||
| <div className="self-start rounded-md bg-on-primary-container p-3 text-primary-container"> | ||
| {item.icon({ className: "size-6 lg:size-8" })} | ||
| </div> | ||
| <CardTitle className="text-headline-small !font-bold leading-7 md:text-headline-large lg:!text-headline-small lg:!font-bold"> | ||
| {item.title} | ||
| </CardTitle> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <CardDescription className="!text-body-large text-on-primary-container md:!text-headline-small"> | ||
| {item.subtilte} | ||
| </CardDescription> | ||
| </CardContent> | ||
| </Card> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; |
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 |
|---|---|---|
| @@ -1,5 +1,99 @@ | ||
| "use client"; | ||
|
|
||
| import React from "react"; | ||
| import { IconQuote, IconStarFilled } from "@tabler/icons-react"; | ||
| import Autoplay from "embla-carousel-autoplay"; | ||
|
|
||
| import { Avatar, AvatarFallback, AvatarImage } from "@ubus/ui/avatar"; | ||
| import { Card, CardContent } from "@ubus/ui/card"; | ||
| import { | ||
| Carousel, | ||
| CarouselContent, | ||
| CarouselItem, | ||
| CarouselNext, | ||
| CarouselPrevious, | ||
| } from "@ubus/ui/carousel"; | ||
|
|
||
| export function CarouselPlugin() { | ||
| return ( | ||
| <Carousel | ||
| // opts={{ loop: true }} | ||
| > | ||
| <CarouselContent> | ||
| {Array.from({ length: 5 }).map((_, index) => ( | ||
| <CarouselItem key={index}> | ||
| <div className="p-1"> | ||
| <Card> | ||
| <CardContent className="flex aspect-square items-center justify-center p-6"> | ||
| <span className="text-4xl font-semibold">{index + 1}</span> | ||
| </CardContent> | ||
| </Card> | ||
| </div> | ||
| </CarouselItem> | ||
| ))} | ||
| </CarouselContent> | ||
| <CarouselPrevious /> | ||
| <CarouselNext /> | ||
| </Carousel> | ||
| ); | ||
| } | ||
|
|
||
| export const Testimonials = () => { | ||
| return <div>Testimonials</div>; | ||
| const plugin = React.useRef( | ||
| Autoplay({ delay: 2000, stopOnInteraction: true }), | ||
| ); | ||
| return ( | ||
| <div className="w-full *:select-none lg:my-32"> | ||
| <Carousel | ||
| className="relative mx-auto w-full max-w-6xl" | ||
| // plugins={[plugin.current]} | ||
| onMouseEnter={plugin.current.stop} | ||
| onMouseLeave={plugin.current.reset} | ||
| opts={{ loop: true }} | ||
| > | ||
| <CarouselContent> | ||
| {Array.from({ length: 5 }).map((_, index) => ( | ||
| <CarouselItem key={index}> | ||
| <div className="mx-auto flex max-w-2xl flex-col items-center justify-center gap-0 py-8 md:gap-4 lg:gap-6"> | ||
| <div className="flex *:size-5 *:text-primary-fixed"> | ||
| <IconStarFilled /> | ||
| <IconStarFilled /> | ||
| <IconStarFilled /> | ||
| <IconStarFilled /> | ||
| <IconStarFilled /> | ||
| </div> | ||
| <div className="text-center lg:max-w-xl xl:max-w-2xl"> | ||
| <div className="-mb-2 inline-block"> | ||
| <IconQuote className="mr-1 size-8" /> | ||
| </div> | ||
| <span className="!text-body-large font-bold md:!text-headline-small md:!font-semibold"> | ||
| The bus tracking system has transformed my daily commute. I | ||
| can now plan my schedule more effectively and never miss a | ||
| bus! | ||
| </span> | ||
| </div> | ||
| <div className="flex items-center justify-center gap-3 pt-4 md:p-0"> | ||
| <Avatar> | ||
| <AvatarImage | ||
| src="hr.svg" | ||
| alt="Hasibur Rahman Profile Picture" | ||
| /> | ||
| <AvatarFallback>HR</AvatarFallback> | ||
| </Avatar> | ||
| <div> | ||
| <h4 className="text-label-large !font-bold"> | ||
| Hasibul Rahman | ||
| </h4> | ||
| <p className="text-label-small">Student, CSE Depertment</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </CarouselItem> | ||
| ))} | ||
| </CarouselContent> | ||
| <CarouselPrevious className="border border-outline-variant dark:bg-secondary-container dark:text-on-secondary-container" /> | ||
| <CarouselNext className="border border-outline-variant dark:bg-secondary-container dark:text-on-secondary-container" /> | ||
| </Carousel> | ||
| </div> | ||
| ); | ||
| }; |
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
Oops, something went wrong.