Insta, spotlight, fonts

src/app/globals.css

@@ -3,21 +3,24 @@
 @tailwind utilities;
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #f8f6f5;
+  --foreground: #703133;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --background: #f8f6f5;
+    --foreground: #703133;
   }
 }
 
 body {
+  margin: 0;
+  padding: 0;
   color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+  background-color: var(--background);
+  font-family: Renner, sans-serif;
+  font-weight: 300;
 }
 
 @layer utilities {
@@ -26,10 +29,37 @@ body {
   }
 }
 
-body {
-  margin: 0;
-  padding: 0;
-  background-color: #f0f0f0; /* Optional background color */
-  font-family: Arial, sans-serif;
-  color: black;
+@font-face {
+  font-family: 'Montera';
+  src: url('/fonts/MonetaSans-Regular.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Renner';
+  src: url('/fonts/Renner-300.otf') format('opentype');
+  font-weight: 300;
+  font-style: light;
+}
+
+@font-face {
+  font-family: 'Renner';
+  src: url('/fonts/Renner-500.otf') format('opentype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Renner';
+  src: url('/fonts/Renner-700.otf') format('opentype');
+  font-weight: 700;
+  font-style: bold;
+}
+
+@font-face {
+  font-family: 'Samantha';
+  src: url('/fonts/SamanthaSignature.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
 }

src/app/layout.tsx

@@ -2,8 +2,8 @@ import './globals.css';
 // import './globalicons.css';
 
 import { ReactNode } from 'react';
-import Navbar from '../components/navbar';
-import Footer from '../components/footer';
+import { Footer } from '@/components/footer';
+import { Navbar } from '@/components/navbar';
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (

src/app/lib/instagram.ts

@@ -0,0 +1,27 @@
+// Define the shape of Instagram post data using TypeScript interfaces
+export interface InstagramPost {
+  id: string;
+  caption: string;
+  media_url: string;
+  permalink: string;
+  media_type: string;
+}
+
+// Fetch Instagram posts from Instagram Graph API
+export async function fetchInstagramPosts(): Promise<InstagramPost[]> {
+  const accessToken = process.env.NEXT_PUBLIC_INSTAGRAM_ACCESS_TOKEN;
+  // const url = `https://graph.instagram.com/me/media?fields=id,caption,media_type,media_url,thumbnail_url,permalink&access_token=${accessToken}`;
+  const url = `https://graph.instagram.com/me/media?fields=id,caption,media_type,media_url,thumbnail_url,permalink&access_token=${accessToken}`;
+
+  const res = await fetch(url);
+  const data = await res.json();
+
+  if (data?.data) {
+    console.log(data.data);
+    return data.data
+      .filter((post: InstagramPost) => post.media_type === 'IMAGE')
+      .slice(0, 5);
+  }
+
+  return [];
+}

src/app/page.tsx

@@ -4,29 +4,31 @@ import { HomepageVideo } from '@/components/homepage-video';
 import { HeroSwiper } from '@/components/swiper';
 import { Collections } from '@/components/our-collection';
 import { ChocolateCategories } from '@/components/category-slider';
+import { InstagramFeed } from '@/components/instagram';
+import { Spotlight } from '@/components/spotlight';
 
 export default function HomePage() {
   return (
     <div className='overflow-x-hidden'>
       <HeroSwiper />
       {/* First Two-Column Layout */}
-      <section className='flex flex-col md:flex-row items-center'>
+      <section className='flex flex-col md:flex-row items-center bg-white'>
         {/* Left Column - Text with Header */}
         <div className='w-full md:w-1/2'>
           <div className='m-8 space-y-10'>
-            <h1 className='text-6xl font-normal text-justify font-sans'>
+            <h1 className='text-6xl font-normal text-justify font-montera'>
               Brand Story
             </h1>
-            <p className='text-xl font-light'>
+            <p className='text-xl text-justify'>
               Mozimo&apos;s journey is a passionate pursuit of crafting
               exceptional chocolate that celebrates the origin of each cocoa
               bean.
             </p>
-            <p className='text-xl font-light text-justify'>
+            <p className='text-xl text-justify'>
               We meticulously roast, crack, winnow, and refine beans in-house,
               using modern techniques to highlight their natural flavors.
             </p>
-            <p className='text-xl font-light text-justify'>
+            <p className='text-xl text-justify'>
               Each chocolate is a masterpiece, capturing the essence of cocoa in
               its purest form.
             </p>
@@ -43,7 +45,7 @@ export default function HomePage() {
         </div>
       </section>
       {/* Second Two-Column Layout (Video and Text) */}
-      <section className='flex flex-col md:flex-row items-center'>
+      <section className='flex flex-col md:flex-row items-center bg-white'>
         {/* Left Column - Video */}
         <div className='w-full md:w-1/2'>
           <div className='aspect-w-16 aspect-h-9'>
@@ -54,11 +56,14 @@ export default function HomePage() {
         {/* Right Column - Text */}
         <div className='w-full md:w-1/2'>
           <div className='m-8 space-y-10'>
-            <h2 className='text-6xl font-bold'>
+            <h2 className='text-6xl font-normal text-justify font-montera'>
               Discover the delicate art of our
             </h2>
-            <h3 className='text-3xl font-bold'> Chocolate Tempering</h3>
-            <p className='text-xl'>
+            <h3 className='text-8xl font-normal text-justify font-samantha'>
+              {' '}
+              Chocolate Tempering
+            </h3>
+            <p className='text-xl text-justify'>
               Crafted to perfection Mozimo delivers a sublime sensory experience
               with every bite. Experience the epitome of indulgence with our
               perfectly tempered chocolate: velvety smooth, exquisitely rich,
@@ -68,18 +73,28 @@ export default function HomePage() {
           </div>
         </div>
       </section>
-      {/* Third Layout (Our Collections) */}
-      <section className='flex flex-col md:flex-row'>
-        <div className='bg-[#f9f6f5] w-full text-6xl font-normal font-sans text-center'>
+      {/* Fourth Three-Column Layout (Collections) */}
+      <section className='flex flex-col items-center py-12 px-4 sm:px-6 lg:px-8'>
+        <div className='w-full text-6xl font-normal font-montera text-center py-12 px-4 sm:px-6 lg:px-8'>
           Our Collections
         </div>
-      </section>
-      {/* Fourth Three-Column Layout (Collections) */}
-      <section className='flex flex-col md:flex-row items-center "bg-[#f9f6f5] py-12 px-4 sm:px-6 lg:px-8"'>
         <Collections />
       </section>
       {/* Fifth Layout (Categories) */}
       <ChocolateCategories />
+      {/* Sixth Layout (Instagram) */}
+      <section className='flex flex-col items-center py-12 px-4 sm:px-6 lg:px-8'>
+        <div className='w-full text-6xl font-normal font-montera text-center py-12 px-4 sm:px-6 lg:px-8'>
+          Follow us on Instagram
+        </div>
+        <InstagramFeed />
+      </section>
+      <section className='flex flex-col items-center bg-white py-12 px-4 sm:px-6 lg:px-8'>
+        <div className='w-full text-6xl font-normal font-montera text-center py-12 px-4 sm:px-6 lg:px-8'>
+          In the Spotlight
+        </div>
+        <Spotlight />
+      </section>
     </div>
   );
 }

src/components/category-slider.tsx

@@ -15,14 +15,14 @@ export function ChocolateCategories() {
   const [currentImage, setCurrentImage] = useState(categories[0].image);
 
   return (
-    <section className='flex flex-col md:flex-row bg-[#f9f6f5] py-12 px-4 sm:px-6 lg:px-8'>
+    <section className='flex flex-col md:flex-row bg-white py-12 px-4 sm:px-6 lg:px-8'>
       <div className='w-full md:w-1/2 bg-white h-auto'>
         <ul className='m-8 space-y-10 text-[#5a352a] font-serif text-5xl justify-center text-left'>
           {categories.map((category) => (
             <li
               key={category.name}
               onMouseEnter={() => setCurrentImage(category.image)}
-              className='hover:text-[#c19a6b] cursor-pointer'
+              className='hover:text-[#c19a6b] cursor-pointer font-montera font-normal text-9xl'
             >
               {category.name}
             </li>

src/components/footer.tsx

@@ -1,7 +1,9 @@
-// components/Footer.js
-export default function Footer() {
+import { FaPhoneAlt } from 'react-icons/fa';
+import { FaMapLocationDot } from 'react-icons/fa6';
+
+export function Footer() {
   return (
-    <footer className='bg-white text-brown-800 py-12'>
+    <footer className='bg-[#f8f6f5] py-12 border-t-2 border-black'>
       <div className='max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8 px-4'>
         {/* First Column: Logo and Description */}
         <div className='space-y-4'>
@@ -22,12 +24,12 @@ export default function Footer() {
         <div className='space-y-4'>
           <h3 className='font-semibold'>Get in touch</h3>
           <p className='text-sm flex items-center'>
-            <span className='material-symbols-outlined'>call</span>
-            0172-4045414
+            <FaPhoneAlt />
+            &nbsp; 0172-4045414
           </p>
           <p className='text-sm flex items-center'>
-            <span className='material-symbols-outlined'>pin_drop</span>
-            SCO 8, Inner Market, 9-D, Sector 9, Chandigarh, 160009
+            <FaMapLocationDot />
+            &nbsp; SCO 8, Inner Market, 9-D, Sector 9, Chandigarh, 160009
           </p>
         </div>
 
@@ -115,10 +117,7 @@ export default function Footer() {
             >
               <img src='/icons/youtube.svg' />
             </a>
-            <a
-              href='https://linkedin.com'
-              className='text-brown-600 hover:text-brown-800'
-            >
+            <a href='https://linkedin.com' className=''>
               <img src='/icons/linkedin.svg' />
             </a>
           </div>

src/components/header.tsx

@@ -1,5 +1,5 @@
 // components/Header.js
-export default function Header() {
+export function Header() {
   return (
     <header className='bg-white shadow'>
       <div className='container mx-auto px-4 py-6'>

src/components/instagram.tsx

@@ -0,0 +1,32 @@
+'use client';
+import { InstagramPost, fetchInstagramPosts } from '@/app/lib/instagram';
+import { useEffect, useState } from 'react';
+
+export function InstagramFeed() {
+  const [posts, setPosts] = useState<InstagramPost[]>([]);
+
+  useEffect(() => {
+    async function getInstagramData() {
+      const data = await fetchInstagramPosts();
+      setPosts(data);
+    }
+
+    getInstagramData();
+  }, []);
+
+  return (
+    <div className='grid grid-cols-1 md:grid-cols-5 gap-8'>
+      {posts.map((post) => (
+        <div key={post.id} className='flex flex-col items-center'>
+          <a href={post.permalink} target='_blank' rel='noopener noreferrer'>
+            <img
+              src={post.media_url}
+              alt={post.caption}
+              className='rounded-lg shadow-lg'
+            />
+          </a>
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/layout.tsx

@@ -1,12 +1,12 @@
 // components/Layout.js
-import Header from './header';
-import Footer from './footer';
+import { Header } from './header';
+import { Footer } from './footer';
 import { ReactNode } from 'react'; // Import ReactNode
 
 interface LayoutProps {
   children: ReactNode; // Define the type of children prop
 }
-export default function Layout({ children }: LayoutProps) {
+export function Layout({ children }: LayoutProps) {
   return (
     <>
       <Header />

src/components/navbar-old.tsx

@@ -1,5 +1,5 @@
 // components/Navbar.tsx
-export default function Navbar() {
+export function Navbar() {
   return (
     <nav className='navbar'>
       <div className='left'>

src/components/navbar.module-old.css

@@ -1,20 +1,16 @@
-.navbar {
+/* .navbar {
     position: fixed;
     top: 1.5em;
     left: 2em;
     right: 2em;
-    @apply transition-all;
-    /* background-color: white;
+    background-color: white;
     border-radius: 0px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
     padding: 1em 2em;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    z-index: 1000; */
+    z-index: 1000;
   }
   
-/*   .navbar a {
+  .navbar a {
     color: black;
     text-decoration: none;
     margin: 0 0.5em;

src/components/navbar.module.css

@@ -1,7 +1,11 @@
 /* navbar.module.css */
 
 .navBar {
-    @apply top-6 left-6 right-6 transition-all duration-300 z-50;
+    @apply top-6 left-6 right-6 transition-all duration-300 z-50 h-16;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1em 2em;
   }
   
   .navBarInitial {

src/components/navbar.tsx

@@ -1,67 +1,65 @@
-'use client'
+'use client';
 import React, { useState, useEffect, useRef } from 'react';
 import Link from 'next/link';
 import { FiSearch, FiUser } from 'react-icons/fi';
-import { HiShoppingBag } from "react-icons/hi2";
+import { HiShoppingBag } from 'react-icons/hi2';
 import styles from './navbar.module.css';
 
 // components/Navbar.tsx
-export default function Navbar() {
+export function Navbar() {
   const prevScrollY = useRef(0);
   const [navBarStyle, setNavBarStyle] = useState('initial');
-  
+
   useEffect(() => {
     const handleScroll = () => {
-    const currentScrollY = window.scrollY;
-    if (currentScrollY > prevScrollY.current && currentScrollY > 100) {
-      // Scrolling down and scrolled past 100px
-      setNavBarStyle('initial');
-    } else if (currentScrollY < prevScrollY.current && currentScrollY > 100) {
-      // Scrolling up and scrolled past 100px
-      setNavBarStyle('scrolledUp');
-    } else if (currentScrollY <= 100) {
-      setNavBarStyle('initial');
-    }
-    prevScrollY.current = currentScrollY;
-  };
-  window.addEventListener('scroll', handleScroll);
+      const currentScrollY = window.scrollY;
+      if (currentScrollY > prevScrollY.current && currentScrollY > 100) {
+        // Scrolling down and scrolled past 100px
+        setNavBarStyle('initial');
+      } else if (currentScrollY < prevScrollY.current && currentScrollY > 100) {
+        // Scrolling up and scrolled past 100px
+        setNavBarStyle('scrolledUp');
+      } else if (currentScrollY <= 100) {
+        setNavBarStyle('initial');
+      }
+      prevScrollY.current = currentScrollY;
+    };
+    window.addEventListener('scroll', handleScroll);
 
-  return () => window.removeEventListener('scroll', handleScroll);
-}, []); // Empty dependency array
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []); // Empty dependency array
 
-const navClasses = `${styles.navBar} ${
-  navBarStyle === 'scrolledUp' ? styles.navBarScrolledUp : styles.navBarInitial
-}`;
+  const navClasses = `${styles.navBar} ${
+    navBarStyle === 'scrolledUp'
+      ? styles.navBarScrolledUp
+      : styles.navBarInitial
+  }`;
 
   return (
     <nav className={navClasses}>
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center justify-between h-16">
-          {/* Left side */}
-          <div className="flex items-center">
-            <Link href="/about" className="text-sm font-medium hover:underline">
-              About Us
-            </Link>
-          </div>
-          {/* Middle */}
-          <div className="flex-shrink-0">
-            <Link href="/" className="text-lg font-bold">
-              <img src='/images/logo.png' alt='Logo' className='logo' />
-            </Link>
-          </div>
-          {/* Right side */}
-          <div className="flex items-center space-x-4">
-            <button aria-label="Search">
-              <FiSearch size={20} />
-            </button>
-            <button aria-label="Profile">
-              <FiUser size={20} />
-            </button>
-            <button aria-label="Shopping Cart">
-              <HiShoppingBag size={20} />
-            </button>
-          </div>
-        </div>
+      {/* Left side */}
+      <div className='flex items-center'>
+        <Link href='/about' className='text-sm font-medium hover:underline'>
+          About Us
+        </Link>
+      </div>
+      {/* Middle */}
+      <div className='flex-shrink-0'>
+        <Link href='/' className='text-lg font-bold'>
+          <img src='/images/logo.png' alt='Logo' className='logo' />
+        </Link>
+      </div>
+      {/* Right side */}
+      <div className='flex items-center space-x-4'>
+        <button aria-label='Search'>
+          <FiSearch size={20} />
+        </button>
+        <button aria-label='Profile'>
+          <FiUser size={20} />
+        </button>
+        <button aria-label='Shopping Cart'>
+          <HiShoppingBag size={20} />
+        </button>
       </div>
     </nav>
   );

src/components/our-collection.tsx

@@ -17,7 +17,7 @@ const collections = [
 
 export function Collections() {
   return (
-    <div className='max-w-7xl mx-auto grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3'>
+    <div className='flex flex-row max-w-7xl mx-auto grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3'>
       {collections.map((collection, index) => (
         <div
           key={index}

src/components/spotlight.tsx

@@ -0,0 +1,48 @@
+// components/Spotlight.tsx
+import Image from 'next/image';
+
+const logos = [
+  { src: '/images/logo.png', alt: 'TOI' }, // Replace with actual logo path
+  { src: '/images/logo.png', alt: 'The Tribune' }, // Replace with actual logo path
+  { src: '/images/logo.png', alt: 'ET' }, // Replace with actual logo path
+  { src: '/images/logo.png', alt: 'The Hindu' }, // Replace with actual logo path
+];
+//   { src: '/images/logos/toi-logo.png', alt: 'TOI' }, // Replace with actual logo path
+//   { src: '/images/logos/tribune-logo.png', alt: 'The Tribune' }, // Replace with actual logo path
+//   { src: '/images/logos/et-logo.png', alt: 'ET' }, // Replace with actual logo path
+//   { src: '/images/logos/hindu-logo.png', alt: 'The Hindu' }, // Replace with actual logo path
+
+export function Spotlight() {
+  return (
+    <div className='flex flex-row justify-center items-center space-x-8 py-16'>
+      {logos.map((logo, index) => (
+        <div key={index} className='flex flex-col items-center'>
+          <div className='w-32 h-32 bg-white rounded-full shadow-lg flex items-center justify-center'>
+            <Image
+              src={logo.src}
+              alt={logo.alt}
+              width={80}
+              height={80}
+              className='object-contain'
+            />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// return (
+//     <div className="flex flex-col items-center py-16">
+//       <h2 className="text-3xl font-semibold mb-8">In the Spotlight</h2>
+//       <div className="flex justify-center space-x-8">
+//         {logos.map((logo, index) => (
+//           <div key={index} className="flex flex-col items-center">
+//             <div className="w-32 h-32 bg-white rounded-full shadow-lg flex items-center justify-center">
+//               <Image src={logo.src} alt={logo.alt} width={80} height={80} className="object-contain" />
+//             </div>
+//           </div>
+//         ))}
+//       </div>
+//     </div>
+//   );

src/pages/_app.tsx

@@ -1,5 +1,5 @@
 import { AppProps } from 'next/app'; // Import the AppProps type
-import Layout from '../components/layout';
+import { Layout } from '../components/layout';
 import '../app/globals.css';
 
 function MyApp({ Component, pageProps }: AppProps) {

tailwind.config.ts

@@ -12,6 +12,11 @@ const config: Config = {
         background: 'var(--background)',
         foreground: 'var(--foreground)',
       },
+      fontFamily: {
+        montera: ['Montera', 'sans-serif'],
+        renner: ['Renner', 'sans-serif'],
+        samantha: ['Samantha ', 'handwritten'],
+      },
     },
   },
   plugins: [],