Skip to content

Commit

Permalink
Mixpanel Integrated (AceXlabs#39)
Browse files Browse the repository at this point in the history
  • Loading branch information
patil-tejas authored Nov 10, 2024
1 parent f48c3dc commit 13a9a27
Show file tree
Hide file tree
Showing 12 changed files with 424 additions and 142 deletions.
8 changes: 6 additions & 2 deletions .env.example
Original file line number Diff line number Diff line change
@@ -1,2 +1,6 @@
// web3form access key
NEXT_PUBLIC_WEB3FORM_ACCESS_KEY=
# web3form access key
NEXT_PUBLIC_WEB3FORM_ACCESS_KEY=

# Mixpanel Tokens for prod and test
NEXT_PUBLIC_PROD_MIXPANEL_TOKEN=
NEXT_PUBLIC_TEST_MIXPANEL_TOKEN=
10 changes: 8 additions & 2 deletions app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
// import Accordian from "@/components/main/accordian/Accordian";
// import { Bottom } from "@/components/main/bottom/Bottom";
"use client";
import { useEffect } from "react";
import ContactPage from "@/components/main/contact/Contact";
import HeroSection from "@/components/main/hero/Hero";
import PricingSection from "@/components/Pricing/PricingSection";

import Services from "@/components/main/services/Services";
import TeamPage from "@/components/main/team/Team";
import { analyticsInit, trackEvent } from "@/lib/analytics";

export default function Home() {
useEffect(() => {
analyticsInit();
trackEvent("HomePage Viewed", {});
}, []);

return (
<>
<HeroSection />
Expand Down
110 changes: 62 additions & 48 deletions components/Pricing/GrowthCard.tsx
Original file line number Diff line number Diff line change
@@ -1,55 +1,69 @@
import { Check} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import Link from "next/link"
import { Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import Link from "next/link";
import { trackEvent } from "@/lib/analytics";

export const GrowthCard = () => {
return(
<Card className="relative bg-white rounded-3xl p-8 shadow-2xl flex flex-col justify-between transition-all duration-300 hover:shadow-[0_0_30px_rgba(255,255,255,0.2)] hover:scale-105 border border-gray-200">
<div>
<div className="absolute -top-3 left-6">
<span className="bg-gray-800 text-white px-4 py-1.5 rounded-full text-sm shadow-lg">
Ongoing Support
</span>
</div>
<div className="inline-block bg-gray-800 text-white px-4 py-1.5 rounded-full text-sm mb-6 shadow-lg">
Monthly Retainer
</div>
<h2 className="text-2xl font-bold mb-2 text-gray-800">Growth Retainer Package</h2>
<div className="mb-4">
<span className="text-4xl font-bold text-gray-800">$2497/month</span>
</div>
<p className="text-gray-600 mb-8">No commitment, cancel anytime</p>

<div className="mb-8">
<h3 className="text-xl font-semibold mb-4 text-gray-800">Dedicated Monthly Services:</h3>
<ul className="space-y-4">
{[
"60 hours of development time per month",
"Flexible hours allocation",
"Weekly strategy calls",
"Priority feature development",
"Continuous maintenance & optimization",
"Same-day emergency support"
].map((feature, index) => (
<li key={index} className="flex items-center gap-3">
<div className="bg-gray-800 rounded-full p-1 shadow-md">
<Check className="w-4 h-4 text-white" />
</div>
<span className="text-gray-600">{feature}</span>
</li>
))}
</ul>
</div>
const handlePricingBtn = () => {
trackEvent("Pricing Button Pressed", {
PricingType: "Monthly Retainer",
Platform: navigator.userAgent.includes("Mobile") ? "Mobile" : "Desktop",
});
};
return (
<Card className="relative bg-white rounded-3xl p-8 shadow-2xl flex flex-col justify-between transition-all duration-300 hover:shadow-[0_0_30px_rgba(255,255,255,0.2)] hover:scale-105 border border-gray-200">
<div>
<div className="absolute -top-3 left-6">
<span className="bg-gray-800 text-white px-4 py-1.5 rounded-full text-sm shadow-lg">
Ongoing Support
</span>
</div>

<Link href="https://cal.com/acex-labs" target="_blank">
<div className="inline-block bg-gray-800 text-white px-4 py-1.5 rounded-full text-sm mb-6 shadow-lg">
Monthly Retainer
</div>
<h2 className="text-2xl font-bold mb-2 text-gray-800">
Growth Retainer Package
</h2>
<div className="mb-4">
<span className="text-4xl font-bold text-gray-800">$2497/month</span>
</div>
<p className="text-gray-600 mb-8">No commitment, cancel anytime</p>

<div className="mb-8">
<h3 className="text-xl font-semibold mb-4 text-gray-800">
Dedicated Monthly Services:
</h3>
<ul className="space-y-4">
{[
"60 hours of development time per month",
"Flexible hours allocation",
"Weekly strategy calls",
"Priority feature development",
"Continuous maintenance & optimization",
"Same-day emergency support",
].map((feature, index) => (
<li key={index} className="flex items-center gap-3">
<div className="bg-gray-800 rounded-full p-1 shadow-md">
<Check className="w-4 h-4 text-white" />
</div>
<span className="text-gray-600">{feature}</span>
</li>
))}
</ul>
</div>
</div>

<Link href="https://cal.com/acex-labs" target="_blank">
<div className="space-y-4">
<Button className="w-full bg-gray-800 text-white hover:bg-gray-700 rounded-xl py-6 text-lg transition-all duration-300 shadow-lg hover:shadow-xl">
<Button
onClick={handlePricingBtn}
className="w-full bg-gray-800 text-white hover:bg-gray-700 rounded-xl py-6 text-lg transition-all duration-300 shadow-lg hover:shadow-xl"
>
Schedule a Call →
</Button>
</div>
</Link>
</Card>
)
}
</Link>
</Card>
);
};
116 changes: 65 additions & 51 deletions components/Pricing/MvpCard.tsx
Original file line number Diff line number Diff line change
@@ -1,58 +1,72 @@
import { Check} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import Link from "next/link"

import { Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import Link from "next/link";
import { trackEvent } from "@/lib/analytics";

export const MvpCard = () => {

return (
<Card className="relative bg-white rounded-3xl p-8 shadow-2xl flex flex-col justify-between transition-all duration-300 hover:shadow-[0_0_30px_rgba(255,255,255,0.2)] hover:scale-105 border border-gray-200">
<div>
<div className="absolute -top-3 left-6">
<span className="bg-gray-800 text-white px-4 py-1.5 rounded-full text-sm font-medium shadow-lg">
Most Popular
</span>
</div>
<div className="inline-block bg-gray-800 text-white px-4 py-1.5 rounded-full text-sm mb-6 shadow-lg">
One time
</div>
<h2 className="text-2xl font-bold mb-2 text-gray-800">MVP Development Package</h2>
<div className="mb-4">
<span className="text-4xl font-bold text-gray-800">Starting at $1997</span>
</div>
<p className="text-red-600 mb-8">20% off for early adopters</p>

<div className="mb-8">
<h3 className="text-xl font-semibold mb-4 text-gray-800">What&apos;s Included:</h3>
<ul className="space-y-4">
{[
"Complete MVP development in 2-3 weeks",
"Web application/ Mobile App",
"Modern, scalable tech stack",
"Seamless integrations (payments, auth, etc.)",
"30 days of free maintenance",
"Personalized, founder-led development",
"Regular updates and transparent process"
].map((feature, index) => (
<li key={index} className="flex items-center gap-3">
<div className="bg-gray-800 rounded-full p-1 shadow-md">
<Check className="w-4 h-4 text-white" />
</div>
<span className="text-gray-600">{feature}</span>
</li>
))}
</ul>
</div>
const handlePricingBtn = () => {
trackEvent("Pricing Button Pressed", {
PricingType: "One Time",
Platform: navigator.userAgent.includes("Mobile") ? "Mobile" : "Desktop",
});
};
return (
<Card className="relative bg-white rounded-3xl p-8 shadow-2xl flex flex-col justify-between transition-all duration-300 hover:shadow-[0_0_30px_rgba(255,255,255,0.2)] hover:scale-105 border border-gray-200">
<div>
<div className="absolute -top-3 left-6">
<span className="bg-gray-800 text-white px-4 py-1.5 rounded-full text-sm font-medium shadow-lg">
Most Popular
</span>
</div>
<div className="inline-block bg-gray-800 text-white px-4 py-1.5 rounded-full text-sm mb-6 shadow-lg">
One time
</div>
<h2 className="text-2xl font-bold mb-2 text-gray-800">
MVP Development Package
</h2>
<div className="mb-4">
<span className="text-4xl font-bold text-gray-800">
Starting at $1997
</span>
</div>

<Link href="https://cal.com/acex-labs" target="_blank">
<p className="text-red-600 mb-8">20% off for early adopters</p>

<div className="mb-8">
<h3 className="text-xl font-semibold mb-4 text-gray-800">
What&apos;s Included:
</h3>
<ul className="space-y-4">
{[
"Complete MVP development in 2-3 weeks",
"Web application/ Mobile App",
"Modern, scalable tech stack",
"Seamless integrations (payments, auth, etc.)",
"30 days of free maintenance",
"Personalized, founder-led development",
"Regular updates and transparent process",
].map((feature, index) => (
<li key={index} className="flex items-center gap-3">
<div className="bg-gray-800 rounded-full p-1 shadow-md">
<Check className="w-4 h-4 text-white" />
</div>
<span className="text-gray-600">{feature}</span>
</li>
))}
</ul>
</div>
</div>

<Link href="https://cal.com/acex-labs" target="_blank">
<div className="space-y-4">
<Button className="w-full bg-gray-800 text-white hover:bg-gray-700 rounded-xl py-6 text-lg transition-all duration-300 shadow-lg hover:shadow-xl">
<Button
onClick={handlePricingBtn}
className="w-full bg-gray-800 text-white hover:bg-gray-700 rounded-xl py-6 text-lg transition-all duration-300 shadow-lg hover:shadow-xl"
>
Get Started Now →
</Button>
</div>
</Link>
</Card>
)
}
</Link>
</Card>
);
};
12 changes: 11 additions & 1 deletion components/Pricing/StartupCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,15 @@ import { Check } from "lucide-react";
import Link from "next/link";
import { Button } from "../ui/button";
import { Card } from "../ui/card";
import { trackEvent } from "@/lib/analytics";

export const StartupCard = () => {
const handlePricingBtn = () => {
trackEvent("Pricing Button Pressed", {
PricingType: "Quarterly Plan",
Platform: navigator.userAgent.includes("Mobile") ? "Mobile" : "Desktop",
});
};
return (
<Card className="relative bg-black rounded-3xl p-8 shadow-2xl flex flex-col justify-between transition-all duration-300 hover:shadow-[0_0_30px_rgba(255,255,255,0.2)] hover:scale-105 border border-gray-700">
<div>
Expand Down Expand Up @@ -45,7 +52,10 @@ export const StartupCard = () => {

<Link href="https://cal.com/acex-labs" target="_blank">
<div className="space-y-4">
<Button className="w-full bg-white text-black hover:bg-gray-200 rounded-xl py-6 text-lg transition-all duration-300 shadow-lg hover:shadow-xl">
<Button
onClick={handlePricingBtn}
className="w-full bg-white text-black hover:bg-gray-200 rounded-xl py-6 text-lg transition-all duration-300 shadow-lg hover:shadow-xl"
>
Start Your Journey →
</Button>
</div>
Expand Down
Loading

0 comments on commit 13a9a27

Please sign in to comment.