Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 7ee57918c3 | |||
| 0ac6afffdd | |||
| 9d643e539a | |||
| 4b356c6dd6 | |||
| e4d1e2c7d4 | |||
| d4351c3ace | |||
| 8f10d30f26 | |||
| c646f68fb6 | |||
| 72e47fe4ce | |||
| b2e1952bea | |||
| 21ed08b8f3 | |||
| 9090a50411 |
@@ -1,19 +1,14 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Libre_Baskerville, Montserrat } from "next/font/google";
|
|
||||||
import "./styles/variables.css";
|
import "./styles/variables.css";
|
||||||
import "./styles/base.css";
|
import "./styles/base.css";
|
||||||
|
import { Inter } from "next/font/google";
|
||||||
|
|
||||||
const libreBaskerville = Libre_Baskerville({
|
const inter = Inter({
|
||||||
variable: "--font-libre-baskerville", subsets: ["latin"],
|
variable: "--font-inter", subsets: ["latin"],
|
||||||
weight: ["400", "700"],
|
|
||||||
});
|
|
||||||
|
|
||||||
const montserrat = Montserrat({
|
|
||||||
variable: "--font-montserrat", subsets: ["latin"],
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "FGA Growth - Performance Marketing Agency", description: "Scale your e-commerce with proven performance marketing strategies"};
|
title: "FGA Growth - Scale Your E-Commerce Performance", description: "Data-driven digital marketing agency specializing in e-commerce growth, Meta Ads, TikTok Ads, and Google Ads optimization."};
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
@@ -21,9 +16,17 @@ export default function RootLayout({
|
|||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en" suppressHydrationWarning>
|
||||||
<body className={`${libreBaskerville.variable} ${montserrat.variable}`}>
|
<body className={`${inter.variable} antialiased`}>
|
||||||
|
<ServiceWrapper>
|
||||||
|
<Tag />
|
||||||
|
</ServiceWrapper>
|
||||||
{children}
|
{children}
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{JSON.stringify({
|
||||||
|
"@context": "https://schema.org", "@type": "LocalBusiness", "name": "FGA Growth", "description": "Data-driven digital marketing agency specializing in e-commerce growth"
|
||||||
|
})}
|
||||||
|
</script>
|
||||||
|
|
||||||
<script
|
<script
|
||||||
dangerouslySetInnerHTML={{
|
dangerouslySetInnerHTML={{
|
||||||
@@ -1395,3 +1398,11 @@ export default function RootLayout({
|
|||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function ServiceWrapper({ children }: { children: React.ReactNode }) {
|
||||||
|
return <>{children}</>;
|
||||||
|
}
|
||||||
|
|
||||||
|
function Tag() {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
171
src/app/page.tsx
171
src/app/page.tsx
@@ -1,8 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
||||||
import TextAbout from '@/components/sections/about/TextAbout';
|
|
||||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
@@ -35,49 +33,136 @@ export default function LandingPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="testimonial" data-section="testimonial">
|
<div id="testimonial" data-section="testimonial" className="relative w-full py-20 bg-black">
|
||||||
<TestimonialCardSix
|
<div className="relative w-full max-w-7xl mx-auto px-6">
|
||||||
title="Proven Results"
|
{/* Section Header */}
|
||||||
description="Numbers That Don't Lie"
|
<div className="mb-16">
|
||||||
tag="Case Studies"
|
<div className="inline-block mb-4">
|
||||||
tagAnimation="slide-up"
|
<span className="text-sm font-medium text-yellow-500 uppercase tracking-wider">Premium Case Studies</span>
|
||||||
textboxLayout="default"
|
</div>
|
||||||
useInvertedBackground={false}
|
<h2 className="text-5xl md:text-7xl font-bold text-white mb-4" style={{ fontFamily: 'var(--font-playfair-display), serif' }}>
|
||||||
animationType="slide-up"
|
Our Proven Results
|
||||||
testimonials={[
|
</h2>
|
||||||
{
|
<p className="text-lg text-gray-400">Transforming e-commerce brands with data-driven strategies</p>
|
||||||
id: "1", name: "Streetwear Brand Argentina", handle: "ROAS 17x+ | $0 → $42M ARS", testimonial: "Scaled from $0 to $42M ARS in 4 months through precision Meta Ads targeting across customer archetypes. Meta Ads, TikTok Ads, Lead Gen", imageSrc: "http://img.b2bpic.net/free-vector/online-shopping-sales-landing-page-template_23-2148826283.jpg", imageAlt: "Case study 1 performance metrics"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2", name: "Fashion Jewelry Store", handle: "ROAS 2.89 | $51K → $227K/mo", testimonial: "Grew monthly revenue from $51K to $227K through integrated Meta Ads and Google Ads campaigns with creative hook optimization. Meta Ads, Google Ads", imageSrc: "http://img.b2bpic.net/free-vector/admin-dashboard-panel-template_23-2147904141.jpg?_wi=1", imageAlt: "Case study 2 revenue growth"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3", name: "High-End Jewelry Store", handle: "ROAS 3.27 | $9K → $32K/mo", testimonial: "Tripled monthly revenue through luxury-focused TikTok Ads and Google Ads strategy targeting high-value customer segments. TikTok Ads, Google Ads", imageSrc: "http://img.b2bpic.net/free-photo/unrecognizable-man-working-with-tablet_23-2147717389.jpg", imageAlt: "Case study 3 luxury targeting results"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "4", name: "Gold Jewelry Store", handle: "ROAS 4.79 | $8K → $23K/mo", testimonial: "Nearly tripled revenue through data-driven Meta Ads campaigns and lead generation strategy with continuous testing framework. Meta Ads, Lead Gen", imageSrc: "http://img.b2bpic.net/free-vector/admin-dashboard-panel-template_23-2147904141.jpg?_wi=2", imageAlt: "Case study 4 jewelry performance"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "5", name: "Premium E-Commerce Brand", handle: "ROAS 5.2+ | Featured Results", testimonial: "Implemented comprehensive testing framework around customer archetypes and creative hooks enabling rapid scaling across all channels. Meta Ads, TikTok Ads, Google Ads", imageSrc: "http://img.b2bpic.net/free-photo/people-analyzing-checking-finance-graphs-office_23-2150377179.jpg?_wi=1", imageAlt: "Premium brand success metrics"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "6", name: "Luxury Fashion Retailer", handle: "ROAS 3.8+ | Scaling Success", testimonial: "Built resilient growth system through channel diversification and audience segmentation resulting in consistent 30% monthly growth. Meta Ads, Google Ads, Lead Gen", imageSrc: "http://img.b2bpic.net/free-photo/smiley-business-man-outdoor_23-2148479594.jpg", imageAlt: "Luxury retail brand growth"
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
speed={40}
|
|
||||||
topMarqueeDirection="left"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="featured-quote" data-section="featured-quote">
|
{/* 2x2 Grid of Case Study Cards */}
|
||||||
<TextAbout
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
|
||||||
tag="Client Testimonial"
|
{/* Card 1 */}
|
||||||
title="Fran built a testing framework around customer archetypes and creative hooks that allowed us to scale faster than we thought possible."
|
<div className="bg-gradient-to-br from-gray-900 to-black border border-yellow-600/30 rounded-lg p-8 hover:border-yellow-500/50 transition-all">
|
||||||
useInvertedBackground={true}
|
<div className="flex items-center justify-between mb-6">
|
||||||
buttons={[
|
<h3 className="text-2xl font-bold text-white" style={{ fontFamily: 'var(--font-playfair-display), serif' }}>Streetwear Brand Argentina</h3>
|
||||||
{ text: "Read Full Case Study", href: "#testimonial" }
|
<span className="text-4xl">🦁</span>
|
||||||
]}
|
</div>
|
||||||
/>
|
<div className="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-4 mb-6">
|
||||||
|
<div className="text-5xl font-bold text-yellow-400 mb-2">17x+</div>
|
||||||
|
<div className="text-sm text-gray-300">ROAS Achieved</div>
|
||||||
|
</div>
|
||||||
|
<div className="mb-6">
|
||||||
|
<div className="flex justify-between items-center mb-2">
|
||||||
|
<span className="text-sm text-gray-400">Revenue Growth</span>
|
||||||
|
<span className="text-sm font-medium text-yellow-400">$0 → $42M ARS</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-full bg-gray-800 rounded-full h-2">
|
||||||
|
<div className="bg-gradient-to-r from-yellow-500 to-yellow-400 h-2 rounded-full" style={{ width: '95%' }}></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-gray-400">Scaled through precision Meta Ads targeting across customer archetypes in 4 months</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Card 2 */}
|
||||||
|
<div className="bg-gradient-to-br from-gray-900 to-black border border-yellow-600/30 rounded-lg p-8 hover:border-yellow-500/50 transition-all">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<h3 className="text-2xl font-bold text-white" style={{ fontFamily: 'var(--font-playfair-display), serif' }}>Fashion Jewelry Store</h3>
|
||||||
|
<span className="text-4xl">✨</span>
|
||||||
|
</div>
|
||||||
|
<div className="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-4 mb-6">
|
||||||
|
<div className="text-5xl font-bold text-yellow-400 mb-2">2.89</div>
|
||||||
|
<div className="text-sm text-gray-300">ROAS</div>
|
||||||
|
</div>
|
||||||
|
<div className="mb-6">
|
||||||
|
<div className="flex justify-between items-center mb-2">
|
||||||
|
<span className="text-sm text-gray-400">Monthly Revenue</span>
|
||||||
|
<span className="text-sm font-medium text-yellow-400">$51K → $227K</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-full bg-gray-800 rounded-full h-2">
|
||||||
|
<div className="bg-gradient-to-r from-yellow-500 to-yellow-400 h-2 rounded-full" style={{ width: '80%' }}></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-gray-400">Integrated Meta Ads and Google Ads with creative hook optimization</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Card 3 */}
|
||||||
|
<div className="bg-gradient-to-br from-gray-900 to-black border border-yellow-600/30 rounded-lg p-8 hover:border-yellow-500/50 transition-all">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<h3 className="text-2xl font-bold text-white" style={{ fontFamily: 'var(--font-playfair-display), serif' }}>High-End Jewelry Store</h3>
|
||||||
|
<span className="text-4xl">💎</span>
|
||||||
|
</div>
|
||||||
|
<div className="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-4 mb-6">
|
||||||
|
<div className="text-5xl font-bold text-yellow-400 mb-2">3.27</div>
|
||||||
|
<div className="text-sm text-gray-300">ROAS</div>
|
||||||
|
</div>
|
||||||
|
<div className="mb-6">
|
||||||
|
<div className="flex justify-between items-center mb-2">
|
||||||
|
<span className="text-sm text-gray-400">Monthly Revenue</span>
|
||||||
|
<span className="text-sm font-medium text-yellow-400">$9K → $32K</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-full bg-gray-800 rounded-full h-2">
|
||||||
|
<div className="bg-gradient-to-r from-yellow-500 to-yellow-400 h-2 rounded-full" style={{ width: '72%' }}></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-gray-400">Luxury-focused TikTok Ads and Google Ads targeting high-value segments</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Card 4 */}
|
||||||
|
<div className="bg-gradient-to-br from-gray-900 to-black border border-yellow-600/30 rounded-lg p-8 hover:border-yellow-500/50 transition-all">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<h3 className="text-2xl font-bold text-white" style={{ fontFamily: 'var(--font-playfair-display), serif' }}>Gold Jewelry Store</h3>
|
||||||
|
<span className="text-4xl">👑</span>
|
||||||
|
</div>
|
||||||
|
<div className="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-4 mb-6">
|
||||||
|
<div className="text-5xl font-bold text-yellow-400 mb-2">4.79</div>
|
||||||
|
<div className="text-sm text-gray-300">ROAS</div>
|
||||||
|
</div>
|
||||||
|
<div className="mb-6">
|
||||||
|
<div className="flex justify-between items-center mb-2">
|
||||||
|
<span className="text-sm text-gray-400">Monthly Revenue</span>
|
||||||
|
<span className="text-sm font-medium text-yellow-400">$8K → $23K</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-full bg-gray-800 rounded-full h-2">
|
||||||
|
<div className="bg-gradient-to-r from-yellow-500 to-yellow-400 h-2 rounded-full" style={{ width: '65%' }}></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-gray-400">Data-driven Meta Ads campaigns with lead generation and continuous testing</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Featured Quote Block */}
|
||||||
|
<div className="relative bg-gradient-to-r from-yellow-600/20 to-yellow-500/10 border border-yellow-500/30 rounded-xl p-12 mb-12">
|
||||||
|
<div className="absolute top-6 right-8 text-6xl opacity-20">🦁</div>
|
||||||
|
<blockquote className="relative z-10">
|
||||||
|
<p className="text-3xl font-bold text-white mb-6" style={{ fontFamily: 'var(--font-playfair-display), serif' }}>
|
||||||
|
"Fran built a testing framework around customer archetypes and creative hooks that allowed us to scale faster than we thought possible."
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-12 h-12 bg-yellow-500/20 border border-yellow-500/40 rounded-full flex items-center justify-center">
|
||||||
|
<span className="text-xl">👥</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-white font-semibold">Premium E-Commerce Client</div>
|
||||||
|
<div className="text-sm text-gray-400">Featured Case Study</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Gold Gradient CTA Button */}
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<button className="bg-gradient-to-r from-yellow-500 to-yellow-400 hover:from-yellow-400 hover:to-yellow-300 text-black font-bold py-4 px-12 rounded-lg transition-all shadow-lg hover:shadow-xl hover:shadow-yellow-500/50">
|
||||||
|
View All Case Studies →
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="cta" data-section="cta">
|
<div id="cta" data-section="cta">
|
||||||
|
|||||||
@@ -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-montserrat), sans-serif;
|
font-family: var(--font-dm-sans), 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-libre-baskerville), serif;
|
font-family: var(--font-manrope), sans-serif;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user