0xmetaschool/
EmailGeneratorGPT
EmailGeneratorGPT is an intelligent email generation platform powered by OpenAI's GPT. Create professional, personalized, and contextually appropriate emails for any situation with the help of advanced AI. Built with Next.js and styled with Tailwind CSS, this application offers a seamless user experience with real-time email generation and customization options.
Readme
Source Codeapp
api
dashboard
home
page.js
settings
globals.css
layout.js
not-found.js
page.js
components
constants
hooks
.eslintrc.json
.gitignore
jsconfig.json
LICENSE
next.config.mjs
package.json
postcss.config.mjs
README.md
tailwind.config.js
app
homepage.js
homepage.jspage.js
1'use client';
2
3import { useRouter } from 'next/navigation';
4import { ArrowLeft, Mail, Sparkles, Zap, History, Wand2 } from 'lucide-react';
5
6export default function HomePage() {
7 const router = useRouter();
8
9 return (
10 <main className="min-h-screen bg-black text-white">
11 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
12 {/* Hero Section */}
13 <div className="min-h-[90vh] flex flex-col justify-center py-16 relative">
14 {/* Background Elements */}
15 <div className="absolute inset-0 overflow-hidden">
16 <div className="absolute top-1/4 left-1/4 w-72 h-72 bg-white/10 rounded-full filter blur-3xl animate-pulse" />
17 <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-white/5 rounded-full filter blur-3xl animate-pulse delay-1000" />
18 <div className="absolute top-1/3 right-1/3 w-48 h-48 bg-white/5 rounded-full filter blur-2xl animate-pulse delay-500" />
19 </div>
20
21 <div className="relative z-10 text-center space-y-8">
22 {/* Badge */}
23 <div className="inline-flex items-center space-x-2 bg-white/10 rounded-full px-4 py-2 backdrop-blur-lg border border-white/10">
24 <Sparkles className="w-4 h-4 text-white animate-pulse" />
25 <span className="text-sm font-medium text-white">
26 Powered by Advanced AI
27 </span>
28 </div>
29
30 {/* Main Heading */}
31 <div className="space-y-4">
32 <h1 className="text-6xl md:text-7xl font-bold bg-gradient-to-r from-white via-white to-white/70 bg-clip-text text-transparent">
33 Craft Perfect Emails
34 </h1>
35 <p className="text-4xl md:text-5xl text-white/80 font-light">
36 in Seconds with AI
37 </p>
38 </div>
39
40 {/* Description */}
41 <p className="max-w-2xl mx-auto text-xl text-white/70 leading-relaxed">
42 Transform your email communication with our intelligent AI assistant.
43 <span className="block mt-2 font-light italic">
44 Professional, personalized, and perfectly crafted every time.
45 </span>
46 </p>
47
48 {/* Stats Section */}
49 <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-3xl mx-auto mt-8">
50 {[
51 { number: '100+', label: 'Email Templates' },
52 { number: '10x', label: 'Faster Writing' },
53 { number: '24/7', label: 'AI Assistance' },
54 ].map((stat) => (
55 <div key={stat.label} className="p-4 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10">
56 <div className="text-3xl font-bold text-white mb-1">{stat.number}</div>
57 <div className="text-white/70">{stat.label}</div>
58 </div>
59 ))}
60 </div>
61
62 {/* CTA Buttons */}
63 <div className="flex flex-col md:flex-row gap-6 mt-12 items-center justify-center">
64 <button
65 onClick={() => router.push('/dashboard')}
66 className="group relative px-8 py-4 bg-white text-black rounded-xl font-medium text-lg hover:shadow-xl hover:shadow-white/20 transition-all duration-300 hover:-translate-y-1 overflow-hidden flex items-center"
67 >
68 <div className="relative flex items-center justify-center">
69 Start Writing
70 <Zap className="w-5 h-5 ml-2 text-black" />
71 <div className="absolute inset-0 bg-black opacity-0 group-hover:opacity-5 transition-opacity duration-300" />
72 </div>
73 </button>
74 </div>
75
76 {/* Feature Grid */}
77 <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16">
78 {[
79 {
80 icon: <Mail className="w-6 h-6 text-white/80" />,
81 title: 'Smart Email Generation',
82 description: 'Generate professional emails in seconds with AI assistance',
83 delay: '0'
84 },
85 {
86 icon: <Wand2 className="w-6 h-6 text-white/80" />,
87 title: 'Multiple Tones',
88 description: 'Choose from various tones to match your communication style',
89 delay: '100'
90 },
91 {
92 icon: <History className="w-6 h-6 text-white/80" />,
93 title: 'Custom Templates',
94 description: 'Access pre-built templates for common email scenarios',
95 delay: '200'
96 }
97 ].map((feature, index) => (
98 <div
99 key={feature.title}
100 className="group p-8 rounded-2xl border border-white/10 bg-white/5 backdrop-blur-sm hover:bg-white/10 transition-all duration-500 hover:-translate-y-1 hover:shadow-lg hover:shadow-white/5"
101 style={{
102 animationDelay: `${feature.delay}ms`,
103 }}
104 >
105 <div className="mb-4 group-hover:scale-110 transition-transform duration-300">
106 {feature.icon}
107 </div>
108 <h3 className="text-xl font-semibold text-white mb-3 group-hover:translate-x-1 transition-transform duration-300">
109 {feature.title}
110 </h3>
111 <p className="text-white/70 leading-relaxed group-hover:translate-x-1 transition-transform duration-300 delay-75">
112 {feature.description}
113 </p>
114 </div>
115 ))}
116 </div>
117
118 {/* Trust Section */}
119 <div className="mt-24 space-y-8">
120 <div className="space-y-2">
121 <h3 className="text-white/70 text-sm uppercase tracking-wider font-medium">Trusted by professionals worldwide</h3>
122 <p className="text-white/50 text-sm">Join thousands of professionals who trust us with their email communication</p>
123 </div>
124
125 {/* Trust Metrics */}
126 <div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-3xl mx-auto">
127 {[
128 { number: '10K+', label: 'Active Users' },
129 { number: '500K+', label: 'Emails Generated' },
130 { number: '98%', label: 'Satisfaction Rate' },
131 { number: '50+', label: 'Countries' },
132 ].map((metric) => (
133 <div key={metric.label} className="text-center">
134 <div className="text-2xl md:text-3xl font-bold text-white mb-1 bg-gradient-to-r from-white via-white to-white/70 bg-clip-text text-transparent">
135 {metric.number}
136 </div>
137 <div className="text-white/50 text-sm">{metric.label}</div>
138 </div>
139 ))}
140 </div>
141
142 {/* Company Logos */}
143 <div className="relative">
144 <div className="absolute inset-0 bg-gradient-to-r from-black via-transparent to-black z-10" />
145 <div className="flex items-center justify-around gap-8 overflow-hidden opacity-50 hover:opacity-70 transition-opacity duration-300">
146 {[
147 'Fortune 500', 'Tech Leaders', 'Global Enterprises', 'Startups', 'Educational Institutions',
148 'Fortune 500', 'Tech Leaders', 'Global Enterprises' // Repeated for scrolling effect
149 ].map((company, index) => (
150 <div
151 key={index}
152 className="flex-shrink-0 px-8 py-4 bg-white/5 rounded-lg backdrop-blur-sm border border-white/10"
153 >
154 <span className="text-white/80 whitespace-nowrap font-medium">{company}</span>
155 </div>
156 ))}
157 </div>
158 </div>
159
160 {/* Trust Badges */}
161 <div className="flex justify-center gap-6 pt-8">
162 {[
163 { label: 'Enterprise Ready', icon: '🏢' },
164 { label: 'GDPR Compliant', icon: '🔒' },
165 { label: '24/7 Support', icon: '🌍' },
166 ].map((badge) => (
167 <div key={badge.label} className="flex items-center gap-2 px-4 py-2 bg-white/5 rounded-full backdrop-blur-sm border border-white/10">
168 <span>{badge.icon}</span>
169 <span className="text-white/70 text-sm font-medium">{badge.label}</span>
170 </div>
171 ))}
172 </div>
173 </div>
174 </div>
175 </div>
176 </div>
177 </main>
178 );
179}Downloads
0
Version
1.0.0
License
MIT
Platform
OpenAI GPT-4
Contributors 4
Open in
Last updated 2 months ago
We are a open source platform and encourage community to contribute to these templates!