first commit
Some checks failed
Build and Deploy Build Output / build (push) Has been cancelled

This commit is contained in:
Alaguraj0361 2025-09-26 21:09:39 +05:30
commit 107f07c035
607 changed files with 92701 additions and 0 deletions

59
.github/workflows/main.yml vendored Normal file
View File

@ -0,0 +1,59 @@
name: Build and Deploy Build Output
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18.17.0'
- name: Install dependencies
run: npm install
- name: Build Next.js project
run: npm run build
# Optional: List build directories to verify output exists
- name: List build directories
run: ls -la
- name: Deploy build output to build-output branch
env:
# The GITHUB_TOKEN is automatically provided by GitHub Actions.
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
run: |
# Configure git
git config --global user.name "GitHub Actions"
git config --global user.email "actions@github.com"
# Create a temporary directory for the output
mkdir deploy
# Copy the build outputs (update the paths if needed)
cp -r out deploy/
cp -r .next deploy/ 2>/dev/null || echo ".next folder not found, skipping."
# Move into the deploy directory
cd deploy
# Initialize a new git repo
git init
git checkout -b build-output
# Add all files and commit them
git add .
git commit -m "Deploy build output for commit ${GITHUB_SHA}"
# Force push to the remote build-output branch
git push --force "https://x-access-token:${GITHUB_TOKEN}@github.com/${{ github.repository }}.git" build-output

BIN
.gitignore vendored Normal file

Binary file not shown.

437
app/about/page.js Normal file
View File

@ -0,0 +1,437 @@
import { AboutUs3 } from "@/components/AboutUs";
import BookTableForm from "@/components/BookTableForm";
import FoodCategory from "@/components/FoodCategory";
import Headline from "@/components/Headline";
import PageBanner from "@/components/PageBanner";
import { TestimonialSlider2 } from "@/components/TestimonialSlider";
import WellFoodLayout from "@/layout/WellFoodLayout";
import AboutContent from "@/components/About/AboutContent";
import AboutCategory from "@/components/About/AboutCategory";
import Link from "next/link";
import AboutCallAction from "@/components/About/AboutCallAction";
import AboutContent2 from "@/components/About/AboutContent2";
import AboutCallAction2 from "@/components/About/AboutCallAction2";
import AboutTestimonial from "@/components/About/AboutTestimonial";
export const metadata = {
title: "About Shiva Sakthi | Top Indian Restaurant in Mississauga",
description: "Learn about Shiva Sakthi, one of the best Indian restaurants in Mississauga, offering traditional South Indian flavors, and a modern dining experience.",
};
const page = () => {
return (
<WellFoodLayout>
<PageBanner pageTitle={"About Us"} pageName={"About Us"} background="/assets/images/inner-banner/1.webp"/>
<AboutContent />
<AboutCategory />
<AboutCallAction />
<AboutContent2 />
<AboutCallAction2 />
<AboutTestimonial />
{/* <AboutUs3 /> */}
{/* <Headline /> */}
{/* Food Category Area start */}
{/* <FoodCategory /> */}
{/* Food Category Area end */}
{/* Booking Table Area start */}
{/* <section
className="booking-table-area-two bgs-cover py-100 rel z-1 overlay"
style={{
backgroundImage:
"url(/assets/images/background/booking-table-two.jpg)",
}}
>
<div className="container">
<div className="row justify-content-between align-items-center">
<div
className="col-lg-5"
data-aos="fade-left"
data-aos-duration={1500}
data-aos-offset={50}
>
<BookTableForm />
</div>
<div
className="col-xl-5 col-lg-6"
data-aos="fade-right"
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="booking-table-content style-two rmt-55">
<a
href="https://www.youtube.com/watch?v=9Y7ma241N8k"
className="mfp-iframe video-play"
>
<i className="fas fa-play" />
</a>
<div className="section-title mt-50 text-white mb-50">
<h2>
We Offer quality service That Customers Needs for health
food
</h2>
</div>
<hr />
</div>
</div>
</div>
</div>
</section> */}
{/* Booking Table Area end */}
{/* Chefs Area start */}
{/* <section className="chefs-area pt-130 rpt-100 pb-55 rpb-30 rel z-1">
<div className="container">
<div className="row justify-content-center">
<div className="col-xl-7 col-lg-9">
<div
className="section-title text-center mb-50"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<span className="sub-title mb-5">professional chefs</span>
<h2>we have professionals team member meet our expert chefs</h2>
</div>
</div>
</div>
<div className="row justify-content-center">
<div className="col-xl-3 col-lg-4 col-sm-6">
<div
className="chefs-item"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="image">
<img src="/assets/images/chefs/chef1.jpg" alt="Chef" />
</div>
<div className="description">
<h5>
<Link href="chef-details">Nolan E. Barrera</Link>
</h5>
<span>Senior Chef</span>
<Link href="chef-details" className="more-btn">
<i className="far fa-plus" />
</Link>
</div>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-sm-6">
<div
className="chefs-item"
data-aos="fade-up"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="image">
<img src="/assets/images/chefs/chef2.jpg" alt="Chef" />
</div>
<div className="description">
<h5>
<Link href="chef-details">William B. Nguyen</Link>
</h5>
<span>Senior Chef</span>
<Link href="chef-details" className="more-btn">
<i className="far fa-plus" />
</Link>
</div>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-sm-6">
<div
className="chefs-item"
data-aos="fade-up"
data-aos-delay={100}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="image">
<img src="/assets/images/chefs/chef3.jpg" alt="Chef" />
</div>
<div className="description">
<h5>
<Link href="chef-details">Michael A. Coulson</Link>
</h5>
<span>Senior Chef</span>
<Link href="chef-details" className="more-btn">
<i className="far fa-plus" />
</Link>
</div>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-sm-6">
<div
className="chefs-item"
data-aos="fade-up"
data-aos-delay={150}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="image">
<img src="/assets/images/chefs/chef4.jpg" alt="Chef" />
</div>
<div className="description">
<h5>
<Link href="chef-details">Brent M. Powers</Link>
</h5>
<span>Senior Chef</span>
<Link href="chef-details" className="more-btn">
<i className="far fa-plus" />
</Link>
</div>
</div>
</div>
</div>
</div>
</section> */}
{/* Chefs Area end */}
{/* Headline area start */}
{/* <div className="headline-area mb-105 rmb-85 rel z-1">
<span className="marquee-wrap">
<span className="marquee-inner left">
<span className="marquee-item">Italian pizza</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
<span className="marquee-item">delicious foods</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
<span className="marquee-item">burger king</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
</span>
<span className="marquee-inner left">
<span className="marquee-item">Italian pizza</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
<span className="marquee-item">delicious foods</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
<span className="marquee-item">burger king</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
</span>
<span className="marquee-inner left">
<span className="marquee-item">Italian pizza</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
<span className="marquee-item">delicious foods</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
<span className="marquee-item">burger king</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
</span>
</span>
<div className="headline-shapes">
<div className="shape one">
<img src="/assets/images/shapes/tomato.png" alt="Shape" />
</div>
<div className="shape two">
<img src="/assets/images/shapes/burger.png" alt="Shape" />
</div>
</div>
</div> */}
{/* Headline Area end */}
{/* Features Two area start */}
{/* <div className="feature-two-area pb-130 rpb-100">
<div className="container-fluid">
<div className="row no-gap">
<div className="col-xl-4 col-lg-6">
<div
className="feature-two-image"
data-aos="fade-left"
data-aos-duration={1500}
data-aos-offset={50}
>
<img src="/assets/images/features/feature1.jpg" alt="Feature" />
</div>
</div>
<div className="col-xl-4 col-lg-6">
<div
className="feature-two-content"
data-aos="fade-left"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<h3>Private dining</h3>
<p>
The duration of a consulting engagement varies depending on
the scope and complexity of the project.
</p>
<ul className="list-style-one pt-5 mb-30">
<li>Testy and quality food</li>
<li>Fast food delivery</li>
<li>Awards winning restuarent</li>
</ul>
<Link href="shop" className="theme-btn style-two">
book now <i className="far fa-arrow-alt-right" />
</Link>
</div>
</div>
<div className="col-xl-4 col-lg-6 offset-xl-4">
<div
className="feature-two-image"
data-aos="fade-right"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<img src="/assets/images/features/feature2.jpg" alt="Feature" />
</div>
</div>
<div className="col-xl-4 col-lg-6">
<div
className="feature-two-content"
data-aos="fade-right"
data-aos-duration={1500}
data-aos-offset={50}
>
<h3>The Raw Bar</h3>
<p>
The duration of a consulting engagement varies depending on
the scope and complexity of the project.
</p>
<ul className="list-style-one pt-5 mb-30">
<li>Testy and quality food</li>
<li>Fast food delivery</li>
<li>Awards winning restuarent</li>
</ul>
<Link href="shop" className="theme-btn style-two">
book now <i className="far fa-arrow-alt-right" />
</Link>
</div>
</div>
<div className="col-xl-4 col-lg-6">
<div
className="feature-two-image"
data-aos="fade-left"
data-aos-duration={1500}
data-aos-offset={50}
>
<img src="/assets/images/features/feature3.jpg" alt="Feature" />
</div>
</div>
<div className="col-xl-4 col-lg-6">
<div
className="feature-two-content"
data-aos="fade-left"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<h3>Outdoor catering</h3>
<p>
The duration of a consulting engagement varies depending on
the scope and complexity of the project.
</p>
<ul className="list-style-one pt-5 mb-30">
<li>Testy and quality food</li>
<li>Fast food delivery</li>
<li>Awards winning restuarent</li>
</ul>
<Link href="shop" className="theme-btn style-two">
book now <i className="far fa-arrow-alt-right" />
</Link>
</div>
</div>
</div>
</div>
</div> */}
{/* Features Two area end */}
{/* Headline area start */}
{/* <div className="headline-area bgc-lighter pt-120 rpt-90 rel z-2">
<span className="marquee-wrap">
<span className="marquee-inner left">
<span className="marquee-item">Italian pizza</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
<span className="marquee-item">our Testimonials</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
<span className="marquee-item">burger king</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
</span>
<span className="marquee-inner left">
<span className="marquee-item">Italian pizza</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
<span className="marquee-item">our Testimonials</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
<span className="marquee-item">burger king</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
</span>
<span className="marquee-inner left">
<span className="marquee-item">Italian pizza</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
<span className="marquee-item">our Testimonials</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
<span className="marquee-item">burger king</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
</span>
</span>
<div className="headline-shapes">
<div className="shape one">
<img src="/assets/images/shapes/chillies.png" alt="Shape" />
</div>
<div className="shape two">
<img src="/assets/images/shapes/tomato.png" alt="Shape" />
</div>
</div>
</div> */}
{/* Headline Area end */}
{/* Testimonials Area start */}
{/* <section className="testimonials-area bgc-lighter pt-105 rpt-85 pb-130 rpb-100 rel z-1">
<div className="container">
<div className="row justify-content-center">
<div className="col-xl-7 col-lg-8">
<div
className="section-title text-center mb-50"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<span className="sub-title mb-5">customer feedback</span>
<h2>what have lots off happy customer explore feedback</h2>
</div>
</div>
</div>
<TestimonialSlider2 />
</div>
<div className="testimonials-shapes">
<div className="shape one">
<img src="/assets/images/shapes/hero-shape4.png" alt="Shape" />
</div>
<div className="shape two">
<img src="/assets/images/shapes/tomato.png" alt="Shape" />
</div>
</div>
</section> */}
{/* Testimonials Area end */}
</WellFoodLayout>
);
};
export default page;

61
app/blog/[slug]/page.js Normal file
View File

@ -0,0 +1,61 @@
// app/blog/[slug]/page.tsx
import PageBanner from "@/components/PageBanner";
import WellFoodLayout from "@/layout/WellFoodLayout";
import { Blog } from "@/utility/constant.utils";
export async function generateStaticParams() {
return Blog.map((item) => ({
slug: item.slug,
}));
}
export default function BlogPage({ params }) {
const { slug } = params;
const blog = Blog.find((item) => item.slug === slug);
if (!blog) {
return <div>Blog post not found</div>;
}
return (
<WellFoodLayout>
<PageBanner pageTitle={"Blog details"} background="/assets/images/inner-banner/2.webp" />
<section className="blog-details-area py-80 rpy-60">
<div className="container container-1290">
<div className="row">
<div className="col-lg-12">
<div className="blog-details-wrap">
<div className="blog-item style-two">
<div
className="image"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<img src={blog.bigImage} alt="Blog Standard" loading="lazy" />
</div>
<div
className="content"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<ul className="blog-meta-two">
<li>{blog.user}</li>
<li>{blog.date}</li>
</ul>
<h3>{blog.title}</h3>
<div
dangerouslySetInnerHTML={{ __html: blog.description }}
/>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</WellFoodLayout>
);
}

17
app/blog/page.js Normal file
View File

@ -0,0 +1,17 @@
import ListOfBlogSection from "@/components/blog/ListOfBlogSection";
import PageBanner from "@/components/PageBanner";
import WellFoodLayout from "@/layout/WellFoodLayout";
import Link from "next/link";
export const metadata = {
title: "Blog - Authentic South Indian Restaurant",
description: "Stay updated with the latest on Indian cuisine, South Indian dishes, and food trends in Mississauga. Check out our blog for tips, recipes, and more!",
};
const page = () => {
return (
<WellFoodLayout>
<PageBanner pageTitle={"Blog"} background="/assets/images/inner-banner/2.webp" />
<ListOfBlogSection />
</WellFoodLayout>
);
};
export default page;

141
app/contact/page.js Normal file
View File

@ -0,0 +1,141 @@
import PageBanner from "@/components/PageBanner";
import WellFoodLayout from "@/layout/WellFoodLayout";
import ContactForm from "@/components/ContactForm";
export const metadata = {
title: "Shiva Sakthi | Best South Indian Restaurant in Mississauga",
description: "Get in touch with Shiva Sakthi, Mississaugas top Indian restaurant. Call or visit us for dine-in, takeout, or catering. Located Airport Road Malton, Mississauga",
};
const page = () => {
return (
<WellFoodLayout>
<PageBanner pageTitle={"Contact us"} background="/assets/images/inner-banner/3.webp" />
<section className="contact-page-area pt-130 rpt-100 pb-60 rpb-85 rel z-1" >
<div className="container">
<div className="row align-items-center">
<div
className="contact-page-content rmb-55"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="section-title mb-35 text-center">
<span className="sub-title mb-10">contact us</span>
<h2>Get In Touch With Us</h2>
</div>
<div className="row">
<div className="col-md-4">
<div className="contact-info-item bgc-black" style={{
backgroundImage: "url(/assets/images/background/hero.jpg)"
}}>
<div className="icon"><i className="fal fa-map-marker-alt" /></div>
<div className="content">
<span className="title" style={{ fontWeight: "bold" }}>Location</span>
<p>7166 Airport Road, Mississauga, Ontario L4T 2H2, Canada.</p>
</div>
</div>
</div>
<div className="col-md-4">
<div className="contact-info-item bgc-black" style={{
backgroundImage: "url(/assets/images/background/hero.jpg)"
}}>
<div className="icon"><i className="fal fa-envelope-open" /></div>
<div className="content">
<span className="title" style={{ fontWeight: "bold" }}>Email Address</span>
<p>
<a href="mailto:info@shivasakthi.ca">info@shivasakthi.ca</a>
<br />
<br />
</p>
</div>
</div>
</div>
<div className="col-md-4">
<div className="contact-info-item bgc-black" style={{
backgroundImage: "url(/assets/images/background/hero.jpg)"
}}>
<div className="icon"><i className="fal fa-phone" /></div>
<div className="content">
<span className="title" style={{ fontWeight: "bold" }}>Call Us</span>
<p>
<a href="tel: 9056773555">905 677 3555</a>
<br />
<br />
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="contact-page-area rpt-40 pt-60 pb-60 rel z-1 bgc-black">
<div className="container">
<div className="row align-items-center no-gap">
<div className="col-lg-6">
<div
className="contact-page-content rmb-55"
data-aos="fade-left"
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="contact-info-wrap">
<img src="/assets/images/contact.webp" alt="Contact ShivaSakthi" loading="lazy" />
</div>
</div>
</div>
<div
className="col-lg-6"
data-aos="fade-right"
data-aos-duration={1500}
data-aos-offset={50}
>
<ContactForm />
</div>
</div>
</div>
<div className="bg-lines">
<span />
<span />
<span />
<span />
</div>
</section>
<section className="contact-page-area pt-60">
<div className="container-fluid">
<div className="row align-items-center">
<div
className="our-location"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
{/* <iframe
src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d96777.16150026117!2d-74.00840582560909!3d40.71171357405996!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sbd!4v1706508986625!5m2!1sen!2sbd"
style={{ border: 0, width: "100%" }}
allowFullScreen=""
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/> */}
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d369174.37626170606!2d-79.647352!3d43.706916!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b3bfed533002b%3A0xe83c1cd7caca2ee6!2s7166%20Airport%20Rd%2C%20Mississauga%2C%20ON%20L4T%202H2%2C%20Canada!5e0!3m2!1sen!2sus!4v1748536731832!5m2!1sen!2sus" style={{ border: 0, width: "100%" }}
allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
</section>
</WellFoodLayout>
);
};
export default page;

BIN
app/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

77
app/globals.css Normal file
View File

@ -0,0 +1,77 @@
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@400;500;700&display=swap");
.main-menu .navbar-collapse .mobile-menu li ul {
opacity: 1 !important;
visibility: unset !important;
}
.main-menu .navbar-collapse li:hover > ul {
visibility: visible;
opacity: 1;
top: 100%;
display: block;
}
.main-menu .navbar-collapse li ul li ul {
top: -2% !important;
}
/* Slick slider */
.slick-dots,
.testimonials-three-content .testimonial-two-item {
display: flex !important;
}
.slick-slide {
padding-left: 15px;
padding-right: 15px;
}
.food-category-active .slick-track .food-category-item {
display: flex !important;
}
.testimonials-three-content .slick-active .testimonial-two-item .content,
.testimonials-three-content .slick-active .testimonial-two-item .image img,
.testimonials-three-content .slick-active .testimonial-two-item .image .quote {
opacity: 1;
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0);
}
.testimonials-three-content .slick-active .testimonial-two-item .image .quote {
-webkit-transition-delay: 0.35s;
-o-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.testimonials-five-authors .slick-slide {
width: 100% !important;
padding: unset !important;
}
.testimonials-five-authors .slick-current .testimonial-five-author-item img {
width: 75px;
height: 75px;
border: 3px solid var(--primary-color);
}
.testimonials-five-authors .testimonial-five-author-item {
width: unset !important;
}
.testimonials-five-content .slick-active .testimonial-five-item:before {
opacity: 1;
bottom: 100%;
}
.history-progress .canvas {
margin-right: 30px;
}
.history-progress .CircularProgressbar {
width: 120px;
}
.history-progress.style-two .canvas {
margin-right: 0;
margin-bottom: 12px;
}
.tab-style-one .nav-link:hover {
color: var(--heading-color);
}

21
app/layout.js Normal file
View File

@ -0,0 +1,21 @@
import "@css/aos.css";
import "@css/bootstrap.min.css";
import "@css/flaticon.min.css";
import "@css/fontawesome-5.14.0.min.css";
import "@css/magnific-popup.min.css";
import "@css/nice-select.min.css";
import "@css/slick.min.css";
import "@css/style.css";
import "./globals.css";
export const metadata = {
title: "Shivasakthi Restaurant",
description: "The best Indian food in Mississauga! Enjoy authentic South Indian cuisine, vegetarian dishes, dosa, Indian snacks, and takeout options at Shiva Sakthi.",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}

29
app/menu/page.js Normal file
View File

@ -0,0 +1,29 @@
import { AboutUs4 } from "@/components/AboutUs";
import Burger from "@/components/Burger";
import MenuIframe from "@/components/MenuIframe";
import PageBanner from "@/components/PageBanner";
import RestaurantMenu from "@/components/RestaurantMenu";
import WellFoodLayout from "@/layout/WellFoodLayout";
export const metadata = {
title: "Our Menu | Best South &amp; North Indian Restaurant Mississauga",
description: "The delicious menu at Shiva Sakthi, featuring dosa, vegetarian thalis, tandoor specialties, and authentic Indian cuisine. Takeout and buffet options available."
};
const page = () => {
return (
<WellFoodLayout>
{/* Page Banner Start */}
<PageBanner bgImg="/assets/images/inner-banner/5.webp" pageTitle={"Menu"} background="/assets/images/inner-banner/4.webp" />
{/* <div className="pt-100">
<Headline />
</div> */}
{/* Headline Area end */}
{/* Restaurant Menu Area start */}
<RestaurantMenu />
<MenuIframe />
</WellFoodLayout>
);
};
export default page;

151
app/page.js Normal file
View File

@ -0,0 +1,151 @@
"use client";
import AboutUs from "@/components/AboutUs";
import Counter from "@/components/Counter";
import AboutSection from "@/components/home/AboutSection";
import BlogSection from "@/components/home/BlogSection";
import CategorySection from "@/components/home/CategorySection";
import DosaOfferSection from "@/components/home/DosaOfferSection";
import HeroBanner from "@/components/home/HeroBanner";
import MealsOfferSection from "@/components/home/MealsOfferScetion";
import HomeOfferCard from "@/components/home/OfferCard";
import PopularMenu from "@/components/home/PopularMenu";
import InstagramArea from "@/components/InstagramArea";
import OfferCard from "@/components/OfferCard";
import Testimonial from "@/components/Testimonial";
import { TestimonialSlider2 } from "@/components/TestimonialSlider";
import WellFoodLayout from "@/layout/WellFoodLayout";
import Link from "next/link";
const page = () => {
return (
<WellFoodLayout>
{/* Hero Area Start */}
<HeroBanner />
{/* Hero Area End */}
{/* About Us Area start */}
<AboutSection />
{/* About Us Area end */}
{/* Offer Card Area start */}
{/* <HomeOfferCard /> */}
{/* Offer Card Area end */}
{/* Counter Four Area start */}
<div
className="counter-area-four bgs-cover pt-100"
style={{ backgroundImage: "url(/assets/images/home/bg-image.jpg)" }}
>
<div className="container">
<div className="row justify-content-end">
<div className="col-xl-7 col-lg-9">
<div className="row no-gap">
<div className="col-lg-4 col-sm-6">
<div
className="counter-item style-four bgc-secondary counter-text-wrap"
data-aos="fade-down"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<span
className="count-text plus"
data-speed={3000}
data-stop={20}
>
<Counter end={20} />
</span>
<div className="wave">
<img
src="/assets/images/shapes/counter-wave.png"
alt="Shape"
/>
</div>
<h6 className="counter-title">Experience Chefs</h6>
</div>
</div>
<div className="col-lg-4 col-sm-6">
<div
className="counter-item text-white style-four counter-text-wrap"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50} style={{ backgroundColor: "#222222" }}
>
<span
className="count-text k-plus"
data-speed={3000}
data-stop={2}
>
<Counter end={2} />
</span>
<div className="wave">
<img
src="/assets/images/shapes/counter-wave-white.png"
alt="Shape"
/>
</div>
<h6 className="counter-title">Happy Customers</h6>
</div>
</div>
<div className="col-lg-4 col-sm-6">
<div
className="counter-item style-four bgc-primary counter-text-wrap"
data-aos="fade-down"
data-aos-delay={100}
data-aos-duration={1500}
data-aos-offset={50}
>
<span
className="count-text plus"
data-speed={3000}
data-stop={40}
>
<Counter end={40} />
</span>
<div className="wave">
<img
src="/assets/images/shapes/counter-wave.png"
alt="Shape"
/>
</div>
<h6 className="counter-title">Favorite Dishes</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Counter Four Area end */}
{/* category start */}
<CategorySection />
{/* category end */}
{/* Special Offer Area start */}
<MealsOfferSection />
{/* Special Offer Area end */}
{/* Popular Menu Area start */}
<PopularMenu />
{/* Popular Menu Area end */}
{/* Special Offer Area start */}
<DosaOfferSection />
{/* Special Offer Area end */}
{/* Testimonials Two Area start */}
<Testimonial />
{/* Testimonials Two Area end */}
{/* Blog Area start */}
<BlogSection />
{/* Blog Area end */}
<InstagramArea />
</WellFoodLayout>
);
};
export default page;

View File

@ -0,0 +1,53 @@
import Link from "next/link";
const AboutCallAction = () => {
return (
<section
className="booking-table-area-two bgs-cover py-100 rel z-1 overlay"
style={{
backgroundImage:
"url(/assets/images/about/bg-about.webp)",
}}
>
<div className="container">
<div className="row justify-content-between align-items-center">
{/* <div
className="col-lg-5"
data-aos="fade-left"
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="section-title mt-50 text-white mb-50">
<h2>
We Offer quality service That Customers Needs for health
food
</h2>
</div>
</div> */}
<div
className="col-xl-12 col-lg-12 text-center"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="booking-table-content style-two rmt-55">
{/* <a
href="https://www.youtube.com/watch?v=9Y7ma241N8k"
className="mfp-iframe video-play"
>
<i className="fas fa-play" />
</a> */}
<div className="section-title mt-50 text-white mb-50">
<span className="sub-title mb-5">Canadas First South Indian Dining Experience with a Musical Twist</span>
<h2>
Indian Flavors with Live Melodies
</h2>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default AboutCallAction;

View File

@ -0,0 +1,40 @@
import Link from "next/link";
const AboutCallAction2 = () => {
return (
<section className="cta-area py-100 rel z-1 bgc-primary" style={{
backgroundImage: "url(/assets/images/testimonials/testimonials-two-bg.png)"
}} >
<div className="container">
<div className="row">
<div className="col-lg-5 col-md-8">
<div className="cta-content">
<div className="section-title text-white mb-20">
<span className="sub-title mb-5 text-white">Craving Authentic Indian Flavors?</span>
<h2>Dont waitcall us now to place your order!</h2>
</div>
<Link href="/contact" className="theme-btn style-three">
Call Us <i className="far fa-arrow-alt-right" />
</Link>
{/* <div
className="cta-badge"
style={{
backgroundImage: "url(/assets/images/shapes/cta-shape.png)",
}}
>
<span>
quality
<br /> food
</span>
</div> */}
</div>
</div>
</div>
</div>
<div
className="cta-bg"
style={{ backgroundImage: "url(/assets/images/about/about-3.webp)" }}
/>
</section>
);
};
export default AboutCallAction2;

View File

@ -0,0 +1,45 @@
import Link from "next/link";
const AboutCategory = () => {
return (
<div className="category-banner-area pb-80">
<div className="container">
<div className="row row-cols-md-2 row-cols-1 justify-content-center">
<div
className="col about-biryani-category-1"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<img src="/assets/images/about/ambur_chicken_biryani.png" />
{/* <span className="quality">Quality Food</span>
<h2>Strawberry Juice &amp; slices</h2>
<Link href="shop" className="theme-btn style-two">
Shop now <i className="far fa-arrow-alt-right" />
</Link> */}
</div>
<div
className="col about-biryani-category-2"
data-aos="fade-up"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<img src="/assets/images/about/mutton-biryani.png" />
{/* <h3>buy 1</h3>
<span className="get-one">get free 1</span>
<Link href="shop" className="theme-btn">
Shop now <i className="far fa-arrow-alt-right" />
</Link> */}
</div>
</div>
</div>
</div>
);
};
export default AboutCategory;

View File

@ -0,0 +1,79 @@
import Link from "next/link";
const AboutContent = () => {
return (
<section className="about-us-area pt-100 rpt-80 pb-100 rpb-70 rel z-1">
<div className="container">
<div className="row align-items-end">
<div className="col-lg-6">
<div
className="about-image-five mb-30 rmb-55"
data-aos="fade-left"
data-aos-duration={1500}
data-aos-offset={50}
>
<img src="/assets/images/about/about-1.webp" alt="About" loading="lazy" />
</div>
</div>
<div className="col-lg-6">
<div
className="about-us-content"
data-aos="fade-right"
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="section-title mb-25">
<span className="sub-title mb-5">Experience South Indian Cuisine Like Never Before!</span>
<h2>Where Flavor Meets Festivity</h2>
</div>
<p>
At Shiva Sakthi, dining isnt just about food, its an immersive journey that tantalizes every sense. We bring the rich, authentic flavors of South and North Indian cuisine straight to the heart of Canada. </p>
<p>Whether you're here for a quiet family dinner or a lively evening out, Shiva Sakthi transforms every meal into a celebration of culture, taste, where every bite hits a note and every vibe feels like home.</p>
<div className="row">
<div className="col-sm-6">
<div className="service-item style-two">
<div className="icon">
<i className="flaticon-high-quality" />
</div>
<h5>
<Link href="menu-burger">Best Quality Food</Link>
</h5>
<p>
Our talented chefs craft each dish precision sourcing
</p>
</div>
</div>
<div className="col-sm-6">
<div className="service-item style-two">
<div className="icon">
<i className="flaticon-chef" />
</div>
<h5>
<Link href="menu-burger">Experience our Chefs</Link>
</h5>
<p>
Our talented chefs craft each dish precision sourcing
</p>
</div>
</div>
</div>
<div className="about-btn-author pt-5 ">
<Link href="/menu" className="theme-btn style-two">
Check Out Our menu <i className="far fa-arrow-alt-right" />
</Link>
{/* <Link href="/menu" className="read-more">
Check Out Our menu{" "}
<i className="far fa-arrow-alt-right" />
</Link> */}
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default AboutContent;

View File

@ -0,0 +1,93 @@
import Link from "next/link";
const AboutContent2 = () => {
return (
<section className="about-us-area-four pt-130 rpt-100 pb-85 rpb-55 rel z-1">
<div className="container">
<div className="row align-items-center">
<div className="col-lg-6">
<div
className="about-us-content ms-0 rmb-25"
data-aos="fade-left"
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="section-title mb-25">
<span className="sub-title mb-5">Dine to the Rhythm of Authentic South Indian Flavors</span>
<h2>Authentic Flavors, Unforgettable Moments</h2>
</div>
<p>
At Shiva Sakthi, we serve the rich, unforgettable flavors of Indian cuisine in a setting that feels just like home. From the first bite to the last, each dish is crafted with care, tradition, and a passion for authentic taste.</p>
<p>Whether you're craving the bold spices of a South Indian classic or the comfort of a familiar favorite, every visit is a celebration of flavor and hospitality. Delicious food. Warm ambiance. Memorable moments.</p>
<Link href="/menu" className="theme-btn mt-25 mb-60">
Check Out Our Menu <i className="far fa-arrow-alt-right" />
</Link>
{/* <div className="row">
<div className="col-sm-4 col-6">
<div className="counter-item style-two counter-text-wrap">
<span
className="count-text k-plus"
data-speed={3000}
data-stop={34}
>
<Counter end={34} />
</span>
<span className="counter-title">Organic Planting</span>
</div>
</div>
<div className="col-sm-4 col-6">
<div className="counter-item style-two counter-text-wrap">
<span
className="count-text plus"
data-speed={3000}
data-stop={356}
>
<Counter end={356} />
</span>
<span className="counter-title">Passionate Chefs</span>
</div>
</div>
<div className="col-sm-4 col-6">
<div className="counter-item style-two counter-text-wrap">
<span
className="count-text plus"
data-speed={3000}
data-stop={8534}
>
<Counter end={8534} />
</span>
<span className="counter-title">Favourite Dishes</span>
</div>
</div>
</div> */}
</div>
</div>
<div className="col-lg-6">
<div
className="about-image-four mb-30"
data-aos="fade-right"
data-aos-duration={1500}
data-aos-offset={50}
>
<img src="/assets/images/about/about-2.webp" alt="About" loading="lazy" />
{/* <div className="row">
<div className="col">
<img src="assets/images/about/about-four1.jpg" alt="About" />
</div>
<div className="col mt-80">
<img src="assets/images/about/about-four2.jpg" alt="About" />
</div>
</div> */}
{/* <div className="badge">
<img
src="assets/images/about/about-four-badge.jpg"
alt="Badge"
/>
</div> */}
</div>
</div>
</div>
</div>
</section>
);
};
export default AboutContent2;

View File

@ -0,0 +1,113 @@
"use client";
import { sliderProps } from "@/utility/sliderProps";
import Slider from "react-slick";
const Testimonial = () => {
return (
<section
className="testimonials-two bgc-primary"
style={{
backgroundImage:
"url(/assets/images/testimonials/testimonials-two-bg.png)",
}}
>
<div className="row align-items-center">
<div className="col-lg-6">
<div className="why-choose-two-image">
<img
src="/assets/images/about/testimonial.webp"
alt="Testimonials" loading="lazy"
/>
</div>
</div>
<div className="col-lg-6">
<div className="testimonials-two-content rel z-1 text-center text-white p-45 rpy-55">
<div
className="section-title mb-20"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<span className="sub-title mb-5">customer feedback</span>
<h2>what have lots off happy customer explore feedback</h2>
</div>
<span className="marquee-wrap style-two">
<span className="marquee-inner left">review </span>
<span className="marquee-inner left">review </span>
<span className="marquee-inner left">review </span>
</span>
<Slider
{...sliderProps.testimonialsTwoCarousel}
className="testimonials-two-carousel"
data-aos="fade-up"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="testimonial-two-item">
<div className="ratting">
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
</div>
<div className="text">
Visited this beautiful restaurant while nearby for a conference. The staff were welcoming from the very start! We started with the Gobi 65 which had light spice but a to. Of flavour. Then, we had the hakka noodles, masala dosa and chettinadu chicken curry which was so tasty. Our Server Gagan recommended it and Im glad he did. He was fantastic and if we are in town again, we will definitely return!
</div>
<span className="author">Cam Larocque</span>
{/* <span className="designation">Manager</span> */}
</div>
<div className="testimonial-two-item">
<div className="ratting">
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
</div>
<div className="text">
Good to have another new south india cuisine in GTA. The food was amazing, The service was good and fast, thanks for offering the milk burfi for tasting.
I have been to their other restaurant locations in GTA and KW area, the service and food was excellent. All the best for this new location. Must visit for guys looking to try south indian Biryani.
</div>
<span className="author">Sen K</span>
{/* <span className="designation">Manager</span> */}
</div>
<div className="testimonial-two-item">
<div className="ratting mb-3">
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
</div>
<div className="text">
Absolutely incredible experience! This Tamil restaurant is a hidden gem in Canada. The flavors are rich, authentic, and remind me of home. Each dish was perfectly spiced and cooked to perfection. The staff were warm, welcoming, and attentive, making the whole visit even more enjoyable. The ambiance is cozy yet vibrant, and you can tell they take pride in both their food and service. Highly recommend to anyone looking for a true taste of South Indian cuisine!
</div>
<span className="author">manimala s</span>
{/* <span className="designation">Manager</span> */}
</div>
{/* <div className="testimonial-two-item">
<div className="quote">
<i className="flaticon-quote" />
</div>
<div className="text">
Renowned for its versatility in the kitchen, Red King Crab can
prepared in various ways, from simple steaming or boiling to
elaborate preparations such as grilling incorporating weather
loving
</div>
<span className="author">Salvador I. Burton</span>
<span className="designation">Manager</span>
</div> */}
</Slider>
<div className="shape">
<img src="/assets/images/shapes/tomato.png" alt="Shape" loading="lazy" />
</div>
</div>
</div>
</div>
</section>
);
};
export default Testimonial;

338
components/AboutUs.js Normal file
View File

@ -0,0 +1,338 @@
import Link from "next/link";
import Counter from "./Counter";
const AboutRight = () => {
return (
<div className="col-lg-6">
<div
className="about-us-content"
data-aos="fade-right"
data-aos-delay={150}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="section-title mb-25">
<span className="sub-title mb-5">learn About wellfood</span>
<h2>the amazing &amp; Quality food for your good health</h2>
</div>
<p>
Welcome too restaurant, where culinary excellence meets warm
hospitality in every dish we serve. Nestled in the heart of City Name
our eatery invites you on a journey
</p>
<div className="about-btn-author pt-5 mb-60">
<Link href="about" className="theme-btn style-two">
learn more us <i className="far fa-arrow-alt-right" />
</Link>
<Link href="about" className="read-more">
Explore popular menu <i className="far fa-arrow-alt-right" />
</Link>
</div>
<div className="row">
<div className="col-sm-4 col-6">
<div className="counter-item style-two counter-text-wrap">
<span
className="count-text k-plus"
data-speed={3000}
data-stop={34}
>
<Counter end={34} />
</span>
<span className="counter-title">Organic Planting</span>
</div>
</div>
<div className="col-sm-4 col-6">
<div className="counter-item style-two counter-text-wrap">
<span
className="count-text plus"
data-speed={3000}
data-stop={356}
>
<Counter end={356} />
</span>
<span className="counter-title">Passionate Chefs</span>
</div>
</div>
<div className="col-sm-4 col-6">
<div className="counter-item style-two counter-text-wrap">
<span
className="count-text plus"
data-speed={3000}
data-stop={8534}
>
<Counter end={8534} />
</span>
<span className="counter-title">Favourite Dishes</span>
</div>
</div>
</div>
</div>
</div>
);
};
const AboutUs = ({
productImage = "/assets/images/about/pizza.png",
title = "Italian pizza",
product = "Pizza",
}) => {
return (
<section className="about-us-area pt-130 rpt-100 pb-150 rpb-60 rel z-1">
<div className="container">
<div className="row align-items-end">
<div className="col-lg-6">
<div
className="about-image-part style-two mb-30 rmb-55"
data-aos="fade-left"
data-aos-duration={1500}
data-aos-offset={50}
>
<img src={productImage} alt={`About ${product}`} loading="lazy" />
<div
className="quality-food"
style={{
backgroundImage:
"url(assets/images/shapes/about-star-yellow.png)",
}}
>
<span className="for-border" />
<span className="text">
quality <br />
food
</span>
</div>
</div>
</div>
<AboutRight />
</div>
</div>
<span className="about-bg-text">{title}</span>
</section>
);
};
export default AboutUs;
export const AboutUs2 = ({
aboutImg1 = "/assets/images/about/about-four3.jpg",
aboutImg2 = "/assets/images/about/about-four4.jpg",
}) => {
return (
<section className="about-us-area pt-130 rpt-100 pb-150 rpb-60 rel z-1">
<div className="container">
<div className="row align-items-end">
<div className="col-lg-6">
<div
className="about-image-four style-two mb-30"
data-aos="fade-left"
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="row">
<div className="col">
<img src={aboutImg1} alt="About" loading="lazy" />
</div>
<div className="col mt-80">
<img src={aboutImg2} alt="About" loading="lazy" />
</div>
</div>
<div className="badge">
<img
src="/assets/images/about/about-four-badge.jpg"
alt="Badge"
/>
</div>
</div>
</div>
<AboutRight />
</div>
</div>
</section>
);
};
export const AboutUs3 = ({
aboutImg1 = "/assets/images/about/about-four3.jpg",
aboutImg2 = "/assets/images/about/about-four4.jpg",
}) => {
return (
<section className="about-us-area-four pt-130 rpt-100 pb-85 rpb-55 rel z-1">
<div className="container">
<div className="row align-items-center">
<div className="col-lg-6">
<div
className="about-us-content ms-0 rmb-25"
data-aos="fade-left"
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="section-title mb-25">
<span className="sub-title mb-5">learn About wellfood</span>
<h2>we provide best Quality food for your health</h2>
</div>
<p>
Welcome too restaurant, where culinary excellence meets warm
hospitality in every dish we serve. Nestled in the heart of City
Name our eatery invites you on a journey
</p>
<Link href="about" className="theme-btn mt-25 mb-60">
learn more us <i className="far fa-arrow-alt-right" />
</Link>
<div className="row">
<div className="col-sm-4 col-6">
<div className="counter-item style-two counter-text-wrap">
<span
className="count-text k-plus"
data-speed={3000}
data-stop={34}
>
<Counter end={34} />
</span>
<span className="counter-title">Organic Planting</span>
</div>
</div>
<div className="col-sm-4 col-6">
<div className="counter-item style-two counter-text-wrap">
<span
className="count-text plus"
data-speed={3000}
data-stop={356}
>
<Counter end={356} />
</span>
<span className="counter-title">Passionate Chefs</span>
</div>
</div>
<div className="col-sm-4 col-6">
<div className="counter-item style-two counter-text-wrap">
<span
className="count-text plus"
data-speed={3000}
data-stop={8534}
>
<Counter end={8534} />
</span>
<span className="counter-title">Favourite Dishes</span>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-6">
<div
className="about-image-four style-two mb-30"
data-aos="fade-right"
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="row">
<div className="col">
<img src="/assets/images/about/about-four1.jpg" alt="About" loading="lazy" />
</div>
<div className="col mt-80">
<img src="/assets/images/about/about-four2.jpg" alt="About" loading="lazy" />
</div>
</div>
<div className="badge">
<img
src="/assets/images/about/about-four-badge.jpg"
alt="Badge" loading="lazy"
/>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export const AboutUs4 = ({}) => {
return (
<section className="about-us-area pt-130 rpt-100 pb-90 rpb-60 rel z-1">
<div className="container">
<div className="row align-items-end">
<div className="col-lg-6">
<div
className="about-restaurant-page rel mb-30 rmb-55"
data-aos="fade-left"
data-aos-duration={1500}
data-aos-offset={50}
>
<img
src="/assets/images/about/menu-restaurant.jpg"
alt="Menu Restaurant"
/>
<div className="experience-year">
<span className="years">25</span>
Years of experience in restaurant services
</div>
</div>
</div>
<div className="col-lg-6">
<div
className="about-us-content"
data-aos="fade-right"
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="section-title mb-25">
<span className="sub-title mb-5">learn About wellfood</span>
<h2>the amazing &amp; Quality food for your good health</h2>
</div>
<p>
Welcome too restaurant, where culinary excellence meets warm
hospitality in every dish we serve. Nestled in the heart of City
Name our eatery invites you on a journey
</p>
<div className="about-btn-author pt-5 mb-60">
<Link href="about" className="theme-btn style-two">
learn more us <i className="far fa-arrow-alt-right" />
</Link>
<Link href="about" className="read-more">
Explore popular menu <i className="far fa-arrow-alt-right" />
</Link>
</div>
<div className="row">
<div className="col-sm-4 col-6">
<div className="counter-item style-two counter-text-wrap">
<span
className="count-text k-plus"
data-speed={3000}
data-stop={34}
>
<Counter end={34} />
</span>
<span className="counter-title">Organic Planting</span>
</div>
</div>
<div className="col-sm-4 col-6">
<div className="counter-item style-two counter-text-wrap">
<span
className="count-text plus"
data-speed={3000}
data-stop={356}
>
<Counter end={356} />
</span>
<span className="counter-title">Passionate Chefs</span>
</div>
</div>
<div className="col-sm-4 col-6">
<div className="counter-item style-two counter-text-wrap">
<span
className="count-text plus"
data-speed={3000}
data-stop={8534}
>
<Counter end={8534} />
</span>
<span className="counter-title">Favourite Dishes</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
};

163
components/BookTableForm.js Normal file
View File

@ -0,0 +1,163 @@
const BookTableForm = () => {
return (
<div
className="booking-table-form mb-0"
style={{
backgroundImage: "url(assets/images/background/form-bg.png)",
}}
>
<div className="section-title">
<h2>book a table</h2>
</div>
<p>Enjoy your food to book your table</p>
<form
id="booking-form"
className="booking-form mt-25"
name="booking-form"
method="post"
>
<div className="row gap-20">
<div className="col-md-12 mb-20">
<div className="form-group">
<select name="person" id="person">
<option value="option2">2 Person</option>
<option value="option3">3 Person</option>
<option value="option4">4 Person</option>
</select>
</div>
</div>
<div className="col-md-12">
<div className="form-group">
<label htmlFor="date">
<i className="far fa-calendar-alt" />
</label>
<input
type="text"
id="date"
name="date"
className="form-control"
defaultValue=""
placeholder="Date"
required=""
/>
</div>
</div>
<div className="col-md-12">
<div className="form-group">
<label htmlFor="time">
<i className="far fa-clock" />
</label>
<input
type="text"
id="time"
name="time"
className="form-control"
defaultValue=""
placeholder="Time"
required=""
/>
</div>
</div>
<div className="col-md-12">
<div className="form-group mb-0">
<button type="submit" className="theme-btn">
book your table <i className="far fa-arrow-alt-right" />
</button>
</div>
</div>
</div>
</form>
</div>
);
};
export default BookTableForm;
export const BookTableForm2 = () => {
return (
<div
className="booking-table-form rmt-50"
style={{
backgroundImage: "url(assets/images/background/form-bg.png)",
}}
>
<div className="section-title">
<h2>book a table</h2>
</div>
<p>Enjoy your food to book your table</p>
<form
id="booking-form"
className="booking-form mt-25"
name="booking-form"
method="post"
>
<div className="row gap-20">
<div className="col-md-6 mb-20">
<div className="form-group">
<select name="person" id="person">
<option value="option1">Person</option>
<option value="option2">Person 2</option>
<option value="option3">Person 3</option>
<option value="option4">Person 4</option>
</select>
</div>
</div>
<div className="col-md-6">
<div className="form-group">
<label htmlFor="date">
<i className="far fa-calendar-alt" />
</label>
<input
type="text"
id="date"
name="date"
className="form-control"
defaultValue=""
placeholder="Date"
required=""
/>
</div>
</div>
<div className="col-md-12">
<div className="form-group">
<label htmlFor="time">
<i className="far fa-clock" />
</label>
<input
type="text"
id="time"
name="time"
className="form-control"
defaultValue=""
placeholder="Time"
required=""
/>
</div>
</div>
<div className="col-md-12">
<div className="form-group">
<label htmlFor="number">
<i className="far fa-phone" />
</label>
<input
type="text"
id="number"
name="number"
className="form-control"
defaultValue=""
placeholder="Phone"
required=""
/>
</div>
</div>
<div className="col-md-12">
<div className="form-group mb-0">
<button type="submit" className="theme-btn">
book your table <i className="far fa-arrow-alt-right" />
</button>
</div>
</div>
</div>
</form>
</div>
);
};

204
components/Burger.js Normal file
View File

@ -0,0 +1,204 @@
"use client";
import { sliderProps } from "@/utility/sliderProps";
import Link from "next/link";
import Slider from "react-slick";
const Burger = () => {
return (
<div className="container container-1520">
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-12">
<div
className="section-title text-center mb-50"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<span className="sub-title mb-5">popular burger</span>
<h2>popular delicious burger</h2>
</div>
</div>
</div>
<Slider {...sliderProps.pizzaActive} className="pizza-active">
<div
className="product-item"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="image">
<img src="assets/images/products/burger1.jpg" alt="Burger" />
<span className="pizza-badge">hot</span>
</div>
<div className="content">
<div className="ratting">
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<span>(5k)</span>
</div>
<h5>
<Link href="product-details">vegetable beef Burger</Link>
</h5>
<span className="price">
<del>$50</del> $25
</span>
</div>
</div>
<div
className="product-item"
data-aos="fade-up"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="image">
<img src="assets/images/products/burger2.jpg" alt="Burger" />
<span className="pizza-badge">-10%</span>
</div>
<div className="content">
<div className="ratting">
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<span>(5k)</span>
</div>
<h5>
<Link href="product-details">beef checken burger</Link>
</h5>
<span className="price">
<del>$50</del> $25
</span>
</div>
</div>
<div
className="product-item"
data-aos="fade-up"
data-aos-delay={100}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="image">
<img src="assets/images/products/burger3.jpg" alt="Burger" />
</div>
<div className="content">
<div className="ratting">
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<span>(5k)</span>
</div>
<h5>
<Link href="product-details">burgers black bread</Link>
</h5>
<span className="price">
<del>$50</del> $25
</span>
</div>
</div>
<div
className="product-item"
data-aos="fade-up"
data-aos-delay={150}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="image">
<img src="assets/images/products/burger4.jpg" alt="Burger" />
<span className="pizza-badge">new</span>
</div>
<div className="content">
<div className="ratting">
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<span>(5k)</span>
</div>
<h5>
<Link href="product-details">delicious burger with beef</Link>
</h5>
<span className="price">
<del>$50</del> $25
</span>
</div>
</div>
<div className="product-item">
<div className="image">
<img src="assets/images/products/burger1.jpg" alt="Burger" />
<span className="pizza-badge">hot</span>
</div>
<div className="content">
<div className="ratting">
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<span>(5k)</span>
</div>
<h5>
<Link href="product-details">vegetable beef Burger</Link>
</h5>
<span className="price">
<del>$50</del> $25
</span>
</div>
</div>
<div className="product-item">
<div className="image">
<img src="assets/images/products/burger2.jpg" alt="Burger" />
<span className="pizza-badge">-10%</span>
</div>
<div className="content">
<div className="ratting">
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<span>(5k)</span>
</div>
<h5>
<Link href="product-details">beef checken burger</Link>
</h5>
<span className="price">
<del>$50</del> $25
</span>
</div>
</div>
<div className="product-item">
<div className="image">
<img src="assets/images/products/burger3.jpg" alt="Burger" />
</div>
<div className="content">
<div className="ratting">
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<span>(5k)</span>
</div>
<h5>
<Link href="product-details">burgers black bread</Link>
</h5>
<span className="price">
<del>$50</del> $25
</span>
</div>
</div>
</Slider>
</div>
</div>
);
};
export default Burger;

View File

@ -0,0 +1,117 @@
import Link from "next/link";
const CategoryBanner = () => {
return (
<div className="category-banner-area-two">
<div className="container-fluid">
<div className="row row-cols-lg-3 row-cols-sm-2 row-cols-1 justify-content-center">
<div
className="col"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<div
className="category-banner-item style-two"
style={{
backgroundImage:
"url(assets/images/banner/category-banner-two1.png)",
}}
>
<span className="price">only $59</span>
<h3>SPECIALTY Beef steak</h3>
<div className="ratting">
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<span>(5k)</span>
</div>
<Link href="shop" className="theme-btn style-two">
Order now <i className="far fa-arrow-alt-right" />
</Link>
<div className="food-image">
<img
src="assets/images/banner/category-banner-food1.png"
alt="Food"
/>
</div>
</div>
</div>
<div
className="col"
data-aos="fade-up"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<div
className="category-banner-item style-two color-black"
style={{
backgroundImage:
"url(assets/images/banner/category-banner-two2.png)",
}}
>
<span className="price">only $43</span>
<h3>SPECIALTY Italian pizza</h3>
<div className="ratting">
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<span>(5k)</span>
</div>
<Link href="shop" className="theme-btn">
Order now <i className="far fa-arrow-alt-right" />
</Link>
<div className="food-image">
<img
src="assets/images/banner/category-banner-food2.png"
alt="Food"
/>
</div>
</div>
</div>
<div
className="col"
data-aos="fade-up"
data-aos-delay={100}
data-aos-duration={1500}
data-aos-offset={50}
>
<div
className="category-banner-item style-two"
style={{
backgroundImage:
"url(assets/images/banner/category-banner-two1.png)",
}}
>
<span className="price">only $35</span>
<h3>vegetable burger</h3>
<div className="ratting">
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<i className="fas fa-star" />
<span>(5k)</span>
</div>
<Link href="shop" className="theme-btn style-two">
Order now <i className="far fa-arrow-alt-right" />
</Link>
<div className="food-image">
<img
src="assets/images/banner/category-banner-food3.png"
alt="Food"
/>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default CategoryBanner;

207
components/ContactForm.js Normal file
View File

@ -0,0 +1,207 @@
"use client";
import { useState, useEffect } from "react";
import ReCAPTCHA from "react-google-recaptcha";
import axios from "axios";
import { BaseUrl } from "@/utility/BaseUrl.utils";
const ContactForm = () => {
const [formData, setFormData] = useState({
name: "",
email: "",
phone_number: "",
subject: "",
message: "",
});
const [alert, setAlert] = useState({
show: false,
message: "",
type: "",
});
const [captchaToken, setCaptchaToken] = useState(null);
useEffect(() => {
if (alert.show) {
const timer = setTimeout(() => {
setAlert({ ...alert, show: false });
}, 5000);
return () => clearTimeout(timer);
}
}, [alert]);
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prev) => ({ ...prev, [name]: value }));
};
const handleCaptchaChange = (token) => {
setCaptchaToken(token);
};
const handleSubmit = async (e) => {
e.preventDefault();
if (!captchaToken) {
setAlert({
show: true,
message: "Please verify the CAPTCHA.",
type: "danger",
});
return;
}
const emailData = {
...formData,
to: "info@shivasakthi.ca",
senderName: "Shivasakthi Restaurant",
recaptchaToken: captchaToken,
};
try {
const res = await axios.post(BaseUrl, emailData, {
headers: {
"Content-Type": "application/json",
},
});
setAlert({
show: true,
message: res?.data?.message || "Message sent successfully!",
type: "success",
});
setFormData({
name: "",
email: "",
phone_number: "",
subject: "",
message: "",
});
setCaptchaToken(null);
} catch (error) {
setAlert({
show: true,
message: "Failed to send message. Please try again later.",
type: "danger",
});
}
};
return (
<div className="contact-page-form">
<h3>Send Us Message</h3>
<p>Your email address will not be published. Required fields are marked *</p>
<form id="contactForm" className="contactForm" name="contactForm" onSubmit={handleSubmit}>
<div className="row mt-30 gap-20">
<div className="col-sm-6">
<div className="form-group">
<input
type="text"
id="name"
name="name"
className="form-control"
placeholder="Full Name"
required
data-error="Please enter your Name"
value={formData.name}
onChange={handleChange}
/>
<div className="help-block with-errors" />
</div>
</div>
<div className="col-sm-6">
<div className="form-group">
<input
type="email"
id="email"
name="email"
className="form-control"
placeholder="Email Address"
required
data-error="Please enter your Email"
value={formData.email}
onChange={handleChange}
/>
<div className="help-block with-errors" />
</div>
</div>
<div className="col-sm-6">
<div className="form-group">
<input
type="text"
id="phone_number"
name="phone_number"
className="form-control"
placeholder="Phone"
required
data-error="Please enter your Phone No"
value={formData.phone_number}
onChange={handleChange}
/>
<div className="help-block with-errors" />
</div>
</div>
<div className="col-sm-6">
<div className="form-group">
<input
type="text"
id="subject"
name="subject"
className="form-control"
placeholder="Subject"
required
data-error="Please enter your Subject"
value={formData.subject}
onChange={handleChange}
/>
<div className="help-block with-errors" />
</div>
</div>
<div className="col-sm-12">
<div className="form-group">
<textarea
name="message"
id="message"
className="form-control"
rows={4}
placeholder="Write Message"
required
data-error="Please enter your Message"
value={formData.message}
onChange={handleChange}
/>
<div className="help-block with-errors" />
</div>
</div>
<div className="col-sm-12 mt-3 mb-3">
<ReCAPTCHA
sitekey="6Lfi9o4rAAAAAOatjscl4m4UaOA7_g_rFBHOaf5n"
onChange={handleCaptchaChange}
/>
</div>
<div className="col-sm-12">
<div className="form-group mb-0">
<button type="submit" className="theme-btn">
Send Message Us <i className="far fa-arrow-alt-right" />
</button>
<div id="msgSubmit" className="hidden" />
</div>
</div>
</div>
</form>
{alert.show && (
<div className={`alert alert-${alert.type} alert-dismissible fade show`} role="alert">
{alert.message}
<button
type="button"
className="btn-close"
onClick={() => setAlert({ ...alert, show: false })}
></button>
</div>
)}
</div>
);
};
export default ContactForm;

27
components/Counter.js Normal file
View File

@ -0,0 +1,27 @@
"use client";
import CountUp from "react-countup";
import ReactVisibilitySensor from "react-visibility-sensor";
const Counter = ({ end, decimals, extraClass }) => {
return (
<CountUp
end={end ? end : 100}
duration={3}
decimals={decimals ? decimals : 0}
>
{({ countUpRef, start }) => (
<ReactVisibilitySensor onChange={start} delayedCall>
<span
className={`${extraClass}`}
data-from="0"
data-to={end}
ref={countUpRef}
>
count
</span>
</ReactVisibilitySensor>
)}
</CountUp>
);
};
export default Counter;

View File

@ -0,0 +1,84 @@
import Link from "next/link";
const FoodCategory = () => {
return (
<section className="food-category-area pb-90 rpb-65 rel z-1">
<div className="container">
<div className="row justify-content-center">
<div className="col-xxl-6 col-xl-7 col-lg-9">
<div
className="section-title text-center mb-50"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<span className="sub-title mb-5">popular food category</span>
<h2>
we provide amazing &amp; Quality food for your good health
</h2>
</div>
</div>
</div>
<div className="row justify-content-center">
<div
className="col-xl-4 col-md-6"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="featured-item">
<div className="icon">
<i className="flaticon-recommended-food" />
</div>
<div className="content">
<h4>
<Link href="menu-restaurant">Best Quality Food</Link>
</h4>
<p>Sed ut perspiciatis unde omnis este natus sit voluptatem</p>
</div>
</div>
</div>
<div
className="col-xl-4 col-md-6"
data-aos="fade-up"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="featured-item">
<div className="icon">
<i className="flaticon-fast-delivery" />
</div>
<div className="content">
<h4>
<Link href="menu-restaurant">fast food delivery</Link>
</h4>
<p>Sed ut perspiciatis unde omnis este natus sit voluptatem</p>
</div>
</div>
</div>
<div
className="col-xl-4 col-md-6"
data-aos="fade-up"
data-aos-delay={100}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="featured-item">
<div className="icon">
<i className="flaticon-cashback" />
</div>
<div className="content">
<h4>
<Link href="menu-restaurant">money back guarantee</Link>
</h4>
<p>Sed ut perspiciatis unde omnis este natus sit voluptatem</p>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default FoodCategory;

View File

@ -0,0 +1,214 @@
"use client";
import Isotope from "isotope-layout";
import { Fragment, useEffect, useRef, useState } from "react";
const GalleryIsotope = () => {
const isotope = useRef();
const [filterKey, setFilterKey] = useState("*");
useEffect(() => {
setTimeout(() => {
isotope.current = new Isotope(".gallery-active", {
itemSelector: ".item",
percentPosition: true,
masonry: {
columnWidth: ".item",
},
animationOptions: {
duration: 750,
easing: "linear",
queue: false,
},
});
}, 500);
}, []);
useEffect(() => {
if (isotope.current) {
filterKey === "*"
? isotope.current.arrange({ filter: `*` })
: isotope.current.arrange({ filter: `.${filterKey}` });
}
}, [filterKey]);
const handleFilterKeyChange = (key) => () => {
setFilterKey(key);
};
const activeBtn = (value) => (value === filterKey ? "active" : "");
return (
<Fragment>
<ul
className="nav gallery-nav food-menu-tab mb-40"
role="tablist"
data-aos="fade-up"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<li>
<button
className={`nav-link ${activeBtn("*")}`}
onClick={handleFilterKeyChange("*")}
data-filter="*"
>
<i className="flaticon-cupcake" />
<span>dessert</span>
</button>
</li>
<li>
<button
className={`nav-link ${activeBtn("vegetarian")}`}
onClick={handleFilterKeyChange("vegetarian")}
data-filter=".vegetarian"
>
<i className="flaticon-broccoli" />
<span>vegetarian</span>
</button>
</li>
<li>
<button
className={`nav-link ${activeBtn("potatoes")}`}
onClick={handleFilterKeyChange("potatoes")}
data-filter=".potatoes"
>
<i className="flaticon-fried-potatoes" />
<span>potatoes</span>
</button>
</li>
<li>
<button
className={`nav-link ${activeBtn("seafood")}`}
onClick={handleFilterKeyChange("seafood")}
data-filter=".seafood"
>
<i className="flaticon-crab" />
<span>seafood</span>
</button>
</li>
<li>
<button
className={`nav-link ${activeBtn("drinks")}`}
onClick={handleFilterKeyChange("drinks")}
data-filter=".drinks"
>
<i className="flaticon-poinsettia" />
<span>drinks</span>
</button>
</li>
</ul>
<div className="row gallery-active">
<div className="col-lg-4 col-sm-6 item potatoes">
<div
className="gallery-item-three"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<img src="assets/images/gallery/gallery-three1.jpg" alt="Gallery" />
<h3>Chicken burger</h3>
<span className="category">Delicious food</span>
</div>
</div>
<div className="col-lg-4 col-sm-6 item vegetarian drinks">
<div
className="gallery-item-three"
data-aos="fade-up"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<img src="assets/images/gallery/gallery-three2.jpg" alt="Gallery" />
<h3>yamee Chicken fry</h3>
<span className="category">Delicious food</span>
</div>
</div>
<div className="col-lg-4 col-sm-6 item seafood">
<div
className="gallery-item-three"
data-aos="fade-up"
data-aos-delay={100}
data-aos-duration={1500}
data-aos-offset={50}
>
<img src="assets/images/gallery/gallery-three3.jpg" alt="Gallery" />
<h3>beef vegetable hot dog</h3>
<span className="category">Delicious food</span>
</div>
</div>
<div className="col-lg-4 col-sm-6 item potatoes drinks">
<div
className="gallery-item-three"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<img src="assets/images/gallery/gallery-three4.jpg" alt="Gallery" />
<h3>hot dog with mustard</h3>
<span className="category">Delicious food</span>
</div>
</div>
<div className="col-lg-4 col-sm-6 item vegetarian">
<div
className="gallery-item-three"
data-aos="fade-up"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<img src="assets/images/gallery/gallery-three5.jpg" alt="Gallery" />
<h3>traditional Italian pizza</h3>
<span className="category">Delicious food</span>
</div>
</div>
<div className="col-lg-4 col-sm-6 item seafood drinks">
<div
className="gallery-item-three"
data-aos="fade-up"
data-aos-delay={100}
data-aos-duration={1500}
data-aos-offset={50}
>
<img src="assets/images/gallery/gallery-three6.jpg" alt="Gallery" />
<h3>Chicken burger</h3>
<span className="category">Delicious food</span>
</div>
</div>
<div className="col-lg-4 col-sm-6 item potatoes">
<div
className="gallery-item-three"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<img src="assets/images/gallery/gallery-three7.jpg" alt="Gallery" />
<h3>Chicken burger</h3>
<span className="category">Delicious food</span>
</div>
</div>
<div className="col-lg-4 col-sm-6 item vegetarian drinks">
<div
className="gallery-item-three"
data-aos="fade-up"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<img src="assets/images/gallery/gallery-three8.jpg" alt="Gallery" />
<h3>Chicken burger</h3>
<span className="category">Delicious food</span>
</div>
</div>
<div className="col-lg-4 col-sm-6 item seafood drinks">
<div
className="gallery-item-three"
data-aos="fade-up"
data-aos-delay={100}
data-aos-duration={1500}
data-aos-offset={50}
>
<img src="assets/images/gallery/gallery-three9.jpg" alt="Gallery" />
<h3>Chicken burger</h3>
<span className="category">Delicious food</span>
</div>
</div>
</div>
</Fragment>
);
};
export default GalleryIsotope;

59
components/Headline.js Normal file
View File

@ -0,0 +1,59 @@
const Headline = ({ mb = "105" }) => {
return (
<div className={`headline-area mb-${mb} rmb-85 rel z-1`}>
<span className="marquee-wrap">
<span className="marquee-inner left">
<span className="marquee-item">Italian pizza</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
<span className="marquee-item">delicious foods</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
<span className="marquee-item">burger king</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
</span>
<span className="marquee-inner left">
<span className="marquee-item">Italian pizza</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
<span className="marquee-item">delicious foods</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
<span className="marquee-item">burger king</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
</span>
<span className="marquee-inner left">
<span className="marquee-item">Italian pizza</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
<span className="marquee-item">delicious foods</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
<span className="marquee-item">burger king</span>
<span className="marquee-item">
<i className="flaticon-star" />
</span>
</span>
</span>
<div className="headline-shapes">
<div className="shape one">
<img src="assets/images/shapes/tomato.png" alt="Shape" />
</div>
<div className="shape two">
<img src="assets/images/shapes/burger.png" alt="Shape" />
</div>
</div>
</div>
);
};
export default Headline;

View File

@ -0,0 +1,94 @@
"use client"
import Counter from "@/components/Counter";
const HomeCounterSection = () => {
return (
<div
className="counter-area-four bgs-cover pt-100"
style={{ backgroundImage: "url(/assets/images/home/bg-image.jpg)" }}
>
<div className="container">
<div className="row justify-content-end">
<div className="col-xl-7 col-lg-9">
<div className="row no-gap">
<div className="col-lg-4 col-sm-6">
<div
className="counter-item style-four bgc-secondary counter-text-wrap"
data-aos="fade-down"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<span
className="count-text plus"
data-speed={3000}
data-stop={20}
>
<Counter end={20} />
</span>
<div className="wave">
<img
src="/assets/images/shapes/counter-wave.png"
alt="Shape"
/>
</div>
<h6 className="counter-title">Experience Chefs</h6>
</div>
</div>
<div className="col-lg-4 col-sm-6">
<div
className="counter-item text-white style-four counter-text-wrap"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50} style={{ backgroundColor: "#222222" }}
>
<span
className="count-text k-plus"
data-speed={3000}
data-stop={2}
>
<Counter end={2} />
</span>
<div className="wave">
<img
src="/assets/images/shapes/counter-wave-white.png"
alt="Shape"
/>
</div>
<h6 className="counter-title">Happy Customers</h6>
</div>
</div>
<div className="col-lg-4 col-sm-6">
<div
className="counter-item style-four bgc-primary counter-text-wrap"
data-aos="fade-down"
data-aos-delay={100}
data-aos-duration={1500}
data-aos-offset={50}
>
<span
className="count-text plus"
data-speed={3000}
data-stop={40}
>
<Counter end={40} />
</span>
<div className="wave">
<img
src="/assets/images/shapes/counter-wave.png"
alt="Shape"
/>
</div>
<h6 className="counter-title">Favorite Dishes</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default HomeCounterSection;

View File

@ -0,0 +1,53 @@
import Slider from "react-slick";
const instagramData = [
{ id: 1, image: "/assets/images/home/bottom/1.webp" },
{ id: 2, image: "/assets/images/home/bottom/2.webp" },
{ id: 3, image: "/assets/images/home/bottom/3.webp" },
{ id: 4, image: "/assets/images/home/bottom/4.webp" },
{ id: 5, image: "/assets/images/home/bottom/5.webp" },
];
const InstagramArea = () => {
return (
<div className="instagram-area">
<Slider
dots={false}
arrows={false}
infinite={true}
speed={500}
slidesToShow={5}
slidesToScroll={1}
autoplay={true}
autoplaySpeed={2500}
responsive={[
{ breakpoint: 1400, settings: { slidesToShow: 5 } },
{ breakpoint: 1200, settings: { slidesToShow: 4 } },
{ breakpoint: 992, settings: { slidesToShow: 3 } },
{ breakpoint: 576, settings: { slidesToShow: 3 } },
{ breakpoint: 0, settings: { slidesToShow: 1 } },
]}
>
{instagramData.map((item, index) => (
<div
key={item.id}
data-aos="fade-up"
data-aos-delay={index * 50}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="instagram-item">
<img src={item.image} alt={`Instagram ${item.id}`} />
{/* <a href={item.image}>
<i className="fab fa-instagram" />
</a> */}
</div>
</div>
))}
</Slider>
</div>
);
};
export default InstagramArea;

24
components/MenuIframe.js Normal file
View File

@ -0,0 +1,24 @@
const MenuIframe=()=>{
return(
<section className="contact-page-area pb-100">
<div className="container-fluid">
<div className="row align-items-center">
<div
className="our-location"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<div style={{position:"relative", paddingTop:"max(60%,324px)", width:"100%", height:"0px"}}><iframe style={{position:"absolute", border:"none", width:"100%", height:"100%", left:"0", top:"0"}} src="https://online.fliphtml5.com/fgssp/kwnq/" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" ></iframe></div>
{/* <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d369174.37626170606!2d-79.647352!3d43.706916!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b3bfed533002b%3A0xe83c1cd7caca2ee6!2s7166%20Airport%20Rd%2C%20Mississauga%2C%20ON%20L4T%202H2%2C%20Canada!5e0!3m2!1sen!2sus!4v1748536731832!5m2!1sen!2sus" style={{ border: 0, width: "100%" }}
allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> */}
</div>
</div>
</div>
</section>
);
}
export default MenuIframe;

108
components/OfferCard.js Normal file
View File

@ -0,0 +1,108 @@
const OfferCard = () => {
return (
<div className="offer-card-area">
<div className="row no-gap row-cols-xxl-5 row-cols-xl-4 row-cols-lg-3 row-cols-sm-2 row-cols-1 justify-content-center">
<div
className="col"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="offer-card-item">
<img src="assets/images/offer/good-food.png" alt="Good Food" />
<div className="badge">Hot</div>
<div className="image">
<img src="assets/images/offer/offer-card1.png" alt="Food" />
</div>
<span className="title">Burger</span>
<span className="available-item">35+ Burger menu items</span>
<div className="bg-text">
<span>Burger</span> <span>Burger</span> <span>Burger</span>
</div>
</div>
</div>
<div
className="col"
data-aos="fade-up"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="offer-card-item style-two">
<img src="assets/images/offer/good-food.png" alt="Good Food" />
<div className="badge">-10%</div>
<div className="image">
<img src="assets/images/offer/offer-card2.png" alt="Food" />
</div>
<span className="title">Pizza</span>
<span className="available-item">35+ Burger menu items</span>
<div className="bg-text">
<span>Pizza</span> <span>Pizza</span> <span>Pizza</span>
</div>
</div>
</div>
<div
className="col"
data-aos="fade-up"
data-aos-delay={100}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="offer-card-item">
<img src="assets/images/offer/good-food.png" alt="Good Food" />
<div className="badge">Hot</div>
<div className="image">
<img src="assets/images/offer/offer-card3.png" alt="Food" />
</div>
<span className="title">hotdog</span>
<span className="available-item">35+ Burger menu items</span>
<div className="bg-text">
<span>hotdog</span> <span>hotdog</span> <span>hotdog</span>
</div>
</div>
</div>
<div
className="col"
data-aos="fade-up"
data-aos-delay={150}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="offer-card-item style-two">
<img src="assets/images/offer/good-food.png" alt="Good Food" />
<div className="badge">-15%</div>
<div className="image">
<img src="assets/images/offer/offer-card4.png" alt="Food" />
</div>
<span className="title">chickens</span>
<span className="available-item">35+ Burger menu items</span>
<div className="bg-text">
<span>chickens</span> <span>chickens</span> <span>chickens</span>
</div>
</div>
</div>
<div
className="col"
data-aos="fade-up"
data-aos-delay={200}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="offer-card-item">
<img src="assets/images/offer/good-food.png" alt="Good Food" />
<div className="badge">Hot</div>
<div className="image">
<img src="assets/images/offer/offer-card5.png" alt="Food" />
</div>
<span className="title">seafood</span>
<span className="available-item">35+ Burger menu items</span>
<div className="bg-text">
<span>seafood</span> <span>seafood</span> <span>seafood</span>
</div>
</div>
</div>
</div>
</div>
);
};
export default OfferCard;

41
components/PageBanner.js Normal file
View File

@ -0,0 +1,41 @@
import Link from "next/link";
const PageBanner = ({ pageTitle, pageName, background }) => {
return (
<section
className="page-banner-area overlay pt-215 rpt-150 pb-160 rpb-120 rel z-1 bgs-cover text-center"
style={{ backgroundImage: `url(${background})` }}
>
<div className="container">
<div className="banner-inner text-white">
<h1
className="page-title"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
{pageTitle}
</h1>
<nav aria-label="breadcrumb">
<ol
className="breadcrumb justify-content-center"
data-aos="fade-up"
data-aos-delay={200}
data-aos-duration={1500}
data-aos-offset={50}
>
<li className="breadcrumb-item">
<Link href="/">Home</Link>
</li>
<li className="breadcrumb-item active">
{pageName ? pageName : pageTitle}
</li>
</ol>
</nav>
</div>
</div>
</section>
);
};
export default PageBanner;

View File

@ -0,0 +1,27 @@
"use client";
import { memo, useState } from "react";
const PlusMinusBtn = () => {
const [value, setValue] = useState(1);
return (
<div className="quantity-input">
<button
className="quantity-down"
onClick={() => setValue(value == 1 ? 1 : value - 1)}
>
--
</button>
<input
className="quantity"
type="text"
defaultValue={1}
value={value}
name="quantity"
/>
<button className="quantity-up" onClick={() => setValue(value + 1)}>
+
</button>
</div>
);
};
export default memo(PlusMinusBtn);

19
components/ProgressBar.js Normal file
View File

@ -0,0 +1,19 @@
"use client";
import { buildStyles, CircularProgressbar } from "react-circular-progressbar";
const ProgressBar = ({ value, color, extraCls, emptyFill }) => {
return (
<div className={`canvas ${extraCls ? extraCls : "one"}`}>
<CircularProgressbar
width={120}
value={value}
strokeWidth={3}
styles={buildStyles({
pathColor: color ? color : "#EC3D08",
trailColor: emptyFill ? emptyFill : "#FBDDD5",
})}
/>{" "}
</div>
);
};
export default ProgressBar;

1846
components/RestaurantMenu.js Normal file

File diff suppressed because it is too large Load Diff

113
components/Testimonial.js Normal file
View File

@ -0,0 +1,113 @@
"use client";
import { sliderProps } from "@/utility/sliderProps";
import Slider from "react-slick";
const Testimonial = () => {
return (
<section
className="testimonials-two bgc-primary"
style={{
backgroundImage:
"url(assets/images/testimonials/testimonials-two-bg.png)",
}}
>
<div className="row align-items-center">
<div className="col-lg-6">
<div className="why-choose-two-image">
<img
src="/assets/images/home/home-testi.webp"
alt="Testimonials" loading="lazy"
/>
</div>
</div>
<div className="col-lg-6">
<div className="testimonials-two-content rel z-1 text-center text-white p-45 rpy-55">
<div
className="section-title mb-20"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<span className="sub-title mb-5">customer feedback</span>
<h2>what have lots off happy customer explore feedback</h2>
</div>
<span className="marquee-wrap style-two">
<span className="marquee-inner left">review </span>
<span className="marquee-inner left">review </span>
<span className="marquee-inner left">review </span>
</span>
<Slider
{...sliderProps.testimonialsTwoCarousel}
className="testimonials-two-carousel"
data-aos="fade-up"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="testimonial-two-item">
<div className="ratting">
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
</div>
<div className="text">
Visited this beautiful restaurant while nearby for a conference. The staff were welcoming from the very start! We started with the Gobi 65 which had light spice but a to. Of flavour. Then, we had the hakka noodles, masala dosa and chettinadu chicken curry which was so tasty. Our Server Gagan recommended it and Im glad he did. He was fantastic and if we are in town again, we will definitely return!
</div>
<span className="author">Cam Larocque</span>
{/* <span className="designation">Manager</span> */}
</div>
<div className="testimonial-two-item">
<div className="ratting">
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
</div>
<div className="text">
Good to have another new south india cuisine in GTA. The food was amazing, The service was good and fast, thanks for offering the milk burfi for tasting.
I have been to their other restaurant locations in GTA and KW area, the service and food was excellent. All the best for this new location. Must visit for guys looking to try south indian Biryani.
</div>
<span className="author">Sen K</span>
{/* <span className="designation">Manager</span> */}
</div>
<div className="testimonial-two-item">
<div className="ratting mb-3">
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
<i className="fas fa-star text-white" />
</div>
<div className="text">
Absolutely incredible experience! This Tamil restaurant is a hidden gem in Canada. The flavors are rich, authentic, and remind me of home. Each dish was perfectly spiced and cooked to perfection. The staff were warm, welcoming, and attentive, making the whole visit even more enjoyable. The ambiance is cozy yet vibrant, and you can tell they take pride in both their food and service. Highly recommend to anyone looking for a true taste of South Indian cuisine!
</div>
<span className="author">manimala s</span>
{/* <span className="designation">Manager</span> */}
</div>
{/* <div className="testimonial-two-item">
<div className="quote">
<i className="flaticon-quote" />
</div>
<div className="text">
Renowned for its versatility in the kitchen, Red King Crab can
prepared in various ways, from simple steaming or boiling to
elaborate preparations such as grilling incorporating weather
loving
</div>
<span className="author">Salvador I. Burton</span>
<span className="designation">Manager</span>
</div> */}
</Slider>
<div className="shape">
<img src="assets/images/shapes/tomato.png" alt="Shape" loading="lazy" />
</div>
</div>
</div>
</div>
</section>
);
};
export default Testimonial;

View File

@ -0,0 +1,311 @@
"use client";
import { sliderProps } from "@/utility/sliderProps";
import { useEffect, useState } from "react";
import Slider from "react-slick";
function TestimonialSlider() {
const [nav1, setNav1] = useState(null);
const [nav2, setNav2] = useState(null);
const [slider1, setSlider1] = useState(null);
const [slider2, setSlider2] = useState(null);
useEffect(() => {
setNav1(slider1);
setNav2(slider2);
});
const thumbs = {
dots: false,
arrows: false,
speed: 800,
autoplay: true,
focusOnSelect: true,
slidesToShow: 3,
slidesToScroll: 1,
};
const slider = {
arrows: false,
dots: false,
infinite: false,
autoplay: true,
speed: 500,
fade: true,
slidesToShow: 1,
slidesToScroll: 1,
};
return (
<section className="testimonials-five rel z-1 bgc-lighter py-130 rpy-100">
<div className="container rel">
<div className="row text-center justify-content-center">
<div className="col-xl-6 col-lg-7 col-md-8">
<div
className="section-title mb-50"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<span className="sub-title mb-5">Customer Feedback</span>
<h2>Weve Lots off Happy Customer Explore Our Feedback</h2>
</div>
<Slider
asNavFor={nav1}
ref={(slider) => setSlider2(slider)}
{...sliderProps.testimonialsFiveAuthors}
className="testimonials-five-authors mb-20"
data-aos="fade-up"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="testimonial-five-author-item">
<img
src="assets/images/testimonials/testi-author-five1.jpg"
alt="Author"
/>
</div>
<div className="testimonial-five-author-item">
<img
src="assets/images/testimonials/testi-author-five2.jpg"
alt="Author"
/>
</div>
<div className="testimonial-five-author-item">
<img
src="assets/images/testimonials/testi-author-five3.jpg"
alt="Author"
/>
</div>
<div className="testimonial-five-author-item">
<img
src="assets/images/testimonials/testi-author-five2.jpg"
alt="Author"
/>
</div>
</Slider>
<Slider
className="testimonials-five-content"
asNavFor={nav2}
ref={(slider) => setSlider1(slider)}
{...sliderProps.testimonialsFiveContent}
data-aos="fade-up"
data-aos-delay={100}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="testimonial-five-item">
<div className="text">
Renowned for its versatility in the kitchen Red can prepared
various ways from simple steaming boiling to elaborate
preparations such
</div>
<span className="author">Salvador I. Burton</span>
<span className="designation">Manager</span>
</div>
<div className="testimonial-five-item">
<div className="text">
From simple steaming boiling to elaborate preparations such
Renowned for its versatility in the kitchen Red can prepared
various ways
</div>
<span className="author">Salvador I. Burton</span>
<span className="designation">Manager</span>
</div>
<div className="testimonial-five-item">
<div className="text">
Renowned for its steaming boiling to elaborate preparations
suchver satility in the kitchen Red can prepared various ways
from simple{" "}
</div>
<span className="author">Salvador I. Burton</span>
<span className="designation">Manager</span>
</div>
<div className="testimonial-five-item">
<div className="text">
Elaborate preparations such renowned for its versatility in
the kitchen Red can prepared various ways from simple steaming
boiling to
</div>
<span className="author">Salvador I. Burton</span>
<span className="designation">Manager</span>
</div>
</Slider>
</div>
</div>
<div className="testimonials-five-shapes">
<div
className="shape left"
data-aos="fade-left"
data-aos-delay={150}
data-aos-duration={1500}
data-aos-offset={50}
>
<img
src="assets/images/testimonials/testi-five-left.png"
alt="Left"
/>
</div>
<div
className="shape right"
data-aos="fade-right"
data-aos-delay={150}
data-aos-duration={1500}
data-aos-offset={50}
>
<img
src="assets/images/testimonials/testi-five-right.png"
alt="Left"
/>
</div>
</div>
</div>
<div className="testimonials-shapes">
<div className="shape one">
<img
src="assets/images/testimonials/testi-five-shape3.png"
alt="Shape"
/>
</div>
<div className="shape three">
<img
src="assets/images/testimonials/testi-five-shape1.png"
alt="Shape"
/>
</div>
<div className="shape four">
<img
src="assets/images/testimonials/testi-five-shape2.png"
alt="Shape"
/>
</div>
</div>
</section>
);
}
export default TestimonialSlider;
export const TestimonialSlider2 = () => {
return (
<Slider {...sliderProps.testimonialsActive} className="testimonials-active">
<div
className="testimonial-item"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="quote">
<i className="flaticon-quote" />
</div>
<div className="text">
Renowned for its versatility in the kitchen, Red King Crab can be
prepared in various ways, from simple steaming or boiling to elaborate
preparations such as grilling incorporating
</div>
<div className="author">
<img src="assets/images/testimonials/author1.jpg" alt="Author" />
<div className="description">
<h5>Steven H. Paxson</h5>
<span>CEO &amp; Founder</span>
</div>
</div>
</div>
<div
className="testimonial-item"
data-aos="fade-up"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="quote">
<i className="flaticon-quote" />
</div>
<div className="text">
Renowned for its versatility in the kitchen, Red King Crab can be
prepared in various ways, from simple steaming or boiling to elaborate
preparations such as grilling incorporating
</div>
<div className="author">
<img src="assets/images/testimonials/author2.jpg" alt="Author" />
<div className="description">
<h5>Steven H. Paxson</h5>
<span>CEO &amp; Founder</span>
</div>
</div>
</div>
<div
className="testimonial-item"
data-aos="fade-up"
data-aos-delay={100}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="quote">
<i className="flaticon-quote" />
</div>
<div className="text">
Renowned for its versatility in the kitchen, Red King Crab can be
prepared in various ways, from simple steaming or boiling to elaborate
preparations such as grilling incorporating
</div>
<div className="author">
<img src="assets/images/testimonials/author3.jpg" alt="Author" />
<div className="description">
<h5>Steven H. Paxson</h5>
<span>CEO &amp; Founder</span>
</div>
</div>
</div>
<div className="testimonial-item">
<div className="quote">
<i className="flaticon-quote" />
</div>
<div className="text">
Renowned for its versatility in the kitchen, Red King Crab can be
prepared in various ways, from simple steaming or boiling to elaborate
preparations such as grilling incorporating
</div>
<div className="author">
<img src="assets/images/testimonials/author1.jpg" alt="Author" />
<div className="description">
<h5>Steven H. Paxson</h5>
<span>CEO &amp; Founder</span>
</div>
</div>
</div>
<div className="testimonial-item">
<div className="quote">
<i className="flaticon-quote" />
</div>
<div className="text">
Renowned for its versatility in the kitchen, Red King Crab can be
prepared in various ways, from simple steaming or boiling to elaborate
preparations such as grilling incorporating
</div>
<div className="author">
<img src="assets/images/testimonials/author2.jpg" alt="Author" />
<div className="description">
<h5>Steven H. Paxson</h5>
<span>CEO &amp; Founder</span>
</div>
</div>
</div>
<div className="testimonial-item">
<div className="quote">
<i className="flaticon-quote" />
</div>
<div className="text">
Renowned for its versatility in the kitchen, Red King Crab can be
prepared in various ways, from simple steaming or boiling to elaborate
preparations such as grilling incorporating
</div>
<div className="author">
<img src="assets/images/testimonials/author3.jpg" alt="Author" />
<div className="description">
<h5>Steven H. Paxson</h5>
<span>CEO &amp; Founder</span>
</div>
</div>
</div>
</Slider>
);
};

View File

@ -0,0 +1,60 @@
import { Blog } from "@/utility/constant.utils";
import Link from "next/link";
const ListOfBlogSection = () => {
return (
<section className="blog-area pt-100 rpt-70 pb-90 rpb-60 rel z-1">
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-12">
<div
className="section-title text-center mb-50"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<span className="sub-title mb-5">The Latest News What We Have</span>
<h2>Our Latest Food News</h2>
</div>
</div>
</div>
<div className="row justify-content-center">
{
Blog?.map((blog) => {
return (
<div className="col-xl-4 col-md-6" key={blog?.id}>
<div
className="blog-item"
data-aos="fade-up"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="image">
<img src={blog?.image} alt={blog?.slug} />
</div>
<div className="content">
<h4>
<Link href={`/blog/${blog?.slug}`}>
{blog?.title}
</Link>
</h4>
<p>
{blog?.short_des}
</p>
<Link href={`/blog/${blog?.slug}`} className="read-more">
Read more <i className="far fa-arrow-alt-right" />
</Link>
</div>
</div>
</div>
)
})
}
</div>
</div>
</section>
);
};
export default ListOfBlogSection;

View File

@ -0,0 +1,105 @@
import Link from "next/link";
import Counter from "../Counter";
const AboutSection = ({
productImage = "/assets/images/home/left-side-image.webp",
title = "Dosa",
product = "Dosa",
}) => {
return (
<section className="about-us-area pt-100 rpt-60 pb-30 rel z-1">
<div className="container">
<div className="row align-items-center">
<div className="col-lg-6">
<div
className="about-image-part style-two mb-30 rmb-55"
data-aos="fade-left"
data-aos-duration={1500}
data-aos-offset={50}
>
<img src={productImage} alt={`About ${product}`} loading="lazy" />
{/* <div
className="quality-food"
style={{
backgroundImage:
"url(assets/images/shapes/about-star-yellow.png)",
}}
>
<span className="for-border" />
<span className="text">
quality <br />
food
</span>
</div> */}
</div>
</div>
<div className="col-lg-6">
<div
className="about-us-content"
data-aos="fade-right"
data-aos-delay={150}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="section-title mb-25">
<span className="sub-title mb-5">Real . authentic . South Indian</span>
<h2> Welcome to Shiva Sakthi Restaurant</h2>
</div>
<p>
Your new favorite destination for authentic South Indian cuisine, now in the Greater Toronto Area (GTA). Enjoy dine-in, take-out, and full-service catering tailored to your needs. We also offer a spacious party hall for your special occasions.
</p>
<div className="about-btn-author pt-5 mb-60">
<Link href="/about" className="theme-btn style-two">
learn more us <i className="far fa-arrow-alt-right" />
</Link>
<Link href="/menu" className="read-more">
Explore popular menu <i className="far fa-arrow-alt-right" />
</Link>
</div>
{/* <div className="row">
<div className="col-sm-4 col-6">
<div className="counter-item style-two counter-text-wrap">
<span
className="count-text k-plus"
data-speed={3000}
data-stop={34}
>
<Counter end={34} />
</span>
<span className="counter-title">Organic Planting</span>
</div>
</div>
<div className="col-sm-4 col-6">
<div className="counter-item style-two counter-text-wrap">
<span
className="count-text plus"
data-speed={3000}
data-stop={356}
>
<Counter end={356} />
</span>
<span className="counter-title">Passionate Chefs</span>
</div>
</div>
<div className="col-sm-4 col-6">
<div className="counter-item style-two counter-text-wrap">
<span
className="count-text plus"
data-speed={3000}
data-stop={8534}
>
<Counter end={8534} />
</span>
<span className="counter-title">Favourite Dishes</span>
</div>
</div>
</div> */}
</div>
</div>
</div>
</div>
{/* <span className="about-bg-text">{title}</span> */}
</section>
);
};
export default AboutSection;

View File

@ -0,0 +1,60 @@
import { Blog } from "@/utility/constant.utils";
import Link from "next/link";
const BlogSection = () => {
return (
<section className="blog-area pt-100 rpt-70 pb-90 rpb-60 rel z-1">
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-12">
<div
className="section-title text-center mb-50"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<span className="sub-title mb-5">The Latest News What We Have</span>
<h2>Our Latest Food News</h2>
</div>
</div>
</div>
<div className="row justify-content-center">
{
Blog?.map((blog) => {
return (
<div className="col-xl-4 col-md-6" key={blog?.id}>
<div
className="blog-item"
data-aos="fade-up"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="image">
<img src={blog?.image} alt={blog?.slug} loading="lazy" />
</div>
<div className="content">
<h4>
<Link href={`/blog/${blog?.slug}`}>
{blog?.title}
</Link>
</h4>
<p>
{blog?.short_des}
</p>
<Link href={`/blog/${blog?.slug}`} className="read-more">
Read more <i className="far fa-arrow-alt-right" />
</Link>
</div>
</div>
</div>
)
})
}
</div>
</div>
</section>
);
};
export default BlogSection;

View File

@ -0,0 +1,138 @@
import Link from "next/link";
import Slider from "react-slick";
import { sliderProps } from "@/utility/sliderProps";
const CategorySection = () => {
const CategoryData = [
{
id: 1,
title: "Soups & Salads",
image: "/assets/images/home/category/salads.webp",
},
{
id: 2,
title: "Veg Appetizers",
image: "/assets/images/home/category/veg-appetizer.webp",
},
{
id: 3,
title: "Non - Veg Appetizers",
image: "/assets/images/home/category/chicken-appetizer.webp",
},
{
id: 4,
title: "Egg Delights",
image: "/assets/images/home/category/egg.webp",
},
{
id: 5,
title: "DOSA",
image: "/assets/images/home/category/dosa.webp",
},
{
id: 6,
title: "IDLY",
image: "/assets/images/home/category/idly.webp",
},
{
id: 7,
title: "Uttapam",
image: "/assets/images/home/category/uthappam.webp",
},
{
id: 8,
title: "Indian Breads",
image: "/assets/images/home/category/indian-breads.webp",
},
{
id: 9,
title: "Tandoori Breads",
image: "/assets/images/home/category/tandoor-breads.webp",
},
{
id: 10,
title: "Hakka",
image: "/assets/images/home/category/hakka.webp",
},
{
id: 11,
title: "Veg Biryani",
image: "/assets/images/home/category/veg-biryani.webp",
},
{
id: 12,
title: "Veg Curry",
image: "/assets/images/home/category/veg-curry.webp",
},
{
id: 13,
title: "NON - Veg Biryani",
image: "/assets/images/home/category/nonveg-biryani.webp",
},
{
id: 14,
title: "NON - Veg Curry",
image: "/assets/images/home/category/nv-curry.webp",
},
{
id: 15,
title: "Deserts",
image: "/assets/images/home/category/dessert.webp",
},
{
id: 16,
title: "Beverages",
image: "/assets/images/home/category/beverages.webp",
}
];
return (
<section className="related-products-area pt-130 rpt-100 pb-100 rpb-70 rel z-1">
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-12">
<div
className="section-title text-center mb-50"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<span className="sub-title mb-5">South Indian And North Indian</span>
<h2>POPULAR DISHES</h2>
</div>
</div>
</div>
<Slider {...sliderProps.categorySlider}>
{CategoryData.map((cat) => (
<div key={cat.id} className="px-2">
<div className="product-item-two">
<div className="image">
<img src={cat.image} alt={cat.title} />
</div>
<div className="content" style={{ backgroundColor: "#ffb936" }}>
<h5>{cat.title}</h5>
</div>
</div>
</div>
))}
</Slider>
</div>
<div className="testimonials-shapes">
<div className="shape one">
<img src="/assets/images/home/popular-menu/right.webp" alt="Shape" style={{ width: "50%" }} />
</div>
{/* <div className="shape two">
<img src="assets/images/shapes/hero-shape3.png" alt="Shape" />
</div>
<div className="shape three">
<img src="assets/images/shapes/hero-shape3.png" alt="Shape" />
</div> */}
<div className="shape four">
<img src="/assets/images/home/popular-menu/left.webp" alt="Shape" style={{ width: "50%" }} />
</div>
</div>
</section>
);
};
export default CategorySection;

View File

@ -0,0 +1,72 @@
import Link from "next/link";
const DosaOfferSection = () => {
return (
<section className="special-offer-area-two bgc-black pt-105 rpt-85 pb-130 rpb-100 rel z-1"
style={{ backgroundImage: "url(/assets/images/background/hero.jpg)" }}
>
<div className="container">
<div className="row align-items-center">
<div className="col-lg-5">
<div
className="offer-content-two text-white rmb-55"
data-aos="fade-right"
data-aos-duration={1500}
data-aos-offset={50}
>
<img
src="/assets/images/home/offer-dosa/left-side-img.webp"
alt="Dosa" loading="lazy"
/>
<div className="section-title mt-45 mb-25">
<h2>South Indian and North Indian Cusine</h2>
</div>
{/* <p className="ms-0">
South Indian and North Indian Cusine
</p> */}
<a href="/menu" className="theme-btn mt-15">
order now <i className="far fa-arrow-alt-right" />
</a>
</div>
</div>
<div className="col-lg-7">
<div
className="offer-image style-two style-three"
data-aos="fade-left"
data-aos-duration={1500}
data-aos-offset={50}
>
<img src="/assets/images/home/offer-dosa/right-side-img.webp" alt="Burger Image" loading="lazy" />
{/* <div
className="offer-badge"
style={{
backgroundImage: "url(assets/images/shapes/about-star.png)",
}}
>
<span>
only <br />
<span className="price">$59</span>
</span>
</div> */}
<span className="marquee-wrap style-two text-white">
<span className="marquee-inner left">dosa</span>
<span className="marquee-inner left">dosa</span>
<span className="marquee-inner left">dosa</span>
</span>
</div>
</div>
</div>
</div>
<div className="testimonials-shapes">
{/* <div className="shape one">
<img src="assets/images/shapes/hero-shape5.png" alt="Shape" />
</div> */}
{/* <div className="shape two">
<img src="assets/images/shapes/hero-shape3.png" alt="Shape" />
</div> */}
</div>
</section>
);
};
export default DosaOfferSection;

View File

@ -0,0 +1,137 @@
import { useState } from "react";
import Link from "next/link";
import Slider from "react-slick";
import { sliderProps } from "@/utility/sliderProps";
const heroSlides = [
{
subtitle: "Welcome to Shiva Sakthi Restaurant",
title: "Taste the <br/> &amp; Tradition On Weekdays",
description:
"At Shiva Sakthi, we serve more than just food — we serve memories. Taste the heritage of South India in every bite, lovingly prepared with spices that tell a story.",
buttonText: "Order now",
buttonLink: "https://gosnappy.io/owa/r/shiva-sakthi-restaurant/5921/menu_655/",
leftImage: "/assets/images/home/right-4.webp",
rightImage: "/assets/images/home/right-4.webp",
},
{
subtitle: "Welcome to Shiva Sakthi Restaurant",
title: "Unlimited Thali On Weeekends By Reservation Only",
description:
"Enjoy the comfort of home-style cooking blended with restaurant excellence. At Shiva Sakthi, every meal is crafted with love and served with joy.",
buttonText: "Book now",
buttonLink: "https://gosnappy.io/reservation/?storeId=5921&returnUrl=https:%2F%2Fgosnappy.io%2Fowa%2Fr%2Fshiva-sakthi-restaurant%2F5921%2Fmenu_655%2F",
leftImage: "/assets/images/home/left-5.webp",
rightImage: "/assets/images/home/right-5.webp",
},
{
subtitle: "Authentic Flavors. Timeless Traditions.",
title: "SOUTH INDIAN SOUL ON EVERY PLATE",
description:
"At Shiva Sakthi, we serve more than just food — we serve memories. Taste the heritage of South India in every bite, lovingly prepared with spices that tell a story.",
buttonText: "Explore Menu",
buttonLink: "/menu",
leftImage: "/assets/images/home/left-2.webp",
rightImage: "/assets/images/home/right-2.webp",
},
{
subtitle: "Pure Veg & Non-Veg Cuisine Inspired by Tradition",
title: "YOUR TASTE OF TAMIL HERITAGE",
description:
"Celebrate Tamil culinary roots with our rich variety of dishes. From hearty curries to crisp dosas, every plate is a tribute to South Indian hospitality.",
buttonText: "Explore Menu",
buttonLink: "/menu",
leftImage: "/assets/images/home/left-1.webp",
rightImage: "/assets/images/home/right-1.webp",
},
{
subtitle: "Wholesome Dishes with a Homemade Touch",
title: "MADE WITH LOVE, SERVED WITH PRIDE",
description:
"Enjoy the comfort of home-style cooking blended with restaurant excellence. At Shiva Sakthi, every meal is crafted with love and served with joy.",
buttonText: "Explore Menu",
buttonLink: "/menu",
leftImage: "/assets/images/home/left-3.webp",
rightImage: "/assets/images/home/right-3.webp",
},
];
const HeroBanner = () => {
const [currentSlide, setCurrentSlide] = useState(0);
const handleBeforeChange = (_, next) => {
setCurrentSlide(next);
};
const settings = {
...sliderProps.heroBanner,
beforeChange: handleBeforeChange,
};
const activeSlide = heroSlides[currentSlide];
return (
<section
className="hero-area-five bgs-cover pt-150 rpt-105 pb-100 rel z-1"
style={{ backgroundImage: "url(/assets/images/background/hero.jpg)" }}
>
{/* Dynamic Content Slider */}
<Slider {...settings} className="hero-slider container">
{heroSlides.map((slide, index) => (
<div key={index}>
<div
className="hero-content-four style-two rpt-0 text-center text-white"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<span className="sub-title">{slide.subtitle}</span>
<h1 dangerouslySetInnerHTML={{ __html: slide.title }}></h1>
<p>{slide.description}</p>
<Link href={slide.buttonLink} className="theme-btn mt-25" target={slide.buttonLink.startsWith("http") && index < 2 && "_blank"} >
{slide.buttonText} <i className="far fa-arrow-alt-right" />
</Link>
</div>
</div>
))}
</Slider>
{/* Static and Dynamic Shapes */}
<div className="hero-shapes">
{/* Static shapes */}
{/* <div className="shape one">
<img src="/assets/images/shapes/hero-shape1.png" alt="Shape" />
</div> */}
<div className="shape two">
<img src="/assets/images/shapes/hero-shape2.png" alt="Shape" />
</div>
<div className="shape five">
<img src="/assets/images/shapes/hero-shape5.png" alt="Shape" />
</div>
{/* Dynamic left/right shape images based on slide */}
<div
className="hero-left"
data-aos="zoom-in"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<img src={activeSlide.leftImage} alt="Hero Left Shape" />
</div>
<div
className="hero-right"
data-aos="zoom-in"
data-aos-delay={100}
data-aos-duration={1500}
data-aos-offset={50}
>
<img src={activeSlide.rightImage} alt="Hero Right Shape" />
</div>
</div>
</section>
);
};
export default HeroBanner;

View File

@ -0,0 +1,97 @@
import Link from "next/link";
const MealsOfferSection = () => {
return (
<section className="special-offer-area-two bgc-black pt-105 rpt-85 pb-130 rpb-100 rel z-1"
style={{ backgroundImage: "url(/assets/images/background/hero.jpg)" }}
>
<div className="container">
<div className="row align-items-center">
<div className="col-lg-6">
<div
className="offer-content-two text-center text-white rmb-55"
data-aos="fade-right"
data-aos-duration={1500}
data-aos-offset={50}
>
<img
src="/assets/images/home/unlimited-thali/left.webp"
alt="Unlimited Thali"
/>
<div className="section-title mt-45 mb-25">
<h2>For Reservation</h2>
</div>
<p>
Enjoy our Unlimited Thali, available by reservation Recomented, every Saturday and Sunday from 12 PM to 4 PM.
</p>
<ul className="offer-countdown-wrap mt-40 mb-25">
<li>
<span id="days" />
Saturday
</li>
<li>
<span id="hours" />
Sunday
</li>
{/* <li>
<span id="minutes" />
Min
</li>
<li>
<span id="seconds" />
Sec
</li> */}
</ul>
<Link href="https://gosnappy.io/reservation/?storeId=5921&returnUrl=https:%2F%2Fgosnappy.io%2Fowa%2Fr%2Fshiva-sakthi-restaurant%2F5921%2Fmenu_655%2F" target="_blank" className="theme-btn style-three">
Reservation <i className="far fa-arrow-alt-right" />
</Link>
</div>
</div>
<div className="col-lg-6">
<div
className="offer-image style-two"
data-aos="fade-left"
data-aos-duration={1500}
data-aos-offset={50}
>
<img src="/assets/images/home/unlimited-thali/right.webp" alt="Thali Image" loading="lazy" />
{/* <div
className="offer-badge"
style={{
backgroundImage:
"url(assets/images/shapes/offer-circle-shape.png)",
}}
>
<span>
only <br />
<span className="price">$59</span>
</span>
</div> */}
<span className="marquee-wrap style-two text-white">
<span className="marquee-inner left">Thali</span>
<span className="marquee-inner left">Thali</span>
<span className="marquee-inner left">Thali</span>
</span>
</div>
</div>
</div>
</div>
<div className="testimonials-shapes">
<div className="shape one">
<img src="assets/images/shapes/hero-shape5.png" alt="Shape" loading="lazy" />
</div>
<div className="shape two">
<img src="assets/images/shapes/hero-shape3.png" alt="Shape" loading="lazy" />
</div>
<div className="shape three">
<img src="assets/images/shapes/hero-shape5.png" alt="Shape" loading="lazy" />
</div>
<div className="shape four">
<img src="assets/images/shapes/hero-shape3.png" alt="Shape" loading="lazy" />
</div>
</div>
</section>
);
};
export default MealsOfferSection;

View File

@ -0,0 +1,37 @@
import Link from "next/link";
const HomeOfferCard = () => {
return (
<section className="container-fluid pb-100 rpb-60">
<div className="category-banner-area px-4">
<div className="row row-cols-xl-2 row-cols-lg-2 row-cols-sm-2 row-cols-1 justify-content-center">
<div
className="col"
data-aos="fade-up"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<div>
<img src="/assets/images/home/offer-card-1.webp" alt="offer-card-1" style={{width:"100%"}} loading="lazy" />
</div>
</div>
<div
className="col"
data-aos="fade-up"
data-aos-delay={100}
data-aos-duration={1500}
data-aos-offset={50}
>
<div>
<img src="/assets/images/home/offer-card-2.webp" alt="offer-card-2" style={{width:"100%"}} loading="lazy" />
</div>
</div>
</div>
</div>
</section>
)
}
export default HomeOfferCard;

View File

@ -0,0 +1,131 @@
import Link from "next/link";
const PopularMenu = () => {
const menuData = [
{
title: "Medhu Vada",
price: "$7.99",
description: "The popular soft and savory appetizer",
image: "/assets/images/home/popular-menu/medhu-vada.webp",
},
{
title: "Garlic Naan",
price: "$1.99",
description: "Naan infused with garlic",
image: "/assets/images/home/popular-menu/garlic-naan.webp",
},
{
title: "King Fish Fry",
price: "$17.99",
description: "House Special - Premium King Fish Slice Fry",
image: "/assets/images/home/popular-menu/fish-fry.webp",
},
{
title: "Paruppu pradhaman",
price: "$3.99",
description: "south style Payasam made with cocunut, Lentils and Jaggery",
image: "/assets/images/home/popular-menu/paruppu-pradhaman.webp",
},
{
title: "Egg Bhurji (Podimas)",
price: "$11.99",
description: "Masala Egg Bhurji (Podimas)",
image: "/assets/images/home/popular-menu/egg-kothu.webp",
},
{
title: "Veg Biryani",
price: "$13.99",
description: "Cooked in Chettinadu style using Basmati rice",
image: "/assets/images/home/popular-menu/veg-birani.webp",
},
{
title: "Hakka Noodles (veg) ",
price: "$13.99",
description: "Hakka Flovored Noodles",
image: "/assets/images/home/popular-menu/veg-hakka.webp",
},
{
title: "Thalapakattu Mutton Biryani",
price: "$16.99",
description: "Authentic Thalapakattu style in seeraga samba rice",
image: "/assets/images/home/popular-menu/thalappakatti-mutton-biryani.webp",
},
{
title: "PIZZA DOSA",
price: "$14.99",
description: "Classic Dosa made to taste like pizza and favorite with kids and adults alike",
image: "/assets/images/home/popular-menu/pizza-dosa.webp",
},
{
title: "Payasam",
price: "$3.99",
description: "Traditional Tamilnadu style vermichilli payasam",
image: "/assets/images/home/popular-menu/payasam.webp",
},
];
return (
<section className="popular-menu-area-three pt-130 rpt-100 pb-115 rpb-90 rel z-1">
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-7 col-md-8">
<div
className="section-title text-center mb-50"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<span className="sub-title mb-5">popular menu</span>
<h2>
From Authentic Indian Kitchen
</h2>
</div>
</div>
</div>
<div className="row no-gap">
{[0, 1].map((colIndex) => (
<div className="col-lg-6" key={colIndex}>
<div
className="popular-menu-wrap"
data-aos={colIndex === 0 ? "fade-left" : "fade-right"}
data-aos-duration={1500}
data-aos-offset={50}
>
{menuData
.slice(colIndex * 5, (colIndex + 1) * 5)
.map((item, index) => (
<div className="food-menu-item style-two" key={index}>
<div className="image">
<img src={item.image} alt={item.title} loading="lazy" />
</div>
<div className="content">
<h5>
<span className="title">{item.title}</span>{" "}
<span className="dots" />{" "}
<span className="price">{item.price}</span>
</h5>
<p>{item.description}</p>
</div>
</div>
))}
</div>
</div>
))}
</div>
<div className="text-center mt-3">
<a class="theme-btn style-two" href="/menu">View Full Menu <i class="far fa-arrow-alt-right"></i></a>
</div>
</div>
<div className="menu-items-shape">
<div className="shape one">
<img src="/assets/images/home/popular-menu/left.webp" alt="Shape" loading="lazy" />
</div>
<div className="shape two">
<img src="/assets/images/home/popular-menu/right.webp" alt="Shape" loading="lazy" />
</div>
</div>
</section>
);
};
export default PopularMenu;

8
jsconfig.json Normal file
View File

@ -0,0 +1,8 @@
{
"compilerOptions": {
"paths": {
"@/*": ["./*"],
"@css/*": ["./public/assets/css/*"]
}
}
}

785
layout/Footer.js Normal file
View File

@ -0,0 +1,785 @@
import Link from "next/link";
const Footer = ({ footer = 1 }) => {
switch (footer) {
case 1:
return <DefaultFooter />;
case 2:
return <Footer2 />;
case 3:
return <Footer3 />;
case 5:
return <Footer5 />;
case 6:
return <Footer6 />;
default:
return <DefaultFooter />;
}
};
export default Footer;
const DefaultFooter = () => {
return (
<footer
className="main-footer bgc-black rel z-1"
style={{
backgroundImage: "url(/assets/images/background/footer-bg.png)",
}}
>
{/* <div className="footer-top py-130 rpy-100">
<div className="container">
<div className="row justify-content-center">
<div
className="col-xl-7 col-lg-9"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="section-title text-white text-center mb-35">
<span className="sub-title mb-10">join our newsletter</span>
<h2>subscribe follow our newsletter to get more updates</h2>
</div>
<form className="newsletter-form" action="#">
<label htmlFor="news-email">
<i className="fas fa-envelope" />
</label>
<input
id="news-email"
type="email"
placeholder="Email Address"
required=""
/>
<button className="theme-btn" type="submit">
Subscribe <i className="far fa-arrow-alt-right" />
</button>
</form>
</div>
</div>
</div>
</div> */}
<div className="widget-area pt-100 pb-70">
<div className="container">
<div className="row">
{/* Column 1 - 4 units */}
<div className="col-xl-4 col-lg-6 col-md-6 col-sm-12 mb-4" data-aos="fade-up" data-aos-duration={1500}>
<div className="footer-widget footer-text">
<div className="footer-logo mb-25">
<Link href="/" className="d-flex gap-2 align-items-center">
<img src="/assets/images/logos/logo.webp" alt="Logo" title="Logo" />
</Link>
</div>
<p>
At Shiva Sakthi Restaurant, we bring you the best of South and North Indian cuisine, crafted with passion and authenticity. From our kitchen to your plate, every dish is a celebration of India's rich culinary heritage.
</p>
<div className="social-style-one mt-15">
<Link href="https://www.facebook.com/shivasakthi.ca/" target="_blank"><i className="fab fa-facebook-f" /></Link>
<Link href="https://www.instagram.com/shivasakthi.ca/" target="_blank"><i className="fab fa-instagram" /></Link>
<Link href="https://www.youtube.com/@ShivaSakthiRestaurant" target="_blank"><i className="fab fa-youtube" /></Link>
</div>
</div>
</div>
{/* Column 2 - 2 units */}
<div className="col-xl-2 col-lg-6 col-md-6 col-sm-12 mb-4" data-aos="fade-up" data-aos-delay={50} data-aos-duration={1500}>
<div className="footer-widget footer-links">
<div className="footer-title"><h5>Quick Links</h5></div>
<ul>
<li><Link href="/">Home</Link></li>
<li><Link href="/about">About</Link></li>
<li><Link href="/menu">Menu</Link></li>
<li><Link href="/contact">Contact</Link></li>
</ul>
</div>
</div>
{/* Column 3 - 3 units */}
<div className="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-4" data-aos="fade-up" data-aos-delay={100} data-aos-duration={1500}>
<div className="footer-widget footer-contact">
<div className="footer-title"><h5>Contact Us</h5></div>
<ul>
<li>7166 Airport Road, Mississauga Ontario.L4T 2H2, Canada</li>
<li><a href="mailto:info@shivasakthi.ca"><u>info@shivasakthi.ca</u></a></li>
<li><a href="callto:905 677 3555">905 677 3555</a></li>
</ul>
</div>
</div>
{/* Column 4 - 3 units */}
<div className="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-4" data-aos="fade-up" data-aos-delay={150} data-aos-duration={1500}>
<div className="footer-widget opening-hour">
<div className="footer-title"><h5>Opening Hour</h5></div>
<ul>
<li>Monday Friday: <span>11.30 am - 10.00 pm</span></li>
<li>Saturday, Sunday: <span>12.00 pm - 10.00 pm</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="footer-bottom pt-30 pb-15">
<div className="container">
<div className="row">
<div className="col-lg-12">
<div className="copyright-text text-center">
<p>
Copyright {new Date().getFullYear()} © Shivas Dosa Restaurant. Powered by <Link href="https://metatroncubesolutions.com/">MetatronCube</Link>. All Right Reserved.{" "}
</p>
</div>
</div>
{/* <div className="col-lg-5 text-center text-lg-end">
<ul className="footer-bottom-nav">
<li>
<a href="#">Privacy Policy</a>
</li>
<li>
<a href="#">Terms &amp; Condition</a>
</li>
</ul>
</div> */}
</div>
<button
className="scroll-top scroll-to-target"
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
>
<i className="fas fa-arrow-alt-up" />
</button>
</div>
</div>
{/* <div className="footer-shapes">
<div className="shape one">
<img src="/assets/images/footer-shape/2.webp" alt="Shape" />
</div>
<div className="shape two">
<img src="/assets/images/footer-shape/3.webp" alt="Shape" />
</div>
<div className="shape three">
<img src="/assets/images/footer-shape/1.webp" alt="Shape" />
</div>
</div> */}
</footer>
);
};
const Footer2 = () => {
return (
<footer
className="main-footer bgc-black pt-130 rpt-100 rel z-1"
style={{ backgroundImage: "url(assets/images/background/footer-bg.png)" }}
>
<div className="widget-area pb-70">
<div className="container">
<div className="row justify-content-between">
<div className="col-xl-3 col-lg-4 col-sm-6">
<div
className="footer-widget footer-text"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="footer-logo mb-25">
<Link href="/">
<img src="/assets/images/logos/logo-white.png" alt="Logo" />
</Link>
</div>
<p>
Temporibus autem quibusdam officiis aut rerum necessitatibus
eveniet voluta repudiandae molestiae recusandae
</p>
<div className="social-style-one mt-15">
<Link href="https://www.facebook.com/shivasdosa/">
<i className="fab fa-facebook-f" />
</Link>
{/* <Link href="#">
<i className="fab fa-twitter" />
</Link>
<Link href="#">
<i className="fab fa-linkedin-in" />
</Link> */}
<Link href="https://www.instagram.com/shivasdosa/">
<i className="fab fa-instagram" />
</Link>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-5 col-sm-6">
<div
className="footer-widget footer-links"
data-aos="fade-up"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="footer-title">
<h5>popular food</h5>
</div>
<ul className="two-column">
<li>
<Link href="product-details">Hamburger</Link>
</li>
<li>
<Link href="product-details">French fries</Link>
</li>
<li>
<Link href="product-details">Chicken pizza</Link>
</li>
<li>
<Link href="product-details">Onion rings</Link>
</li>
<li>
<Link href="product-details">Vegetable roll</Link>
</li>
<li>
<Link href="product-details">Chicken nuggets</Link>
</li>
<li>
<Link href="product-details">Sea fish</Link>
</li>
<li>
<Link href="product-details">Tacos Pizza</Link>
</li>
<li>
<Link href="product-details">Fried chicken</Link>
</li>
<li>
<Link href="product-details">Hot Dogs</Link>
</li>
</ul>
</div>
</div>
<div className="col-xl-5">
<div className="row justify-content-between">
<div className="col-xl-6 col-lg-5 col-sm-6">
<div
className="footer-widget footer-contact"
data-aos="fade-up"
data-aos-delay={100}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="footer-title">
<h5>contact us</h5>
</div>
<ul>
<li>
1403 Washington Ave, New Orlea ns, LA 70130, United
States
</li>
<li>
<a href="mailto:wellfood@gmail.com">
<u>wellfood@gmail.com</u>
</a>
</li>
<li>
<a href="callto:+(1)0987654321">+(1) 098 765 4321</a>
</li>
</ul>
</div>
</div>
<div className="col-xl-6 col-lg-5 col-sm-6">
<div
className="footer-widget opening-hour"
data-aos="fade-up"
data-aos-delay={150}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="footer-title">
<h5>opening hour</h5>
</div>
<ul>
<li>
Monday Friday: <span>8am 4pm</span>
</li>
<li>
Saturday: <span>8am 12am</span>
</li>
</ul>
<div className="any-question mt-20">
<h5>Have any questions?</h5>
<a href="#" className="theme-btn style-two">
lets talk us <i className="far fa-arrow-alt-right" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="footer-bottom pt-30 pb-15">
<div className="container">
<div className="row">
<div className="col-lg-5">
<div className="copyright-text text-center text-lg-start">
<p>
Copyright 2024 <Link href="/">Wellfood</Link>. All Rights
Reserved{" "}
</p>
</div>
</div>
<div className="col-lg-7 text-center text-lg-end">
<ul className="footer-bottom-nav">
<li>
<a href="#">Privacy Policy</a>
</li>
<li>
<a href="#">Terms &amp; Condition</a>
</li>
</ul>
</div>
</div>
{/* Scroll Top Button */}
<button className="scroll-top scroll-to-target" data-target="html">
<i className="fas fa-arrow-alt-up" />
</button>
</div>
</div>
</footer>
);
};
const Footer3 = () => {
return (
<footer
className="main-footer footer-two bgc-black pt-120 rpt-90 rel z-1"
style={{ backgroundImage: "url(assets/images/background/footer-bg.png)" }}
>
<div className="widget-area pb-70">
<div className="container">
<div className="row justify-content-between">
<div
className="col-xl-3 col-lg-4 col-sm-6"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="footer-widget footer-text">
<div className="footer-title">
<h5>Location</h5>
</div>
<p>
1403 Washington Ave, New Orlea ns, LA 70130, United States
</p>
</div>
</div>
<div
className="col-xl-2 col-lg-3 col-sm-6"
data-aos="fade-up"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="footer-widget footer-contact">
<div className="footer-title">
<h5>contact us</h5>
</div>
<ul>
<li>
<a href="mailto:wellfood@gmail.com">
<u>wellfood@gmail.com</u>
</a>
</li>
<li>
<a href="callto:+(1)0987654321">+(1) 098 765 4321</a>
</li>
</ul>
</div>
</div>
<div
className="col-xl-3 col-lg-4 col-sm-6"
data-aos="fade-up"
data-aos-delay={100}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="footer-widget opening-hour">
<div className="footer-title">
<h5>opening hour</h5>
</div>
<ul>
<li>
Monday Friday: <span>8am 4pm</span>
</li>
<li>
Saturday: <span>8am 12am</span>
</li>
</ul>
</div>
</div>
<div
className="col-xl-3 col-lg-4 col-sm-6"
data-aos="fade-up"
data-aos-delay={150}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="footer-widget footer-text">
<div className="footer-title">
<h5>Follow Us</h5>
</div>
<div className="social-style-one mt-5">
<Link href="contact">
<i className="fab fa-facebook-f" />
</Link>
<Link href="contact">
<i className="fab fa-twitter" />
</Link>
<Link href="contact">
<i className="fab fa-linkedin-in" />
</Link>
<Link href="contact">
<i className="fab fa-instagram" />
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="footer-bottom pt-30 pb-15">
<div className="container rel text-center">
<ul className="footer-bottom-nav">
<li>
<Link href="product-details">Hamburger</Link>
</li>
<li>
<a href="#">Pizza</a>
</li>
<li>
<Link href="product-details">Vegetable roll</Link>
</li>
<li>
<Link href="product-details">Sea fish</Link>
</li>
<li>
<Link href="product-details">Fried chicken</Link>
</li>
<li>
<a href="#">Burger</a>
</li>
<li>
<a href="#">Saladr</a>
</li>
</ul>
{/* Scroll Top Button */}
<button className="scroll-top scroll-to-target" data-target="html">
<i className="fas fa-arrow-alt-up" />
</button>
</div>
<hr className="mt-25 mb-30" />
<div className="container">
<div className="row">
<div className="col-lg-5">
<div className="copyright-text text-center text-lg-start">
<p>
Copyright 2024 <Link href="/">Wellfood</Link>. All Rights
Reserved{" "}
</p>
</div>
</div>
<div className="col-lg-7 text-center text-lg-end">
<ul className="footer-bottom-nav">
<li>
<a href="#">Privacy Policy</a>
</li>
<li>
<a href="#">Terms &amp; Condition</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
);
};
const Footer5 = () => {
return (
<footer className="main-footer footer-two bgc-dark-green pt-120 rpt-90 rel z-1">
<div className="widget-area pb-70">
<div className="container">
<div className="row justify-content-between">
<div className="col-xl-3 col-lg-4 col-sm-6">
<div
className="footer-widget footer-text"
data-aos="fade-up"
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="footer-title">
<h5>Location</h5>
</div>
<p>
1403 Washington Ave, New Orlea ns, LA 70130, United States
</p>
</div>
</div>
<div className="col-xl-2 col-lg-3 col-sm-6">
<div
className="footer-widget footer-contact"
data-aos="fade-up"
data-aos-delay={50}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="footer-title">
<h5>contact us</h5>
</div>
<ul>
<li>
<a href="mailto:wellfood@gmail.com">
<u>wellfood@gmail.com</u>
</a>
</li>
<li>
<a href="callto:+(1)0987654321">+(1) 098 765 4321</a>
</li>
</ul>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-sm-6">
<div
className="footer-widget opening-hour"
data-aos="fade-up"
data-aos-delay={100}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="footer-title">
<h5>opening hour</h5>
</div>
<ul>
<li>
Monday Friday: <span>8am 4pm</span>
</li>
<li>
Saturday: <span>8am 12am</span>
</li>
</ul>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-sm-6">
<div
className="footer-widget footer-text"
data-aos="fade-up"
data-aos-delay={150}
data-aos-duration={1500}
data-aos-offset={50}
>
<div className="footer-title">
<h5>Follow Us</h5>
</div>
<div className="social-style-one mt-5">
<Link href="contact">
<i className="fab fa-facebook-f" />
</Link>
<Link href="contact">
<i className="fab fa-twitter" />
</Link>
<Link href="contact">
<i className="fab fa-linkedin-in" />
</Link>
<Link href="contact">
<i className="fab fa-instagram" />
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="footer-bottom pt-30 pb-15">
<div className="container rel text-center">
<ul className="footer-bottom-nav">
<li>
<Link href="product-details">Hamburger</Link>
</li>
<li>
<a href="#">Pizza</a>
</li>
<li>
<Link href="product-details">Vegetable roll</Link>
</li>
<li>
<Link href="product-details">Sea fish</Link>
</li>
<li>
<Link href="product-details">Fried chicken</Link>
</li>
<li>
<a href="#">Burger</a>
</li>
<li>
<a href="#">Saladr</a>
</li>
</ul>
{/* Scroll Top Button */}
<button className="scroll-top scroll-to-target" data-target="html">
<i className="fas fa-arrow-alt-up" />
</button>
</div>
<hr className="mt-25 mb-30" />
<div className="container">
<div className="row">
<div className="col-lg-5">
<div className="copyright-text text-center text-lg-start">
<p>
Copyright 2024 <Link href="/">Wellfood</Link>. All Rights
Reserved{" "}
</p>
</div>
</div>
<div className="col-lg-7 text-center text-lg-end">
<ul className="footer-bottom-nav">
<li>
<a href="#">Privacy Policy</a>
</li>
<li>
<a href="#">Terms &amp; Condition</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
);
};
const Footer6 = () => {
return (
<footer
className="main-footer footer-two bgc-black pt-120 rpt-90 rel z-1"
style={{ backgroundImage: "url(assets/images/background/footer-bg.png)" }}
>
<div className="widget-area pb-70">
<div className="container">
<div className="row justify-content-between">
<div className="col-xl-3 col-lg-4 col-sm-6">
<div className="footer-widget footer-text">
<div className="footer-title">
<h5>Location</h5>
</div>
<p>
1403 Washington Ave, New Orlea ns, LA 70130, United States
</p>
</div>
</div>
<div className="col-xl-2 col-lg-3 col-sm-6">
<div className="footer-widget footer-contact">
<div className="footer-title">
<h5>contact us</h5>
</div>
<ul>
<li>
<a href="mailto:wellfood@gmail.com">
<u>wellfood@gmail.com</u>
</a>
</li>
<li>
<a href="callto:+(1)0987654321">+(1) 098 765 4321</a>
</li>
</ul>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-sm-6">
<div className="footer-widget opening-hour">
<div className="footer-title">
<h5>opening hour</h5>
</div>
<ul>
<li>
Monday Friday: <span>8am 4pm</span>
</li>
<li>
Saturday: <span>8am 12am</span>
</li>
</ul>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-sm-6">
<div className="footer-widget footer-text">
<div className="footer-title">
<h5>Follow Us</h5>
</div>
<div className="social-style-one mt-5">
<Link href="contact">
<i className="fab fa-facebook-f" />
</Link>
<Link href="contact">
<i className="fab fa-twitter" />
</Link>
<Link href="contact">
<i className="fab fa-linkedin-in" />
</Link>
<Link href="contact">
<i className="fab fa-instagram" />
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="footer-bottom pt-30 pb-15">
<div className="container rel text-center">
<ul className="footer-bottom-nav">
<li>
<Link href="product-details">Hamburger</Link>
</li>
<li>
<a href="#">Pizza</a>
</li>
<li>
<Link href="product-details">Vegetable roll</Link>
</li>
<li>
<Link href="product-details">Sea fish</Link>
</li>
<li>
<Link href="product-details">Fried chicken</Link>
</li>
<li>
<a href="#">Burger</a>
</li>
<li>
<a href="#">Saladr</a>
</li>
</ul>
{/* Scroll Top Button */}
<button className="scroll-top scroll-to-target" data-target="html">
<i className="fas fa-arrow-alt-up" />
</button>
</div>
<hr className="mt-25 mb-30" />
<div className="container">
<div className="row">
<div className="col-lg-5">
<div className="copyright-text text-center text-lg-start">
<p>
Copyright 2024 <Link href="/">Wellfood</Link>. All Rights
Reserved{" "}
</p>
</div>
</div>
<div className="col-lg-7 text-center text-lg-end">
<ul className="footer-bottom-nav">
<li>
<a href="#">Privacy Policy</a>
</li>
<li>
<a href="#">Terms &amp; Condition</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
);
};

745
layout/Header.js Normal file
View File

@ -0,0 +1,745 @@
"use client";
import { wellfoodUtility } from "@/utility";
import useClickOutside from "@/utility/useClickOutside";
import Link from "next/link";
import { Fragment, useEffect, useState } from "react";
const Sidebar = () => {
return (
<Fragment>
{/*Form Back Drop*/}
<div
className="form-back-drop"
onClick={() =>
document
.querySelector("body")
.classList.remove("side-content-visible")
}
/>
{/* Hidden Sidebar */}
<section className="hidden-bar">
<div className="inner-box text-center">
<div
className="cross-icon"
onClick={() =>
document
.querySelector("body")
.classList.remove("side-content-visible")
}
>
<span className="fa fa-times" />
</div>
<div className="title">
<h4>Get Appointment</h4>
</div>
{/*Appointment Form*/}
<div className="appointment-form">
<form
onSubmit={(e) => {
e.preventDefault();
document
.querySelector("body")
.classList.remove("side-content-visible");
}}
>
<div className="form-group">
<input
type="text"
name="text"
defaultValue=""
placeholder="Name"
required=""
/>
</div>
<div className="form-group">
<input
type="email"
name="email"
defaultValue=""
placeholder="Email Address"
required=""
/>
</div>
<div className="form-group">
<textarea placeholder="Message" rows={5} defaultValue={""} />
</div>
<div className="form-group">
<button type="submit" className="theme-btn style-two">
Submit now
</button>
</div>
</form>
</div>
{/*Social Icons*/}
<div className="social-style-one">
<Link href="https://www.facebook.com/shivasdosa/">
<i className="fab fa-facebook-f" />
</Link>
<Link href="#">
<i className="fab fa-twitter" />
</Link>
<Link href="#">
<i className="fab fa-linkedin-in" />
</Link>
<Link href="https://www.instagram.com/shivasdosa/">
<i className="fab fa-instagram" />
</Link>
</div>
</div>
</section>
{/*End Hidden Sidebar */}
</Fragment>
);
};
const SearchBtn = () => {
const [toggleSearch, setToggleSearch] = useState(false);
let domNode = useClickOutside(() => {
setToggleSearch(false);
});
return (
<div className="nav-search py-10" ref={domNode}>
<button
className="far fa-search"
onClick={() => setToggleSearch(!toggleSearch)}
/>
<form
onSubmit={(e) => {
e.preventDefault();
setToggleSearch(false);
}}
className={toggleSearch ? "" : "hide"}
>
<input
type="text"
placeholder="Search"
className="searchbox"
required=""
/>
<button type="submit" className="searchbutton far fa-search" />
</form>
</div>
);
};
const MobileMenu = () => {
const [toggle, setToggle] = useState(false);
const [activeMenu, setActiveMenu] = useState("");
const activeMenuSet = (value) =>
setActiveMenu(activeMenu === value ? "" : value),
activeLi = (value) =>
value === activeMenu ? { display: "block" } : { display: "none" };
return (
<Fragment>
<header className="main-header white-menu menu-absolute d-block d-xl-none">
{/*Header-Upper*/}
<div className="header-upper">
<div className="container-fluid clearfix">
<div className="header-inner rel d-flex align-items-center justify-content-between">
<div className="logo-outer">
<div className="logo">
<Link href="/">
<img
src="/assets/images/logos/logo.webp"
alt="Logo"
title="Logo"
/>
</Link>
</div>
</div>
<div className="nav-outer ms-lg-5 ps-xxl-4 clearfix">
{/* Main Menu */}
<nav className="main-menu navbar-expand-lg">
<div className="navbar-header py-10">
<div className="mobile-logo">
<Link href="/" className="d-flex gap-2 align-items-center">
<img
src="/assets/images/logos/logo.webp"
alt="Logo"
title="Logo"
/>
{/* <h3 className="mb-0 text-white">SHIVASAKTHI</h3> */}
</Link>
</div>
{/* Toggle Button */}
<button
type="button"
className="navbar-toggle"
data-bs-toggle="collapse"
data-bs-target=".navbar-collapse"
onClick={() => setToggle(!toggle)}
>
<span className="icon-bar" />
<span className="icon-bar" />
<span className="icon-bar" />
</button>
</div>
<div
className={`navbar-collapse collapse clearfix ${toggle ? "show" : ""
}`}
>
<ul className="navigation clearfix ">
{/* <li className="dropdown">
<a href="#">Home</a>
<ul>
<li>
<Link href="/">Home Restauran</Link>
</li>
<li>
<Link href="index2">Home Pizza</Link>
</li>
<li>
<Link href="index3">Home Burger</Link>
</li>
<li>
<Link href="index4">Home Chiken</Link>
</li>
<li>
<Link href="index5">Juice &amp; Drinks</Link>
</li>
<li>
<Link href="index6">Home Grill</Link>
</li>
</ul>
<div className="dropdown-btn">
<span className="far fa-angle-down" />
</div>
</li> */}
<li>
<Link href="/">Home</Link>
</li>
<li>
<Link href="/about">About Us</Link>
</li>
<li>
<Link href="/menu">Food Menu</Link>
</li>
<li>
<Link href="/blog">Blog</Link>
</li>
{/* <li className="dropdown">
<a href="#">Menu</a>
<ul>
<li>
<Link href="menu-restaurant">Menu Restaurant</Link>
</li>
<li>
<Link href="menu-pizza">Menu Pizza</Link>
</li>
<li>
<Link href="menu-grill">Menu Gril</Link>
</li>
<li>
<Link href="menu-burger">Menu Burger</Link>
</li>
<li>
<Link href="menu-sea-food">Menu Sea Food</Link>
</li>
<li>
<Link href="menu-chicken">Menu Chicken</Link>
</li>
</ul>
<div className="dropdown-btn">
<span className="far fa-angle-down" />
</div>
</li> */}
{/* <li className="dropdown">
<a href="#">pages</a>
<ul>
<li>
<Link href="about">About Us</Link>
</li>
<li>
<Link href="history">Our History</Link>
</li>
<li>
<Link href="faq">faqs</Link>
</li>
<li className="dropdown">
<a href="#">chefs</a>
<ul>
<li>
<Link href="chefs">Our chefs</Link>
</li>
<li>
<Link href="chef-details">chef Details</Link>
</li>
</ul>
<div className="dropdown-btn">
<span className="far fa-angle-down" />
</div>
</li>
<li>
<Link href="gallery">Gallery</Link>
</li>
</ul>
<div className="dropdown-btn">
<span className="far fa-angle-down" />
</div>
</li> */}
{/* <li className="dropdown">
<a href="#">blog</a>
<ul style={activeLi("blog")}>
<li>
<Link href="blog">blog standard</Link>
</li>
<li>
<Link href="blog-details">blog details</Link>
</li>
</ul>
<div
className="dropdown-btn"
onClick={() => activeMenuSet("blog")}
>
<span className="far fa-angle-down" />
</div>
</li> */}
{/* <li className="dropdown">
<a href="#">shop</a>
<ul>
<li>
<Link href="shop">Products</Link>
</li>
<li>
<Link href="product-details">Product Details</Link>
</li>
<li>
<Link href="cart">Shopping Cart</Link>
</li>
<li>
<Link href="checkout">Checkout Page</Link>
</li>
</ul>
<div className="dropdown-btn">
<span className="far fa-angle-down" />
</div>
</li> */}
<li>
<Link href="/contact">Contact</Link>
</li>
</ul>
{/* <ul className="navigation clearfix">
<li className="dropdown" style={activeLi("home")}>
<a href="#">Home</a>
<ul>
<li>
<Link href="/">Home Restauran</Link>
</li>
<li>
<Link href="index2">Home Pizza</Link>
</li>
<li>
<Link href="index3">Home Burger</Link>
</li>
<li>
<Link href="index4">Home Chiken</Link>
</li>
<li>
<Link href="index5">Juice &amp; Drinks</Link>
</li>
<li>
<Link href="index6">Home Grill</Link>
</li>
</ul>
<div
className="dropdown-btn"
onClick={() => activeMenuSet("home")}
>
<span className="far fa-angle-down" />
</div>
</li>
<li className="dropdown">
<a href="#">Menu</a>
<ul style={activeLi("Menu")}>
<li>
<Link href="menu-restaurant">Menu Restaurant</Link>
</li>
<li>
<Link href="menu-pizza">Menu Pizza</Link>
</li>
<li>
<Link href="menu-grill">Menu Gril</Link>
</li>
<li>
<Link href="menu-burger">Menu Burger</Link>
</li>
<li>
<Link href="menu-sea-food">Menu Sea Food</Link>
</li>
<li>
<Link href="menu-chicken">Menu Chicken</Link>
</li>
</ul>
<div
className="dropdown-btn"
onClick={() => activeMenuSet("Menu")}
>
<span className="far fa-angle-down" />
</div>
</li>
<li className="dropdown">
<a href="#">pages</a>
<ul style={activeLi("pages")}>
<li>
<Link href="about">About Us</Link>
</li>
<li>
<Link href="history">Our History</Link>
</li>
<li>
<Link href="faq">faqs</Link>
</li>
<li>
<Link href="chefs">Our chefs</Link>
</li>
<li>
<Link href="chef-details">chef Details</Link>
</li>
<li>
<Link href="gallery">Gallery</Link>
</li>
</ul>
<div
className="dropdown-btn"
onClick={() => activeMenuSet("pages")}
>
<span className="far fa-angle-down" />
</div>
</li>
<li className="dropdown">
<a href="#">blog</a>
<ul style={activeLi("blog")}>
<li>
<Link href="blog">blog standard</Link>
</li>
<li>
<Link href="blog-details">blog details</Link>
</li>
</ul>
<div
className="dropdown-btn"
onClick={() => activeMenuSet("blog")}
>
<span className="far fa-angle-down" />
</div>
</li>
<li className="dropdown">
<a href="#">shop</a>
<ul style={activeLi("shop")}>
<li>
<Link href="shop">Products</Link>
</li>
<li>
<Link href="product-details">Product Details</Link>
</li>
<li>
<Link href="product-details">Product Details</Link>
</li>
<li>
<Link href="cart">Shopping Cart</Link>
</li>
<li>
<Link href="checkout">Checkout Page</Link>
</li>
</ul>
<div
className="dropdown-btn"
onClick={() => activeMenuSet("shop")}
>
<span className="far fa-angle-down" />
</div>
</li>
<li>
<Link href="contact">Contact</Link>
</li>
</ul> */}
</div>
</nav>
{/* Main Menu End*/}
</div>
{/* <div className="header-number">
<i className="far fa-phone" />
Call : <a href="callto:+88012345688">+880 123 456 88</a>
</div>
<SearchBtn />
<div className="menu-btns">
<button>
<i className="far fa-shopping-cart" /> <span>2</span>
</button>
<Link href="contact" className="theme-btn">
Book now <i className="far fa-arrow-alt-right" />
</Link>
<div className="menu-sidebar">
<button
className="bg-transparent"
onClick={() =>
document
.querySelector("body")
.classList.add("side-content-visible")
}
/>
</div>
</div> */}
</div>
</div>
<div className="bg-lines">
<span />
<span />
<span />
<span />
</div>
</div>
{/*End Header Upper*/}
</header>
</Fragment>
);
};
const Header = () => {
useEffect(() => {
wellfoodUtility.fixedHeader();
}, []);
return (
<Fragment>
<header className="main-header white-menu menu-absolute d-none d-xl-block">
{/*Header-Upper*/}
<div className="header-upper">
<div className="container clearfix">
<div className="header-inner rel d-flex align-items-center justify-content-between">
<div className="logo-outer">
<div className="logo">
<Link href="/" className="d-flex gap-2 align-items-center">
<img
src="/assets/images/logos/logo.webp"
alt="Logo"
title="Logo"
/>
{/* <h3 className="mb-0 text-white">SHIVASAKTHI</h3> */}
</Link>
</div>
</div>
<div className="nav-outer ms-lg-5 ps-xxl-4 clearfix">
{/* Main Menu */}
<nav className="main-menu navbar-expand-lg">
<div className="navbar-header py-10">
<div className="mobile-logo">
<Link href="/">
<img
src="/assets/images/logos/logo.png"
alt="Logo"
title="Logo"
/>
</Link>
</div>
{/* Toggle Button */}
<button
type="button"
className="navbar-toggle"
data-bs-toggle="collapse"
data-bs-target=".navbar-collapse"
>
<span className="icon-bar" />
<span className="icon-bar" />
<span className="icon-bar" />
</button>
</div>
<div className="navbar-collapse collapse clearfix">
<ul className="navigation clearfix ">
{/* <li className="dropdown">
<a href="#">Home</a>
<ul>
<li>
<Link href="/">Home Restauran</Link>
</li>
<li>
<Link href="index2">Home Pizza</Link>
</li>
<li>
<Link href="index3">Home Burger</Link>
</li>
<li>
<Link href="index4">Home Chiken</Link>
</li>
<li>
<Link href="index5">Juice &amp; Drinks</Link>
</li>
<li>
<Link href="index6">Home Grill</Link>
</li>
</ul>
<div className="dropdown-btn">
<span className="far fa-angle-down" />
</div>
</li> */}
<li>
<Link href="/">Home</Link>
</li>
<li>
<Link href="/about">About Us</Link>
</li>
<li>
<Link href="/menu">Food Menu</Link>
</li>
<li>
<Link href="/blog">Blog</Link>
</li>
{/* <li className="dropdown">
<a href="#">Menu</a>
<ul>
<li>
<Link href="menu-restaurant">Menu Restaurant</Link>
</li>
<li>
<Link href="menu-pizza">Menu Pizza</Link>
</li>
<li>
<Link href="menu-grill">Menu Gril</Link>
</li>
<li>
<Link href="menu-burger">Menu Burger</Link>
</li>
<li>
<Link href="menu-sea-food">Menu Sea Food</Link>
</li>
<li>
<Link href="menu-chicken">Menu Chicken</Link>
</li>
</ul>
<div className="dropdown-btn">
<span className="far fa-angle-down" />
</div>
</li> */}
{/* <li className="dropdown">
<a href="#">pages</a>
<ul>
<li>
<Link href="about">About Us</Link>
</li>
<li>
<Link href="history">Our History</Link>
</li>
<li>
<Link href="faq">faqs</Link>
</li>
<li className="dropdown">
<a href="#">chefs</a>
<ul>
<li>
<Link href="chefs">Our chefs</Link>
</li>
<li>
<Link href="chef-details">chef Details</Link>
</li>
</ul>
<div className="dropdown-btn">
<span className="far fa-angle-down" />
</div>
</li>
<li>
<Link href="gallery">Gallery</Link>
</li>
</ul>
<div className="dropdown-btn">
<span className="far fa-angle-down" />
</div>
</li> */}
{/* <li className="dropdown">
<a href="#">blog</a>
<ul>
<li>
<Link href="blog">blog standard</Link>
</li>
<li>
<Link href="blog-details">blog details</Link>
</li>
</ul>
<div className="dropdown-btn">
<span className="far fa-angle-down" />
</div>
</li> */}
{/* <li className="dropdown">
<a href="#">shop</a>
<ul>
<li>
<Link href="shop">Products</Link>
</li>
<li>
<Link href="product-details">Product Details</Link>
</li>
<li>
<Link href="cart">Shopping Cart</Link>
</li>
<li>
<Link href="checkout">Checkout Page</Link>
</li>
</ul>
<div className="dropdown-btn">
<span className="far fa-angle-down" />
</div>
</li> */}
<li>
<Link href="/contact">Contact</Link>
</li>
</ul>
<div className="menu-btns" style={{ paddingLeft: "30px" }}>
<Link href="https://gosnappy.io/owa/r/shiva-sakthi-restaurant/5921/menu_655/" target="_blank" className="theme-btn">
Order now <i className="far fa-arrow-alt-right" />
</Link>
</div>
</div>
</nav>
{/* Main Menu End*/}
</div>
{/* <div className="header-number">
<i className="far fa-phone" />
Call : <a href="callto:+88012345688">+880 123 456 88</a>
</div> */}
{/* Nav Search */}
{/* <SearchBtn /> */}
{/* Menu Button */}
{/* <div className="menu-btns">
<button>
<i className="far fa-shopping-cart" /> <span>2</span>
</button>
<Link href="contact" className="theme-btn">
Book now <i className="far fa-arrow-alt-right" />
</Link>
<div className="menu-sidebar">
<button
className="bg-transparent"
onClick={() =>
document
.querySelector("body")
.classList.add("side-content-visible")
}
/>
</div>
</div> */}
</div>
</div>
<div className="bg-lines">
<span />
<span />
<span />
<span />
</div>
</div>
{/*End Header Upper*/}
</header>
<MobileMenu />
{/* <Sidebar /> */}
</Fragment>
);
};
export default Header;

32
layout/WellFoodLayout.js Normal file
View File

@ -0,0 +1,32 @@
"use client";
import { wellfoodUtility } from "@/utility";
import { useEffect } from "react";
import niceSelect from "react-nice-select";
import Footer from "./Footer";
import Header from "./Header";
const WellFoodLayout = ({ children, bgBlack, footer }) => {
useEffect(() => {
niceSelect();
wellfoodUtility.animation();
console.log(bgBlack);
if (bgBlack) {
document.querySelector(".page-wrapper").classList.add("bg-black");
} else {
if (
document.querySelector(".page-wrapper").classList.contains("bg-black")
) {
document.querySelector(".page-wrapper").classList.remove("bg-black");
}
}
}, []);
return (
<div className="page-wrapper">
<Header />
{children}
<Footer footer={footer} />
</div>
);
};
export default WellFoodLayout;

22
next.config.js Normal file
View File

@ -0,0 +1,22 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
output: "export",
reactStrictMode: false,
trailingSlash: true, // if needed for static export
async headers() {
return [
{
source: '/(.*)', // apply this to all routes
headers: [
{
key: 'Cache-Control',
value: 'no-store, no-cache, must-revalidate, proxy-revalidate',
},
],
},
];
},
};
module.exports = nextConfig;

1223
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

27
package.json Normal file
View File

@ -0,0 +1,27 @@
{
"name": "shivasakthi-restarunt",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"aos": "^2.3.4",
"axios": "^1.9.0",
"isotope-layout": "^3.0.6",
"next": "14.2.4",
"react": "^18",
"react-bootstrap": "^1.6.1",
"react-circular-progressbar": "^2.1.0",
"react-countup": "^6.5.3",
"react-dom": "^18",
"react-google-recaptcha": "^3.1.0",
"react-nice-select": "^1.0.6",
"react-player": "^2.16.0",
"react-slick": "^0.30.2",
"react-visibility-sensor": "^5.1.1"
}
}

File diff suppressed because one or more lines are too long

7
public/assets/css/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

12
public/assets/css/flaticon.min.css vendored Normal file
View File

@ -0,0 +1,12 @@
/*!
* ______ _ _ _
* | ____| | | | (_)
* | |__ | | __ _| |_ _ ___ ___ _ __
* | __| | |/ _` | __| |/ __/ _ \| '_ \
* | | | | (_| | |_| | (_| (_) | | | |
* |_| |_|\__,_|\__|_|\___\___/|_| |_|
*
* https://www.flaticon.com
*/
@font-face{font-family:flaticon_wellfood;src:url("../fonts/flaticon_wellfood.woff2?b408068d07dc6882716d7cd15a2e1a88") format("woff2"),url("../fonts/flaticon_wellfood.woff?b408068d07dc6882716d7cd15a2e1a88") format("woff"),url("../fonts/flaticon_wellfood.eot?b408068d07dc6882716d7cd15a2e1a88#iefix") format("embedded-opentype"),url("../fonts/flaticon_wellfood.ttf?b408068d07dc6882716d7cd15a2e1a88") format("truetype"),url("../fonts/flaticon_wellfood.svg?b408068d07dc6882716d7cd15a2e1a88#flaticon_wellfood") format("svg")}i[class*=" flaticon-"]:before,i[class^=flaticon-]:before{font-family:flaticon_wellfood!important;font-style:normal;font-weight:400!important;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.flaticon-star-1:before{content:"\f101"}.flaticon-star:before{content:"\f102"}.flaticon-quote:before{content:"\f103"}.flaticon-dish:before{content:"\f104"}.flaticon-fast-delivery:before{content:"\f105"}.flaticon-cashback:before{content:"\f106"}.flaticon-recommended-food:before{content:"\f107"}.flaticon-chef:before{content:"\f108"}.flaticon-high-quality:before{content:"\f109"}.flaticon-ship:before{content:"\f10a"}.flaticon-rate:before{content:"\f10b"}.flaticon-medal:before{content:"\f10c"}.flaticon-happiness:before{content:"\f10d"}.flaticon-poinsettia:before{content:"\f10e"}.flaticon-crab:before{content:"\f10f"}.flaticon-crawfish:before{content:"\f110"}.flaticon-fried-potatoes:before{content:"\f111"}.flaticon-cupcake:before{content:"\f112"}.flaticon-broccoli:before{content:"\f113"}

File diff suppressed because one or more lines are too long

7
public/assets/css/jquery-ui.min.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

1
public/assets/css/nice-select.min.css vendored Normal file
View File

@ -0,0 +1 @@
.nice-select{-webkit-tap-highlight-color:transparent;background-color:#fff;border-radius:5px;border:solid 1px #e8e8e8;box-sizing:border-box;clear:both;cursor:pointer;display:block;float:left;font-family:inherit;font-size:14px;font-weight:400;height:42px;line-height:40px;outline:0;padding-left:18px;padding-right:30px;position:relative;text-align:left!important;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;width:auto}.nice-select:hover{border-color:#dbdbdb}.nice-select.open,.nice-select:active,.nice-select:focus{border-color:#999}.nice-select:after{border-bottom:2px solid #999;border-right:2px solid #999;content:'';display:block;height:5px;margin-top:-4px;pointer-events:none;position:absolute;right:12px;top:50%;-webkit-transform-origin:66% 66%;-ms-transform-origin:66% 66%;transform-origin:66% 66%;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;width:5px}.nice-select.open:after{-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg)}.nice-select.open .list{opacity:1;pointer-events:auto;-webkit-transform:scale(1) translateY(0);-ms-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}.nice-select.disabled{border-color:#ededed;color:#999;pointer-events:none}.nice-select.disabled:after{border-color:#ccc}.nice-select.wide{width:100%}.nice-select.wide .list{left:0!important;right:0!important}.nice-select.right{float:right}.nice-select.right .list{left:auto;right:0}.nice-select.small{font-size:12px;height:36px;line-height:34px}.nice-select.small:after{height:4px;width:4px}.nice-select.small .option{line-height:34px;min-height:34px}.nice-select .list{background-color:#fff;border-radius:5px;box-shadow:0 0 0 1px rgba(68,68,68,.11);box-sizing:border-box;margin-top:4px;opacity:0;overflow:hidden;padding:0;pointer-events:none;position:absolute;top:100%;left:0;-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0;-webkit-transform:scale(.75) translateY(-21px);-ms-transform:scale(.75) translateY(-21px);transform:scale(.75) translateY(-21px);-webkit-transition:all .2s cubic-bezier(.5, 0, 0, 1.25),opacity .15s ease-out;transition:all .2s cubic-bezier(.5, 0, 0, 1.25),opacity .15s ease-out;z-index:9}.nice-select .list:hover .option:not(:hover){background-color:transparent!important}.nice-select .option{cursor:pointer;font-weight:400;line-height:40px;list-style:none;min-height:40px;outline:0;padding-left:18px;padding-right:29px;text-align:left;-webkit-transition:all .2s;transition:all .2s}.nice-select .option.focus,.nice-select .option.selected.focus,.nice-select .option:hover{background-color:#f6f6f6}.nice-select .option.selected{font-weight:700}.nice-select .option.disabled{background-color:transparent;color:#999;cursor:default}.no-csspointerevents .nice-select .list{display:none}.no-csspointerevents .nice-select.open .list{display:block}

2
public/assets/css/slick.min.css vendored Normal file
View File

@ -0,0 +1,2 @@
/* Slick Slider */
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:""}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}

12355
public/assets/css/style.css Normal file

File diff suppressed because it is too large Load Diff

12072
public/assets/css/update.css Normal file

File diff suppressed because it is too large Load Diff

Binary file not shown.

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 713 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 2.5 MiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 2.3 MiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 2.1 MiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -0,0 +1,89 @@
/*!
* ______ _ _ _
* | ____| | | | (_)
* | |__ | | __ _| |_ _ ___ ___ _ __
* | __| | |/ _` | __| |/ __/ _ \| '_ \
* | | | | (_| | |_| | (_| (_) | | | |
* |_| |_|\__,_|\__|_|\___\___/|_| |_|
*
* https://www.flaticon.com
*/
@font-face {
font-family: "flaticon_wellfood";
src: url("./flaticon_wellfood.woff2?b408068d07dc6882716d7cd15a2e1a88") format("woff2"),
url("./flaticon_wellfood.woff?b408068d07dc6882716d7cd15a2e1a88") format("woff"),
url("./flaticon_wellfood.eot?b408068d07dc6882716d7cd15a2e1a88#iefix") format("embedded-opentype"),
url("./flaticon_wellfood.ttf?b408068d07dc6882716d7cd15a2e1a88") format("truetype"),
url("./flaticon_wellfood.svg?b408068d07dc6882716d7cd15a2e1a88#flaticon_wellfood") format("svg")
}
i[class^="flaticon-"]:before, i[class*=" flaticon-"]:before {
font-family: flaticon_wellfood !important;
font-style: normal;
font-weight: normal !important;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.flaticon-star-1:before {
content: "\f101";
}
.flaticon-star:before {
content: "\f102";
}
.flaticon-quote:before {
content: "\f103";
}
.flaticon-dish:before {
content: "\f104";
}
.flaticon-fast-delivery:before {
content: "\f105";
}
.flaticon-cashback:before {
content: "\f106";
}
.flaticon-recommended-food:before {
content: "\f107";
}
.flaticon-chef:before {
content: "\f108";
}
.flaticon-high-quality:before {
content: "\f109";
}
.flaticon-ship:before {
content: "\f10a";
}
.flaticon-rate:before {
content: "\f10b";
}
.flaticon-medal:before {
content: "\f10c";
}
.flaticon-happiness:before {
content: "\f10d";
}
.flaticon-poinsettia:before {
content: "\f10e";
}
.flaticon-crab:before {
content: "\f10f";
}
.flaticon-crawfish:before {
content: "\f110";
}
.flaticon-fried-potatoes:before {
content: "\f111";
}
.flaticon-cupcake:before {
content: "\f112";
}
.flaticon-broccoli:before {
content: "\f113";
}

Binary file not shown.

View File

@ -0,0 +1,665 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flaticon Webfont</title>
<link rel="stylesheet" type="text/css" href="flaticon_wellfood.css"/>
<meta charset="UTF-8">
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
font-family: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 1.6;
color: #777777;
}
a {
color: #52D999;
font-weight: bold;
text-decoration: none;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
font-family: Flaticon;
font-size: 32px;
line-height: 1.25;
font-style: normal;
margin-left: 20px;
color: #424242;
}
.wrapper {
max-width: 600px;
margin: auto;
padding: 0 1em;
}
.title {
margin-bottom: 24px;
text-transform: uppercase;
font-weight: bold;
}
header {
text-align: center;
padding: 24px;
}
header .logo {
height: auto;
border: none;
display: inline-block;
}
header strong {
font-size: 24px;
line-height: 1.25;
font-weight: 500;
vertical-align: middle;
}
.demo {
margin: 2em auto;
line-height: 1.25;
}
.demo ul li {
margin-bottom: 12px;
}
.demo ul li code {
background-color: #121212;
border-radius: 3px;
padding: 12px;
display: inline-block;
color: #fff;
font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
font-weight: lighter;
margin-top: 12px;
font-size: 13px;
word-break: break-all;
}
.demo ul li code .red {
color: #EB644C;
}
.demo ul li code .green {
color: #52D999;
}
.demo ul li code .yellow {
color: #FFF4D9;
}
.demo ul li code .blue {
color: #648EEF;
}
.demo ul li code .purple {
color: #6569BD;
}
.demo ul li code .dots {
margin-top: 0.5em;
display: block;
}
#glyphs {
border-bottom: 1px solid #E5E5E5;
padding: 2em 0;
text-align: center;
}
.glyph {
display: inline-block;
width: 9em;
margin: 1em;
text-align: center;
vertical-align: top;
background: #FFF;
}
.glyph .flaticon {
padding: 10px;
display: block;
font-family: "Flaticon";
font-size: 64px;
line-height: 1;
}
.glyph .flaticon:before {
font-size: 64px;
color: #777777;
margin-left: 0;
}
.class-name {
font-size: 0.65em;
background-color: #E5E5E5;
color: #9C9C9C;
border-radius: 4px 4px 0 0;
padding: 0.5em;
font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
}
.author-name {
font-size: 0.6em;
background-color: #EFF3F6;
border-top: 0;
border-radius: 0 0 4px 4px;
padding: 0.5em;
}
.author-name a {
color: #121212;
}
.class-name:last-child {
font-size: 10px;
line-height: 1.75;
color: #888;
}
.class-name:last-child a {
font-size: 10px;
line-height: 1.75;
color: #555;
}
.glyph > input {
display: block;
width: 100px;
margin: 5px auto;
text-align: center;
font-size: 12px;
line-height: 1.75;
cursor: text;
}
.glyph > input.icon-input {
font-family: "Flaticon";
font-size: 15px;
line-height: 1.6;
margin-bottom: 10px;
}
.attribution .title {
margin-top: 2em;
}
.attribution textarea {
background-color: #F8FAFB;
color: #121212;
padding: 1em;
border: none;
box-shadow: none;
border: 1px solid #E5E5E5;
border-radius: 4px;
resize: none;
width: 100%;
height: 150px;
font-size: 13px;
line-height: 1.6;
font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
-webkit-appearance: none;
}
.attribution textarea:hover {
border-color: #CFD9E0;
}
.attribution textarea:focus {
border-color: #52D999;
}
.iconsuse {
margin: 2em auto;
text-align: center;
max-width: 1200px;
}
.iconsuse:after {
content: '';
display: table;
clear: both;
}
.iconsuse .image {
float: left;
width: 25%;
padding: 0 1em;
}
.iconsuse .image p {
margin-bottom: 1em;
}
.iconsuse .image span {
display: block;
font-size: 0.65em;
background-color: #222;
color: #fff;
border-radius: 4px;
padding: 10px;
color: #FFFF99;
margin-top: 1em;
font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
}
.flaticon:before {
color: #777777;
}
#footer {
text-align: center;
background-color: #121212;
color: #9C9C9C;
padding: 12px;
font-size: 13px;
line-height: 1.6;
}
#footer a {
font-weight: normal;
}
@media (max-width: 960px) {
.iconsuse .image {
width: 50%;
}
}
.preview {
width: 100px;
display: inline-block;
margin: 10px;
}
.preview .inner {
display: inline-block;
width: 100%;
text-align: center;
background: #F7F7F7;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
.preview .inner {
line-height: 85px;
font-size: 40px;
color: #424242;
}
.label {
display: inline-block;
width: 100%;
box-sizing: border-box;
padding: 5px;
font-size: 10px;
font-family: Monaco, monospace;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: #ddd;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
color: #777;
}
</style>
</head>
<body>
<header>
<a href="https://www.flaticon.com/" target="_blank" class="logo">
<img src="https://media.flaticon.com/dist/min/img/logos/flaticon-by-positive-hor.svg" alt="logo">
</a>
</header>
<section class="demo wrapper">
<p class="title">Webfont Instructions</p>
<ul>
<li>
<span class="num">1. </span>Copy the "Fonts" files and CSS files to your website CSS folder.
</li>
<li>
<span class="num">2. </span>Add the CSS link to your website source code on header.
<code class="big">
&lt;<span class="red">head</span>&gt;
<br/><span class="dots">...</span>
<br/>&lt;<span class="red">link</span> <span class="green">rel</span>=<span
class="yellow">"stylesheet"</span> <span class="green">type</span>=<span
class="yellow">"text/css"</span> <span class="green">href</span>=<span class="yellow">"your_website_domain/css_root/flaticon_collection_name.css"</span>&gt;
<br/><span class="dots">...</span>
<br/>&lt;/<span class="red">head</span>&gt;
</code>
</li>
<li>
<p>
<span class="num">3. </span>Use the icon class on <code>"<span class="blue">display</span>:<span
class="purple"> inline</span>"</code> elements:
<br/>
Use example: <code>&lt;<span class="red">i</span> <span class="green">class</span>=<span class="yellow">&quot;flaticon-airplane49&quot;</span>&gt;&lt;/<span
class="red">i</span>&gt;</code> or <code>&lt;<span class="red">span</span> <span
class="green">class</span>=<span class="yellow">&quot;flaticon-airplane49&quot;</span>&gt;&lt;/<span
class="red">span</span>&gt;</code>
</li>
</ul>
</section>
<section id="glyphs">
<div class="glyph">
<i class="flaticon flaticon-star-1"></i>
<div class="class-name">.flaticon-star-1</div>
<div class="author-name">Author: #author-link-flaticon-star-1# </div>
</div>
<div class="glyph">
<i class="flaticon flaticon-star"></i>
<div class="class-name">.flaticon-star</div>
<div class="author-name">Author: #author-link-flaticon-star# </div>
</div>
<div class="glyph">
<i class="flaticon flaticon-quote"></i>
<div class="class-name">.flaticon-quote</div>
<div class="author-name">Author: #author-link-flaticon-quote# </div>
</div>
<div class="glyph">
<i class="flaticon flaticon-dish"></i>
<div class="class-name">.flaticon-dish</div>
<div class="author-name">Author: #author-link-flaticon-dish# </div>
</div>
<div class="glyph">
<i class="flaticon flaticon-fast-delivery"></i>
<div class="class-name">.flaticon-fast-delivery</div>
<div class="author-name">Author: #author-link-flaticon-fast-delivery# </div>
</div>
<div class="glyph">
<i class="flaticon flaticon-cashback"></i>
<div class="class-name">.flaticon-cashback</div>
<div class="author-name">Author: #author-link-flaticon-cashback# </div>
</div>
<div class="glyph">
<i class="flaticon flaticon-recommended-food"></i>
<div class="class-name">.flaticon-recommended-food</div>
<div class="author-name">Author: #author-link-flaticon-recommended-food# </div>
</div>
<div class="glyph">
<i class="flaticon flaticon-chef"></i>
<div class="class-name">.flaticon-chef</div>
<div class="author-name">Author: #author-link-flaticon-chef# </div>
</div>
<div class="glyph">
<i class="flaticon flaticon-high-quality"></i>
<div class="class-name">.flaticon-high-quality</div>
<div class="author-name">Author: #author-link-flaticon-high-quality# </div>
</div>
<div class="glyph">
<i class="flaticon flaticon-ship"></i>
<div class="class-name">.flaticon-ship</div>
<div class="author-name">Author: #author-link-flaticon-ship# </div>
</div>
<div class="glyph">
<i class="flaticon flaticon-rate"></i>
<div class="class-name">.flaticon-rate</div>
<div class="author-name">Author: #author-link-flaticon-rate# </div>
</div>
<div class="glyph">
<i class="flaticon flaticon-medal"></i>
<div class="class-name">.flaticon-medal</div>
<div class="author-name">Author: #author-link-flaticon-medal# </div>
</div>
<div class="glyph">
<i class="flaticon flaticon-happiness"></i>
<div class="class-name">.flaticon-happiness</div>
<div class="author-name">Author: #author-link-flaticon-happiness# </div>
</div>
<div class="glyph">
<i class="flaticon flaticon-poinsettia"></i>
<div class="class-name">.flaticon-poinsettia</div>
<div class="author-name">Author: #author-link-flaticon-poinsettia# </div>
</div>
<div class="glyph">
<i class="flaticon flaticon-crab"></i>
<div class="class-name">.flaticon-crab</div>
<div class="author-name">Author: #author-link-flaticon-crab# </div>
</div>
<div class="glyph">
<i class="flaticon flaticon-crawfish"></i>
<div class="class-name">.flaticon-crawfish</div>
<div class="author-name">Author: #author-link-flaticon-crawfish# </div>
</div>
<div class="glyph">
<i class="flaticon flaticon-fried-potatoes"></i>
<div class="class-name">.flaticon-fried-potatoes</div>
<div class="author-name">Author: #author-link-flaticon-fried-potatoes# </div>
</div>
<div class="glyph">
<i class="flaticon flaticon-cupcake"></i>
<div class="class-name">.flaticon-cupcake</div>
<div class="author-name">Author: #author-link-flaticon-cupcake# </div>
</div>
<div class="glyph">
<i class="flaticon flaticon-broccoli"></i>
<div class="class-name">.flaticon-broccoli</div>
<div class="author-name">Author: #author-link-flaticon-broccoli# </div>
</div>
</section>
<section class="attribution wrapper" style="text-align:center;">
<div class="title">License and attribution:</div><div class="attrDiv">Font generated by <a href="https://www.flaticon.com">flaticon.com</a>. <div>#allAuthorLinksCC# #allAuthorLinksBasic# </div>
</div>
<div class="title">Copy the Attribution License:</div>
<textarea onclick="this.focus();this.select();">Font generated by &lt;a href=&quot;https://www.flaticon.com&quot;&gt;flaticon.com&lt;/a&gt;. #allAuthorLinksCC# #allAuthorLinksBasic#
</textarea>
</section>
<section class="iconsuse">
<div class="title">Examples:</div>
<div class="image">
<p>
<i class="flaticon flaticon-star-1"></i>
<span>&lt;i class=&quot;flaticon-star-1&quot;&gt;&lt;/i&gt;</span>
</p>
</div>
<div class="image">
<p>
<i class="flaticon flaticon-star"></i>
<span>&lt;i class=&quot;flaticon-star&quot;&gt;&lt;/i&gt;</span>
</p>
</div>
<div class="image">
<p>
<i class="flaticon flaticon-quote"></i>
<span>&lt;i class=&quot;flaticon-quote&quot;&gt;&lt;/i&gt;</span>
</p>
</div>
<div class="image">
<p>
<i class="flaticon flaticon-dish"></i>
<span>&lt;i class=&quot;flaticon-dish&quot;&gt;&lt;/i&gt;</span>
</p>
</div>
<div class="image">
<p>
<i class="flaticon flaticon-fast-delivery"></i>
<span>&lt;i class=&quot;flaticon-fast-delivery&quot;&gt;&lt;/i&gt;</span>
</p>
</div>
<div class="image">
<p>
<i class="flaticon flaticon-cashback"></i>
<span>&lt;i class=&quot;flaticon-cashback&quot;&gt;&lt;/i&gt;</span>
</p>
</div>
<div class="image">
<p>
<i class="flaticon flaticon-recommended-food"></i>
<span>&lt;i class=&quot;flaticon-recommended-food&quot;&gt;&lt;/i&gt;</span>
</p>
</div>
<div class="image">
<p>
<i class="flaticon flaticon-chef"></i>
<span>&lt;i class=&quot;flaticon-chef&quot;&gt;&lt;/i&gt;</span>
</p>
</div>
<div class="image">
<p>
<i class="flaticon flaticon-high-quality"></i>
<span>&lt;i class=&quot;flaticon-high-quality&quot;&gt;&lt;/i&gt;</span>
</p>
</div>
<div class="image">
<p>
<i class="flaticon flaticon-ship"></i>
<span>&lt;i class=&quot;flaticon-ship&quot;&gt;&lt;/i&gt;</span>
</p>
</div>
<div class="image">
<p>
<i class="flaticon flaticon-rate"></i>
<span>&lt;i class=&quot;flaticon-rate&quot;&gt;&lt;/i&gt;</span>
</p>
</div>
<div class="image">
<p>
<i class="flaticon flaticon-medal"></i>
<span>&lt;i class=&quot;flaticon-medal&quot;&gt;&lt;/i&gt;</span>
</p>
</div>
<div class="image">
<p>
<i class="flaticon flaticon-happiness"></i>
<span>&lt;i class=&quot;flaticon-happiness&quot;&gt;&lt;/i&gt;</span>
</p>
</div>
<div class="image">
<p>
<i class="flaticon flaticon-poinsettia"></i>
<span>&lt;i class=&quot;flaticon-poinsettia&quot;&gt;&lt;/i&gt;</span>
</p>
</div>
<div class="image">
<p>
<i class="flaticon flaticon-crab"></i>
<span>&lt;i class=&quot;flaticon-crab&quot;&gt;&lt;/i&gt;</span>
</p>
</div>
<div class="image">
<p>
<i class="flaticon flaticon-crawfish"></i>
<span>&lt;i class=&quot;flaticon-crawfish&quot;&gt;&lt;/i&gt;</span>
</p>
</div>
<div class="image">
<p>
<i class="flaticon flaticon-fried-potatoes"></i>
<span>&lt;i class=&quot;flaticon-fried-potatoes&quot;&gt;&lt;/i&gt;</span>
</p>
</div>
<div class="image">
<p>
<i class="flaticon flaticon-cupcake"></i>
<span>&lt;i class=&quot;flaticon-cupcake&quot;&gt;&lt;/i&gt;</span>
</p>
</div>
<div class="image">
<p>
<i class="flaticon flaticon-broccoli"></i>
<span>&lt;i class=&quot;flaticon-broccoli&quot;&gt;&lt;/i&gt;</span>
</p>
</div>
</div>
</section>
<div id="footer">
<div>Generated by <a href="https://www.flaticon.com">flaticon.com</a>
</div>
</div>
</body>
</html>

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 177 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

Some files were not shown because too many files have changed in this diff Show More