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;