Skip to content

Commit cac0e42

Browse files
stevesarmientostevesarmiento
committed
chore: clean up home page structuring
1 parent bc63bb3 commit cac0e42

File tree

6 files changed

+215
-170
lines changed

6 files changed

+215
-170
lines changed

‎examples/next-js/app/page.tsx‎

Lines changed: 99 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,27 @@
11
'use client';
22

3-
import Link from 'next/link';
43
import { ArrowRight } from 'lucide-react';
54
import { CopyButton } from '@/components/ui/copy-button';
65
import { Features } from '@/components/landing';
6+
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
7+
import {
8+
FeaturedSection,
9+
ElementExamplesSection,
10+
HooksExamplesSection,
11+
TransactionsSection,
12+
} from '@/components/playground';
13+
import { Blocks, Code2, Anchor, Zap } from 'lucide-react';
14+
import { Button } from '@/components/ui/button';
715

816
export default function Home() {
9-
const npmCommand = 'npm install @solana/connector';
17+
const npmCommand = 'npm i @solana/connector';
18+
19+
const scrollToPlayground = () => {
20+
const playgroundSection = document.getElementById('playground');
21+
if (playgroundSection) {
22+
playgroundSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
23+
}
24+
};
1025

1126
return (
1227
<div className="max-w-7xl mx-auto min-h-[calc(100vh-4rem)] border-r border-l border-sand-200">
@@ -43,20 +58,98 @@ export default function Home() {
4358
iconClassNameCheck="text-green-600"
4459
/>
4560

46-
<Link
47-
href="/playground"
48-
className="inline-flex items-center gap-2 px-5 py-2.5 bg-sand-1500 hover:bg-sand-1400 text-white rounded-lg transition-colors font-inter-medium text-body-md"
61+
<Button
62+
onClick={scrollToPlayground}
63+
variant="default"
64+
size="sm"
65+
className="gap-2"
4966
>
5067
View Playground
5168
<ArrowRight className="h-4 w-4" />
52-
</Link>
69+
</Button>
5370
</div>
5471
</div>
5572
</div>
5673
</section>
5774

5875
{/* Features */}
5976
<Features />
77+
{/* Playground Section */}
78+
<section
79+
id="playground"
80+
className="py-12 border-b border-sand-200"
81+
style={{
82+
backgroundImage: `repeating-linear-gradient(
83+
45deg,
84+
transparent,
85+
transparent 10px,
86+
rgba(233, 231, 222, 0.5) 10px,
87+
rgba(233, 231, 222, 0.5) 11px
88+
)`,
89+
}}
90+
>
91+
<div className="max-w-7xl mx-auto px-4 lg:px-6">
92+
<h1 className="text-h2 text-sand-1500 mb-3 text-center">Playground</h1>
93+
<p className="text-body-xl text-sand-800 text-center max-w-xl mx-auto">
94+
Explore components, elements, hooks, and test transactions. Copy any example and customize it
95+
for your app.
96+
</p>
97+
</div>
98+
</section>
99+
100+
{/* Tabbed Navigation */}
101+
<Tabs defaultValue="components" className="w-full">
102+
<div className="sticky top-16 z-40 bg-bg1/95 backdrop-blur-sm border-b border-sand-200">
103+
<div className="max-w-7xl mx-auto">
104+
<TabsList className="h-14 w-full justify-start gap-0 bg-transparent p-0 rounded-none">
105+
<TabsTrigger
106+
value="components"
107+
className="h-14 px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-sand-1500 data-[state=active]:bg-transparent data-[state=active]:shadow-none gap-2"
108+
>
109+
<Blocks className="h-4 w-4" />
110+
<span className="hidden sm:inline">Components</span>
111+
</TabsTrigger>
112+
<TabsTrigger
113+
value="elements"
114+
className="h-14 px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-sand-1500 data-[state=active]:bg-transparent data-[state=active]:shadow-none gap-2"
115+
>
116+
<Code2 className="h-4 w-4" />
117+
<span className="hidden sm:inline">Elements</span>
118+
</TabsTrigger>
119+
<TabsTrigger
120+
value="hooks"
121+
className="h-14 px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-sand-1500 data-[state=active]:bg-transparent data-[state=active]:shadow-none gap-2"
122+
>
123+
<Anchor className="h-4 w-4" />
124+
<span className="hidden sm:inline">Hooks</span>
125+
</TabsTrigger>
126+
<TabsTrigger
127+
value="transactions"
128+
className="h-14 px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-sand-1500 data-[state=active]:bg-transparent data-[state=active]:shadow-none gap-2"
129+
>
130+
<Zap className="h-4 w-4" />
131+
<span className="hidden sm:inline">Transactions</span>
132+
</TabsTrigger>
133+
</TabsList>
134+
</div>
135+
</div>
136+
137+
<TabsContent value="components" className="mt-0">
138+
<FeaturedSection />
139+
</TabsContent>
140+
141+
<TabsContent value="elements" className="mt-0">
142+
<ElementExamplesSection />
143+
</TabsContent>
144+
145+
<TabsContent value="hooks" className="mt-0">
146+
<HooksExamplesSection />
147+
</TabsContent>
148+
149+
<TabsContent value="transactions" className="mt-0">
150+
<TransactionsSection />
151+
</TabsContent>
152+
</Tabs>
60153
</div>
61154
);
62155
}

‎examples/next-js/app/playground/page.tsx‎

Lines changed: 0 additions & 92 deletions
This file was deleted.

‎examples/next-js/components/navigation/app-nav.tsx‎

Lines changed: 73 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,54 @@
11
'use client';
22

33
import Link from 'next/link';
4-
import { usePathname } from 'next/navigation';
4+
import { useEffect, useState } from 'react';
55
import { LogoPlain } from './logo-plain';
6-
7-
const navLinks = [
8-
{ href: '/', label: 'Home' },
9-
{ href: '/playground', label: 'Playground' },
10-
];
6+
import { IconGithubLogo, IconStarFill } from 'symbols-react';
7+
import { Button } from '@/components/ui/button';
8+
import { CopyButton } from '@/components/ui/copy-button';
119

1210
export function AppNav() {
13-
const pathname = usePathname();
11+
const [stars, setStars] = useState<number | null>(null);
12+
const [showCopyButton, setShowCopyButton] = useState(false);
13+
const npmCommand = 'npm i @solana/connector';
14+
15+
useEffect(() => {
16+
async function fetchStars() {
17+
try {
18+
const response = await fetch('https://api.github.com/repos/solana-foundation/connectorkit');
19+
if (response.ok) {
20+
const data = await response.json();
21+
setStars(data.stargazers_count);
22+
}
23+
} catch (error) {
24+
console.error('Failed to fetch GitHub stars:', error);
25+
}
26+
}
27+
fetchStars();
28+
}, []);
29+
30+
useEffect(() => {
31+
const handleScroll = () => {
32+
// Check if we've scrolled past the hero section (approximately 300px)
33+
const heroSection = document.querySelector('section:first-of-type');
34+
if (heroSection) {
35+
const heroBottom = heroSection.getBoundingClientRect().bottom;
36+
setShowCopyButton(heroBottom < 0);
37+
} else {
38+
// Fallback: use scroll position
39+
setShowCopyButton(window.scrollY > 300);
40+
}
41+
};
42+
43+
window.addEventListener('scroll', handleScroll);
44+
handleScroll(); // Check initial position
45+
46+
return () => window.removeEventListener('scroll', handleScroll);
47+
}, []);
1448

1549
return (
1650
<header className="sticky top-0 z-50 w-full border-b border-border-low bg-bg1/80 backdrop-blur-sm">
17-
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between">
51+
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-1">
1852
{/* Logo & Brand */}
1953
<div className="w-full flex items-center justify-between gap-8">
2054
<Link href="/" className="flex items-center gap-2">
@@ -24,28 +58,37 @@ export function AppNav() {
2458
</span>
2559
</Link>
2660

27-
{/* Navigation Links */}
28-
<nav className="hidden md:flex items-center gap-1">
29-
{navLinks.map(link => {
30-
const isActive = pathname === link.href;
31-
return (
32-
<Link
33-
key={link.href}
34-
href={link.href}
35-
className={`
36-
text-nav-item px-3 py-2 rounded-md transition-colors
37-
${
38-
isActive
39-
? 'bg-sand-200 text-sand-1500'
40-
: 'text-sand-900 hover:text-sand-1500 hover:bg-sand-100'
41-
}
42-
`}
43-
>
44-
{link.label}
45-
</Link>
46-
);
47-
})}
48-
</nav>
61+
{/* Copy Button & GitHub Button */}
62+
<div className="flex items-center gap-2">
63+
{showCopyButton && (
64+
<CopyButton
65+
textToCopy={npmCommand}
66+
displayText={
67+
<code className="font-berkeley-mono text-xs text-sand-1500">{npmCommand}</code>
68+
}
69+
className="px-4 py-1.5 bg-white hover:bg-sand-50 border border-sand-300 hover:border-sand-400 rounded-md transition-colors shadow-sm"
70+
iconClassName="text-sand-500 group-hover:text-sand-700"
71+
iconClassNameCheck="text-green-600"
72+
/>
73+
)}
74+
<Button
75+
onClick={() => {
76+
window.open('https://github.com/solana-foundation/connectorkit', '_blank');
77+
}}
78+
variant="outline"
79+
size="sm"
80+
className=""
81+
>
82+
<IconGithubLogo className="h-4 w-4 fill-sand-700" />
83+
<span className="text-xs font-berkeley-mono">GitHub</span>
84+
</Button>
85+
{stars !== null && (
86+
<span className="flex items-center gap-1 text-sm">
87+
<IconStarFill className="h-4 w-4 fill-amber-500" />
88+
{stars.toLocaleString()}
89+
</span>
90+
)}
91+
</div>
4992
</div>
5093
</div>
5194
</header>

‎examples/next-js/components/ui/copy-button.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import React, { useState } from 'react';
44
import { motion, AnimatePresence } from 'motion/react';
55
import { Check, Copy } from 'lucide-react';
66
import { cn } from '../../lib/utils';
7+
import { Button } from './button';
78

89
interface CopyButtonProps {
910
textToCopy: string;
@@ -37,11 +38,11 @@ export function CopyButton({
3738
};
3839

3940
return (
40-
<button
41+
<Button
4142
onClick={handleCopy}
4243
disabled={disabled}
4344
className={cn(
44-
'group flex items-center justify-between gap-2 hover:opacity-80 hover:cursor-pointer',
45+
'group flex items-center justify-between',
4546
className,
4647
disabled && 'opacity-50 cursor-not-allowed',
4748
)}
@@ -82,6 +83,6 @@ export function CopyButton({
8283
)}
8384
</AnimatePresence>
8485
</div>
85-
</button>
86+
</Button>
8687
);
8788
}

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,10 @@
3434
"prettier": "^3.6.2",
3535
"react": "^19.2.1",
3636
"react-dom": "^19.2.1",
37-
"turbo": "^2.5.8"
37+
"turbo": "^2.7.1"
3838
},
3939
"engines": {
4040
"node": ">=18.0.0"
4141
},
42-
"packageManager": "pnpm@10.23.0"
42+
"packageManager": "pnpm@10.26.0"
4343
}

0 commit comments

Comments
 (0)