Here is a comprehensive, concrete project overview and strategy for Dueces Skating Rink, utilizing the mobile-business-theme framework. This document bridges Tyler’s specific business pain points with the exact technical scope required to solve them.
Project Strategy & Overview: Dueces Skating Rink
Executive Summary
Dueces Skating Rink is an innovative, black-owned mobile skating rink business experiencing steady consumer growth in the Broward/Dade area. However, the business faces critical bottlenecks in B2B operations: prospective sponsors, corporate partners, local vendors, and municipal governments frequently “ghost” outreach or fail to recognize the brand’s immense local value.
To solve this, we are deploying the mobile-business-theme framework. The website will serve a dual purpose: acting as a premium, high-end digital storefront that drives consumer/corporate bookings via an integrated Jotform workflow, while functioning as an authoritative B2B “Sponsor Magnet” that commands institutional credibility.
Core Strategy Pillars
1. From “Hobby” to “Enterprise” Authority
To stop the partner ghosting, the digital presence must look incredibly polished, safe, and heavily backed by data. We will position Dueces Skating Rink not just as “a fun weekend activity,” but as a high-impact community asset and a premium mobile venue provider.
2. High-Conversion Booking Flow (The Jotform Engine)
We will completely eliminate friction from the booking process by turning Tyler’s existing Jotform into the “North Star” of the user experience. The site will guide high-paying event planners (corporate milestones, schools, festival organizers) directly into this pre-existing operational funnel.
3. The Sponsor & Municipal Magnet
We will build a dedicated, data-driven B2B layer specifically to attract Broward/Dade county support, corporate sponsors, and local food vendors. By highlighting community metrics and explicit marketing ROI, we shift the dynamic from Tyler chasing partners to partners applying to work with him.
Technical Scope & Architecture
Theme Framework
- Base Shell:
mobile-business-theme - Configuration:
booking-and-sponsor-hub
Core Sitemap
- Homepage (
/): The Experiential Storefront. Cinematic video background showing crowds, heavy focus on social proof, and a distinct dual-CTA tracking to either Bookings or Partnerships. - Services & Packages (
/services): Explains technical capabilities (surface requirements, skate rentals, lighting/sound) and categorizes offerings (Corporate, Schools, Community Festivals). - The Booking Hub (
/book): A custom, distraction-free template natively wrapping Tyler’s optimized Jotform iframe, ensuring a seamless, responsive mobile application process. - Partnership Portal (
/partnerships): Explicitly lays out sponsorship tiers (Gold, Silver, Bronze) and includes a gated link to download the 2026 Media Kit PDF. - Vendor & Creator Applications (
/vendors): An inbound screening portal with an application form to capture and qualify food trucks and local influencers. - Community Impact (
/community-impact): Houses a WordPress Custom Post Type (CPT) for event case studies, explicitly highlighting local diversity, youth engagement, and municipal safety compliance to appeal to county officials.
Critical Lead Flows
The Consumer/Corporate Booking Flow
Plaintext
User Lands on Site ➔ Captivated by High-Energy Visuals ➔ Clicks "Request a Booking" CTA ➔ Directed to Distraction-Free /book/ Page ➔ Fills out Embedded Jotform ➔ Form Redirects to Theme /thank-you/ Page (Video from Tyler setting response expectations).
The B2B Sponsor Flow
Plaintext
Sponsor/City Official Lands on Site ➔ Clicks "Partner With Us" ➔ Views "By the Numbers" Grid & Case Studies ➔ Downloads Media Kit / Reviews Tiers ➔ Submits Corporate Inquiry Form ➔ Structured Lead sent directly to Tyler’s "Corporate Relations" inbox.
Success Metrics for Tyler
- Zero-Friction Inbound: Streamlining all incoming traffic straight into his existing Jotform workflow without manual email back-and-forth.
- Increased B2B Response Rate: Replacing cold, text-heavy outreach with a professional digital portfolio that proves immediate community footprint and audience ROI.
- Municipal Verification: Giving Broward/Dade county decision-makers a dedicated compliance and impact page that makes approving permits or local grants an easy “yes.”
The Critical Flow: Jotform Integration Scope
To make sure the Jotform feels like a seamless, premium part of the website (and not a cheap third-party afterthought), your theme should scope the following:
1. Dedicated Jotform Landing Page Template
- The Look: A distraction-free layout (minimal or hidden header/footer) specifically designed to house the embedded Jotform. This keeps the user focused entirely on completing the booking request without clicking away.
- The Tech: Responsive CSS wrappers ensuring the Jotform iframe scales flawlessly on mobile devices, preventing horizontal scrolling or cut-off submit buttons.
2. Multi-Point “Book Now” Anchors
- Instead of just one link, the theme will feature global, high-visibility buttons tracking to this Jotform flow:
- Header Navigation: A prominent, styled CTA button (e.g., “Request a Booking”).
- Homepage Hero: The primary action button immediately below the main tagline.
- Services Page Footer: A massive, high-energy closing section reading: “Ready to bring the rink to your next event? Fill out our official booking inquiry below.”
3. Smart Form Handoffs (Optional but Recommended)
- URL Parameter Passing: If his Jotform uses hidden fields to track where leads come from, scope the theme to pass data (like
?source=website_homepage) into the embed code so Tyler can track his marketing ROI. - Custom Thank You Redirect: Configure the Jotform to redirect users back to a custom
/thank-you/page built into the WordPress theme. This page can display a video from Tyler saying “Thanks for reaching out! Our team will review your asset requirements and get back to you within 24 hours,” instantly solving the “ghosting” feel by setting expectations.
Final Scoped Hierarchy for Your Notes
Plaintext
THEME FRAMEWORK: mobile-business-theme
=========================================================
└── MODULE: [Booking Engine & Lead Flow]
├── Integration Type: Third-Party Form Embed (Jotform)
├── Critical Path: Consumer/Corporate Client ➔ Clicks Global CTA ➔ Enters Distraction-Free Jotform Hub
├── UX Optimization: Fully responsive iframe wrappers + custom styled containers
└── Conversion Goal: Drive qualified RFQ (Request for Quote) submissions directly to Tyler's existing workflow
This keeps your theme incredibly lightweight, highly functional, and completely scalable for the next mobile business owner you onboard!
The core combination of Deep Plum (#561540) and Bright Teal (#2dcfd4) is excellent—it gives off an energetic, retro-modern, neon-skate-vibe while remaining grounded. However, relying purely on pure black, pure white, and these two intense hues can quickly make a layout look flat or visually exhausting.
To elevate this into a highly professional corporate brand palette, we need functional neutral colors that share a tiny hint of the brand’s DNA. Here is a balanced 6-color palette extension engineered specifically for this theme’s architecture.
The Dueces Skating Rink Professional Palette Blueprint
| Color Role | Hex Code | Visual Purpose / Use Case |
| Primary | #561540 | Dominant brand anchor. Used for the announcement bar, main headings, and primary hero sections. |
| Secondary (Accent) | #2dcfd4 | High-visibility attention grabber. Reserved for primary buttons, active link text decoration, and focal icons. |
| Dark Neutral (Text) | #1c1619 | Upgraded from pure black. A deep, premium char-plum. Using a near-black with a warm plum undertone prevents text contrast from looking clinical. |
| Light Neutral (Surface) | #fcfafb | Upgraded from pure white. A soft, tinted cream-white background. It takes away the blinding glare of a default browser screen while making images pop. |
| Supporting Border | #e1d6dc | A muted, mid-tone slate mauve. Essential for subtle borders, dividing lines, table rows, and disabled button states. |
| Secondary Background | #f3edf0 | A comfortable, soft tinted gray-plum. Perfect for alternating section background tracks, testimonial cards, or footer panels. |
Updated theme.json With The Professional Palette
Let’s plug these exact variables directly into your theme.json file. This updates your Gutenberg block palette options so you can easily reference them while building sections.
JSON
{
"$schema": "https://schemas.wp.org/wp/7.0/theme.json",
"version": 3,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "960px",
"wideSize": "1200px"
},
"color": {
"customPalette": false,
"palette": [
{
"slug": "primary",
"color": "#561540",
"name": "Brand Deep Plum"
},
{
"slug": "secondary",
"color": "#2dcfd4",
"name": "Brand Bright Teal"
},
{
"slug": "text",
"color": "#1c1619",
"name": "Text (Deep Charcoal-Plum)"
},
{
"slug": "background",
"color": "#fcfafb",
"name": "Background Base (Off-White)"
},
{
"slug": "surface-muted",
"color": "#f3edf0",
"name": "Surface Muted (Light Gray-Plum)"
},
{
"slug": "border",
"color": "#e1d6dc",
"name": "Borders & Accents"
}
]
},
"typography": {
"fontSizes": [
{
"slug": "small",
"size": "0.9rem",
"name": "Small"
},
{
"slug": "normal",
"size": "1.1rem",
"name": "Normal"
},
{
"slug": "large",
"size": "2.2rem",
"name": "Large"
}
],
"fontFamilies": [
{
"fontFamily": "\"Montserrat\", sans-serif",
"slug": "montserrat",
"name": "Montserrat",
"fontFace": [
{
"fontFamily": "Montserrat",
"fontWeight": "700",
"fontStyle": "normal",
"fontDisplay": "swap",
"src": [ "https://cdn.jsdelivr.net/npm/@fontsource/montserrat@5.0.0/files/montserrat-latin-700-normal.woff2" ]
}
]
},
{
"fontFamily": "\"Inter\", sans-serif",
"slug": "inter",
"name": "Inter",
"fontFace": [
{
"fontFamily": "Inter",
"fontWeight": "400",
"fontStyle": "normal",
"fontDisplay": "swap",
"src": [ "https://cdn.jsdelivr.net/npm/@fontsource/inter@5.0.0/files/inter-latin-400-normal.woff2" ]
}
]
}
]
},
"spacing": {
"units": ["px", "em", "rem", "%"],
"spacingScale": {
"steps": 0
}
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--background)",
"text": "var(--wp--preset--color--text)"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)",
"lineHeight": "1.6",
"fontSize": "var(--wp--preset--font-size--normal)"
},
"spacing": {
"padding": {
"top": "0px",
"bottom": "0px",
"left": "0px",
"right": "0px"
},
"blockGap": "1.75rem"
},
"elements": {
"heading": {
"color": "var(--wp--preset--color--primary)",
"typography": {
"fontFamily": "var(--wp--preset--font-family--montserrat)",
"lineHeight": "1.25",
"fontWeight": "700"
},
"spacing": {
"margin": {
"top": "0",
"bottom": "1.25rem"
}
}
},
"link": {
"color": "var(--wp--preset--color--primary)",
"typography": {
"textDecoration": "none"
},
":hover": {
"color": "var(--wp--preset--color--secondary)",
"typography": {
"textDecoration": "underline"
}
}
}
},
"blocks": {
"core/post-title": {
"css": "display: none !important;"
}
}
}
}
💡 What changed in the configuration settings?
- Brought in Harmonized Neutrals: Swapped out the raw black and pure white templates for the custom plum-tinted variants (
#1c1619and#fcfafb). - Added Block Utility Presets: Built out
surface-mutedandborderso you can style internal layout component blocks inside the WordPress site editor natively. - Optimized Global Link Hover Experience: Under
elements.link, I default-set links to your primary deep plum without underlines to match your current header aesthetic, but programmed a dynamic hover variable that shifts text to Teal with a clean underline whenever a cursor passes over it.
Save this updated code structure down, pull up your screen, and let’s check out how the background feels!
Frankensteining these layout structures together is exactly the right engineering mindset here. When building a block theme, treat your inner page templates as structured layouts, but treat the homepage hero banner as a high-impact, standalone stage to capture attention immediately.
Analyzing your references, we can map out exactly why your favorite works best and why the others miss the mark for Dueces.
The Breakdown of Your Options
image_8401ff.jpg(The Dark Experiential Aesthetic): This is your winner. It matches your exact color profile beautifully. Notice how the deep charcoal background keeps it clean and premium, while the bright teal border framing the section gives off an immersive, late-night roller rink vibe. The floating card component on the right acts as great social proof, and the bold, left-aligned typography cleanly organizes the main B2B conversion pathways (Partners | Vendors | Book).image_841142.jpg(The Gravity Off / Brutalist Minimalist Style): While visually striking, it is a nightmare to execute natively in a standard WordPress block engine without extensive absolute positioning and hardcoded text cutouts. More importantly, it leans heavily into a surreal fashion/creative course aesthetic rather than an active, local entertainment event space.image_84ee02.jpg(The Corporate Cartoon Style): This approach feels way too clinical, safe, and tech-focused. It strips out the nightlife, music, and physical energy that Tyler’s brand represents. It makes a skating rink look like a mobile calendar app.image_84fa1a.jpg(The Traditional Sports Slider): This offers a reliable structural foundation, but the execution feels a bit dated. The heavy text overlays and generic bottom ticker look more like a standard sports news blog than a premium mobile experience brand.
The Blueprint: Combining image_8401ff.jpg with the Noise-Filter Slider
To merge these styles smoothly, create a full-width block framework that layers a subtle film grain/noise SVG filter over your media assets.
Here is the block architecture to create this layout using native WordPress core elements:
Plaintext
[Cover Block (Full Width, Full Height)]
├── Background: [Media Slider / Gallery Loop Block]
├── Overlay Layer: [Subtle Dark Overlay + Custom Noise Filter CSS]
│
└── [Group Block (Constrained Layout Grid)]
└── [Columns Block (Split 60/40)]
├── Column 1 (Left - Heading & CTA Focus)
│ ├── [Heading Block: "BOLD CO-BRANDED STATEMENT"]
│ ├── [Paragraph Block: High-impact supporting text]
│ └── [Buttons Block: Inline Flex Buttons]
│ ├── Button 1: Partner With Us (Primary Plum/Teal)
│ ├── Button 2: Vendor Application (Outline Style)
│ └── Button 3: Book the Rink (High Visibility Accent)
│
└── Column 2 (Right - Immersive Floating Proof Component)
└── [Group Block (Custom CSS Wrapper for Floating Effect)]
├── [Image Block: Vibrantly lit crowd or skater photo]
└── [Paragraph/Rating Block: "100% worth attending"]
How to Implement This in Your Block Theme
To apply this specific style while keeping the rest of your core theme simple, inject a targeted custom utility class directly into the top of your layout styles:
JSON
"blocks": {
"core/post-title": {
"css": "display: none !important;"
},
"core/cover": {
"css": ".is-hero-noise::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.04; pointer-events: none; background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E\"); }"
}
}
Why This Fits the Brand Profile Perfectly
- The Noise Filter Override: The injected CSS overlay acts like an invisible matte layer over your gallery loop. It ties varying photo qualities together, giving everything a gritty, analog film aesthetic that fits a skate brand perfectly.
- Dynamic Conversion Layering: By dropping your three primary target buttons (
Partners,Vendors,Book) inside an inline flex container on the left, you clear up user confusion immediately upon page load. - The Accent Frame: You can use your secondary brand color (
#2dcfd4) as a 1px border wrapping that inner container grid, mirroring the look inimage_8401ff.jpgto keep the layout feeling premium.
About
