diff --git a/public/fonts/MonetaSans-Regular.otf b/public/fonts/MonetaSans-Regular.otf new file mode 100644 index 0000000..5911e44 Binary files /dev/null and b/public/fonts/MonetaSans-Regular.otf differ diff --git a/public/fonts/Renner-300.otf b/public/fonts/Renner-300.otf new file mode 100644 index 0000000..010e0f9 Binary files /dev/null and b/public/fonts/Renner-300.otf differ diff --git a/public/fonts/Renner-500.otf b/public/fonts/Renner-500.otf new file mode 100644 index 0000000..c4e0cfb Binary files /dev/null and b/public/fonts/Renner-500.otf differ diff --git a/public/fonts/Renner-700.otf b/public/fonts/Renner-700.otf new file mode 100644 index 0000000..6bc7b21 Binary files /dev/null and b/public/fonts/Renner-700.otf differ diff --git a/public/fonts/SamanthaSignature.otf b/public/fonts/SamanthaSignature.otf new file mode 100644 index 0000000..addf7ca Binary files /dev/null and b/public/fonts/SamanthaSignature.otf differ diff --git a/public/images/categories/barks.jpg b/public/images/categories/barks.jpg index 73fbf06..90643bb 100644 Binary files a/public/images/categories/barks.jpg and b/public/images/categories/barks.jpg differ diff --git a/public/images/categories/bars.jpg b/public/images/categories/bars.jpg index 36c37d7..313f574 100644 Binary files a/public/images/categories/bars.jpg and b/public/images/categories/bars.jpg differ diff --git a/public/images/categories/dragees.jpg b/public/images/categories/dragees.jpg index 3e91f12..ba6b421 100644 Binary files a/public/images/categories/dragees.jpg and b/public/images/categories/dragees.jpg differ diff --git a/public/images/categories/gelatos.jpg b/public/images/categories/gelatos.jpg index e52f8f9..54386c6 100644 Binary files a/public/images/categories/gelatos.jpg and b/public/images/categories/gelatos.jpg differ diff --git a/public/images/categories/pralines.jpg b/public/images/categories/pralines.jpg index 0420345..92e0cf5 100644 Binary files a/public/images/categories/pralines.jpg and b/public/images/categories/pralines.jpg differ diff --git a/public/images/categories/spreads.jpg b/public/images/categories/spreads.jpg index 43ca977..adb0599 100644 Binary files a/public/images/categories/spreads.jpg and b/public/images/categories/spreads.jpg differ diff --git a/public/images/slider/slider-01.jpg b/public/images/slider/slider-01.jpg index e3912d9..54f792b 100644 Binary files a/public/images/slider/slider-01.jpg and b/public/images/slider/slider-01.jpg differ diff --git a/public/images/slider/slider-02.jpg b/public/images/slider/slider-02.jpg index b37d099..6649c8b 100644 Binary files a/public/images/slider/slider-02.jpg and b/public/images/slider/slider-02.jpg differ diff --git a/public/images/slider/slider-03.jpg b/public/images/slider/slider-03.jpg index 54d054f..16638cf 100644 Binary files a/public/images/slider/slider-03.jpg and b/public/images/slider/slider-03.jpg differ diff --git a/public/images/slider/slider-04.jpg b/public/images/slider/slider-04.jpg index c3216ff..a4bff79 100644 Binary files a/public/images/slider/slider-04.jpg and b/public/images/slider/slider-04.jpg differ diff --git a/src/app/globals.css b/src/app/globals.css index 4701613..b322421 100644 --- a/src/app/globals.css +++ b/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; } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 0069625..b2a077c 100644 --- a/src/app/layout.tsx +++ b/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 ( diff --git a/src/app/lib/instagram.ts b/src/app/lib/instagram.ts new file mode 100644 index 0000000..b16842a --- /dev/null +++ b/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 { + 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 []; +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 672365d..4f7e0dd 100644 --- a/src/app/page.tsx +++ b/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 (
{/* First Two-Column Layout */} -
+
{/* Left Column - Text with Header */}
-

+

Brand Story

-

+

Mozimo's journey is a passionate pursuit of crafting exceptional chocolate that celebrates the origin of each cocoa bean.

-

+

We meticulously roast, crack, winnow, and refine beans in-house, using modern techniques to highlight their natural flavors.

-

+

Each chocolate is a masterpiece, capturing the essence of cocoa in its purest form.

@@ -43,7 +45,7 @@ export default function HomePage() {
{/* Second Two-Column Layout (Video and Text) */} -
+
{/* Left Column - Video */}
@@ -54,11 +56,14 @@ export default function HomePage() { {/* Right Column - Text */}
-

+

Discover the delicate art of our

-

Chocolate Tempering

-

+

+ {' '} + Chocolate Tempering +

+

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() {

- {/* Third Layout (Our Collections) */} -
-
+ {/* Fourth Three-Column Layout (Collections) */} +
+
Our Collections
-
- {/* Fourth Three-Column Layout (Collections) */} -
{/* Fifth Layout (Categories) */} + {/* Sixth Layout (Instagram) */} +
+
+ Follow us on Instagram +
+ +
+
+
+ In the Spotlight +
+ +
); } diff --git a/src/components/category-slider.tsx b/src/components/category-slider.tsx index d4c9537..da70a71 100644 --- a/src/components/category-slider.tsx +++ b/src/components/category-slider.tsx @@ -15,14 +15,14 @@ export function ChocolateCategories() { const [currentImage, setCurrentImage] = useState(categories[0].image); return ( -
+
    {categories.map((category) => (
  • setCurrentImage(category.image)} - className='hover:text-[#c19a6b] cursor-pointer' + className='hover:text-[#c19a6b] cursor-pointer font-montera font-normal text-9xl' > {category.name}
    • diff --git a/src/components/footer.tsx b/src/components/footer.tsx index eecb54d..706a125 100644 --- a/src/components/footer.tsx +++ b/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 ( -