Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| b6a6ab69bf | |||
| 0187b5c922 | |||
| 1fd008b29c | |||
| 87efb7affb |
@@ -3,48 +3,43 @@
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
||||
import HeroCentered from "@/components/sections/hero/HeroCentered";
|
||||
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
|
||||
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import { Zap, Gauge, Lightbulb, Gamepad2, Trophy, Broadcast, Users } from "lucide-react";
|
||||
import { Users, Gamepad2, Trophy, Zap } from "lucide-react";
|
||||
|
||||
export default function AboutPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Gaming Setup", id: "gaming-setup" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Tournaments", id: "tournaments" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Gaming Setup", id: "/gaming-setup" },
|
||||
{ name: "Pricing", id: "/pricing" },
|
||||
{ name: "Tournaments", id: "/tournaments" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Gaming Experience",
|
||||
items: [
|
||||
title: "Gaming Experience", items: [
|
||||
{ label: "Gaming Setup", href: "/gaming-setup" },
|
||||
{ label: "Pricing", href: "/pricing" },
|
||||
{ label: "Book Session", href: "https://wa.me/917022946056" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Community",
|
||||
items: [
|
||||
title: "Community", items: [
|
||||
{ label: "Tournaments", href: "/tournaments" },
|
||||
{ label: "Discord Server", href: "https://discord.gg" },
|
||||
{ label: "Instagram", href: "https://instagram.com" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
title: "Contact", items: [
|
||||
{ label: "Phone: +91 70229 46056", href: "tel:+917022946056" },
|
||||
{ label: "WhatsApp", href: "https://wa.me/917022946056" },
|
||||
{ label: "Email Support", href: "mailto:info@m80esports.com" },
|
||||
{
|
||||
label: "Get Directions",
|
||||
href: "https://maps.google.com/?q=17/A+3rd+Floor+Samruthi+Nest+New+BEL+Road+Bangalore",
|
||||
},
|
||||
{ label: "Get Directions", href: "https://maps.google.com/?q=17/A+3rd+Floor+Samruthi+Nest+New+BEL+Road+Bangalore" },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -66,65 +61,61 @@ export default function AboutPage() {
|
||||
<NavbarStyleApple brandName="M80 Esports" navItems={navItems} />
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
title="About M80 Esports"
|
||||
description={[
|
||||
"M80 Esports is Bangalore's premier gaming cafe dedicated to building a thriving local esports and gaming community. We provide a space where competitive gamers, casual players, and groups of friends come together to compete, connect, and celebrate their passion for gaming.",
|
||||
"Our mission is to deliver the ultimate gaming experience with high-performance equipment, a welcoming community atmosphere, and expert staff who understand what gamers need. We believe in creating more than just a cafe - we're building a home for Bangalore's gaming culture.",
|
||||
"Whether you're here to compete in tournaments, practice your favorite titles, or hang out with friends, M80 Esports offers the perfect environment with cutting-edge technology and an electric, inclusive community vibe.",
|
||||
description="Bangalore's premier gaming hub where competitive spirit meets community. Founded by gamers, for gamers, we're transforming how people experience esports."
|
||||
background={{ variant: "downward-rays-animated-grid" }}
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-man-posing-grey-wall_114579-30626.jpg", alt: "Founder 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/woman-standing-with-arms-crossed_23-2147678138.jpg", alt: "Founder 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/front-view-young-man-listening-music-earbuds-outside_23-2148381755.jpg", alt: "Team Member" },
|
||||
]}
|
||||
buttons={[{ text: "Join Our Community", href: "contact" }]}
|
||||
useInvertedBackground={false}
|
||||
showBorder={true}
|
||||
avatarText="Passionate gamers building the future of esports"
|
||||
buttons={[
|
||||
{ text: "Join Our Community", href: "/contact" },
|
||||
{ text: "Book a Session", href: "https://wa.me/917022946056" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<div id="story" data-section="story">
|
||||
<FeatureCardTen
|
||||
title="Our Gaming Philosophy"
|
||||
description="We combine premium infrastructure with genuine community spirit to create the ultimate esports experience"
|
||||
tag="What We Believe In"
|
||||
title="Our Journey"
|
||||
description="From a passion project to Bangalore's leading esports destination"
|
||||
tag="Our Story"
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Inclusivity First",
|
||||
description: "Whether you're a pro esports player or picking up a controller for the first time, M80 Esports welcomes you. We create tournaments and spaces for all skill levels, fostering an inclusive gaming culture where everyone belongs.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-colleagues-playing-video-games-console-enjoying-drinks-snacks-after-work-coworkers-having-fun-with-game-controllers-while-using-television-after-hours_482257-33396.jpg",
|
||||
id: "1", title: "Founded by Gamers", description: "M80 Esports was born from the vision of dedicated gamers who wanted to create the ultimate gaming space in Bangalore. We understand what competitive gamers need because we are gamers.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-gamer-playing-first-person-shooter-online-video-game-powerful-personal-computer-with-colorful-neon-led-lights-cyber-performing-pc-stylish-room-gaming-tournament_482257-13303.jpg?_wi=2"
|
||||
},
|
||||
items: [
|
||||
{ icon: Users, text: "All Skill Levels Welcome" },
|
||||
{ icon: Trophy, text: "Beginner-Friendly Events" },
|
||||
{ icon: Lightbulb, text: "Community-Driven Culture" },
|
||||
{ icon: Zap, text: "Pure gaming passion" },
|
||||
{ icon: Users, text: "Community-driven" },
|
||||
{ icon: Trophy, text: "Championship mindset" },
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Premium Equipment & Standards",
|
||||
description: "Quality gaming hardware is essential for true esports. We invest in the latest RTX graphics cards, high-refresh displays, and professional peripherals. Every station is maintained to tournament standards, ensuring fair competition and optimal performance.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-gamer-playing-first-person-shooter-online-video-game-powerful-personal-computer-with-colorful-neon-led-lights-cyber-performing-pc-stylish-room-gaming-tournament_482257-13303.jpg?_wi=5",
|
||||
id: "2", title: "Premium Infrastructure", description: "We invested in world-class gaming equipment, high-speed internet, and professional tournament infrastructure. Every detail is optimized for performance and comfort.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-victorious-gamer-desk_23-2149350004.jpg?_wi=2"
|
||||
},
|
||||
items: [
|
||||
{ icon: Zap, text: "High-End Hardware" },
|
||||
{ icon: Gauge, text: "Tournament Standards" },
|
||||
{ icon: Broadcast, text: "Professional Setup" },
|
||||
{ icon: Gamepad2, text: "Top-tier equipment" },
|
||||
{ icon: Zap, text: "Ultra-fast connectivity" },
|
||||
{ icon: Trophy, text: "Professional grade" },
|
||||
],
|
||||
reverse: true,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Community-Centered Events",
|
||||
description: "Esports thrives on community. We host weekly tournaments, skill-development sessions, and social gaming nights. Our Discord community has 500+ active members, creating networking opportunities and fostering genuine friendships among gamers.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/group-friends-looking-restaurant-menu_23-2150520104.jpg",
|
||||
id: "3", title: "Community & Tournaments", description: "Today, M80 Esports hosts hundreds of tournaments annually, fostering a thriving esports community. We've become the go-to place for casual gamers and professional competitors alike.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hispanic-young-man-playing-video-games-smiling-happy-pointing-with-hand-finger_839833-9111.jpg?_wi=1"
|
||||
},
|
||||
items: [
|
||||
{ icon: Trophy, text: "Weekly Tournaments" },
|
||||
{ icon: Gamepad2, text: "Skill Development" },
|
||||
{ icon: Users, text: "Social Networking" },
|
||||
{ icon: Users, text: "1000+ active members" },
|
||||
{ icon: Trophy, text: "50+ monthly tournaments" },
|
||||
{ icon: Zap, text: "Championship prizes" },
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
@@ -135,15 +126,45 @@ export default function AboutPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
title="Community Speaks"
|
||||
description="Hear what makes M80 Esports special from our members"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Arjun Sharma", handle: "@valorant_pro_in", testimonial: "M80 changed my gaming life. The environment, the equipment, the people - everything is perfect. Best investment in my esports journey!", imageSrc: "http://img.b2bpic.net/free-photo/young-man-posing-grey-wall_114579-30626.jpg?_wi=1", imageAlt: "Arjun Sharma"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Priya Patel", handle: "@gaming_queen_bangalore", testimonial: "As a female gamer, I felt so welcome and supported here. M80 Esports is creating an inclusive gaming community that everyone can be proud of.", imageSrc: "http://img.b2bpic.net/free-photo/woman-standing-with-arms-crossed_23-2147678138.jpg?_wi=1", imageAlt: "Priya Patel"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Rohan Verma", handle: "@esports_streamer", testimonial: "The streaming infrastructure here is incredible. I've grown my channel significantly since starting to stream from M80. Highly recommend!", imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-man-listening-music-earbuds-outside_23-2148381755.jpg", imageAlt: "Rohan Verma"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Aisha Khan", handle: "@fps_gamer_aisha", testimonial: "M80 isn't just a gaming cafe - it's a second home for gamers. The tournaments here are fierce and the community is amazing!", imageSrc: "http://img.b2bpic.net/free-photo/carefree-bearded-man-has-fun-enjoys-favorite-music-makes-yes-gesture-keeps-arms-raised-dances_273609-52492.jpg", imageAlt: "Aisha Khan"
|
||||
},
|
||||
{
|
||||
id: "5", name: "Vikram Desai", handle: "@competitive_gamer", testimonial: "Been with M80 since day one. Watching it grow into Bangalore's premier gaming hub has been incredible. Can't wait to see what's next!", imageSrc: "http://img.b2bpic.net/free-photo/young-man-posing-grey-wall_114579-30626.jpg?_wi=2", imageAlt: "Vikram Desai"
|
||||
},
|
||||
{
|
||||
id: "6", name: "Neha Gupta", handle: "@casual_gamer_life", testimonial: "I'm not a professional gamer, but M80 made me feel like one. The support and facilities here inspire me every time I visit.", imageSrc: "http://img.b2bpic.net/free-photo/woman-standing-with-arms-crossed_23-2147678138.jpg?_wi=2", imageAlt: "Neha Gupta"
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
text="Ready to be part of M80 Esports? Connect with our community, book your gaming session, or reach out with any questions. We're here to help you level up!"
|
||||
text="Ready to be part of the M80 Esports family? Visit us today and experience gaming like never before!"
|
||||
animationType="entrance-slide"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Visit Us", href: "https://maps.google.com/?q=17/A+3rd+Floor+Samruthi+Nest+New+BEL+Road+Bangalore" },
|
||||
{ text: "Contact Us", href: "contact" },
|
||||
{ text: "Book Your Session", href: "https://wa.me/917022946056" },
|
||||
{ text: "Get Directions", href: "https://maps.google.com/?q=M80+Esports+Gaming+Cafe+RMV+Extension+Bangalore" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -157,4 +178,4 @@ export default function AboutPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,58 +1,45 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import HeroCentered from "@/components/sections/hero/HeroCentered";
|
||||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Zap,
|
||||
Gauge,
|
||||
Lightbulb,
|
||||
Gamepad2,
|
||||
Trophy,
|
||||
Broadcast,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import { Zap, Gauge, Lightbulb, Monitor, Headphones, Keyboard } from "lucide-react";
|
||||
|
||||
export default function GamingSetupPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Gaming Setup", id: "/gaming-setup" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Tournaments", id: "tournaments" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Pricing", id: "/pricing" },
|
||||
{ name: "Tournaments", id: "/tournaments" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Gaming Experience",
|
||||
items: [
|
||||
title: "Gaming Experience", items: [
|
||||
{ label: "Gaming Setup", href: "/gaming-setup" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
{ label: "Pricing", href: "/pricing" },
|
||||
{ label: "Book Session", href: "https://wa.me/917022946056" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Community",
|
||||
items: [
|
||||
{ label: "Tournaments", href: "#tournaments" },
|
||||
title: "Community", items: [
|
||||
{ label: "Tournaments", href: "/tournaments" },
|
||||
{ label: "Discord Server", href: "https://discord.gg" },
|
||||
{ label: "Instagram", href: "https://instagram.com" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
title: "Contact", items: [
|
||||
{ label: "Phone: +91 70229 46056", href: "tel:+917022946056" },
|
||||
{ label: "WhatsApp", href: "https://wa.me/917022946056" },
|
||||
{ label: "Email Support", href: "mailto:info@m80esports.com" },
|
||||
{
|
||||
label: "Get Directions",
|
||||
href: "https://maps.google.com/?q=17/A+3rd+Floor+Samruthi+Nest+New+BEL+Road+Bangalore",
|
||||
},
|
||||
{ label: "Get Directions", href: "https://maps.google.com/?q=17/A+3rd+Floor+Samruthi+Nest+New+BEL+Road+Bangalore" },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -74,40 +61,41 @@ export default function GamingSetupPage() {
|
||||
<NavbarStyleApple brandName="M80 Esports" navItems={navItems} />
|
||||
</div>
|
||||
|
||||
<div id="gaming-setup-showcase" data-section="gaming-setup-showcase">
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
title="Experience Gaming at Its Peak"
|
||||
description="Explore our premium gaming setups engineered for champions. From high-performance PCs to professional racing simulators, we've got the ultimate setup for every gamer."
|
||||
background={{ variant: "downward-rays-animated-grid" }}
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-man-posing-grey-wall_114579-30626.jpg", alt: "Gamer 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/woman-standing-with-arms-crossed_23-2147678138.jpg", alt: "Gamer 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/front-view-young-man-listening-music-earbuds-outside_23-2148381755.jpg", alt: "Gamer 3" },
|
||||
]}
|
||||
avatarText="Premium gaming rigs optimized for performance"
|
||||
buttons={[
|
||||
{ text: "Book Your Setup", href: "https://wa.me/917022946056" },
|
||||
{ text: "View Pricing", href: "/pricing" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="setups" data-section="setups">
|
||||
<ProductCardFour
|
||||
title="Our Gaming Setups"
|
||||
description="Discover each gaming station configuration designed for different gaming preferences and competitive requirements"
|
||||
tag="Premium Rigs"
|
||||
products={[
|
||||
{
|
||||
id: "gaming-pc",
|
||||
name: "High-End Gaming PC Stations",
|
||||
price: "₹500/hour",
|
||||
variant: "RTX 4080 | 360Hz Monitors",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/professional-gamer-playing-first-person-shooter-online-video-game-powerful-personal-computer-with-colorful-neon-led-lights-cyber-performing-pc-stylish-room-gaming-tournament_482257-13303.jpg?_wi=3",
|
||||
imageAlt: "High-performance gaming PC setup",
|
||||
id: "gaming-pc", name: "High-End Gaming PC Stations", price: "₹500/hour", variant: "RTX 4080 | 360Hz Monitors", imageSrc: "http://img.b2bpic.net/free-photo/professional-gamer-playing-first-person-shooter-online-video-game-powerful-personal-computer-with-colorful-neon-led-lights-cyber-performing-pc-stylish-room-gaming-tournament_482257-13303.jpg?_wi=1", imageAlt: "High-performance gaming PC setup"
|
||||
},
|
||||
{
|
||||
id: "racing-sim",
|
||||
name: "Professional Racing Simulator",
|
||||
price: "₹400/hour",
|
||||
variant: "Force Feedback Wheel | Surround Sound",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/medium-shot-victorious-gamer-desk_23-2149350004.jpg?_wi=3",
|
||||
imageAlt: "Professional racing simulator cockpit",
|
||||
id: "racing-sim", name: "Professional Racing Simulator", price: "₹400/hour", variant: "Force Feedback Wheel | Surround Sound", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-victorious-gamer-desk_23-2149350004.jpg?_wi=1", imageAlt: "Professional racing simulator cockpit"
|
||||
},
|
||||
{
|
||||
id: "ps5-station",
|
||||
name: "PS5 Multiplayer Gaming",
|
||||
price: "₹300/hour",
|
||||
variant: "4K Display | Comfortable Seating",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/boyfriend-learning-his-girlfriend-play-video-games-television-using-controllers-couple-sitting-couch_482257-26568.jpg?_wi=2",
|
||||
imageAlt: "PS5 gaming station setup",
|
||||
id: "ps5-station", name: "PS5 Multiplayer Gaming", price: "₹300/hour", variant: "4K Display | Comfortable Seating", imageSrc: "http://img.b2bpic.net/free-photo/boyfriend-learning-his-girlfriend-play-video-games-television-using-controllers-couple-sitting-couch_482257-26568.jpg?_wi=1", imageAlt: "PS5 gaming station setup"
|
||||
},
|
||||
]}
|
||||
title="Premium Gaming Experiences"
|
||||
description="Explore our world-class gaming setups designed for competitive play and casual entertainment"
|
||||
tag="Our Arsenal"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
@@ -115,76 +103,61 @@ export default function GamingSetupPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gaming-rigs-details" data-section="gaming-rigs-details">
|
||||
<div id="specs" data-section="specs">
|
||||
<FeatureCardTen
|
||||
title="Technical Specifications"
|
||||
description="Detailed breakdown of our gaming infrastructure and equipment quality"
|
||||
tag="Performance Details"
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "High-Performance Gaming Rigs",
|
||||
description:
|
||||
"Equipped with RTX 4080 GPUs, Intel i9 processors, and 360Hz monitors for ultra-competitive gaming. Every station is optimized for the latest AAA titles and esports games.",
|
||||
media: {
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/professional-gamer-playing-first-person-shooter-online-video-game-powerful-personal-computer-with-colorful-neon-led-lights-cyber-performing-pc-stylish-room-gaming-tournament_482257-13303.jpg?_wi=4",
|
||||
id: "1", title: "PC Specifications", description: "Our high-end gaming PCs are equipped with the latest components ensuring smooth gameplay at maximum settings and competitive frame rates for esports titles.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-gamer-playing-first-person-shooter-online-video-game-powerful-personal-computer-with-colorful-neon-led-lights-cyber-performing-pc-stylish-room-gaming-tournament_482257-13303.jpg?_wi=2"
|
||||
},
|
||||
items: [
|
||||
{ icon: Zap, text: "RTX 4080 Graphics" },
|
||||
{ icon: Gauge, text: "360Hz Refresh Rate" },
|
||||
{ icon: Lightbulb, text: "RGB Gaming Aesthetic" },
|
||||
{ icon: Zap, text: "RTX 4080 GPU" },
|
||||
{ icon: Gauge, text: "Intel i9 Processor" },
|
||||
{ icon: Lightbulb, text: "64GB RAM" },
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Racing Simulator Experience",
|
||||
description:
|
||||
"Professional-grade racing simulator with force feedback technology, multiple track options, and realistic physics. Perfect for racing enthusiasts and competitive sim racing tournaments.",
|
||||
media: {
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/medium-shot-victorious-gamer-desk_23-2149350004.jpg?_wi=4",
|
||||
id: "2", title: "Display & Peripherals", description: "Crystal-clear visuals with 360Hz monitors and professional-grade peripherals for precision gaming. RGB lighting and ergonomic design for extended gaming sessions.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-victorious-gamer-desk_23-2149350004.jpg?_wi=2"
|
||||
},
|
||||
items: [
|
||||
{ icon: Gauge, text: "Force Feedback Wheel" },
|
||||
{ icon: Gamepad2, text: "Realistic Physics Engine" },
|
||||
{ icon: Trophy, text: "Tournament Ready" },
|
||||
{ icon: Monitor, text: "360Hz Monitors" },
|
||||
{ icon: Keyboard, text: "Mechanical Keyboards" },
|
||||
{ icon: Headphones, text: "Pro Headsets" },
|
||||
],
|
||||
reverse: true,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Competitive Esports Arena",
|
||||
description:
|
||||
"Dedicated tournament space with professional streaming setup, spectator screens, and commentary booths. Host weekly tournaments for Valorant, CS2, and other competitive titles.",
|
||||
media: {
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/hispanic-young-man-playing-video-games-smiling-happy-pointing-with-hand-finger_839833-9111.jpg?_wi=2",
|
||||
id: "3", title: "Connectivity & Infrastructure", description: "Fiber-optic internet with dedicated bandwidth ensures zero latency and stable connections for competitive gaming and tournaments.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hispanic-young-man-playing-video-games-smiling-happy-pointing-with-hand-finger_839833-9111.jpg?_wi=1"
|
||||
},
|
||||
items: [
|
||||
{ icon: Broadcast, text: "Professional Streaming" },
|
||||
{ icon: Users, text: "Spectator Areas" },
|
||||
{ icon: Trophy, text: "Tournament Prizes" },
|
||||
{ icon: Zap, text: "1000Mbps Internet" },
|
||||
{ icon: Gauge, text: "Dedicated Bandwidth" },
|
||||
{ icon: Lightbulb, text: "Tournament Network" },
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
]}
|
||||
title="Why Choose M80 Esports"
|
||||
description="Experience the pinnacle of gaming infrastructure combined with genuine community atmosphere"
|
||||
tag="Premium Experience"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="setup-cta" data-section="setup-cta">
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
text="Ready to book your gaming session? Reserve your premium gaming station at M80 Esports now!"
|
||||
text="Ready to experience premium gaming? Book your gaming session at M80 Esports today and unleash your gaming potential!"
|
||||
animationType="entrance-slide"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Book Now", href: "https://wa.me/917022946056" },
|
||||
{ text: "View Pricing", href: "/#pricing" },
|
||||
{ text: "Check Pricing", href: "/pricing" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -198,4 +171,4 @@ export default function GamingSetupPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,23 +17,23 @@ import { Zap, Gauge, Lightbulb, Gamepad2, Trophy, Radio, Users, Flame, Crown, Gr
|
||||
export default function HomePage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Gaming Setup", id: "gaming-setup" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Tournaments", id: "tournaments" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Gaming Setup", id: "/gaming-setup" },
|
||||
{ name: "Pricing", id: "/pricing" },
|
||||
{ name: "Tournaments", id: "/tournaments" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Gaming Experience", items: [
|
||||
{ label: "Gaming Setup", href: "/gaming-setup" },
|
||||
{ label: "Pricing", href: "/pricing" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
{ label: "Book Session", href: "https://wa.me/917022946056" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Community", items: [
|
||||
{ label: "Tournaments", href: "/tournaments" },
|
||||
{ label: "Tournaments", href: "#tournaments" },
|
||||
{ label: "Discord Server", href: "https://discord.gg" },
|
||||
{ label: "Instagram", href: "https://instagram.com" },
|
||||
],
|
||||
@@ -44,7 +44,8 @@ export default function HomePage() {
|
||||
{ label: "WhatsApp", href: "https://wa.me/917022946056" },
|
||||
{ label: "Email Support", href: "mailto:info@m80esports.com" },
|
||||
{
|
||||
label: "Get Directions", href: "https://maps.google.com/?q=17/A+3rd+Floor+Samruthi+Nest+New+BEL+Road+Bangalore"},
|
||||
label: "Get Directions", href: "https://maps.google.com/?q=17/A+3rd+Floor+Samruthi+Nest+New+BEL+Road+Bangalore"
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -78,8 +79,8 @@ export default function HomePage() {
|
||||
]}
|
||||
avatarText="Join 1000+ active gamers | 50+ weekly tournaments"
|
||||
buttons={[
|
||||
{ text: "Book Your Session", href: "contact" },
|
||||
{ text: "Explore Gaming Setups", href: "gaming-setup" },
|
||||
{ text: "Book Your Session", href: "#contact" },
|
||||
{ text: "Explore Gaming Setups", href: "/gaming-setup" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
@@ -92,11 +93,14 @@ export default function HomePage() {
|
||||
tag="Our Arsenal"
|
||||
products={[
|
||||
{
|
||||
id: "gaming-pc", name: "High-End Gaming PC Stations", price: "₹500/hour", variant: "RTX 4080 | 360Hz Monitors", imageSrc: "http://img.b2bpic.net/free-photo/professional-gamer-playing-first-person-shooter-online-video-game-powerful-personal-computer-with-colorful-neon-led-lights-cyber-performing-pc-stylish-room-gaming-tournament_482257-13303.jpg?_wi=1", imageAlt: "High-performance gaming PC setup"},
|
||||
id: "gaming-pc", name: "High-End Gaming PC Stations", price: "₹500/hour", variant: "RTX 4080 | 360Hz Monitors", imageSrc: "http://img.b2bpic.net/free-photo/professional-gamer-playing-first-person-shooter-online-video-game-powerful-personal-computer-with-colorful-neon-led-lights-cyber-performing-pc-stylish-room-gaming-tournament_482257-13303.jpg?_wi=1", imageAlt: "High-performance gaming PC setup"
|
||||
},
|
||||
{
|
||||
id: "racing-sim", name: "Professional Racing Simulator", price: "₹400/hour", variant: "Force Feedback Wheel | Surround Sound", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-victorious-gamer-desk_23-2149350004.jpg?_wi=1", imageAlt: "Professional racing simulator cockpit"},
|
||||
id: "racing-sim", name: "Professional Racing Simulator", price: "₹400/hour", variant: "Force Feedback Wheel | Surround Sound", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-victorious-gamer-desk_23-2149350004.jpg?_wi=1", imageAlt: "Professional racing simulator cockpit"
|
||||
},
|
||||
{
|
||||
id: "ps5-station", name: "PS5 Multiplayer Gaming", price: "₹300/hour", variant: "4K Display | Comfortable Seating", imageSrc: "http://img.b2bpic.net/free-photo/boyfriend-learning-his-girlfriend-play-video-games-television-using-controllers-couple-sitting-couch_482257-26568.jpg?_wi=1", imageAlt: "PS5 gaming station setup"},
|
||||
id: "ps5-station", name: "PS5 Multiplayer Gaming", price: "₹300/hour", variant: "4K Display | Comfortable Seating", imageSrc: "http://img.b2bpic.net/free-photo/boyfriend-learning-his-girlfriend-play-video-games-television-using-controllers-couple-sitting-couch_482257-26568.jpg?_wi=1", imageAlt: "PS5 gaming station setup"
|
||||
},
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
textboxLayout="default"
|
||||
@@ -113,7 +117,8 @@ export default function HomePage() {
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "High-Performance Gaming Rigs", description: "Equipped with RTX 4080 GPUs, Intel i9 processors, and 360Hz monitors for ultra-competitive gaming. Every station is optimized for the latest AAA titles and esports games.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-gamer-playing-first-person-shooter-online-video-game-powerful-personal-computer-with-colorful-neon-led-lights-cyber-performing-pc-stylish-room-gaming-tournament_482257-13303.jpg?_wi=2"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-gamer-playing-first-person-shooter-online-video-game-powerful-personal-computer-with-colorful-neon-led-lights-cyber-performing-pc-stylish-room-gaming-tournament_482257-13303.jpg?_wi=2"
|
||||
},
|
||||
items: [
|
||||
{ icon: Zap, text: "RTX 4080 Graphics" },
|
||||
{ icon: Gauge, text: "360Hz Refresh Rate" },
|
||||
@@ -123,7 +128,8 @@ export default function HomePage() {
|
||||
},
|
||||
{
|
||||
id: "2", title: "Racing Simulator Experience", description: "Professional-grade racing simulator with force feedback technology, multiple track options, and realistic physics. Perfect for racing enthusiasts and competitive sim racing tournaments.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-victorious-gamer-desk_23-2149350004.jpg?_wi=2"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-victorious-gamer-desk_23-2149350004.jpg?_wi=2"
|
||||
},
|
||||
items: [
|
||||
{ icon: Gauge, text: "Force Feedback Wheel" },
|
||||
{ icon: Gamepad2, text: "Realistic Physics Engine" },
|
||||
@@ -133,7 +139,8 @@ export default function HomePage() {
|
||||
},
|
||||
{
|
||||
id: "3", title: "Competitive Esports Arena", description: "Dedicated tournament space with professional streaming setup, spectator screens, and commentary booths. Host weekly tournaments for Valorant, CS2, and other competitive titles.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hispanic-young-man-playing-video-games-smiling-happy-pointing-with-hand-finger_839833-9111.jpg?_wi=1"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hispanic-young-man-playing-video-games-smiling-happy-pointing-with-hand-finger_839833-9111.jpg?_wi=1"
|
||||
},
|
||||
items: [
|
||||
{ icon: Radio, text: "Professional Streaming" },
|
||||
{ icon: Users, text: "Spectator Areas" },
|
||||
@@ -156,22 +163,26 @@ export default function HomePage() {
|
||||
plans={[
|
||||
{
|
||||
id: "casual", badge: "Casual Players", price: "₹250/hr", subtitle: "Perfect for first-timers and casual gaming", features: [
|
||||
"Access to gaming stations", "Standard PC or PS5 gaming", "Comfortable gaming chair", "High-speed internet"],
|
||||
"Access to gaming stations", "Standard PC or PS5 gaming", "Comfortable gaming chair", "High-speed internet"
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "competitive", badge: "Most Popular", badgeIcon: Flame,
|
||||
price: "₹500/hr", subtitle: "Best for serious competitive gamers", features: [
|
||||
"Premium gaming rig access", "RTX 4080 + 360Hz monitor", "Dedicated station reservation", "Priority tournament registration", "Exclusive community access"],
|
||||
"Premium gaming rig access", "RTX 4080 + 360Hz monitor", "Dedicated station reservation", "Priority tournament registration", "Exclusive community access"
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "premium", badge: "VIP Experience", badgeIcon: Crown,
|
||||
price: "₹150/month", subtitle: "Unlimited access and exclusive perks", features: [
|
||||
"Unlimited hourly sessions", "Reserved premium station", "Free tournament entries", "VIP lounge access", "Gaming coach consultations", "Exclusive merchandise"],
|
||||
"Unlimited hourly sessions", "Reserved premium station", "Free tournament entries", "VIP lounge access", "Gaming coach consultations", "Exclusive merchandise"
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "student", badge: "Student Offer", badgeIcon: GraduationCap,
|
||||
price: "₹350/hr", subtitle: "Special rate for college students", features: [
|
||||
"High-end gaming PC access", "Valid student ID required", "Group discounts available", "Weekend special rates"],
|
||||
"High-end gaming PC access", "Valid student ID required", "Group discounts available", "Weekend special rates"
|
||||
],
|
||||
},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
@@ -214,17 +225,23 @@ export default function HomePage() {
|
||||
animationType="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Arjun Sharma", handle: "@valorant_pro_in", testimonial: "Great place and atmosphere, perfect for spending quality time with friends while competitive gaming. The rigs are insanely fast and the staff is super supportive!", imageSrc: "http://img.b2bpic.net/free-photo/young-man-posing-grey-wall_114579-30626.jpg?_wi=1", imageAlt: "Arjun Sharma"},
|
||||
id: "1", name: "Arjun Sharma", handle: "@valorant_pro_in", testimonial: "Great place and atmosphere, perfect for spending quality time with friends while competitive gaming. The rigs are insanely fast and the staff is super supportive!", imageSrc: "http://img.b2bpic.net/free-photo/young-man-posing-grey-wall_114579-30626.jpg?_wi=1", imageAlt: "Arjun Sharma"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Priya Patel", handle: "@gaming_queen_bangalore", testimonial: "Very good ambience, decent pricing and extremely good customer care. This is my go-to place for gaming sessions. The community here is welcoming and fun!", imageSrc: "http://img.b2bpic.net/free-photo/woman-standing-with-arms-crossed_23-2147678138.jpg?_wi=1", imageAlt: "Priya Patel"},
|
||||
id: "2", name: "Priya Patel", handle: "@gaming_queen_bangalore", testimonial: "Very good ambience, decent pricing and extremely good customer care. This is my go-to place for gaming sessions. The community here is welcoming and fun!", imageSrc: "http://img.b2bpic.net/free-photo/woman-standing-with-arms-crossed_23-2147678138.jpg?_wi=1", imageAlt: "Priya Patel"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Rohan Verma", handle: "@esports_streamer", testimonial: "Electric vibe, top-notch rigs, and friendly staff. M80 Esports is the real deal for competitive gaming. Hosting my tournament here was an absolute blast!", imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-man-listening-music-earbuds-outside_23-2148381755.jpg", imageAlt: "Rohan Verma"},
|
||||
id: "3", name: "Rohan Verma", handle: "@esports_streamer", testimonial: "Electric vibe, top-notch rigs, and friendly staff. M80 Esports is the real deal for competitive gaming. Hosting my tournament here was an absolute blast!", imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-man-listening-music-earbuds-outside_23-2148381755.jpg", imageAlt: "Rohan Verma"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Aisha Khan", handle: "@fps_gamer_aisha", testimonial: "The gaming experience here is unmatched. Premium equipment, professional environment, and amazing community. Definitely the best gaming cafe in Bangalore!", imageSrc: "http://img.b2bpic.net/free-photo/carefree-bearded-man-has-fun-enjoys-favorite-music-makes-yes-gesture-keeps-arms-raised-dances_273609-52492.jpg", imageAlt: "Aisha Khan"},
|
||||
id: "4", name: "Aisha Khan", handle: "@fps_gamer_aisha", testimonial: "The gaming experience here is unmatched. Premium equipment, professional environment, and amazing community. Definitely the best gaming cafe in Bangalore!", imageSrc: "http://img.b2bpic.net/free-photo/carefree-bearded-man-has-fun-enjoys-favorite-music-makes-yes-gesture-keeps-arms-raised-dances_273609-52492.jpg", imageAlt: "Aisha Khan"
|
||||
},
|
||||
{
|
||||
id: "5", name: "Vikram Desai", handle: "@competitive_gamer", testimonial: "M80 Esports has everything a serious gamer needs. From casual hangouts to competitive tournaments, this place delivers excellence in every aspect. Highly recommended!", imageSrc: "http://img.b2bpic.net/free-photo/young-man-posing-grey-wall_114579-30626.jpg?_wi=2", imageAlt: "Vikram Desai"},
|
||||
id: "5", name: "Vikram Desai", handle: "@competitive_gamer", testimonial: "M80 Esports has everything a serious gamer needs. From casual hangouts to competitive tournaments, this place delivers excellence in every aspect. Highly recommended!", imageSrc: "http://img.b2bpic.net/free-photo/young-man-posing-grey-wall_114579-30626.jpg?_wi=2", imageAlt: "Vikram Desai"
|
||||
},
|
||||
{
|
||||
id: "6", name: "Neha Gupta", handle: "@casual_gamer_life", testimonial: "Perfect destination for gaming enthusiasts of all levels. The atmosphere is energetic, the equipment is premium, and the people are genuinely nice. Love it here!", imageSrc: "http://img.b2bpic.net/free-photo/woman-standing-with-arms-crossed_23-2147678138.jpg?_wi=2", imageAlt: "Neha Gupta"},
|
||||
id: "6", name: "Neha Gupta", handle: "@casual_gamer_life", testimonial: "Perfect destination for gaming enthusiasts of all levels. The atmosphere is energetic, the equipment is premium, and the people are genuinely nice. Love it here!", imageSrc: "http://img.b2bpic.net/free-photo/woman-standing-with-arms-crossed_23-2147678138.jpg?_wi=2", imageAlt: "Neha Gupta"
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -238,21 +255,29 @@ export default function HomePage() {
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "What are the operating hours?", content: "M80 Esports is open daily and closes at 10 PM. We're open from early morning to late evening to accommodate both casual and competitive gamers. For specific opening times on holidays, please check our Discord community or call us at +91 70229 46056."},
|
||||
id: "1", title: "What are the operating hours?", content: "M80 Esports is open daily and closes at 10 PM. We're open from early morning to late evening to accommodate both casual and competitive gamers. For specific opening times on holidays, please check our Discord community or call us at +91 70229 46056."
|
||||
},
|
||||
{
|
||||
id: "2", title: "How do I book a gaming session?", content: "You can book your gaming session directly through our website, via WhatsApp at +91 70229 46056, or walk-in at our cafe. We recommend online booking during peak hours to secure your preferred gaming station and time slot."},
|
||||
id: "2", title: "How do I book a gaming session?", content: "You can book your gaming session directly through our website, via WhatsApp at +91 70229 46056, or walk-in at our cafe. We recommend online booking during peak hours to secure your preferred gaming station and time slot."
|
||||
},
|
||||
{
|
||||
id: "3", title: "What games are available?", content: "We support all major titles including Valorant, Counter-Strike 2, PUBG, Dota 2, FIFA, and many more. Our PCs are optimized for competitive gaming with high refresh rates and minimal latency. We also have racing simulators and PS5 stations for console gaming."},
|
||||
id: "3", title: "What games are available?", content: "We support all major titles including Valorant, Counter-Strike 2, PUBG, Dota 2, FIFA, and many more. Our PCs are optimized for competitive gaming with high refresh rates and minimal latency. We also have racing simulators and PS5 stations for console gaming."
|
||||
},
|
||||
{
|
||||
id: "4", title: "Do you offer food and beverages?", content: "Yes! We offer energy drinks, soft drinks, and quick snacks perfect for gaming sessions. Our menu includes energy drinks to keep you refreshed during competitive play, soft drinks, and quick bites. We also allow external food in most cases."},
|
||||
id: "4", title: "Do you offer food and beverages?", content: "Yes! We offer energy drinks, soft drinks, and quick snacks perfect for gaming sessions. Our menu includes energy drinks to keep you refreshed during competitive play, soft drinks, and quick bites. We also allow external food in most cases."
|
||||
},
|
||||
{
|
||||
id: "5", title: "How can I participate in tournaments?", content: "Visit the Tournaments & Events page on our website to see upcoming competitions, or join our Discord community for registration details. We host weekly tournaments with prize pools. Student and group discounts are available!"},
|
||||
id: "5", title: "How can I participate in tournaments?", content: "Visit the Tournaments & Events page on our website to see upcoming competitions, or join our Discord community for registration details. We host weekly tournaments with prize pools. Student and group discounts are available!"
|
||||
},
|
||||
{
|
||||
id: "6", title: "What are the student discounts?", content: "Students get a special rate of ₹350/hour on our premium gaming stations. Valid student ID is required. Group discounts are also available for college gaming clubs and friend groups. Contact us for bulk booking rates."},
|
||||
id: "6", title: "What are the student discounts?", content: "Students get a special rate of ₹350/hour on our premium gaming stations. Valid student ID is required. Group discounts are also available for college gaming clubs and friend groups. Contact us for bulk booking rates."
|
||||
},
|
||||
{
|
||||
id: "7", title: "Is there a membership plan?", content: "Yes! Our VIP membership at ₹150/month gives you unlimited gaming access, a reserved premium station, free tournament entries, and exclusive benefits. It's perfect for regular gamers who want to level up their experience."},
|
||||
id: "7", title: "Is there a membership plan?", content: "Yes! Our VIP membership at ₹150/month gives you unlimited gaming access, a reserved premium station, free tournament entries, and exclusive benefits. It's perfect for regular gamers who want to level up their experience."
|
||||
},
|
||||
{
|
||||
id: "8", title: "Can I stream from your cafe?", content: "Absolutely! We have professional streaming setup available. Contact our staff about streaming options. Our tournament stations are equipped for live streaming with high-speed internet and spectator screens."},
|
||||
id: "8", title: "Can I stream from your cafe?", content: "Absolutely! We have professional streaming setup available. Contact our staff about streaming options. Our tournament stations are equipped for live streaming with high-speed internet and spectator screens."
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -279,4 +304,4 @@ export default function HomePage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,51 +1,58 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import { memo } from "react";
|
||||
import useSvgTextLogo from "./useSvgTextLogo";
|
||||
import { cls } from "@/lib/utils";
|
||||
import * as React from 'react';
|
||||
|
||||
interface SvgTextLogoProps {
|
||||
logoText: string;
|
||||
adjustHeightFactor?: number;
|
||||
verticalAlign?: "top" | "center";
|
||||
text: string;
|
||||
width?: number;
|
||||
height?: number;
|
||||
fontSize?: number;
|
||||
fontFamily?: string;
|
||||
fontWeight?: number | string;
|
||||
fill?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
|
||||
logoText,
|
||||
adjustHeightFactor,
|
||||
verticalAlign = "top",
|
||||
className = "",
|
||||
}) {
|
||||
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
|
||||
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={viewBox}
|
||||
className={cls("w-full", className)}
|
||||
style={{ aspectRatio: aspectRatio }}
|
||||
preserveAspectRatio="none"
|
||||
role="img"
|
||||
aria-label={`${logoText} logo`}
|
||||
>
|
||||
<text
|
||||
ref={textRef}
|
||||
x="0"
|
||||
y={verticalAlign === "center" ? "50%" : "0"}
|
||||
className="font-bold fill-current"
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
letterSpacing: "-0.02em",
|
||||
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
|
||||
}}
|
||||
const SvgTextLogo = React.forwardRef<SVGSVGElement, SvgTextLogoProps>(
|
||||
(
|
||||
{
|
||||
text,
|
||||
width = 300,
|
||||
height = 100,
|
||||
fontSize = 48,
|
||||
fontFamily = 'system-ui, -apple-system, sans-serif',
|
||||
fontWeight = 700,
|
||||
fill = 'currentColor',
|
||||
className = '',
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
return (
|
||||
<svg
|
||||
ref={ref}
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={`0 0 ${width} ${height}`}
|
||||
className={className}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
{logoText}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
<text
|
||||
x="50%"
|
||||
y="50%"
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
fontSize={fontSize}
|
||||
fontFamily={fontFamily}
|
||||
fontWeight={fontWeight}
|
||||
fill={fill}
|
||||
>
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
SvgTextLogo.displayName = 'SvgTextLogo';
|
||||
|
||||
export default SvgTextLogo;
|
||||
|
||||
Reference in New Issue
Block a user