Merge version_4 into main #4
255
src/app/page.tsx
255
src/app/page.tsx
@@ -4,191 +4,110 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
||||
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||||
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import { Coffee, MapPin, Star } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="blurBottom"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noise"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="MR POP"
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Menu", id: "products" },
|
||||
{ name: "Visit Us", id: "contact" },
|
||||
]}
|
||||
brandName="MR POP"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Make Things Pop."
|
||||
description="Transforming your brand experience with vibrant, high-energy designs that stand out in the digital noise."
|
||||
kpis={[
|
||||
{ value: "100+", label: "Projects Done" },
|
||||
{ value: "95%", label: "Retention Rate" },
|
||||
{ value: "24/7", label: "Creative Support" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{ text: "Get Started", href: "#contact" },
|
||||
{ text: "View Portfolio", href: "#products" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-rendered-design-elements-arrangement_23-2148996770.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/top-view-colorful-paper-shapes_23-2148428593.jpg", alt: "Portrait of creative director" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/abstract-3d-design-elements-arrangement_23-2148996801.jpg", alt: "Portrait of senior designer" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/3d-rendered-design-elements-arrangement_23-2148996769.jpg", alt: "Portrait of project manager" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/aesthetic-wallpaper-made-abstract-geometric-shapes_23-2150300238.jpg", alt: "Portrait of motion artist" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/corporate-employee-wearing-formal-suit-having-fun-startup-office_482257-77721.jpg", alt: "Portrait of brand strategist" },
|
||||
]}
|
||||
avatarText="Our core team of creatives"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Brand Strategy" },
|
||||
{ type: "text", text: "Motion Graphics" },
|
||||
{ type: "text", text: "UX/UI Design" },
|
||||
{ type: "text", text: "Content Creation" },
|
||||
{ type: "text", text: "Digital Identity" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{ variant: "glowing-orb" }}
|
||||
title="Brunch & Coffee Perfection"
|
||||
description="Start your day at Aleea Carpați 49a. Discover specialty coffee and locally sourced brunch delicacies in an atmosphere designed to make your day pop."
|
||||
buttons={[{ text: "View Our Menu", href: "#products" }, { text: "Find Us", href: "#contact" }]}
|
||||
leftCarouselItems={[{ imageSrc: "https://images.unsplash.com/photo-1507133750040-4a8f570e9d35?q=80&w=800" }]}
|
||||
rightCarouselItems={[{ imageSrc: "https://images.unsplash.com/photo-1559925393-8be07e767256?q=80&w=800" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="About MR POP"
|
||||
description="We are a creative studio obsessed with turning ordinary concepts into extraordinary visual stories. Our approach is grounded in strategy and driven by pure creative flair."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-psychiatrist-waiting-people-attend-aa-group-therapy-meeting-psychotherapist-sitting-circle-with-chairs-holding-clipboard-give-advice-rehabilitation-patients_482257-37205.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
tag="Our Story"
|
||||
title="Quality You Can Taste"
|
||||
description="MR POP was born from a passion for specialty coffee and authentic brunch experiences. We source our beans ethically and bake our treats fresh every single morning."
|
||||
subdescription="Visit us in the heart of Târgu Mureș."
|
||||
icon={Coffee}
|
||||
imageSrc="https://images.unsplash.com/photo-1541167760496-1628856ab77a?q=80&w=800"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardMedia
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "f1", title: "Design Strategy", description: "Tailored strategies that align with your business goals perfectly.", tag: "Strategy", imageSrc: "http://img.b2bpic.net/free-photo/some-3d-glasses_23-2147775802.jpg" },
|
||||
{ id: "f2", title: "Brand Identity", description: "Comprehensive branding solutions that make your name unforgettable.", tag: "Brand", imageSrc: "http://img.b2bpic.net/free-photo/macro-usb-type-c-port-neon-light-connector-closeup_169016-71437.jpg" },
|
||||
{ id: "f3", title: "Digital Assets", description: "Engaging assets optimized for high performance and visual impact.", tag: "Digital", imageSrc: "http://img.b2bpic.net/free-photo/side-view-businessman-doing-sport-with-stats_23-2150040521.jpg" },
|
||||
]}
|
||||
title="Our Strengths"
|
||||
description="Key capabilities that define our studio and ensure excellence in every delivery."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
animationType="blur-reveal"
|
||||
title="Why Choose MR POP?"
|
||||
description="We elevate the humble brunch to an art form."
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Coffee, title: "Specialty Brews", description: "Handcrafted roasts from our expert baristas." },
|
||||
{ icon: Star, title: "Artisan Brunch", description: "Seasonal ingredients made with care." },
|
||||
{ icon: MapPin, title: "Prime Location", description: "Located right at Aleea Carpați 49a." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
animationType="slide-up"
|
||||
products={[
|
||||
{ id: "p1", brand: "Studio", name: "Basic Identity Package", price: "$1,500", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/eco-friendly-disposable-tableware-close-up-concept-saving-planet-rejection-plastic_169016-10556.jpg" },
|
||||
{ id: "p2", brand: "Studio", name: "Digital Motion Pack", price: "$2,200", rating: 5, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/three-black-ducks_23-2147680069.jpg" },
|
||||
{ id: "p3", brand: "Studio", name: "Full Brand Relaunch", price: "$5,000", rating: 5, reviewCount: "25", imageSrc: "http://img.b2bpic.net/free-photo/good-food-defenses-against-illness_23-2149165844.jpg" },
|
||||
{ id: "p4", brand: "Studio", name: "Web Asset Suite", price: "$3,000", rating: 5, reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/arrangement-golden-shopping-cart-with-white-glitter_23-2148667022.jpg" },
|
||||
{ id: "p5", brand: "Studio", name: "Custom Illustration", price: "$1,200", rating: 5, reviewCount: "9", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-table-arrangement-with-candle_23-2149707897.jpg" },
|
||||
{ id: "p6", brand: "Studio", name: "Social Campaign Kit", price: "$1,800", rating: 5, reviewCount: "11", imageSrc: "http://img.b2bpic.net/free-photo/different-vases-with-blue-purple-light-arrangement_23-2149835478.jpg" },
|
||||
]}
|
||||
title="Curated Services"
|
||||
description="Choose from our specialized creative services to elevate your brand to the next level."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
title="Signature Menu"
|
||||
description="Fresh, local, and always delicious."
|
||||
products={[
|
||||
{ id: "1", name: "Signature Avocado Toast", price: "28 RON", imageSrc: "https://images.unsplash.com/photo-1525351484163-7529414344d8?q=80&w=400" },
|
||||
{ id: "2", name: "Iced Flat White", price: "16 RON", imageSrc: "https://images.unsplash.com/photo-1517701604599-bb2c8848d50d?q=80&w=400" },
|
||||
{ id: "3", name: "Buttermilk Pancakes", price: "24 RON", imageSrc: "https://images.unsplash.com/photo-1506084868230-bb9d95c24759?q=80&w=400" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "150+", description: "Creative Concepts Developed" },
|
||||
{ id: "m2", value: "50+", description: "Happy Clients Served" },
|
||||
{ id: "m3", value: "10+", description: "Design Awards Won" },
|
||||
]}
|
||||
title="By the Numbers"
|
||||
description="Proven results that speak volumes about our creative expertise and client dedication."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Visit Us"
|
||||
title="Find MR POP"
|
||||
description="Aleea Carpați 49a, 540311 Târgu Mureș. We look forward to serving you!"
|
||||
background={{ variant: "glowing-orb" }}
|
||||
imageSrc="https://images.unsplash.com/photo-1445116572660-151099a1ffa3?q=80&w=800"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Alex Rivet", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-businesswoman-against-gray-background_23-2147943800.jpg" },
|
||||
{ id: "t2", name: "Sarah Chen", imageSrc: "http://img.b2bpic.net/free-photo/press-reporter-fallowing-leads-case_23-2149579722.jpg" },
|
||||
{ id: "t3", name: "James Bond", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-photographer-works-with-phone-leani_613910-16279.jpg" },
|
||||
{ id: "t4", name: "Emily Rose", imageSrc: "http://img.b2bpic.net/free-photo/people-positiveness-happiness-concept-glad-smiling-male-teenager-wears-big-spectacles-being-happy_273609-8656.jpg" },
|
||||
{ id: "t5", name: "Mike Ross", imageSrc: "http://img.b2bpic.net/free-photo/serious-afroamerican-businessman-front-view_23-2148508922.jpg" },
|
||||
]}
|
||||
cardTitle="Client Voices"
|
||||
cardTag="Testimonials"
|
||||
cardAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "How do we start?", content: "Simply reach out via our contact form and we'll schedule a discovery call." },
|
||||
{ id: "q2", title: "What is your typical turnaround?", content: "Most projects are completed within 2 to 4 weeks depending on complexity." },
|
||||
{ id: "q3", title: "Can you handle large branding tasks?", content: "Absolutely, we specialize in full brand redesigns and large-scale creative rollouts." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/colon-punctuation-mark-left-side-with-white-background_187299-39766.jpg"
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about working with the MR POP team."
|
||||
faqsAnimation="blur-reveal"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Let's Connect"
|
||||
title="Ready to Pop?"
|
||||
description="Let's create something iconic together. Send us a message to kick off your project."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/top-view-desk-minimal-copy-space-mobile-phone_23-2148748602.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="MR POP"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Use", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="MR POP"
|
||||
leftLink={{ text: "Contact us", href: "#contact" }}
|
||||
rightLink={{ text: "Follow on IG", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f5f5f5;
|
||||
--card: #ffffff;
|
||||
--foreground: #1c1c1c;
|
||||
--primary-cta: #1c1c1c;
|
||||
--background: #fdfaf6;
|
||||
--card: #f5efe6;
|
||||
--foreground: #3d2b1f;
|
||||
--primary-cta: #8b5e3c;
|
||||
--primary-cta-text: #f5f5f5;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta: #e0d3c0;
|
||||
--secondary-cta-text: #1c1c1c;
|
||||
--accent: #159c49;
|
||||
--background-accent: #a8e8ba;
|
||||
--accent: #c6a88e;
|
||||
--background-accent: #f0e6d6;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user