Skip to content

Commit

Permalink
producation build -v0.0.1
Browse files Browse the repository at this point in the history
  • Loading branch information
@zobkazi
zobkazi committed Nov 23, 2024
1 parent 569b957 commit 3aaab9e
Show file tree
Hide file tree
Showing 12 changed files with 843 additions and 141 deletions.
459 changes: 458 additions & 1 deletion package-lock.json
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"react": "^18",
"react-dom": "^18",
"react-slick": "^0.30.2",
"sharp": "^0.33.5",
"slick-carousel": "^1.8.1",
"swiper": "^11.1.15"
},
Expand Down
8 changes: 6 additions & 2 deletions src/components/pages/home/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@ import TopRegularProgramSlider from "@/components/ui/TopRegularProgramSlider";
import FacebookVideoEmbed from "@/components/ui/FacebookVideoEmbed";
import RadioChilmariFacebookPage from "@/components/ui/FacebookPage";
import HoursCard from "@/components/ui/HoursCard";
import OurFacebookNews from "@/components/ui/OurFacebookNews";
// import OurFacebookNews from "@/components/ui/OurFacebookNews";
import RdrsProgram from "@/components/ui/RdrsProgram";
import BackgroundHero from "@/components/ui/BackgroundHero";
import Award from "@/components/ui/Award";
import Testimonials from "@/components/ui/Testimonials";
import RadioPlayer from "@/components/ui/RadioPlayer";
import RadioChilmariFeatures from "@/components/ui/RadioChilmariFeatures";
import InvestmentSection from "@/components/ui/InvestmentSection";

const Home = () => {
return (
Expand Down Expand Up @@ -43,12 +45,14 @@ const Home = () => {
</section>
<Testimonials />
<section>

<RadioChilmariFeatures />
<Award />
</section>


{/* Video Embed Section */}
<section className="my-8">
<InvestmentSection />
<FacebookVideoEmbed />
</section>
</main>
Expand Down
14 changes: 4 additions & 10 deletions src/components/ui/Award.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,12 @@ type AwardImage = StaticImport;

// React component
const Award: React.FC = () => {
// Slick carousel settings

const settings = {
className: "center",
infinite: true,
centerPadding: "60px",
slidesToShow: 5,
swipeToSlide: true,
afterChange: function(index: number) {
console.log(
`Slider Changed to: ${index + 1}, background: #222; color: #bada55`
);
}
speed: 500,
slidesToShow: 3,
slidesToScroll: 3
};

return (
Expand Down
109 changes: 35 additions & 74 deletions src/components/ui/FacebookVideoEmbed.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,43 @@
"use client";

const FacebookVideoEmbed = () => {
return (
<div>
<div>
<span className="text-sm sm:text-lg md:text-xl lg:text-xl text-blue-600 dark:text-gray-100 text-center font-extrabold">
আমাদের ভিডিও অনুষ্ঠান l
</span>
</div>
<div className="flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
<div className="w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
{/* Video 1 */}
<div className="flex justify-center">
<iframe
src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fradiochilmari%2Fvideos%2F1501842613838233%2F&show_text=false&width=560&t=0"
width="100%"
height="314"
className="rounded-lg"
style={{ border: "none", overflow: "hidden" }}
scrolling="no"
frameBorder="0"
allowFullScreen
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
></iframe>
</div>
import React from "react";

{/* Video 2 */}
<div className="flex justify-center">
<iframe
src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fradiochilmari%2Fvideos%2F593910082992540%2F&show_text=false&width=560&t=0"
width="100%"
height="314"
className="rounded-lg"
style={{ border: "none", overflow: "hidden" }}
scrolling="no"
frameBorder="0"
allowFullScreen
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
></iframe>
</div>
const FacebookVideoEmbed: React.FC = () => {
// Video data array
const videoData = [
{
src: "https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fradiochilmari%2Fvideos%2F1501842613838233%2F&show_text=false&width=560&t=0",
height: 314,
},
{
src: "https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fradiochilmari%2Fvideos%2F593910082992540%2F&show_text=false&width=560&t=0",
height: 314,
},
{
src: "https://www.facebook.com/plugins/video.php?height=315&href=https%3A%2F%2Fwww.facebook.com%2Fradiochilmari%2Fvideos%2F551710727483603%2F&show_text=false&width=560&t=0",
height: 315,
},
{
src: "https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fradiochilmari%2Fvideos%2F1069391811599032%2F&show_text=false&width=560&t=0",
height: 314,
},
{
src: "https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fradiochilmari%2Fvideos%2F1639086690351355%2F&show_text=false&width=560&t=0",
height: 314,
},
];

{/* Video 3 */}
<div className="flex justify-center">
<iframe
src="https://www.facebook.com/plugins/video.php?height=315&href=https%3A%2F%2Fwww.facebook.com%2Fradiochilmari%2Fvideos%2F551710727483603%2F&show_text=false&width=560&t=0"
width="100%"
height="315"
className="rounded-lg"
style={{ border: "none", overflow: "hidden" }}
scrolling="no"
frameBorder="0"
allowFullScreen
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
></iframe>
</div>

{/* Video 4 */}
<div className="flex justify-center">
<iframe
src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fradiochilmari%2Fvideos%2F1069391811599032%2F&show_text=false&width=560&t=0"
width="100%"
height="314"
className="rounded-lg"
style={{ border: "none", overflow: "hidden" }}
scrolling="no"
frameBorder="0"
allowFullScreen
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
></iframe>
</div>

{/* Video 5 */}
<div className="flex justify-center">
return (
<div className="bg-gray-100 dark:bg-gray-900 p-4">
<div className="max-w-screen-xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-1 sm:gap-1 md:gap-2 lg:gap-4">
{videoData.map((video, index) => (
<div key={index} className="flex justify-center">
<iframe
src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fradiochilmari%2Fvideos%2F1639086690351355%2F&show_text=false&width=560&t=0"
src={video.src}
width="100%"
height="314"
height={video.height}
className="rounded-lg"
style={{ border: "none", overflow: "hidden" }}
scrolling="no"
Expand All @@ -85,7 +46,7 @@ const FacebookVideoEmbed = () => {
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
></iframe>
</div>
</div>
))}
</div>
</div>
</div>
Expand Down
57 changes: 57 additions & 0 deletions src/components/ui/InvestmentSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import Link from 'next/link';
import React from 'react';

const InvestmentSection: React.FC = () => {
return (
<section className="bg-white dark:bg-gray-900">
<div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 grid lg:grid-cols-2 gap-8 lg:gap-16">
<div className="flex flex-col justify-center">
<h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
আমাদের ভিডিও অনুষ্ঠান l
</h1>
<p className="mb-8 text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">
নিয়মিত প্রকাশ করা ভিডিও গুলো দেখতে চোখ রাখুন ফেইসবুক পেজে।
</p>
<div className="flex flex-col space-y-4 sm:flex-row sm:space-y-0">
<Link
href="https://www.facebook.com/radiochilmari"
className="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"
>
Get started
<svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
width="30"
height="30"
viewBox="0 0 48 48"
>
<path
fill="#039be5"
d="M24 5A19 19 0 1 0 24 43A19 19 0 1 0 24 5Z"
></path>
<path
fill="#fff"
d="M26.572,29.036h4.917l0.772-4.995h-5.69v-2.73c0-2.075,0.678-3.915,2.619-3.915h3.119v-4.359c-0.548-0.074-1.707-0.236-3.897-0.236c-4.573,0-7.254,2.415-7.254,7.917v3.323h-4.701v4.995h4.701v13.729C22.089,42.905,23.032,43,24,43c0.875,0,1.729-0.08,2.572-0.194V29.036z"
></path>
</svg>
</Link>

</div>
</div>
<div>
<iframe
className="mx-auto w-full lg:max-w-xl h-64 rounded-lg sm:h-96 shadow-xl"
src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fradiochilmari%2Fvideos%2F557155856932925%2F&show_text=false&width=560&t=0"
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</div>
</div>
</section>
);
};

export default InvestmentSection;
47 changes: 41 additions & 6 deletions src/components/ui/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@ import React, { useState, useEffect } from "react";
import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";
import readioIcon from "@/assets/icons/readio_icon.png"
import { FaBars, FaTimes } from "react-icons/fa";
import readioIcon from "@/assets/icons/readio_icon.png";

const Navbar = () => {
const [scrolling, setScrolling] = useState(false);
const [isMenuOpen, setIsMenuOpen] = useState(false);

// Detect scrolling and apply blur effect
useEffect(() => {
Expand All @@ -31,21 +33,21 @@ const Navbar = () => {
animate={{ opacity: 1 }}
transition={{ duration: 0.5 }}
>
{/* Centered Logo */}
<div className="flex-1 flex justify-center">
{/* Left: Logo */}
<div className="flex items-center">
<Link href="/">
<Image
src={readioIcon}
alt="readioIcon"
alt="Radio Icon"
width={50}
height={50}
className="cursor-pointer rounded-full"
/>
</Link>
</div>

{/* Right Side Links */}
<div className="flex space-x-6 text-black font-bold font-bengali text-sm md:text-xl lg-text-2xl">
{/* Center: Navigation Links (Desktop View) */}
<div className="hidden md:flex space-x-6 text-black font-bold font-bengali text-sm md:text-lg lg:text-xl">
<motion.div
className="hover:underline"
initial={{ opacity: 0 }}
Expand All @@ -71,6 +73,39 @@ const Navbar = () => {
<Link href="/contact-us">যোগাযোগ করুন</Link>
</motion.div>
</div>

{/* Right: Hamburger Menu (Mobile View) */}
<div className="md:hidden flex items-center">
<button
onClick={() => setIsMenuOpen(!isMenuOpen)}
className="text-black focus:outline-none"
>
{isMenuOpen ? <FaTimes size={24} /> : <FaBars size={24} />}
</button>
</div>

{/* Mobile Menu */}
{isMenuOpen && (
<motion.div
className="absolute top-16 left-0 w-full bg-gray-200 dark:bg-gray-900 text-black dark:text-white shadow-md z-40"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.3 }}
>
<div className="flex flex-col items-center space-y-4 py-4 font-bold font-bengali text-lg">
<Link href="/about-us" onClick={() => setIsMenuOpen(false)}>
আমাদের সম্পর্কে
</Link>
<Link href="/our-show" onClick={() => setIsMenuOpen(false)}>
আমাদের অনুষ্ঠান সমূহ
</Link>
<Link href="/contact-us" onClick={() => setIsMenuOpen(false)}>
যোগাযোগ করুন
</Link>
</div>
</motion.div>
)}
</motion.div>
);
};
Expand Down
Loading

0 comments on commit 3aaab9e

Please sign in to comment.