Compare commits
11 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| b049dfcce8 | |||
| 23d07236ef | |||
| cf92e81eba | |||
| d8ef2d4d30 | |||
| cefafc7659 | |||
| 303a2b4ab9 | |||
| 70d75b9168 | |||
| 110a2a79b2 | |||
| ca3412d7b3 | |||
| 582f69afd3 | |||
| b8d06a9285 |
@@ -6,20 +6,17 @@ import "@/lib/gsap-setup";
|
|||||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||||
import Tag from "@/tag/Tag";
|
import Tag from "@/tag/Tag";
|
||||||
import { getVisualEditScript } from "@/utils/visual-edit-script";
|
import { getVisualEditScript } from "@/utils/visual-edit-script";
|
||||||
|
import { Space_Grotesk } from "next/font/google";
|
||||||
|
|
||||||
const halant = Halant({
|
|
||||||
variable: "--font-halant",
|
|
||||||
subsets: ["latin"],
|
|
||||||
weight: ["300", "400", "500", "600", "700"],
|
|
||||||
});
|
|
||||||
|
|
||||||
const inter = Inter({
|
|
||||||
variable: "--font-inter",
|
|
||||||
subsets: ["latin"],
|
|
||||||
});
|
|
||||||
|
|
||||||
export const metadata: Metadata = { title: 'Webild Agency | Premium Web Design & Digital Strategy', description: 'Elevate your brand with Webild. We craft high-performance, custom websites and digital experiences designed to drive growth and captivate your audience.' };
|
export const metadata: Metadata = { title: 'Webild Agency | Premium Web Design & Digital Strategy', description: 'Elevate your brand with Webild. We craft high-performance, custom websites and digital experiences designed to drive growth and captivate your audience.' };
|
||||||
|
|
||||||
|
const spaceGrotesk = Space_Grotesk({
|
||||||
|
variable: "--font-space-grotesk", subsets: ["latin"],
|
||||||
|
weight: ["300", "400", "500", "600", "700"],
|
||||||
|
});
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: Readonly<{
|
}: Readonly<{
|
||||||
@@ -28,9 +25,7 @@ export default function RootLayout({
|
|||||||
return (
|
return (
|
||||||
<html lang="en" suppressHydrationWarning>
|
<html lang="en" suppressHydrationWarning>
|
||||||
<ServiceWrapper>
|
<ServiceWrapper>
|
||||||
<body
|
<body className={`${spaceGrotesk.variable} antialiased`}>
|
||||||
className={`${halant.variable} ${inter.variable} antialiased`}
|
|
||||||
>
|
|
||||||
<Tag />
|
<Tag />
|
||||||
{children}
|
{children}
|
||||||
<script
|
<script
|
||||||
|
|||||||
437
src/app/page.tsx
437
src/app/page.tsx
@@ -3,347 +3,124 @@
|
|||||||
import ReactLenis from "lenis/react";
|
import ReactLenis from "lenis/react";
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||||
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
|
import HeroLogo from "@/components/sections/hero/HeroLogo";
|
||||||
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
import MediaAbout from "@/components/sections/about/MediaAbout";
|
||||||
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
|
import FeatureCardTwentyNine from "@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine";
|
||||||
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
|
import TeamCardOne from "@/components/sections/team/TeamCardOne";
|
||||||
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||||
import TeamCardFive from "@/components/sections/team/TeamCardFive";
|
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||||
import FaqBase from "@/components/sections/faq/FaqBase";
|
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
|
||||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
||||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
|
||||||
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
|
||||||
import { Sparkles, Search, ArrowUpRight, Monitor, Shield, Zap, Puzzle, TrendingUp, Lock, Phone, MessageCircle, BookOpen, Tv, Camera, Music, Settings, Award, Users } from "lucide-react";
|
|
||||||
|
|
||||||
export default function WebAgency2Page() {
|
export default function BloxlyLandingPage() {
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="text-stagger"
|
defaultButtonVariant="hover-bubble"
|
||||||
defaultTextAnimation="entrance-slide"
|
defaultTextAnimation="reveal-blur"
|
||||||
borderRadius="pill"
|
borderRadius="rounded"
|
||||||
contentWidth="medium"
|
contentWidth="medium"
|
||||||
sizing="medium"
|
sizing="mediumLargeSizeLargeTitles"
|
||||||
background="none"
|
background="none"
|
||||||
cardStyle="glass-elevated"
|
cardStyle="solid"
|
||||||
primaryButtonStyle="metallic"
|
primaryButtonStyle="flat"
|
||||||
secondaryButtonStyle="glass"
|
secondaryButtonStyle="solid"
|
||||||
headingFontWeight="medium"
|
headingFontWeight="extrabold"
|
||||||
>
|
>
|
||||||
<ReactLenis root>
|
<ReactLenis root>
|
||||||
<NavbarLayoutFloatingOverlay
|
<NavbarLayoutFloatingOverlay
|
||||||
brandName="Webild"
|
brandName="Bloxly"
|
||||||
navItems={[
|
navItems={[
|
||||||
{ name: "Work", id: "work" },
|
{ name: "Capabilities", id: "capabilities" },
|
||||||
{ name: "Services", id: "services" },
|
{ name: "Manifesto", id: "manifesto" },
|
||||||
{ name: "About", id: "about" },
|
{ name: "Beta Access", id: "beta" },
|
||||||
{ name: "Contact", id: "contact" },
|
|
||||||
]}
|
|
||||||
button={{ text: "Get Started", href: "#contact" }}
|
|
||||||
/>
|
|
||||||
<HeroSplitDoubleCarousel
|
|
||||||
title="We Build Digital Experiences"
|
|
||||||
description="Transform your brand with cutting-edge web design and development. We craft stunning websites that convert visitors into customers."
|
|
||||||
tag="Award-Winning Agency"
|
|
||||||
tagIcon={Sparkles}
|
|
||||||
tagAnimation="slide-up"
|
|
||||||
background={{ variant: "canvas-reveal" }}
|
|
||||||
buttons={[
|
|
||||||
{ text: "Start Project", href: "#contact" },
|
|
||||||
{ text: "View Work", href: "#work" },
|
|
||||||
]}
|
|
||||||
buttonAnimation="slide-up"
|
|
||||||
carouselPosition="right"
|
|
||||||
leftCarouselItems={[
|
|
||||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "UI UX Design - Daily Life app" },
|
|
||||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp", imageAlt: "UI UX Design - SaaS platform" },
|
|
||||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp", imageAlt: "UI UX Design - Luminé skincare" },
|
|
||||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-7.webp", imageAlt: "UI UX Design - Online courses" },
|
|
||||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-9.webp", imageAlt: "UI UX Design - Business coach" },
|
|
||||||
]}
|
|
||||||
rightCarouselItems={[
|
|
||||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "UI UX Design - Luxuria travel" },
|
|
||||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-5.webp", imageAlt: "UI UX Design - Dental practice" },
|
|
||||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp", imageAlt: "UI UX Design - AI product builder" },
|
|
||||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-8.webp", imageAlt: "UI UX Design - AI automation" },
|
|
||||||
]}
|
|
||||||
carouselItemClassName="!aspect-[4/5]"
|
|
||||||
/>
|
|
||||||
<FeatureBento
|
|
||||||
title="Our Services"
|
|
||||||
description="We offer a full suite of digital services to help your brand stand out online."
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
animationType="slide-up"
|
|
||||||
buttons={[{ text: "All Services", href: "#services" }]}
|
|
||||||
buttonAnimation="slide-up"
|
|
||||||
features={[
|
|
||||||
{
|
|
||||||
title: "SEO",
|
|
||||||
description: "We optimize your website to rank higher on search engines and drive organic traffic.",
|
|
||||||
bentoComponent: "marquee",
|
|
||||||
centerIcon: Search,
|
|
||||||
variant: "text",
|
|
||||||
texts: ["Keywords", "Backlinks", "Meta Tags", "Organic Traffic", "Rankings", "Analytics", "SERP", "Indexing"],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Web Development",
|
|
||||||
description: "Custom-built websites that are fast, responsive, and designed to convert.",
|
|
||||||
bentoComponent: "media-stack",
|
|
||||||
items: [
|
|
||||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-2.webp", imageAlt: "Web project - AgentFlow AI platform" },
|
|
||||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp", imageAlt: "Web project - Architecture studio" },
|
|
||||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-3.webp", imageAlt: "Web project - Summit Roofing" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Branding",
|
|
||||||
description: "Build a memorable brand identity that resonates with your audience.",
|
|
||||||
bentoComponent: "media-stack",
|
|
||||||
items: [
|
|
||||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "Brand project 1" },
|
|
||||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "Brand project 2" },
|
|
||||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp", imageAlt: "Brand project 3" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<FeatureCardTwentySix
|
|
||||||
title="Our Work"
|
|
||||||
description="A selection of projects we've crafted for clients across industries."
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
buttons={[{ text: "View All Work", href: "#work" }]}
|
|
||||||
buttonAnimation="slide-up"
|
|
||||||
cardClassName="!h-auto aspect-video"
|
|
||||||
features={[
|
|
||||||
{
|
|
||||||
title: "Umbra Skincare",
|
|
||||||
description: "Luxury fragrance e-commerce",
|
|
||||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp",
|
|
||||||
imageAlt: "Umbra Skincare website",
|
|
||||||
buttonIcon: ArrowUpRight,
|
|
||||||
buttonHref: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Luxuria Travel",
|
|
||||||
description: "Bespoke luxury travel experiences",
|
|
||||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp",
|
|
||||||
imageAlt: "Luxuria Travel website",
|
|
||||||
buttonIcon: ArrowUpRight,
|
|
||||||
buttonHref: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Dental Care",
|
|
||||||
description: "Premier dental practice",
|
|
||||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-3.webp",
|
|
||||||
imageAlt: "Luxury Dental Care website",
|
|
||||||
buttonIcon: ArrowUpRight,
|
|
||||||
buttonHref: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Summit Roofing",
|
|
||||||
description: "Professional roofing services",
|
|
||||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-4.webp",
|
|
||||||
imageAlt: "Summit Roofing website",
|
|
||||||
buttonIcon: ArrowUpRight,
|
|
||||||
buttonHref: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Dubai Real Estate",
|
|
||||||
description: "Luxury property listings",
|
|
||||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-5.webp",
|
|
||||||
imageAlt: "Dubai Real Estate website",
|
|
||||||
buttonIcon: ArrowUpRight,
|
|
||||||
buttonHref: "#",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<FeatureBento
|
|
||||||
title="Our Promise"
|
|
||||||
description="We deliver results that speak for themselves."
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
animationType="slide-up"
|
|
||||||
features={[
|
|
||||||
{
|
|
||||||
title: "All Devices Optimization",
|
|
||||||
description: "Pixel-perfect websites that look stunning on every screen size and device.",
|
|
||||||
bentoComponent: "phone",
|
|
||||||
statusIcon: Lock,
|
|
||||||
alertIcon: Monitor,
|
|
||||||
alertTitle: "Responsive check",
|
|
||||||
alertMessage: "All breakpoints passed",
|
|
||||||
apps: [
|
|
||||||
{ name: "Phone", icon: Phone },
|
|
||||||
{ name: "SMS", icon: MessageCircle },
|
|
||||||
{ name: "Books", icon: BookOpen },
|
|
||||||
{ name: "TV", icon: Tv },
|
|
||||||
{ name: "Camera", icon: Camera },
|
|
||||||
{ name: "Music", icon: Music },
|
|
||||||
{ name: "Settings", icon: Settings },
|
|
||||||
{ name: "Chat", icon: MessageCircle },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Secure Hosting",
|
|
||||||
description: "Enterprise-grade security and 99.9% uptime for your website.",
|
|
||||||
bentoComponent: "reveal-icon",
|
|
||||||
icon: Shield,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Fast Turnaround",
|
|
||||||
description: "From concept to launch in record time without sacrificing quality.",
|
|
||||||
bentoComponent: "timeline",
|
|
||||||
heading: "Project Launch",
|
|
||||||
subheading: "Week 1",
|
|
||||||
items: [
|
|
||||||
{ label: "Discovery & wireframes", detail: "Day 1-3" },
|
|
||||||
{ label: "Design & development", detail: "Day 4-10" },
|
|
||||||
{ label: "Testing & deployment", detail: "Day 11-14" },
|
|
||||||
],
|
|
||||||
completedLabel: "Live",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Seamless Integrations",
|
|
||||||
description: "Connect with the tools you already use — CRMs, analytics, payments, and more.",
|
|
||||||
bentoComponent: "orbiting-icons",
|
|
||||||
centerIcon: Puzzle,
|
|
||||||
items: [
|
|
||||||
{ icon: Shield },
|
|
||||||
{ icon: Monitor },
|
|
||||||
{ icon: Zap },
|
|
||||||
{ icon: TrendingUp },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Growth Trends",
|
|
||||||
description: "Data-driven insights to optimize your search presence and drive traffic.",
|
|
||||||
bentoComponent: "line-chart",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<TestimonialCardFifteen
|
|
||||||
testimonial="Webild completely transformed our online presence. The team delivered a stunning website that exceeded our expectations and doubled our conversion rate."
|
|
||||||
rating={5}
|
|
||||||
author="— Maria Santos, CEO at Luxuria Travel"
|
|
||||||
avatars={[
|
|
||||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp", alt: "Client" },
|
|
||||||
]}
|
|
||||||
ratingAnimation="slide-up"
|
|
||||||
avatarsAnimation="slide-up"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
/>
|
|
||||||
<MetricCardOne
|
|
||||||
title="Trusted by Industry Leaders"
|
|
||||||
description="Years of experience building digital products that drive real results."
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
gridVariant="uniform-all-items-equal"
|
|
||||||
animationType="slide-up"
|
|
||||||
metrics={[
|
|
||||||
{ id: "projects", value: "100+", title: "Projects", description: "Successfully delivered across all industries", icon: Award },
|
|
||||||
{ id: "satisfaction", value: "99%", title: "Satisfaction", description: "Client satisfaction rate and counting", icon: Users },
|
|
||||||
{ id: "years", value: "8+", title: "Years", description: "Of crafting exceptional digital experiences", icon: TrendingUp },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<FeatureCardSixteen
|
|
||||||
title="Why Choose Webild"
|
|
||||||
description="See the difference a professional web agency makes."
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
animationType="slide-up"
|
|
||||||
negativeCard={{
|
|
||||||
items: [
|
|
||||||
"Generic templates with no personality",
|
|
||||||
"Slow load times and poor performance",
|
|
||||||
"No SEO strategy or search visibility",
|
|
||||||
"Outdated design that hurts credibility",
|
|
||||||
"No ongoing support after launch",
|
|
||||||
],
|
|
||||||
}}
|
|
||||||
positiveCard={{
|
|
||||||
items: [
|
|
||||||
"Custom designs tailored to your brand",
|
|
||||||
"Lightning-fast performance on all devices",
|
|
||||||
"Built-in SEO to drive organic traffic",
|
|
||||||
"Modern design that builds trust",
|
|
||||||
"Dedicated support and maintenance",
|
|
||||||
],
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<TeamCardFive
|
|
||||||
title="Meet the Team"
|
|
||||||
description="The creative minds behind your next project."
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
animationType="slide-up"
|
|
||||||
mediaClassName="object-[65%_center]"
|
|
||||||
team={[
|
|
||||||
{ id: "1", name: "Sarah Miller", role: "Lead Developer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp", imageAlt: "Sarah Miller" },
|
|
||||||
{ id: "2", name: "Valentina Reyes", role: "Creative Director", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp", imageAlt: "Valentina Reyes" },
|
|
||||||
{ id: "3", name: "Carlos Mendoza", role: "UX Designer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp", imageAlt: "Carlos Mendoza" },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<FaqBase
|
|
||||||
title="Frequently Asked Questions"
|
|
||||||
description="Everything you need to know about working with us."
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
faqsAnimation="slide-up"
|
|
||||||
faqs={[
|
|
||||||
{ id: "1", title: "How long does a typical project take?", content: "Most projects are completed within 2-4 weeks depending on scope and complexity. We'll provide a detailed timeline during our initial consultation." },
|
|
||||||
{ id: "2", title: "What is your pricing structure?", content: "We offer project-based pricing tailored to your needs. Every project includes design, development, SEO optimization, and post-launch support." },
|
|
||||||
{ id: "3", title: "Do you offer ongoing maintenance?", content: "Yes! We provide ongoing support and maintenance packages to keep your website updated, secure, and performing at its best." },
|
|
||||||
{ id: "4", title: "Can you redesign my existing website?", content: "Absolutely. We specialize in website redesigns that modernize your brand while preserving your existing content and SEO rankings." },
|
|
||||||
{ id: "5", title: "What technologies do you use?", content: "We build with modern technologies including Next.js, React, and Tailwind CSS to ensure fast, scalable, and maintainable websites." },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<ContactCTA
|
|
||||||
tag="Get in Touch"
|
|
||||||
title="Ready to Transform Your Digital Presence?"
|
|
||||||
description="Let's build something extraordinary together. Get in touch and let's discuss your next project."
|
|
||||||
background={{ variant: "rotated-rays-animated" }}
|
|
||||||
buttons={[
|
|
||||||
{ text: "Start Your Project", href: "#contact" },
|
|
||||||
{ text: "View Our Work", href: "#work" },
|
|
||||||
]}
|
|
||||||
buttonAnimation="slide-up"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
/>
|
|
||||||
<FooterBase
|
|
||||||
logoText="Webild"
|
|
||||||
copyrightText="© 2026 | Webild"
|
|
||||||
columns={[
|
|
||||||
{
|
|
||||||
title: "Company",
|
|
||||||
items: [
|
|
||||||
{ label: "About", href: "#about" },
|
|
||||||
{ label: "Services", href: "#services" },
|
|
||||||
{ label: "Work", href: "#work" },
|
|
||||||
{ label: "Contact", href: "#contact" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Services",
|
|
||||||
items: [
|
|
||||||
{ label: "Web Development", href: "#" },
|
|
||||||
{ label: "SEO", href: "#" },
|
|
||||||
{ label: "Branding", href: "#" },
|
|
||||||
{ label: "UI/UX Design", href: "#" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Connect",
|
|
||||||
items: [
|
|
||||||
{ label: "Twitter", href: "#" },
|
|
||||||
{ label: "LinkedIn", href: "#" },
|
|
||||||
{ label: "Instagram", href: "#" },
|
|
||||||
{ label: "Dribbble", href: "#" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<div id="hero">
|
||||||
|
<HeroLogo
|
||||||
|
logoText="Bloxly"
|
||||||
|
description="The AI coding agent for Roblox Studio. Accelerate your Luau development with precision and speed."
|
||||||
|
buttons={[{ text: "Get Beta Access", href: "#beta" }]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="capabilities">
|
||||||
|
<MetricCardSeven
|
||||||
|
title="AI-Native Luau Capabilities"
|
||||||
|
description="Designed specifically for the Roblox engine, Bloxly transforms complex game logic into clean, performant code."
|
||||||
|
metrics={[
|
||||||
|
{ id: "m1", value: "10x", title: "Coding Velocity", items: ["Context-aware autocomplete", "Real-time syntax correction", "Instant boilerplate generation"] },
|
||||||
|
{ id: "m2", value: "Zero", title: "Technical Debt", items: ["Optimized memory management", "Network-safe scripting", "Auto-documented modular code"] }
|
||||||
|
]}
|
||||||
|
textboxLayout="split-description"
|
||||||
|
animationType="slide-up"
|
||||||
|
useInvertedBackground={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="features">
|
||||||
|
<FeatureCardTwentyNine
|
||||||
|
title="Precision Coding Engine"
|
||||||
|
description="Bloxly interprets your vision and translates it into high-performance Luau scripts."
|
||||||
|
textboxLayout="default"
|
||||||
|
gridVariant="three-columns-all-equal-width"
|
||||||
|
animationType="slide-up"
|
||||||
|
useInvertedBackground={true}
|
||||||
|
features={[
|
||||||
|
{ title: "Game Logic Automation", description: "Automate complex character controllers and inventory systems.", imageSrc: "", titleImageSrc: "", buttonText: "Learn More" },
|
||||||
|
{ title: "Smart UI Construction", description: "Generate interactive screens using AI-assisted layout constraints.", imageSrc: "", titleImageSrc: "", buttonText: "Learn More" },
|
||||||
|
{ title: "Deep Optimization", description: "Detect bottlenecks and resolve memory leaks automatically.", imageSrc: "", titleImageSrc: "", buttonText: "Learn More" }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="how-it-works">
|
||||||
|
<TeamCardOne
|
||||||
|
title="How It Works"
|
||||||
|
description="Four simple steps to transform your development workflow."
|
||||||
|
textboxLayout="default"
|
||||||
|
gridVariant="four-items-2x2-equal-grid"
|
||||||
|
animationType="slide-up"
|
||||||
|
useInvertedBackground={false}
|
||||||
|
members={[
|
||||||
|
{ id: "1", name: "Describe Vision", role: "Input your game mechanics" },
|
||||||
|
{ id: "2", name: "Generate Logic", role: "AI writes optimized Luau" },
|
||||||
|
{ id: "3", name: "Iterate Fast", role: "Debug and refine in real-time" },
|
||||||
|
{ id: "4", name: "Ship Experience", role: "Push updates directly to Roblox" }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="manifesto">
|
||||||
|
<MediaAbout
|
||||||
|
title="Own What You Build"
|
||||||
|
description="In an era of abstraction, Bloxly maintains the integrity of your hard work. By leveraging decentralized verification, your IP remains securely yours. Build with confidence, knowing your creations are protected and verified on the MultiversX network."
|
||||||
|
useInvertedBackground={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="beta">
|
||||||
|
<ContactSplitForm
|
||||||
|
title="Beta Access"
|
||||||
|
description="Join the select group of builders pioneering the next wave of Roblox game development."
|
||||||
|
inputs={[
|
||||||
|
{ name: "email", type: "email", placeholder: "Email address" },
|
||||||
|
{ name: "project", type: "text", placeholder: "Project name (optional)" }
|
||||||
|
]}
|
||||||
|
buttonText="Secure Beta Spot"
|
||||||
|
useInvertedBackground={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="footer">
|
||||||
|
<FooterLogoEmphasis
|
||||||
|
logoText="Bloxly"
|
||||||
|
columns={[
|
||||||
|
{ items: [{ label: "Documentation", href: "#" }, { label: "API Reference", href: "#" }] },
|
||||||
|
{ items: [{ label: "Discord", href: "#" }, { label: "Terms of Service", href: "#" }] }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -11,7 +11,7 @@ html {
|
|||||||
body {
|
body {
|
||||||
background-color: var(--background);
|
background-color: var(--background);
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
font-family: var(--font-inter-tight), sans-serif;
|
font-family: var(--font-space-grotesk), sans-serif;
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
overscroll-behavior: none;
|
overscroll-behavior: none;
|
||||||
@@ -24,5 +24,5 @@ h3,
|
|||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
font-family: var(--font-inter-tight), sans-serif;
|
font-family: var(--font-space-grotesk), sans-serif;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,14 +11,14 @@
|
|||||||
--background-accent: #ffffff; */
|
--background-accent: #ffffff; */
|
||||||
|
|
||||||
--background: #0a0a0a;
|
--background: #0a0a0a;
|
||||||
--card: #161616;
|
--card: #1a1a1a;
|
||||||
--foreground: #f0f0f0;
|
--foreground: #f5f5f5;
|
||||||
--primary-cta: #ffffff;
|
--primary-cta: #dfff1c;
|
||||||
--primary-cta-text: #0a0a0a;
|
--primary-cta-text: #0a0a0a;
|
||||||
--secondary-cta: #1e1e1e;
|
--secondary-cta: #1a1a1a;
|
||||||
--secondary-cta-text: #e0e0e0;
|
--secondary-cta-text: #e0e0e0;
|
||||||
--accent: #d0d0d0;
|
--accent: #8b9a1b;
|
||||||
--background-accent: #9a9a9a;
|
--background-accent: #5d6b00;
|
||||||
|
|
||||||
/* text sizing - set by ThemeProvider */
|
/* text sizing - set by ThemeProvider */
|
||||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||||
|
|||||||
Reference in New Issue
Block a user