Compare commits
2 Commits
version_1_
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| d8e6ad9806 | |||
|
eb783a987f |
@@ -5,15 +5,15 @@
|
||||
|
||||
:root {
|
||||
/* @colorThemes/lightTheme/grayNavyBlue */
|
||||
--background: #f5faff;
|
||||
--card: #ffffff;
|
||||
--foreground: #001122;
|
||||
--primary-cta: #15479c;
|
||||
--primary-cta-text: #f5faff;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #001122;
|
||||
--accent: #a8cce8;
|
||||
--background-accent: #7ba3cf;
|
||||
--background: #050012;
|
||||
--card: #16002b;
|
||||
--foreground: #f8f0ff;
|
||||
--primary-cta: #8b5cf6;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #3b82f6;
|
||||
--secondary-cta-text: #ffffff;
|
||||
--accent: #facc15;
|
||||
--background-accent: #5b21b6;
|
||||
|
||||
/* @layout/border-radius/rounded */
|
||||
--radius: 1.5rem;
|
||||
|
||||
@@ -1,294 +1,36 @@
|
||||
import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||||
import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
|
||||
import PricingCenteredCards from '@/components/sections/pricing/PricingCenteredCards';
|
||||
import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
// AUTO-GENERATED shell by per-section-migrate.
|
||||
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
|
||||
// files directly. Non-block content (wrappers, non-inlinable sections) is
|
||||
// preserved inline; extracted section blocks become <XSection/> refs.
|
||||
|
||||
export default function HomePage() {
|
||||
import React from 'react';
|
||||
import AboutSection from './HomePage/sections/About';
|
||||
import ProductSection from './HomePage/sections/Product';
|
||||
import MetricsSection from './HomePage/sections/Metrics';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
|
||||
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import PricingSection from './HomePage/sections/Pricing';
|
||||
import ContactSection from './HomePage/sections/Contact';export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroBillboardCarousel
|
||||
tag="BIG MARD Store"
|
||||
title="iPhone 17 Series Available"
|
||||
description="Best prices in Moscow. Experience the future of mobile technology with our anime-grade hardware."
|
||||
primaryButton={{
|
||||
text: "Reserve Now",
|
||||
href: "#contact",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Catalog",
|
||||
href: "#pricing",
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-clouds-digital-art_23-2151105889.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/anime-character-using-virtual-reality-glasses-metaverse_23-2151568847.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-futuristic-sci-fi-techno-lights-cool-background_181624-23655.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/rainbow-colored-smartphone-design-with-gradient-effect-isolated-white-background_187299-47164.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/motion-lights-background-concept_23-2148241225.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/phone-16-pro-max-gold-mockup_187299-45926.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutTestimonial
|
||||
tag="About Us"
|
||||
quote="Bringing you the latest Apple tech with Moscow's best prices. Join the trend, stay connected."
|
||||
author="BIG MARD Team"
|
||||
role="Moscow Apple Tech Specialists"
|
||||
imageSrc="http://img.b2bpic.net/free-vector/gradient-text-illustration-cyber-monday-sale_23-2150879721.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<AboutSection />
|
||||
|
||||
<div id="product" data-section="product">
|
||||
<SectionErrorBoundary name="product">
|
||||
<FeaturesImageBento
|
||||
tag="Featured Collection"
|
||||
title="iPhone 17 Models"
|
||||
description="Premium colors, latest technology."
|
||||
items={[
|
||||
{
|
||||
title: "iPhone 17",
|
||||
description: "Classic power",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/neon-lights-road-water_23-2151966344.jpg",
|
||||
},
|
||||
{
|
||||
title: "iPhone 17 Pro",
|
||||
description: "Maximum performance",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/anime-character-using-virtual-reality-glasses-metaverse_23-2151568883.jpg",
|
||||
},
|
||||
{
|
||||
title: "iPhone 17 Max",
|
||||
description: "Ultimate screen",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/illustration-rain-futuristic-city_23-2151406564.jpg",
|
||||
},
|
||||
{
|
||||
title: "17 Air",
|
||||
description: "Ultra light",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-man-with-phone_23-2150964583.jpg",
|
||||
},
|
||||
{
|
||||
title: "White Series",
|
||||
description: "Clean aesthetics",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vivid-abstract-psychedelic-corridor-pattern-with-blue-purple-colors_181624-23157.jpg",
|
||||
},
|
||||
{
|
||||
title: "Pink/Blue",
|
||||
description: "Vibrant colors",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-deals-gaming-joy_23-2152027085.jpg",
|
||||
},
|
||||
{
|
||||
title: "Black/Gold",
|
||||
description: "Luxury finish",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-dark-room-modern-futuristic-sci-fi-background-3d-illustration_35913-2290.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ProductSection />
|
||||
<PricingSection />
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<SectionErrorBoundary name="pricing">
|
||||
<PricingCenteredCards
|
||||
tag="Digital Catalog"
|
||||
title="Price List"
|
||||
description="Reserve your model today"
|
||||
plans={[
|
||||
{
|
||||
tag: "Popular",
|
||||
price: "58,500 ₽",
|
||||
description: "iPhone 17E Pink 256GB 1SIM",
|
||||
features: [
|
||||
"Moscow Stock",
|
||||
"Best Price",
|
||||
"Reserve Now",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Reserve",
|
||||
href: "#contact",
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: "Elite",
|
||||
price: "102,000 ₽",
|
||||
description: "iPhone 17 Pro Starting Price",
|
||||
features: [
|
||||
"Advanced Camera",
|
||||
"Top Speed",
|
||||
"Global Support",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Reserve",
|
||||
href: "#contact",
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: "Max",
|
||||
price: "109,500 ₽",
|
||||
description: "iPhone 17 Pro Max Starting Price",
|
||||
features: [
|
||||
"Biggest Battery",
|
||||
"Cinema Display",
|
||||
"Top Specs",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Reserve",
|
||||
href: "#contact",
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsFeatureCards
|
||||
tag="Our Stats"
|
||||
title="Why BIG MARD"
|
||||
description="Trust in our service"
|
||||
metrics={[
|
||||
{
|
||||
value: "100+",
|
||||
title: "Daily Sales",
|
||||
features: [
|
||||
"Satisfied customers",
|
||||
"Fast shipping",
|
||||
"Expert support",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "24/7",
|
||||
title: "Service",
|
||||
features: [
|
||||
"Technical assistance",
|
||||
"Fast answers",
|
||||
"Order tracking",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "5/5",
|
||||
title: "Rating",
|
||||
features: [
|
||||
"Verified quality",
|
||||
"Excellent feedback",
|
||||
"Premium experience",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<MetricsSection />
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialRatingCards
|
||||
tag="Reviews"
|
||||
title="Customer Stories"
|
||||
description="What our customers say"
|
||||
testimonials={[
|
||||
{
|
||||
name: "Anna",
|
||||
role: "Photographer",
|
||||
quote: "Love the pink 17! Smooth purchase.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-choosing-earphones-store_1303-31280.jpg",
|
||||
},
|
||||
{
|
||||
name: "Ivan",
|
||||
role: "Tech Enthusiast",
|
||||
quote: "Best prices in Moscow, hands down.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-cartoon-woman-portrait_23-2151839667.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena",
|
||||
role: "Student",
|
||||
quote: "Quick reserve process, very happy.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-portrait-happy-excited-young-man-sitting-coffee-shop-with-laptop-headphones_1258-245362.jpg",
|
||||
},
|
||||
{
|
||||
name: "Dmitry",
|
||||
role: "Professional",
|
||||
quote: "My 17Pro was ready in an hour.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photogenic-woman-smiling-with-heaphones-shopping-mall0_23-2148397231.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sofia",
|
||||
role: "Influencer",
|
||||
quote: "Style and power in one device.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/anime-character-using-virtual-reality-glasses-metaverse_23-2151568892.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TestimonialsSection />
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSplitMedia
|
||||
tag="Support"
|
||||
title="Common Questions"
|
||||
description="How can we help you?"
|
||||
items={[
|
||||
{
|
||||
question: "Where are you located?",
|
||||
answer: "Moscow, Barklaya street 8, pavilion 138",
|
||||
},
|
||||
{
|
||||
question: "What are your hours?",
|
||||
answer: "Every day, 10:00–21:00",
|
||||
},
|
||||
{
|
||||
question: "Can I reserve online?",
|
||||
answer: "Yes! Use Telegram to reserve your device now.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/sad-anime-blue-monday-illustration_23-2151910274.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FaqSection />
|
||||
<ContactSection />
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Get in Touch"
|
||||
text="Ask any question / Reserve your iPhone now via Telegram @big_mard or call +7 (985) 791-00-99."
|
||||
primaryButton={{
|
||||
text: "Message @big_mard",
|
||||
href: "https://t.me/big_mard",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Call +7 (985) 791-00-99",
|
||||
href: "tel:+79857910099",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<HeroSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
22
src/pages/HomePage/sections/About.tsx
Normal file
22
src/pages/HomePage/sections/About.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "about" section.
|
||||
|
||||
import React from 'react';
|
||||
import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function AboutSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutTestimonial
|
||||
tag="About Us"
|
||||
quote="Bringing you the latest Apple tech with Moscow's best prices. Join the trend, stay connected."
|
||||
author="BIG MARD Team"
|
||||
role="Moscow Apple Tech Specialists"
|
||||
imageSrc="http://img.b2bpic.net/free-vector/gradient-text-illustration-cyber-monday-sale_23-2150879721.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
73
src/pages/HomePage/sections/Contact.tsx
Normal file
73
src/pages/HomePage/sections/Contact.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import { motion } from 'motion/react';
|
||||
import Button from '@/components/ui/Button';
|
||||
|
||||
export default function ContactSection() {
|
||||
return (
|
||||
<section id="contact" data-webild-section="contact" className="relative w-full py-24 bg-background overflow-hidden">
|
||||
<div className="max-w-content-width mx-auto px-6">
|
||||
<div className="card p-8 md:p-12 rounded-radius-lg bg-card border border-border/50 relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary-cta/10 to-accent/10 pointer-events-none" />
|
||||
|
||||
<div className="relative z-10 grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
<div>
|
||||
<span className="inline-block px-3 py-1 mb-4 text-sm font-medium rounded-full bg-primary-cta/20 text-primary-cta">Get in Touch</span>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-foreground mb-6">Ask any question / Reserve your iPhone now</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 rounded-full bg-primary-cta/20 flex items-center justify-center shrink-0">
|
||||
<svg className="w-5 h-5 text-primary-cta" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground">Phone</h3>
|
||||
<a href="tel:+79857910099" className="text-muted-foreground hover:text-primary-cta transition-colors">+7 (985) 791-00-99</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 rounded-full bg-primary-cta/20 flex items-center justify-center shrink-0">
|
||||
<svg className="w-5 h-5 text-primary-cta" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground">Telegram</h3>
|
||||
<a href="https://t.me/big_mard" className="text-muted-foreground hover:text-primary-cta transition-colors">@big_mard</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-foreground mb-4">Visit Us</h3>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center shrink-0">
|
||||
<svg className="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-muted-foreground">Moscow, Barklaya street 8,<br/>1st floor, pavilion 138</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-foreground mb-4">Working Hours</h3>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center shrink-0">
|
||||
<svg className="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-muted-foreground">Every day<br/>10:00–21:00</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4">
|
||||
<Button text="Message @big_mard" href="https://t.me/big_mard" variant="primary" className="w-full py-3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
35
src/pages/HomePage/sections/Faq.tsx
Normal file
35
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "faq" section.
|
||||
|
||||
import React from 'react';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FaqSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSplitMedia
|
||||
tag="Support"
|
||||
title="Common Questions"
|
||||
description="How can we help you?"
|
||||
items={[
|
||||
{
|
||||
question: "Where are you located?",
|
||||
answer: "Moscow, Barklaya street 8, pavilion 138",
|
||||
},
|
||||
{
|
||||
question: "What are your hours?",
|
||||
answer: "Every day, 10:00–21:00",
|
||||
},
|
||||
{
|
||||
question: "Can I reserve online?",
|
||||
answer: "Yes! Use Telegram to reserve your device now.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/sad-anime-blue-monday-illustration_23-2151910274.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
50
src/pages/HomePage/sections/Hero.tsx
Normal file
50
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import { motion } from 'motion/react';
|
||||
import Button from '@/components/ui/Button';
|
||||
|
||||
export default function HeroSection() {
|
||||
return (
|
||||
<section id="hero" data-webild-section="hero" className="relative w-full min-h-[80vh] flex items-center bg-background overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-background via-background to-background-accent/20 z-0" />
|
||||
|
||||
<div className="max-w-content-width mx-auto px-6 relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center py-24">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="space-y-8"
|
||||
>
|
||||
<span className="inline-block px-4 py-1.5 rounded-full bg-primary-cta/20 text-primary-cta font-semibold text-sm tracking-wide">
|
||||
BIG MARD Store
|
||||
</span>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-bold text-foreground leading-tight">
|
||||
iPhone 17 Series <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary-cta to-accent">Available</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-muted-foreground max-w-lg">
|
||||
Best prices in Moscow. Experience the future of mobile technology with our premium Apple devices.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-4 pt-4">
|
||||
<Button text="Reserve Now" href="#contact" variant="primary" className="px-8 py-4 text-lg" />
|
||||
<Button text="Catalog" href="#pricing" variant="secondary" className="px-8 py-4 text-lg" />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="relative"
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-primary-cta/30 to-accent/30 blur-3xl rounded-full opacity-50 animate-pulse" />
|
||||
<img
|
||||
src="http://img.b2bpic.net/free-photo/phone-16-pro-max-gold-mockup_187299-45926.jpg"
|
||||
alt="iPhone 17 Pro Max"
|
||||
className="relative z-10 w-full h-auto object-contain drop-shadow-2xl"
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
49
src/pages/HomePage/sections/Metrics.tsx
Normal file
49
src/pages/HomePage/sections/Metrics.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "metrics" section.
|
||||
|
||||
import React from 'react';
|
||||
import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function MetricsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsFeatureCards
|
||||
tag="Our Stats"
|
||||
title="Why BIG MARD"
|
||||
description="Trust in our service"
|
||||
metrics={[
|
||||
{
|
||||
value: "100+",
|
||||
title: "Daily Sales",
|
||||
features: [
|
||||
"Satisfied customers",
|
||||
"Fast shipping",
|
||||
"Expert support",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "24/7",
|
||||
title: "Service",
|
||||
features: [
|
||||
"Technical assistance",
|
||||
"Fast answers",
|
||||
"Order tracking",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "5/5",
|
||||
title: "Rating",
|
||||
features: [
|
||||
"Verified quality",
|
||||
"Excellent feedback",
|
||||
"Premium experience",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
94
src/pages/HomePage/sections/Pricing.tsx
Normal file
94
src/pages/HomePage/sections/Pricing.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
import { motion } from 'motion/react';
|
||||
import Button from '@/components/ui/Button';
|
||||
|
||||
export default function PricingSection() {
|
||||
const products = [
|
||||
{
|
||||
model: "iPhone 17E",
|
||||
storage: "256GB",
|
||||
color: "Pink",
|
||||
version: "🇮🇳 India",
|
||||
sim: "1SIM",
|
||||
price: "58,500 ₽",
|
||||
image: "http://img.b2bpic.net/free-photo/rainbow-colored-smartphone-design-with-gradient-effect-isolated-white-background_187299-47164.jpg"
|
||||
},
|
||||
{
|
||||
model: "iPhone 17",
|
||||
storage: "256GB",
|
||||
color: "Black",
|
||||
version: "🇯🇵 Japan",
|
||||
sim: "eSIM",
|
||||
price: "67,000 ₽",
|
||||
image: "http://img.b2bpic.net/free-photo/phone-16-pro-max-gold-mockup_187299-45926.jpg"
|
||||
},
|
||||
{
|
||||
model: "iPhone 17 Air",
|
||||
storage: "256GB",
|
||||
color: "White",
|
||||
version: "🇯🇵 Japan",
|
||||
sim: "eSIM",
|
||||
price: "78,000 ₽",
|
||||
image: "http://img.b2bpic.net/free-photo/rainbow-colored-smartphone-design-with-gradient-effect-isolated-white-background_187299-47164.jpg"
|
||||
},
|
||||
{
|
||||
model: "iPhone 17 Pro",
|
||||
storage: "From",
|
||||
color: "All Colors",
|
||||
version: "Global",
|
||||
sim: "Dual",
|
||||
price: "102,000 ₽",
|
||||
image: "http://img.b2bpic.net/free-photo/phone-16-pro-max-gold-mockup_187299-45926.jpg"
|
||||
},
|
||||
{
|
||||
model: "iPhone 17 Pro Max",
|
||||
storage: "From",
|
||||
color: "All Colors",
|
||||
version: "Global",
|
||||
sim: "Dual",
|
||||
price: "109,500 ₽",
|
||||
image: "http://img.b2bpic.net/free-photo/phone-16-pro-max-gold-mockup_187299-45926.jpg"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="pricing" data-webild-section="pricing" className="relative w-full py-24 bg-background overflow-hidden">
|
||||
<div className="max-w-content-width mx-auto px-6">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-foreground mb-4">Digital Catalog</h2>
|
||||
<p className="text-lg text-muted-foreground">Swipe through our premium selection</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{products.map((product, idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: idx * 0.1 }}
|
||||
className="card p-6 rounded-radius-lg bg-card border border-border/50 hover:border-primary-cta/50 transition-colors group relative overflow-hidden"
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary-cta/5 to-accent/5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<div className="relative z-10">
|
||||
<div className="aspect-[4/5] w-full mb-6 rounded-radius-md overflow-hidden bg-background/50 flex items-center justify-center">
|
||||
<img src={product.image} alt={product.model} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-foreground mb-2">{product.model}</h3>
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
<span className="px-2 py-1 text-xs rounded-full bg-background-accent/20 text-foreground">{product.storage}</span>
|
||||
<span className="px-2 py-1 text-xs rounded-full bg-background-accent/20 text-foreground">{product.color}</span>
|
||||
<span className="px-2 py-1 text-xs rounded-full bg-background-accent/20 text-foreground">{product.version}</span>
|
||||
<span className="px-2 py-1 text-xs rounded-full bg-background-accent/20 text-foreground">{product.sim}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mt-6">
|
||||
<div className="text-2xl font-bold text-primary-cta">{product.price}</div>
|
||||
<Button text="Reserve" href="#contact" variant="primary" className="px-4 py-2 text-sm" />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
57
src/pages/HomePage/sections/Product.tsx
Normal file
57
src/pages/HomePage/sections/Product.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "product" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ProductSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="product" data-section="product">
|
||||
<SectionErrorBoundary name="product">
|
||||
<FeaturesImageBento
|
||||
tag="Featured Collection"
|
||||
title="iPhone 17 Models"
|
||||
description="Premium colors, latest technology."
|
||||
items={[
|
||||
{
|
||||
title: "iPhone 17",
|
||||
description: "Classic power",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/neon-lights-road-water_23-2151966344.jpg",
|
||||
},
|
||||
{
|
||||
title: "iPhone 17 Pro",
|
||||
description: "Maximum performance",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/anime-character-using-virtual-reality-glasses-metaverse_23-2151568883.jpg",
|
||||
},
|
||||
{
|
||||
title: "iPhone 17 Max",
|
||||
description: "Ultimate screen",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/illustration-rain-futuristic-city_23-2151406564.jpg",
|
||||
},
|
||||
{
|
||||
title: "17 Air",
|
||||
description: "Ultra light",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-man-with-phone_23-2150964583.jpg",
|
||||
},
|
||||
{
|
||||
title: "White Series",
|
||||
description: "Clean aesthetics",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vivid-abstract-psychedelic-corridor-pattern-with-blue-purple-colors_181624-23157.jpg",
|
||||
},
|
||||
{
|
||||
title: "Pink/Blue",
|
||||
description: "Vibrant colors",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-deals-gaming-joy_23-2152027085.jpg",
|
||||
},
|
||||
{
|
||||
title: "Black/Gold",
|
||||
description: "Luxury finish",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-dark-room-modern-futuristic-sci-fi-background-3d-illustration_35913-2290.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
57
src/pages/HomePage/sections/Testimonials.tsx
Normal file
57
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "testimonials" section.
|
||||
|
||||
import React from 'react';
|
||||
import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialRatingCards
|
||||
tag="Reviews"
|
||||
title="Customer Stories"
|
||||
description="What our customers say"
|
||||
testimonials={[
|
||||
{
|
||||
name: "Anna",
|
||||
role: "Photographer",
|
||||
quote: "Love the pink 17! Smooth purchase.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-choosing-earphones-store_1303-31280.jpg",
|
||||
},
|
||||
{
|
||||
name: "Ivan",
|
||||
role: "Tech Enthusiast",
|
||||
quote: "Best prices in Moscow, hands down.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-cartoon-woman-portrait_23-2151839667.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena",
|
||||
role: "Student",
|
||||
quote: "Quick reserve process, very happy.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-portrait-happy-excited-young-man-sitting-coffee-shop-with-laptop-headphones_1258-245362.jpg",
|
||||
},
|
||||
{
|
||||
name: "Dmitry",
|
||||
role: "Professional",
|
||||
quote: "My 17Pro was ready in an hour.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photogenic-woman-smiling-with-heaphones-shopping-mall0_23-2148397231.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sofia",
|
||||
role: "Influencer",
|
||||
quote: "Style and power in one device.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/anime-character-using-virtual-reality-glasses-metaverse_23-2151568892.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user