Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added curated chatbot #275

Merged
merged 1 commit into from
Nov 10, 2024
Merged

added curated chatbot #275

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
198 changes: 144 additions & 54 deletions alimento-nextjs/app/(PublicRoutes)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,39 @@
"use client"
"use client";

import { cn } from '@/lib/utils';
import {Button} from '@/components/ui/button'
import {Card} from "@/components/ui/card"
import {Input} from "@/components/ui/input"
import Image from 'next/image';
import Link from 'next/link';
import { ShoppingCart, Truck, Award, ChevronLeft, ChevronRight } from 'lucide-react';
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import Image from "next/image";
import Link from "next/link";
import {
ShoppingCart,
Truck,
Award,
ChevronLeft,
ChevronRight,
ChefHat,
} from "lucide-react";
import Chatbot from "@/components/chatbot/chatbot";
import { useState } from "react";

const services = [
{ icon: ShoppingCart, title: 'Easy to order', text: 'Our user-friendly UI makes it easier for you to order seamlessly.' },
{ icon: Truck, title: 'Safe Delivery', text: 'Assured no damage to food with our safe delivery service.' },
{ icon: Award, title: 'Best Quality', text: 'Collections of best-rated restaurants maintain our quality standards.' }
{
icon: ShoppingCart,
title: "Easy to order",
text: "Our user-friendly UI makes it easier for you to order seamlessly.",
},
{
icon: Truck,
title: "Safe Delivery",
text: "Assured no damage to food with our safe delivery service.",
},
{
icon: Award,
title: "Best Quality",
text:
"Collections of best-rated restaurants maintain our quality standards.",
},
];

function ServiceSection() {
Expand All @@ -20,7 +42,8 @@ function ServiceSection() {
{services.map((service, index) => (
<div key={index} className="flex items-center flex-col text-center">
<div className="bg-[#E6E8DD] w-32 h-32 rounded-full flex items-center justify-center">
<service.icon size={40} color="#5C5F50" /> {/* Adjust size and color as needed */}
<service.icon size={40} color="#5C5F50" />{" "}
{/* Adjust size and color as needed */}
</div>
<h2 className="text-gray-800 font-semibold text-2xl mt-2 sm:text-xl lg:text-2xl xl:text-3xl">
{service.title}
Expand All @@ -35,23 +58,38 @@ function ServiceSection() {
}

export default function Home() {
const [chatbotOpen, toggleChatbotOpen] = useState(false);

return (
<>
{/* Hero Section */}
<div className={cn("mx-5 bg-[#E6E8DD] p-3 rounded-3xl font-poppins flex flex-wrap-reverse md:flex-nowrap md:py-10 lg:max-w-5xl lg:mx-auto lg:gap-10 lg:justify-around xl:max-w-7xl xl:mx-auto mt-4")}>
<div
className={cn(
"mx-5 bg-[#E6E8DD] p-3 rounded-3xl font-poppins flex flex-wrap-reverse md:flex-nowrap md:py-10 lg:max-w-5xl lg:mx-auto lg:gap-10 lg:justify-around xl:max-w-7xl xl:mx-auto mt-4"
)}
>
{/* Left Section */}
<div className={cn("mt-14 px-5 md:w-2/3 lg:w-1/2 xl:mt-20 xl:pt-10 xl:w-1/2")}>
<div
className={cn(
"mt-14 px-5 md:w-2/3 lg:w-1/2 xl:mt-20 xl:pt-10 xl:w-1/2"
)}
>
<div className="mb-4">
<h1 className="font-bold text-3xl text-gray-800 sm:text-4xl lg:text-5xl lg:leading-tight">
Discover the best food at your place
</h1>
<p className="text-[#919388] mt-4 text-base font-medium lg:text-lg">
Craving something delicious? Explore the best food around you, from local favorites to hidden gems all just a tap away!
Craving something delicious? Explore the best food around you,
from local favorites to hidden gems all just a tap away!
</p>
</div>
{/* Search Form and Buttons */}
<div className="mt-10">
<form action="/pin_search" method="post" className="flex px-4 md:px-5 py-3 bg-white w-full rounded-lg md:rounded-full lg:px-6 lg:py-4">
<form
action="/pin_search"
method="post"
className="flex px-4 md:px-5 py-3 bg-white w-full rounded-lg md:rounded-full lg:px-6 lg:py-4"
>
<Input
type="number"
placeholder="Search by pincode"
Expand All @@ -66,14 +104,18 @@ export default function Home() {
<div className="flex justify-between w-full mt-4 items-center mb-4">
<Link
href="/home"
className={cn("bg-[#6E725E] flex justify-center items-center w-full text-[#FDFFF5] py-3 rounded-lg border border-[#585b4d] md:rounded-full hover:bg-[#585b4d] lg:px-6 lg:py-4 lg:text-lg")}
className={cn(
"bg-[#6E725E] flex justify-center items-center w-full text-[#FDFFF5] py-3 rounded-lg border border-[#585b4d] md:rounded-full hover:bg-[#585b4d] lg:px-6 lg:py-4 lg:text-lg"
)}
>
Delivery
</Link>
<p className="mx-3 lg:text-lg text-center">Or</p>
<Link
href="/home"
className={cn("bg-[#FDFFF5] flex justify-center items-center w-full py-3 rounded-lg md:rounded-full border border-[#585b4d] hover:bg-white lg:px-6 lg:py-4 lg:text-lg")}
className={cn(
"bg-[#FDFFF5] flex justify-center items-center w-full py-3 rounded-lg md:rounded-full border border-[#585b4d] hover:bg-white lg:px-6 lg:py-4 lg:text-lg"
)}
>
Dine in
</Link>
Expand All @@ -96,66 +138,114 @@ export default function Home() {
width={288}
height={288}
/>
</div>

</div>
</div>

{/* Services Section */}
<ServiceSection />
<ServiceSection />

{/* Reviews Section */}
<div className={cn("flex flex-wrap-reverse mx-5 my-10 sm:mt-16 sm:max-w-xl sm:mx-auto md:max-w-4xl md:px-5 md:flex-nowrap md:grid md:grid-cols-2 md:mt-32 lg:max-w-5xl xl:max-w-7xl")}>
<div
className={cn(
"flex flex-wrap-reverse mx-5 my-10 sm:mt-16 sm:max-w-xl sm:mx-auto md:max-w-4xl md:px-5 md:flex-nowrap md:grid md:grid-cols-2 md:mt-32 lg:max-w-5xl xl:max-w-7xl"
)}
>
<div className="font-poppins">
<h2 className="font-semibold text-2xl text-gray-800 md:text-3xl lg:text-4xl">Our lovely customer loves our food!</h2>
<h2 className="font-semibold text-2xl text-gray-800 md:text-3xl lg:text-4xl">
Our lovely customer loves our food!
</h2>
<p className="text-gray-700 text-base mt-2 md:text-lg">
“Donec euismod a mauris ornare posuere. Donec porttitor ex vitae ipsum tincidunt auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas”
“Donec euismod a mauris ornare posuere. Donec porttitor ex vitae
ipsum tincidunt auctor. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas”
</p>
<div className="mt-2 flex gap-3 md:mt-16">
{Array(4).fill(null).map((_, i) => (
<i key={i} className="bi bi-star-fill md:text-lg text-[#FFCC01]"></i>
))}
{Array(4)
.fill(null)
.map((_, i) => (
<i
key={i}
className="bi bi-star-fill md:text-lg text-[#FFCC01]"
></i>
))}
<i className="bi bi-star-half md:text-lg text-[#FFCC01]"></i>
</div>
<div>
<h3 className="font-semibold text-lg text-gray-800 md:text-xl">Martin Robbin</h3>
<h3 className="font-semibold text-lg text-gray-800 md:text-xl">
Martin Robbin
</h3>
<p className="text-gray-500 text-sm md:text-lg">Delhi, India</p>
</div>
<div className="mt-5 flex items-center gap-2">
<Button variant="outline" className="w-10 h-10 p-2 rounded-full shadow shadow-gray-300">
<ChevronLeft size={20} className="text-gray-600" />
</Button>
<Button variant="outline" className="w-10 h-10 p-2 rounded-full shadow shadow-gray-300">
<ChevronRight size={20} className="text-gray-600" />
</Button>
</div>
<Button
variant="outline"
className="w-10 h-10 p-2 rounded-full shadow shadow-gray-300"
>
<ChevronLeft size={20} className="text-gray-600" />
</Button>
<Button
variant="outline"
className="w-10 h-10 p-2 rounded-full shadow shadow-gray-300"
>
<ChevronRight size={20} className="text-gray-600" />
</Button>
</div>
</div>
<div className="mx-auto">
<Image src="/review.webp" alt="review-image" className="w-96 sm:w-80 md:w-96 lg:w-[500px]" width={384} height={384} />
<Image
src="/review.webp"
alt="review-image"
className="w-96 sm:w-80 md:w-96 lg:w-[500px]"
width={384}
height={384}
/>
</div>
</div>

{/* Membership Section */}
<div className={cn("bg-white")}>
<Card className={cn("my-10 mx-5 rounded-3xl p-5 font-poppins text-black bg-[rgba(230,232,221,var(--tw-bg-opacity))] sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl sm:mx-auto sm:h-80 lg:h-96")}>
<div className="mt-10 text-center sm:px-10 sm:py-7 md:px-16 lg:px-64">
<h2 className="font-semibold text-xl sm:text-2xl md:text-3xl lg:text-4xl">
Join our membership and get discount up to 50%
</h2>
<form className={cn("bg-white flex items-center justify-between py-1 mt-9 px-2 rounded-xl sm:mt-16 sm:py-2 sm:px-3 sm:rounded-2xl lg:rounded-full lg:px-5")}>
<Input
type="email"
placeholder="Enter your email"
required
className="w-full border-none outline-none text-gray-700 text-sm sm:text-base sm:ml-2 lg:text-lg"
/>
<Button type="submit" className="bg-gray-800 text-white rounded-xl py-2 px-4 text-sm sm:text-base sm:py-2 sm:px-3 lg:rounded-full lg:px-5 lg:py-3 lg:text-lg">
Subscribe
</Button>
</form>
</div>
</Card>
<Card
className={cn(
"my-10 mx-5 rounded-3xl p-5 font-poppins text-black bg-[rgba(230,232,221,var(--tw-bg-opacity))] sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl sm:mx-auto sm:h-80 lg:h-96"
)}
>
<div className="mt-10 text-center sm:px-10 sm:py-7 md:px-16 lg:px-64">
<h2 className="font-semibold text-xl sm:text-2xl md:text-3xl lg:text-4xl">
Join our membership and get discount up to 50%
</h2>
<form
className={cn(
"bg-white flex items-center justify-between py-1 mt-9 px-2 rounded-xl sm:mt-16 sm:py-2 sm:px-3 sm:rounded-2xl lg:rounded-full lg:px-5"
)}
>
<Input
type="email"
placeholder="Enter your email"
required
className="w-full border-none outline-none text-gray-700 text-sm sm:text-base sm:ml-2 lg:text-lg"
/>
<Button
type="submit"
className="bg-gray-800 rounded-full text-white w-16 h-12 px-4 py-2 lg:w-28 lg:h-12"
>
Join
</Button>
</form>
</div>
</Card>
</div>

{/* Chatbot - Positioned at the Bottom Right */}
<div className="fixed bottom-4 right-4 z-50">
<Button
onClick={() => toggleChatbotOpen(!chatbotOpen)}
className="bg-purple-600 text-white rounded-full p-4 shadow-lg hover:bg-purple-900 focus:outline-none focus:ring-2 transition duration-300"
>
{/* You can add an icon inside the button if needed */}
<ChefHat className="w-5 h-5" />
</Button>
{chatbotOpen && <Chatbot />}
</div>
</>
);
}
Loading