updated hero section and added google auth
This commit is contained in:
@@ -37,6 +37,10 @@ export function SignIn() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleGoogleSignIn = () => {
|
||||
void signIn("google", { redirectTo: "/dashboard" });
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="w-full max-w-md mx-auto mt-20 shadow-lg">
|
||||
<CardHeader className="space-y-1">
|
||||
@@ -50,50 +54,77 @@ export function SignIn() {
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-4">
|
||||
{error && (
|
||||
<div className="bg-destructive/15 text-destructive text-sm p-3 rounded-md text-center">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="m@example.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
minLength={8}
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" className="w-full">
|
||||
{step === "signIn" ? "Sign In" : "Sign Up"}
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full flex items-center justify-center gap-2"
|
||||
onClick={handleGoogleSignIn}
|
||||
>
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
||||
/>
|
||||
</svg>
|
||||
Sign in with Google
|
||||
</Button>
|
||||
</form>
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<span className="w-full border-t" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs uppercase">
|
||||
<span className="bg-background px-2 text-muted-foreground">
|
||||
Or continue with email
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="m@example.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
minLength={8}
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" className="w-full">
|
||||
{step === "signIn" ? "Sign In" : "Sign Up"}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex flex-col gap-4">
|
||||
<div className="relative w-full">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<span className="w-full border-t" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs uppercase">
|
||||
<span className="bg-background px-2 text-muted-foreground">
|
||||
Or
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="link"
|
||||
onClick={() => setStep(step === "signIn" ? "signUp" : "signIn")}
|
||||
|
||||
86
components/features-section.tsx
Normal file
86
components/features-section.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Zap, Search, Target } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const features = [
|
||||
{
|
||||
title: "AI Analysis",
|
||||
description:
|
||||
"We scrape your website and use GPT-4 to extract features, pain points, and keywords automatically.",
|
||||
icon: Zap,
|
||||
className: "md:col-span-2",
|
||||
},
|
||||
{
|
||||
title: "Smart Dorking",
|
||||
description:
|
||||
"Our system generates targeted Google dork queries to find high-intent posts across Reddit, HN, and more.",
|
||||
icon: Search,
|
||||
className: "md:col-span-1",
|
||||
},
|
||||
{
|
||||
title: "Scored Leads",
|
||||
description:
|
||||
"Each opportunity is scored by relevance and comes with suggested engagement approaches.",
|
||||
icon: Target,
|
||||
className: "md:col-span-3",
|
||||
},
|
||||
];
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.2,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: 0.5,
|
||||
ease: "easeOut",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export function FeaturesSection() {
|
||||
return (
|
||||
<section className="border-t border-border/40 bg-muted/20 backdrop-blur-sm relative z-10">
|
||||
<div className="container mx-auto max-w-7xl px-4 py-24">
|
||||
<motion.div
|
||||
className="grid md:grid-cols-3 gap-6"
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
>
|
||||
{features.map((feature, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
variants={itemVariants}
|
||||
className={cn(
|
||||
"bg-card text-card-foreground p-8 rounded-2xl border h-full flex flex-col items-start text-left transition-all hover:border-primary/50 hover:shadow-lg",
|
||||
feature.className
|
||||
)}
|
||||
>
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 mb-6">
|
||||
<feature.icon className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3">{feature.title}</h3>
|
||||
<p className="text-muted-foreground leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
87
components/hero-section.tsx
Normal file
87
components/hero-section.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import Link from "next/link";
|
||||
import { ArrowRight, Sparkles } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.2,
|
||||
delayChildren: 0.3,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 30 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: 0.8,
|
||||
ease: [0.22, 1, 0.36, 1], // Custom easing (approx. easeOutQuint/Expo) for a premium feel
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export function HeroSection() {
|
||||
return (
|
||||
<div className="container mx-auto max-w-7xl px-4 min-h-[75vh] flex items-center relative z-10">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center w-full">
|
||||
<motion.div
|
||||
className="flex flex-col items-start text-left space-y-8"
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80"
|
||||
>
|
||||
<Sparkles className="mr-1 h-3 w-3" />
|
||||
AI-Powered Research
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
variants={itemVariants}
|
||||
className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl text-foreground"
|
||||
>
|
||||
Find Your Next Customers
|
||||
<br />
|
||||
<span className="text-muted-foreground">
|
||||
Before They Know They Need You
|
||||
</span>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
variants={itemVariants}
|
||||
className="max-w-xl text-lg text-muted-foreground font-light leading-relaxed"
|
||||
>
|
||||
Sanati analyzes your product and finds people on Reddit, Hacker News,
|
||||
and forums who are actively expressing needs that your solution
|
||||
solves.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
className="flex flex-col sm:flex-row gap-4 pt-2"
|
||||
>
|
||||
<Link href="/auth">
|
||||
<Button size="lg" className="gap-2 px-8 text-base">
|
||||
Start Finding Opportunities
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Right side is reserved for the shader visualization */}
|
||||
<div className="hidden lg:block h-full min-h-[400px]"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -36,9 +36,9 @@ export function HeroShader() {
|
||||
|
||||
ctx.fillStyle = "rgba(255, 255, 255, 0.5)"; // stroke(w, 116) approx white with alpha
|
||||
|
||||
// Center of drawing - offset to the right
|
||||
const cx = canvas.width * 0.75;
|
||||
const cy = canvas.height / 2;
|
||||
// Center of drawing - positioned to the right and aligned with content
|
||||
const cx = canvas.width * 0.7;
|
||||
const cy = canvas.height * 0.4;
|
||||
|
||||
// Loop for points
|
||||
// for(t+=PI/90,i=1e4;i--;)a()
|
||||
@@ -87,7 +87,7 @@ export function HeroShader() {
|
||||
const c = d / 4 - t / 2 + (i % 2) * 3;
|
||||
|
||||
// q = y * k / 5 * (2 + sin(d*2 + y - t*4)) + 80
|
||||
const q = y * k / 5 * (2 + Math.sin(d * 2 + y - t * 4)) + 80;
|
||||
const q = y * k / 5 * (2 + Math.sin(d * 2 + y - t * 4)) + 300;
|
||||
|
||||
// x = q * cos(c) + 200
|
||||
// y_out = q * sin(c) + d * 9 + 60
|
||||
@@ -97,7 +97,7 @@ export function HeroShader() {
|
||||
const x = (q * Math.cos(c)) + cx;
|
||||
const y_out = (q * Math.sin(c) + d * 9) + cy;
|
||||
|
||||
ctx.fillRect(x, y_out, 1.5, 1.5);
|
||||
ctx.fillRect(x, y_out, 2.5, 2.5);
|
||||
}
|
||||
|
||||
animationFrameId = requestAnimationFrame(draw);
|
||||
|
||||
Reference in New Issue
Block a user