bender/92c31b1a-dbc0-4f86-a8d3-ce962044de19
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_3_1781897126512 into main #3

Merged
bender merged 2 commits from version_3_1781897126512 into main 2026-06-19 19:31:17 +00:00
Conversation 0 Commits 2 Files Changed 2 +117 -50
2 changed files with 117 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/index.css
View File

@@ -1,19 +1,19 @@
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
@import "tailwindcss";
@import "./styles/masks.css";
@import "./styles/animations.css";
:root {
/* @colorThemes/lightTheme/grayNavyBlue */
--background: #0a0a0a;
--card: #121212;
--foreground: #ffffff;
--primary-cta: #106EFB;
--background: #0B0B0F;
--card: #121216;
--foreground: #F7F4EE;
--primary-cta: #7C5CFF;
--primary-cta-text: #ffffff;
--secondary-cta: #ffffff;
--secondary-cta-text: #000000;
--accent: #535353;
--background-accent: #106EFB;
--secondary-cta: #18D5C2;
--secondary-cta-text: #0B0B0F;
--accent: #D8D8D8;
--background-accent: #7C5CFF;
/* @layout/border-radius/rounded */
--radius: 0.5rem;
@@ -88,8 +88,8 @@
--color-background-accent: var(--background-accent);
/* Fonts */
--font-sans: 'Inter Tight', sans-serif;
--font-tight: "Inter Tight", sans-serif;
--font-sans: 'Inter', sans-serif;
--font-tight: "Space Grotesk", sans-serif;
--font-mono: monospace;
/* Border Radius */

145
src/pages/HomePage/sections/Hero.tsx
View File

@@ -1,45 +1,112 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "hero" section.
/* eslint-disable */
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
import Button from "@/components/ui/Button";
import TextAnimation from "@/components/ui/TextAnimation";
import Tag from "@/components/ui/Tag";
import { motion } from "motion/react";
import TiltedCarousel from "@/components/ui/TiltedCarousel";
import React from 'react';
import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
const primaryButton = {
href: "#contact",
text: "Get Your Personalized Demo"
};
const secondaryButton = {
href: "#demo",
text: "Watch AI Receptionist Demo"
};
export default function HeroSection(): React.JSX.Element {
const HeroBillboardTiltedCarousel = () => {
return (
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroBillboardTiltedCarousel
tag="AI Operating System"
title="Automate Your Business, Multiply Your Revenue"
description="Your AI-powered operating system answers calls, books appointments, automates follow-ups, and manages customers—so you generate revenue while away."
primaryButton={{"text":"Get Your Personalized Demo","href":"#contact"}}
secondaryButton={{
text: "Book Strategy Call",
href: "#contact",
}}
items={[
{
imageSrc: "http://img.b2bpic.net/free-photo/woman-robot-holding-biotech-pill_183364-118328.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/account-manager-using-ai-chatbot-help-talking-with-customers_482257-126148.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/work-office-doesn-t-have-boring_329181-10357.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/research-analysis-ideas-strategy-information-concept_53876-123886.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/people-holding-icons-digital-brands_53876-65398.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/server-racks-storing-ai-datasets-simulation-training-predictive-tasks_482257-124190.jpg",
},
]}
/>
</SectionErrorBoundary>
<section className="relative w-full min-h-[90vh] flex items-center justify-center bg-background overflow-hidden pt-24 pb-16">
{/* Background Effects */}
<div className="absolute inset-0 z-0">
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] bg-primary-cta/20 blur-[120px] rounded-full opacity-50" />
<div className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-secondary-cta/10 blur-[100px] rounded-full opacity-30" />
<div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 mix-blend-overlay"></div>
</div>
<div className="w-content-width mx-auto relative z-10 flex flex-col items-center text-center">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="mb-8"
>
<Tag text="YOURSMATE™" className="bg-card border border-white/10 text-accent px-4 py-1.5 rounded-full text-sm font-medium tracking-wide" />
</motion.div>
<div className="max-w-5xl mx-auto mb-8">
<TextAnimation
text="We Build Businesses That Run Even When You Don't."
variant="fade-blur"
tag="h1"
className="text-5xl md:text-7xl font-bold text-foreground tracking-tight leading-[1.1]"
gradientText={false}
/>
</div>
<motion.p
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
className="text-lg md:text-xl text-accent max-w-3xl mx-auto mb-12 leading-relaxed"
>
We build complete AI-powered Business Operating Systems that answer your calls, book appointments, automate follow-ups, collect Google reviews, manage customers, and help your business generate more revenue—even when you're away.
</motion.p>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.3 }}
className="flex flex-col sm:flex-row items-center gap-4"
>
<Button
text={primaryButton.text}
href={primaryButton.href}
variant="primary"
className="px-8 py-4 text-lg rounded-full shadow-[0_0_30px_rgba(124,92,255,0.3)] hover:shadow-[0_0_40px_rgba(124,92,255,0.5)] transition-all"
/>
<Button
text={secondaryButton.text}
href={secondaryButton.href}
variant="secondary"
className="px-8 py-4 text-lg rounded-full bg-card border border-white/10 hover:bg-white/5 transition-all flex items-center gap-2"
/>
</motion.div>
{/* Dashboard Preview */}
<motion.div
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.7, delay: 0.5 }}
className="mt-20 w-full max-w-6xl relative"
>
<div className="absolute -inset-1 bg-gradient-to-r from-primary-cta to-secondary-cta rounded-2xl blur opacity-20"></div>
<div className="relative rounded-2xl border border-white/10 bg-card/80 backdrop-blur-xl overflow-hidden shadow-2xl">
<div className="flex items-center px-4 py-3 border-b border-white/10 bg-black/40">
<div className="flex gap-2">
<div className="w-3 h-3 rounded-full bg-red-500/80"></div>
<div className="w-3 h-3 rounded-full bg-yellow-500/80"></div>
<div className="w-3 h-3 rounded-full bg-green-500/80"></div>
</div>
<div className="mx-auto text-xs text-accent font-mono">yoursmate.com/system</div>
</div>
<img
src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2940&auto=format&fit=crop"
alt="Business Operating System Dashboard"
className="w-full h-auto object-cover opacity-80 mix-blend-luminosity hover:mix-blend-normal transition-all duration-700"
/>
</div>
</motion.div>
</div>
</section>
);
};
export default function HeroSection() {
return (
<div data-webild-section="hero" id="hero">
<HeroBillboardTiltedCarousel />
</div>
);
}