Skip to content

Commit 0c9531e

Browse files
spivxspivx
authored
Merge pull request #8 from spivx/move-logo
feat: enhance NewInstructionsPage with animated background and improv…
2 parents cd9cca3 + 2987847 commit 0c9531e

File tree

4 files changed

+79
-85
lines changed

4 files changed

+79
-85
lines changed

‎app/new/page.tsx‎

Lines changed: 71 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,14 @@ import { useMemo, useState } from "react"
44

55
import { Button } from "@/components/ui/button"
66
import { InstructionsWizard } from "@/components/instructions-wizard"
7+
import { AnimatedBackground } from "@/components/AnimatedBackground"
78
import { getHomeMainClasses } from "@/lib/utils"
8-
import { getFormatLabel } from "@/lib/wizard-utils"
99
import { ANALYTICS_EVENTS } from "@/lib/analytics-events"
1010
import { track } from "@/lib/mixpanel"
1111
import type { FileOutputConfig } from "@/types/wizard"
1212
import { Github } from "lucide-react"
1313
import Link from "next/link"
1414

15-
import Logo from "@/components/Logo"
1615
import filesData from "@/data/files.json"
1716

1817
export default function NewInstructionsPage() {
@@ -38,86 +37,81 @@ export default function NewInstructionsPage() {
3837
}
3938

4039
return (
41-
<div className="min-h-screen bg-background text-foreground">
42-
{/* Top utility bar */}
43-
<div className="absolute top-4 right-4 z-10">
44-
<Link href="https://github.com/spivx/devcontext" target="_blank">
45-
<Button variant="outline" size="sm">
46-
<Github className="mr-2 h-4 w-4" />
47-
GitHub
48-
</Button>
49-
</Link>
50-
</div>
51-
52-
{/* Hero Section */}
53-
<main className={getHomeMainClasses(showWizard)}>
54-
{showWizard && selectedFileId ? (
55-
<InstructionsWizard selectedFileId={selectedFileId} onClose={handleWizardClose} />
56-
) : (
57-
<>
58-
<div className="space-y-6">
59-
{/* Logo/Title */}
60-
<Logo />
61-
62-
{/* Headline */}
63-
<h1 className="max-w-4xl text-3xl font-bold">
64-
Assemble Tailored AI Coding Playbooks With a Guided Wizard
65-
</h1>
66-
67-
{/* Subheadline */}
68-
<p className="max-w-xl text-lg leading-relaxed text-muted-foreground">
69-
Move from curated best practices to sharable files like Copilot instructions, Cursor rules, and agents.md playbooks in just a few guided steps.
70-
</p>
40+
<div className="relative min-h-screen overflow-hidden bg-background text-foreground">
41+
<AnimatedBackground />
42+
<div className="relative z-10 flex min-h-screen flex-col">
43+
{/* Top utility bar */}
44+
<div
45+
className={`absolute inset-x-0 top-4 flex items-center px-6 sm:px-8 lg:px-12 ${showWizard ? "justify-end" : "justify-between"}`}
46+
>
47+
{!showWizard ? (
48+
<>
49+
<Link href="/" className="text-lg font-semibold tracking-tight text-foreground md:text-xl">
50+
DevContext
51+
</Link>
52+
<Link href="https://github.com/spivx/devcontext" target="_blank">
53+
<Button variant="outline" size="sm">
54+
<Github className="mr-2 h-4 w-4" />
55+
GitHub
56+
</Button>
57+
</Link>
58+
</>
59+
) : (
60+
<Link href="https://github.com/spivx/devcontext" target="_blank">
61+
<Button variant="outline" size="sm">
62+
<Github className="mr-2 h-4 w-4" />
63+
GitHub
64+
</Button>
65+
</Link>
66+
)}
67+
</div>
7168

72-
<p className="max-w-xl text-sm text-muted-foreground/80">
73-
Use the wizard to generate Copilot instruction files, agents files, comprehensive instruction sets, and Cursor rules without starting from a blank page.
74-
</p>
69+
{/* Hero Section */}
70+
<main className={getHomeMainClasses(showWizard)}>
71+
{showWizard && selectedFileId ? (
72+
<InstructionsWizard selectedFileId={selectedFileId} onClose={handleWizardClose} />
73+
) : (
74+
<>
75+
<div className="space-y-6">
76+
<div className="space-y-4">
77+
<h1 className="text-3xl font-bold">Start a new instructions project</h1>
78+
<p className="mx-auto max-w-2xl text-base leading-relaxed text-muted-foreground md:text-lg">
79+
Choose the file preset that matches what you need. The wizard will open with targeted questions and save progress as you go.
80+
</p>
81+
<div className="mx-auto max-w-2xl text-left text-sm text-muted-foreground/90 md:text-base">
82+
<ul className="list-disc space-y-2 pl-5">
83+
<li>Pick a preset to load framework, architecture, and workflow prompts.</li>
84+
<li>Answer or skip questions — you can revisit any step before exporting.</li>
85+
<li>Download the generated file once every section shows as complete.</li>
86+
</ul>
87+
</div>
88+
</div>
7589

76-
{/* File type CTAs */}
77-
<div className="pt-6">
78-
<div className="grid gap-4 md:grid-cols-2">
79-
{fileOptions.map((file) => {
80-
const formatLabel = getFormatLabel(file.format)
81-
return (
82-
<button
83-
key={file.id}
84-
type="button"
85-
className="group relative flex w-full flex-col items-start gap-3 rounded-3xl border border-border/60 bg-card/80 p-6 text-left shadow-sm ring-offset-background transition-all hover:-translate-y-1 hover:border-primary/60 hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/80"
86-
onClick={() => handleFileCtaClick(file)}
87-
aria-label={`Create ${file.label}`}
88-
>
89-
<div className="flex items-center gap-2 rounded-full bg-secondary/60 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-secondary-foreground/80">
90-
<span className="inline-flex h-2 w-2 rounded-full bg-primary/70" aria-hidden />
91-
<span>Start with</span>
92-
</div>
93-
<div>
94-
<p className="text-xl font-semibold text-foreground transition-colors group-hover:text-primary">
95-
{file.label}
96-
</p>
97-
{file.filename ? (
98-
<p className="mt-1 text-sm text-muted-foreground">
99-
{file.filename}
100-
</p>
101-
) : null}
102-
</div>
103-
{formatLabel ? (
104-
<span className="inline-flex items-center gap-2 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
105-
{formatLabel} format
90+
{/* File type CTAs */}
91+
<div className="pt-6">
92+
<div className="flex flex-wrap items-center justify-center gap-5">
93+
{fileOptions.map((file) => {
94+
return (
95+
<button
96+
key={file.id}
97+
type="button"
98+
className="group inline-flex h-32 w-32 items-center justify-center rounded-full border border-border/60 bg-gradient-to-br from-card/95 via-card/90 to-card/80 px-6 text-sm font-medium text-foreground text-center shadow-sm ring-offset-background transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/80"
99+
onClick={() => handleFileCtaClick(file)}
100+
aria-label={`Create ${file.label}`}
101+
>
102+
<span className="break-words text-sm font-semibold leading-tight text-foreground transition-colors duration-200 group-hover:text-primary/90">
103+
{file.filename ?? file.label}
106104
</span>
107-
) : null}
108-
<span className="pointer-events-none absolute right-6 top-6 text-primary/60 transition-transform group-hover:translate-x-1">
109-
→
110-
</span>
111-
</button>
112-
)
113-
})}
105+
</button>
106+
)
107+
})}
108+
</div>
114109
</div>
115110
</div>
116-
</div>
117-
</>
118-
)}
119-
</main>
120-
111+
</>
112+
)}
113+
</main>
114+
</div>
121115
</div>
122116
)
123117
}

‎app/page.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,7 @@ export default function LandingPage() {
1010
<div className="relative min-h-screen overflow-hidden bg-background text-foreground">
1111
<AnimatedBackground />
1212
<div className="relative z-10 flex min-h-screen flex-col">
13-
<header className="flex items-center justify-between px-6 py-6 lg:px-12 lg:py-8">
14-
<Link href="/" className="text-lg font-semibold tracking-tight text-foreground md:text-xl">
15-
DevContext
16-
</Link>
13+
<header className="flex items-center justify-end px-6 py-6 lg:px-12 lg:py-8">
1714
<div className="flex items-center gap-3">
1815
<Button asChild variant="ghost" size="sm" className="hidden sm:inline-flex">
1916
<Link href="/new">Launch wizard</Link>
@@ -31,9 +28,7 @@ export default function LandingPage() {
3128
<Hero />
3229
</main>
3330

34-
<footer className="px-6 pb-10 text-center text-xs text-muted-foreground lg:px-12">
35-
Open-source and community built — keep shipping with more context than commits.
36-
</footer>
31+
3732
</div>
3833
</div>
3934
)

‎components/AnimatedBackground.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ export function AnimatedBackground() {
2323
animate={{ opacity: [0.5, 0.85, 0.65], rotate: [0, 2, -1, 0] }}
2424
transition={{ duration: 18, repeat: Infinity, ease: "easeInOut" }}
2525
/>
26-
2726
<motion.div
2827
className="absolute top-[-20%] left-[10%] h-[46rem] w-[46rem] rounded-full bg-primary/30 blur-3xl"
2928
initial={{ x: "0%", y: "0%", scale: 1 }}

‎components/Hero.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { motion } from "framer-motion"
44
import { ArrowRight } from "lucide-react"
55
import Link from "next/link"
66

7+
import Logo from "@/components/Logo"
78
import { Button } from "@/components/ui/button"
89

910
const containerVariants = {
@@ -28,6 +29,11 @@ export function Hero() {
2829
animate="show"
2930
>
3031
<motion.div className="space-y-10" variants={itemVariants}>
32+
<motion.div className="mx-auto w-full max-w-[220px]" variants={itemVariants}>
33+
<div className="origin-center scale-[1.18] md:scale-[1.25]">
34+
<Logo width={220} height={220} />
35+
</div>
36+
</motion.div>
3137
<motion.span
3238
className="inline-flex items-center gap-2 rounded-full border border-border/60 bg-background/70 px-4 py-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground shadow-sm backdrop-blur"
3339
variants={itemVariants}

0 commit comments

Comments
 (0)