Add src/app/about/page.tsx

This commit is contained in:
2026-03-10 01:50:50 +00:00
parent 0964a72f39
commit f623fd3b17

151
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,151 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Quote } from 'lucide-react';
export default function AboutPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="small"
sizing="mediumLargeSizeLargeTitles"
background="fluid"
cardStyle="outline"
primaryButtonStyle="flat"
secondaryButtonStyle="radial-glow"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Myeon Myeon"
navItems={[
{ name: "Home", id: "/" },
{ name: "Menu", id: "menu" },
{ name: "About", id: "about" },
{ name: "Reviews", id: "reviews" },
{ name: "Contact", id: "/contact" }
]}
button={{ text: "Call Now", href: "tel:+60123456789" }}
animateOnLoad={true}
className="bg-opacity-95 shadow-sm"
navItemClassName="text-sm font-medium"
buttonClassName="px-4 py-2 rounded-full font-semibold"
buttonTextClassName="text-sm"
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
tag="Our Heritage"
title="Authentic Korean Traditions Meet Modern Hospitality"
description="Myeon Myeon was founded with a mission to bring the authentic taste of Korean ramyeon to Kuching. Our founder, passionate about Korean cuisine, spent years perfecting the recipes—from the rich, aromatic broths to the perfectly chewy noodles. Today, every bowl we serve is a testament to that dedication and our love for quality, tradition, and community."
metrics={[
{ value: "142+", title: "Satisfied Customers" },
{ value: "4.8★", title: "Customer Rating" },
{ value: "100%", title: "Fresh Daily" }
]}
imageSrc="http://img.b2bpic.net/free-photo/woman-pouring-coffee-mug-sitting-near-husband-talking-mobile-phone_23-2147923057.jpg"
imageAlt="Myeon Myeon Kitchen Team"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="story" data-section="story">
<TestimonialAboutCard
tag="Founder's Story"
title="From Korea to Your Table: A Journey of Flavor and Heart"
description="Kim Min-jun"
subdescription="Founder & Head Chef"
icon={Quote}
imageSrc="http://img.b2bpic.net/free-photo/close-up-beautiful-confident-young-businesswoman_23-2147943798.jpg"
useInvertedBackground={false}
mediaAnimation="blur-reveal"
/>
</div>
<div id="values" data-section="values">
<FeatureCardOne
title="Our Core Values"
description="What drives us every single day"
tag="Why We Do What We Do"
tagAnimation="slide-up"
features={[
{
title: "Authenticity First", description: "We never compromise on the authentic Korean flavors. Every recipe is rooted in tradition and refined through passion. From our specially sourced ingredients to our time-honored cooking techniques, authenticity is non-negotiable.", imageSrc: "http://img.b2bpic.net/free-photo/assortment-noodles-table_23-2148803807.jpg", imageAlt: "Authentic Korean Ingredients", button: { text: "Learn More", href: "#" }
},
{
title: "Affordable Excellence", description: "Great food shouldn't be expensive. We believe in delivering premium quality at prices everyone can afford. RM 1-20 per person means everyone gets a taste of Korean authenticity without breaking the bank.", imageSrc: "http://img.b2bpic.net/free-photo/delicious-steaming-bowl-ramen-with-pork-belly-egg_23-2151997977.jpg", imageAlt: "Affordable Quality", button: { text: "View Menu", href: "#menu" }
},
{
title: "Community Care", description: "We're more than just a restaurant—we're part of Kuching's community. Whether it's feeding busy students, office workers, or families looking for a special meal, we serve with warmth and genuine care.", imageSrc: "http://img.b2bpic.net/free-photo/noodles-prepared-with-seafood-peppers-sesame-seeds-sauce_141793-886.jpg", imageAlt: "Community Gathering", button: { text: "Join Us", href: "/contact" }
}
]}
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
tag="Experience It Yourself"
title="Ready to Taste Authentic Ramyeon?"
description="Come visit us at City One Megamall and discover why over 142 locals trust us for authentic Korean flavors. Open daily for lunch and dinner."
buttons={[
{ text: "Call Now", href: "tel:+60123456789" },
{ text: "Get Directions", href: "https://maps.google.com" }
]}
buttonAnimation="slide-up"
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/digital-lavender-style-interior-design_23-2151561231.jpg"
imageAlt="Myeon Myeon Restaurant Interior"
logoText="Myeon Myeon 면면 麵麵"
copyrightText="© 2025 Myeon Myeon. All rights reserved."
columns={[
{
title: "Restaurant", items: [
{ label: "Location", href: "https://maps.google.com" },
{ label: "Hours", href: "#" },
{ label: "Menu", href: "#menu" },
{ label: "About Us", href: "/about" }
]
},
{
title: "Contact", items: [
{ label: "Phone", href: "tel:+60123456789" },
{ label: "Email", href: "mailto:info@myeonmyeon.my" },
{ label: "WhatsApp", href: "https://wa.me/60123456789" },
{ label: "Visit Us", href: "https://maps.google.com" }
]
},
{
title: "Follow Us", items: [
{ label: "Facebook", href: "https://facebook.com/myeonmyeon" },
{ label: "Instagram", href: "https://instagram.com/myeonmyeon" },
{ label: "TikTok", href: "https://tiktok.com/@myeonmyeon" },
{ label: "Reviews", href: "#reviews" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}