Phantom Marketing Redesign

Before → After

Generic agency template transformed into a conversion-focused digital experience.

A before and after of the Phantom Marketing landing page

Key Contributions

Complete UI/UX redesign with dark mode-first approach

Strategic copywriting focused on clear value propositions

Full Framer development with custom code solutions

Responsive animations and micro-interactions

Technical Highlights

Custom gradient borders on transparent cards using Framer code overrides

export function withGradientBorder(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                style={{
                    ...props.style,
                    margin: "1px",
                }}
            >
                <div
                    style={{
                        position: "absolute",
                        inset: -1,
                        borderRadius: "15px",
                        opacity: 0.3,
                        border: "1px solid transparent",
                        background:
                            "linear-gradient(165deg, #F8B7DF 0%, rgba(194,183,228,0.17) 51%, #C2B7E4 100%) border-box",
                        WebkitMask:
                            "linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0)",
                        WebkitMaskComposite: "destination-out",
                        maskComposite: "exclude",
                        pointerEvents: "none",
                    }}
                />
                {props.children}
            </Component>
        )
    }
}

Native Framer animations with scroll-triggered reveals and parallax effects

Performance optimizations to maintain smooth interactions despite complex UI

Strategic Shift

From "20 Leads A Month Guaranteed" to "We Help Modern Businesses Win Online" — positioning Phantom as a comprehensive solution rather than a lead factory.

Project Takeaway

Pushing Framer beyond its defaults created a distinctive experience that differentiates Phantom from typical agency templates.

Like this project

Completed work

Redesigned and developed Phantom Marketing's website using Framer with custom code overrides for gradient borders and native animations.

Likes

Views

Timeline

Dec 31, 2024 - Feb 14, 2025

Clients

My Business Automated