1import React from 'react';
2
3const SocialFeedsCTA = () => {
4    return (
5        <div className="min-h-screen w-full flex items-center justify-center p-8 bg-gray-50">
6            <div className="relative w-full mx-auto max-w-5xl rounded-3xl border border-white/10 overflow-hidden">
7                <img
8                    src="https://images.unsplash.com/photo-1521119989659-a83eee488004?q=80&w=2523&auto=format&fit=crop"
9                    className="absolute left-0 top-0 h-full w-full object-cover brightness-75"
10                />
11
12                <div className="absolute left-0 top-0 h-full w-full bg-black/60" />
13
14                <div className="relative flex flex-col items-center justify-center gap-y-6 px-8 py-24 text-center">
15
16                    <div className="rounded-full bg-black/30 px-4 py-1.5 text-sm font-medium text-gray-200 backdrop-blur-sm">
17                        No Credit Card Required
18                    </div>
19
20                    <h3
21                        className="
22                            max-w-2xl font-sans text-5xl font-medium leading-tight tracking-tighter
23                            
24                            /* Gradient Text */
25                            bg-gradient-to-b from-white to-[#fffc] bg-clip-text text-transparent
26                            
27                            /* Custom Drop Shadow */
28                            filter-[drop-shadow(0px_4px_8px_rgba(50,26,123,0.08))_drop-shadow(0px_2px_4px_rgba(50,26,123,0.08))_drop-shadow(0px_1px_2px_rgba(50,26,123,0.08))_drop-shadow(0px_0.5px_0.5px_rgba(50,26,123,0.06))]
29                        "
30                    >
31                        Add unlimited social feeds free
32                    </h3>
33
34                    <div className="mt-2 flex flex-wrap items-center justify-center gap-x-4 gap-y-4">
35                        <a
36                            href="#"
37                            className="inline-flex items-center justify-center gap-x-2 whitespace-nowrap rounded-full bg-blue-600 px-5 py-2.5 text-center text-sm font-medium text-white transition-colors duration-300 ease-in-out hover:bg-blue-500"
38                            style={{
39                                boxShadow:
40                                    'inset 0 1px 2px -0.5px rgba(255, 255, 255, 0.12), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.16), inset 0 8px 24px -4px rgba(255, 255, 255, 0.16), 0 8px 8px -3px rgba(7, 1, 19, 0.03), 0 5px 5px -2.5px rgba(7, 1, 19, 0.03), 0 3px 3px -1.5px rgba(7, 1, 19, 0.03), 0 2px 2px -1px rgba(7, 1, 19, 0.03), 0 1px 1px -0.5px rgba(7, 1, 19, 0.03), 0 0.5px 0.5px rgba(7, 1, 19, 0.03)',
41                                backgroundImage:
42                                    'linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06))',
43                            }}
44                        >
45                            Try Feedspring
46                            <svg
47                                xmlns="http://www.w3.org/2000/svg"
48                                className="h-4 w-4"
49                                fill="none"
50                                viewBox="0 0 24 24"
51                                stroke="currentColor"
52                                strokeWidth={3}
53                            >
54                                <path
55                                    strokeLinecap="round"
56                                    strokeLinejoin="round"
57                                    d="M9 5l7 7-7 7"
58                                />
59                            </svg>
60                        </a>
61
62                        <a
63                            href="#"
64                            className="inline-flex items-center justify-center whitespace-nowrap rounded-full bg-white/5 px-5 py-2.5 text-center text-sm font-medium text-white backdrop-blur-md transition-colors duration-300 ease-in-out hover:bg-white/10"
65                            style={{
66                                backgroundImage:
67                                    'linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08))',
68                                boxShadow:
69                                    'inset 0 2px 8px rgba(255, 255, 255, 0.05), inset 0 1px 3px rgba(255, 255, 255, 0.12), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.16)',
70                            }}
71                        >
72                            Product Tour
73                        </a>
74                    </div>
75
76                    <p className="mt-2 text-sm text-gray-50">
77                        Free for up to 1,000 views per month*
78                    </p>
79
80                </div>
81            </div>
82        </div>
83    );
84};
85
86export default SocialFeedsCTA;