Skip to content

Commit 0bf708d

Browse files
atharva20-coderatharva20-coder
committed
Redesigned hero section
1 parent 3a547fd commit 0bf708d

File tree

5 files changed

+349
-59
lines changed

5 files changed

+349
-59
lines changed

‎src/app/(landingpage)/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -489,7 +489,7 @@ export default function LandingPage() {
489489
<p className="text-base sm:text-lg md:text-xl text-gray-800 dark:text-gray-400 mb-6 sm:mb-8 leading-relaxed max-w-2xl">
490490
Transform your Instagram presence today with our powerful AI automation, while preparing for tomorrow with upcoming integrations for Threads, Facebook, WhatsApp, Newsletter, Telegram, X, and LinkedIn. Our intelligent platform helps you create engaging conversations, deliver 24/7 customer support, and scale your social media engagement effortlessly across all channels.
491491
</p>
492-
<Link href="/dashboard" className="group relative bg-black text-white px-6 sm:px-8 py-3 sm:py-4 rounded-lg transition-all duration-300 shadow-sm hover:shadow-md overflow-hidden hover:bg-[#1a1a1a] hover:rounded-none inline-block w-full sm:w-auto text-center mt-8 sm:mt-12 border border-black dark:border-white">
492+
<Link href="/social/instagram" className="group relative bg-black text-white px-6 sm:px-8 py-3 sm:py-4 rounded-lg transition-all duration-300 shadow-sm hover:shadow-md overflow-hidden hover:bg-[#1a1a1a] hover:rounded-none inline-block w-full sm:w-auto text-center mt-8 sm:mt-12 border border-black dark:border-white">
493493
<span className="relative z-10 flex items-center justify-center gap-2 w-full">
494494
<span className="absolute left-0 transform -translate-x-6 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-300">
495495
<svg className="w-4 h-4 sm:w-5 sm:h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">

‎src/app/(landingpage)/social/pricings/page.tsx

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
"use client";
2+
3+
import { Sigmar } from 'next/font/google';
4+
import LandingNav from '@/components/global/landing-nav';
5+
import Footer from '@/components/global/footer';
6+
import { Button } from "@/components/ui/button";
7+
import { PLANS } from "@/constants/pages";
8+
import { CircleCheck } from "lucide-react";
9+
import { cn } from "@/lib/utils";
10+
11+
const sigmar = Sigmar({ weight: '400', subsets: ['latin'] });
12+
13+
export default function PricingPage() {
14+
return (
15+
<>
16+
<LandingNav />
17+
<div className="min-h-screen bg-white dark:bg-black py-20 px-4 sm:px-6 lg:px-8">
18+
{/* Hero Section */}
19+
<div className="text-center max-w-4xl mx-auto mb-20">
20+
<h1 className={`${sigmar.className} text-5xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6`}>
21+
Choose Your Plan
22+
</h1>
23+
<p className="text-xl text-gray-600 dark:text-gray-300">
24+
Scale your Instagram presence with our powerful automation tools
25+
</p>
26+
</div>
27+
28+
{/* Pricing Cards */}
29+
<div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-8 items-start">
30+
{PLANS.map((plan, index) => (
31+
<div
32+
key={plan.name}
33+
className={cn(
34+
"relative group",
35+
index === 1 && "md:translate-y-4"
36+
)}
37+
>
38+
<div className="absolute -inset-[2px] bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 rounded-2xl blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200" />
39+
<div className="relative bg-white dark:bg-black rounded-2xl p-8 h-full">
40+
<div className="flex flex-col h-full">
41+
<div className="mb-8">
42+
<h3 className={`${sigmar.className} text-2xl font-bold mb-2 bg-gradient-to-r from-gray-900 to-gray-600 dark:from-gray-100 dark:to-gray-300 bg-clip-text text-transparent`}>
43+
{plan.name}
44+
</h3>
45+
<p className="text-gray-600 dark:text-gray-400">{plan.description}</p>
46+
</div>
47+
48+
<div className="mb-8">
49+
<div className="flex items-baseline">
50+
<span className="text-5xl font-bold bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent">
51+
{plan.price}
52+
</span>
53+
<span className="text-gray-600 dark:text-gray-400 ml-2">/month</span>
54+
</div>
55+
</div>
56+
57+
<div className="space-y-4 mb-8 flex-grow">
58+
{plan.features.map((feature) => (
59+
<div key={feature} className="flex items-start gap-3">
60+
<CircleCheck className="h-6 w-6 text-green-500 flex-shrink-0" />
61+
<span className="text-gray-600 dark:text-gray-400">{feature}</span>
62+
</div>
63+
))}
64+
</div>
65+
</div>
66+
</div>
67+
</div>
68+
))}
69+
</div>
70+
71+
{/* FAQ Section */}
72+
<div className="max-w-3xl mx-auto mt-32 text-center">
73+
<h2 className={`${sigmar.className} text-3xl font-bold text-gray-900 dark:text-white mb-12`}>
74+
Frequently Asked Questions
75+
</h2>
76+
<div className="space-y-8 text-left">
77+
<div>
78+
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">How does the free plan work?</h3>
79+
<p className="text-gray-600 dark:text-gray-400">Our free plan includes 200 DMs and Comments per month, perfect for getting started with automation. You can upgrade anytime as your needs grow.</p>
80+
</div>
81+
<div>
82+
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">Can I switch plans later?</h3>
83+
<p className="text-gray-600 dark:text-gray-400">Yes! You can upgrade or downgrade your plan at any time. Changes will be reflected in your next billing cycle.</p>
84+
</div>
85+
<div>
86+
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">What payment methods do you accept?</h3>
87+
<p className="text-gray-600 dark:text-gray-400">We accept all major credit cards and UPI payments. For specific payment queries, please contact our support team.</p>
88+
</div>
89+
</div>
90+
</div>
91+
92+
{/* CTA Section */}
93+
<div className="max-w-4xl mx-auto mt-32 text-center">
94+
<h2 className={`${sigmar.className} text-3xl font-bold text-gray-900 dark:text-white mb-6`}>
95+
Ready to grow your Instagram presence?
96+
</h2>
97+
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8">
98+
Join thousands of creators who trust Auctorn for their Instagram automation needs
99+
</p>
100+
<Button
101+
className="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white px-8 py-6 text-lg font-semibold rounded-xl hover:opacity-90 transition-all duration-300"
102+
onClick={() => window.location.href = 'https://www.instagram.com/auctorn_com/'}
103+
>
104+
Get Started Now
105+
</Button>
106+
</div>
107+
</div>
108+
<Footer />
109+
</>
110+
);
111+
}

0 commit comments

Comments
 (0)