(null);
- const [svgHeight, setSvgHeight] = useState(0);
-
- useEffect(() => {
- if (contentRef.current) {
- setSvgHeight(contentRef.current.offsetHeight);
- }
- }, []);
-
- const y1 = useSpring(
- useTransform(scrollYProgress, [0, 0.8], [0, svgHeight]),
- {
- stiffness: 500,
- damping: 90,
- }
- );
- const y2 = useSpring(
- useTransform(scrollYProgress, [0, 1], [0, svgHeight - 200]),
- {
- stiffness: 500,
- damping: 90,
- }
- );
-
- return (
-
-
-
- 0
- ? "none"
- : "rgba(0, 0, 0, 0.24) 0px 3px 8px",
- }}
- className="ml-[27px] h-4 w-4 rounded-full border border-neutral-200 shadow-sm flex items-center justify-center"
- >
- 0 ? "white" : "var(--primary)",
- borderColor:
- scrollYProgress.get() > 0 ? "white" : "var(--secondary)",
- }}
- className="h-2 w-2 rounded-full border border-neutral-300 bg-white"
- />
-
-
-
-
-
-
-
-
-
{children}
-
- );
-};
\ No newline at end of file
diff --git a/src/app/components/activities/activities.tsx b/src/app/components/activities/activities.tsx
new file mode 100644
index 0000000..fcc71cf
--- /dev/null
+++ b/src/app/components/activities/activities.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import Accordion from "@/app/components/ui/accordion-menu/accordion-menu";
+import SectionWrapper from '../section-wrapper';
+
+const sportsAndRec = [
+ {
+ title: 'Boating',
+ content:
+ Set Sail: Experience the thrill of being captain of your own vessel, even if it's just for the afternoon.Row, Row, Row Your Boat: Learn the art of navigation without GPS. Just you, the water, and hopefully, not a mermaid.Team Building: Nothing says teamwork like synchronized rowing to avoid becoming a buoy.
+ },
+ {
+ title: 'Kayaking',
+ content:
+ Paddle Power: Glide through water like a hot knife through butter, but with more splashing.Nature's Close-Up: Get up close and personal with water wildlife. Remember, if it's bigger than your kayak, paddle away!Core Workout: Who needs a gym when each paddle stroke carves your abs?
+ },
+ {
+ title: 'Canoeing',
+ content:
+ Serenity Now: Find peace in the gentle rocking of the canoe, unless you're racing, then it's all about that splash warfare.Partner Paddling: A true test of coordination and communication, or how long before someone gets wet on purpose.Explore Hidden Spots: Access areas only reachable by the slimmest of crafts. Adventure awaits around every bend!
+ },
+ {
+ title: 'Basketball',
+ content:
+ Dunk or Die Tryin': Whether you're shooting hoops or aiming for a slam dunk, it's all about that sweet arc.Team Play: Learn the art of the pass, the block, and the occasional accidental elbow.Cardio King: Run, jump, shoot, score! Your Fitbit will thank you, even if your knees don't.
+ },
+ {
+ title: 'Parkour',
+ content:
+ Urban Jungle Gym: Turn Sandy Island's camp buildings into your playground. Every wall and rail is just another obstacle to conquer.Leap of Faith: From small jumps to big vaults, it's about overcoming fears and physical barriers. And looking cool doing it.Free Running: Because who needs elevators when you can scale the Dining Hall?
+ },
+ {
+ title: 'Tennis',
+ content:
+ Serve & Volley: Feel the satisfaction of a perfectly timed serve that your opponent can only dream of returning.Singles or Doubles: Play one-on-one or bring friends for a doubles match where camaraderie meets competition.Fashionable Fitness: Sport the latest in tennis wear while getting a workout that doesn't feel like work... until the next day.
+ }
+];
+
+const Activities: React.FC = () => {
+ return (
+
+ Forge Your Path at Camp Nakamoto
+ Formal Presentations
+
+ π€ Speakers Series : Engage with the luminaries of the bitcoin community. Learn,
+ question, and be inspired by industry leaders who've been continuing down the rabbit hole longer than
+ most of us.
+
+ Informal Activities
+
+
+ π₯οΈ Twilight Foliage Cocktail Hour Cruise : This isn't just a cruise; it's a
+ voyage into the essence of fall and the future of finance, a toast to the artistry of nature and the
+ ingenuity of Satoshi.
+
+ π£ Bitcoin Road : Walk through 'Living CandyLand', but with a twist -
+ it's all about Bitcoins! Get to hyperbitcoinization first!, win treats, and maybe even some sats!
+ βοΈ Arts & Crafts : Get hands-on with leather crafting or tie-dyeing. Make something
+ tangible in this digital world. Your wallet's not just for storing sats anymore!
+ π€ Lightning Karaoke Event Night : Belt out bitcion-themed tunes or your favorite
+ hits at lightning speed. Will your voice be the next big thing on the inscribed on the blockchain?
+ π₯ Bonfire Event Night : Gather 'round the fire for stories, s'mores, and
+ perhaps a spontaneous debate on the future of currency. The only thing burning here is passion for
+ Satoshi's gift.
+ π Camp Color War : It's not just about winning; it's about building
+ camaraderie, strategy, and maybe a little friendly rivalry. Here, the only thing more electric than the
+ atmosphere is the hash rate spit out from Bitcoin's network mining rigs!
+ πΈ Cocktail Hour Nightly : Unwind, network, or discuss the day's gains over
+ crafted cocktails. Here, 'mixing' isn't just for sats drinks but for ideas
+ too.
+ πͺ Morning Cross-Fit with Larry Lepard : Start your day with a workout that's as
+ intense as the Bitcoin's market moves. Larry Lepard leads the charge, ensuring your body is as fit as
+ your hodling strategy.
+
+ Sports & Recreation
+ Each of these activities at Camp Nakamoto not only promises fun but also a chance to learn new skills, make
+ friends, and perhaps discover a new passion!
+
+ At Camp Nakamoto , every activity is a node in the network of your camp experience, linking
+ you to new friends, skills, and maybe even your next big investment idea. This is your chance to dive into activities that are as
+ diverse as the bitcoin's ecosystem.
+
+ );
+};
+
+export default Activities;
diff --git a/src/app/components/dining/dining.tsx b/src/app/components/dining/dining.tsx
new file mode 100644
index 0000000..e28064b
--- /dev/null
+++ b/src/app/components/dining/dining.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import SectionWrapper from '../section-wrapper';
+
+const Dining: React.FC = () => {
+ return (
+
+ At Camp Nakamoto, feast Like your first sat was purchased in 2010
+
+ π΄ Central Dining Hall : Gather at our central dining hall where the community comes together over meals, turning strangers into blockchain buddies.π΄ All Meals Included : From sunrise to sunset, we've got you covered with breakfast, lunch, and dinner. No need to mine for food here!π΄ Cattleman's Feast : An epic meal that's the talk of Twitter. Experience the Cattleman's Feast - where we celebrate our gains with gains on the grill! β brought to you by Texas Slim 🤠
+
+ Weekend Menu Highlights
+
+ Friday Dinner - Welcome BBQ: Kick off your camp journey with a BBQ that's as welcoming as a bull market.Saturday Dinner - Cookout: Grill and chill under the stars, where the only thing getting roasted more than marshmallows is the concept of centralized banking.Sunday Dinner - Cattleman's Feast : A feast fit for bitcoin royalty. Beef up your evening with this legendary spread.Saturday Lunch - Taco Bar: Build your own tacos, because here, you control the toppings like you control your bitcoin portfolio.Sunday Lunch - Build Your Own Sandwiches: Craft your masterpiece. Your sandwich, your rules, much like your stacking strategy.Breakfast : Standard summer camp style breakfast every morning. Because some things, like the need for bacon and eggs, never change in the world of ever-evolving digital currencies.
+
+ At Camp Nakamoto , we believe in feeding both your body and your curiosity. Enjoy meals that power you through a day of learning, networking, and bitcoin-adventures!
+
+ );
+};
+
+export default Dining;
diff --git a/src/app/components/faqs/_faqs.scss b/src/app/components/faqs/_faqs.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/faqs/faqs.tsx b/src/app/components/faqs/faqs.tsx
new file mode 100644
index 0000000..3f44b52
--- /dev/null
+++ b/src/app/components/faqs/faqs.tsx
@@ -0,0 +1,64 @@
+import React, {FC} from "react";
+import SectionWrapper from "@/app/components/section-wrapper";
+import Accordion from "@/app/components/ui/accordion-menu/accordion-menu";
+
+const faqsData = [
+ {
+ title: 'What is Camp Nakamoto?',
+ content: Camp Nakamoto is where Bitcoin$apos;s blockchain meets the great outdoors! A unique blend of a tech conference and summer camp for Bitcoin enthusiasts, where you can hash out ideas by the campfire.
+ },
+ // {
+ // title: 'Can I pay for Camp Nakamoto with Bitcoin?',
+ // content: Yes, we embrace the future of currency! You can settle your camp fees with Bitcoin, and we might even have a special workshop on how to do it securely.
+ // },
+ {
+ title: 'What should I bring to Camp Nakamoto?',
+ content: Bring your camping gear, a laptop for coding sessions (if you're so inclined), and an open ledger... we mean, mind, for learning. Don' forget to LEAVE YOUR HARDWARE WALLET AT HOME- it's won&pos;t do you any good here as your food and accommodations are paid for.
+ },
+ {
+ title: 'Are there any physical activities, or is it all about Bitcoin?',
+ content: Balance in all things! Expect hiking, canoeing, and perhaps a treasure hunt where the treasure is, and, of course, what would camp be without a Color War!.
+ },
+ {
+ title: 'Will there be Wi-Fi at Camp Nakamoto?',
+ content: Yes, but we encourage digital detox sessions. However, for those critical times when you just can&pos;t wait for Bitcoin's next block, Wi-Fi will be available. Remember, we're connecting with nature and the network.
+ },
+ {
+ title: 'Is Camp Nakamoto suitable for Bitcoin beginners?',
+ content: Absolutely! Whether you've just learned what a blockchain is or you think Satoshi was/is your neighbor, our workshops range from 'Bitcoin 101' to 'Advanced Transactions'.
+ },
+ {
+ title: 'What\'s the policy on discussing other cryptocurrencies?',
+ content: While our heart beats for Bitcoin, we're open to all decentralized discussions. Just remember, any altcoin talk might be met with friendly banter or a playful 'block' from hardcore Bitcoiners.
+ },
+ {
+ title: 'How do we handle bear markets at camp?',
+ content: With bear-proof containers for our food and bear-proof strategies for our portfolios. Seriously, we'll have sessions on market psychology, but remember, at Camp Nakamoto, every dip is just a setup for the next campfire story.
+ },
+ {
+ title: 'Can I mine Bitcoin at the camp?',
+ content: While we appreciate the enthusiasm, we're more about mining minds than actual mining. However, setting up a mining rig as a demonstration might just win you the camp's innovation award.
+ },
+ {
+ title: 'What if it rains?',
+ content: We'll have indoor activities, blockchain board games, and perhaps a workshop on 'The Economics of Weather and Bitcoin Volatility'.
+ },
+ {
+ title: 'Is there a \'Camp Nakamoto\' token or NFT?',
+ content: Not yet, but suggesting it might just make you the camp's favorite. Who knows? By next season, we might have our own camp token - 'CampCoin'.
+ },
+ {
+ title: 'What\'s the \'Twilight Foliage Cocktail Hour Cruise\'?',
+ content: An elegant evening where we admire the fall colors from Lake Winnipesaukee, sipping on cocktails, discussing block sizes, and debating whether the sunset's beauty can be outdone by a well-executed smart contract.
+ }
+];
+
+const Faqs: FC = () => {
+ return (
+
+
+ );
+};
+
+export default Faqs;
diff --git a/src/app/components/footer/_footer.scss b/src/app/components/footer/_footer.scss
new file mode 100644
index 0000000..5bd4cc5
--- /dev/null
+++ b/src/app/components/footer/_footer.scss
@@ -0,0 +1,62 @@
+footer {
+ position: relative;
+ text-align: center;
+ padding: 6px 32px;
+ border-top-left-radius: 16px;
+ border-top-right-radius: 16px;
+ font-family: 'Fredoka', sans-serif;
+ color: var(--neutral-light);
+ background-color: var(--warmest);
+ a {
+ text-decoration: underline;
+ svg {
+ fill: white;
+ }
+ }
+ a:hover {
+ color: var(--warm);
+ }
+ .footer-wrapper {
+ display: flex;
+ justify-content: space-between;
+ margin: 0 auto;
+ padding: 12px 0;
+ width: 100%;
+ }
+ .footer-left, .footer-right {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ width: 48%;
+ }
+ .footer-left {
+ margin-right: 16px;
+ justify-content: space-between;
+ a {
+ display: flex;
+ justify-content: center;
+ width: 24px;
+ }
+ a:hover {
+ svg {
+ fill: var(--warm);
+ }
+ }
+ }
+ .footer-right {
+ margin-left: 16px;
+ justify-content: flex-end;
+ }
+ .icon-email {
+ width: 20px;
+ }
+ .icon-instagram {
+ width: 26px;
+ }
+ .icon-x {
+ width: 18px;
+ }
+ .icon-youtube {
+ width: 27px;
+ }
+}
diff --git a/src/app/components/footer/footer.tsx b/src/app/components/footer/footer.tsx
new file mode 100644
index 0000000..20c838c
--- /dev/null
+++ b/src/app/components/footer/footer.tsx
@@ -0,0 +1,28 @@
+import IconEmail from "@/app/components/footer/icon-email";
+import IconInstagram from "@/app/components/footer/icon-instagram";
+import IconYoutube from "@/app/components/footer/icon-youtube";
+import IconX from "@/app/components/footer/icon-x";
+
+const Footer = () => {
+ return (
+
+ );
+};
+
+export default Footer;
diff --git a/src/app/components/footer/icon-email.tsx b/src/app/components/footer/icon-email.tsx
new file mode 100644
index 0000000..714d592
--- /dev/null
+++ b/src/app/components/footer/icon-email.tsx
@@ -0,0 +1,5 @@
+const IconEmail = () =>
+
+
+export default IconEmail;
diff --git a/src/app/components/footer/icon-instagram.tsx b/src/app/components/footer/icon-instagram.tsx
new file mode 100644
index 0000000..bf4ce59
--- /dev/null
+++ b/src/app/components/footer/icon-instagram.tsx
@@ -0,0 +1,7 @@
+const IconInstagram = () =>
+ instagram
+
+
+export default IconInstagram;
diff --git a/src/app/components/footer/icon-x.tsx b/src/app/components/footer/icon-x.tsx
new file mode 100644
index 0000000..304bd40
--- /dev/null
+++ b/src/app/components/footer/icon-x.tsx
@@ -0,0 +1,5 @@
+const IconX = () =>
+
+
+export default IconX;
diff --git a/src/app/components/footer/icon-youtube.tsx b/src/app/components/footer/icon-youtube.tsx
new file mode 100644
index 0000000..388383a
--- /dev/null
+++ b/src/app/components/footer/icon-youtube.tsx
@@ -0,0 +1,5 @@
+const IconYoutube = () =>
+
+
+export default IconYoutube
diff --git a/src/app/components/hero/_hero.scss b/src/app/components/hero/_hero.scss
new file mode 100644
index 0000000..609f322
--- /dev/null
+++ b/src/app/components/hero/_hero.scss
@@ -0,0 +1,35 @@
+.hero-container {
+ max-width: 1200px;
+ border-radius: 16px;
+ margin: 0 auto;
+ box-shadow: 5px 5px 25px -2px rgba(0, 0, 0, 0.5);
+}
+.hero-logo {
+ width: 70%;
+ margin: 0 auto;
+}
+.hero-copy {
+ position: relative;
+ top: -64px;
+ z-index: 10;
+ text-align: center;
+ padding: 0 1rem;
+ max-width: 80rem;
+ margin: 0 auto;
+ margin-top: 48px;
+ /*margin-bottom: 24px;*/
+ font-weight: 700;
+ color: var(--warmer);
+ text-shadow: 5px 5px 5px black;
+}
+.hero-copy h2, .hero-copy h3 {
+ border: none;
+ box-shadow: none;
+ font-family: "Vollkorn SC", serif;
+ text-shadow: 2px 2px 2px var(--coolest);
+ color: var(--warmer);
+}
+.hero-copy button {
+ box-shadow: 2px 2px 2px var(--coolest);
+ font-family: "Fredoka", cursive;
+}
diff --git a/src/app/components/hero/hero.tsx b/src/app/components/hero/hero.tsx
new file mode 100644
index 0000000..e36e0fc
--- /dev/null
+++ b/src/app/components/hero/hero.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from 'react';
+import { motion } from 'framer-motion';
+import * as THREE from 'three';
+
+const Hero: React.FC = () => {
+ const canvasRef = useRef(null);
+ const videoRef = useRef(null);
+ const [videoReady, setVideoReady] = useState(false);
+ const [videoError, setVideoError] = useState(false);
+ const [playbackRate] = useState(2);
+
+ useEffect(() => {
+ if (videoRef && videoRef.current) {
+ videoRef.current.playbackRate = playbackRate;
+ }
+ }, [playbackRate]);
+
+ useEffect(() => {
+ let animationFrameId: number;
+ if (!videoReady && !videoError && canvasRef.current) {
+ const scene = new THREE.Scene();
+ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+ const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.current, alpha: true });
+
+ const updateSize = () => {
+ renderer.setSize(window.innerWidth, window.innerHeight);
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+ };
+
+ updateSize();
+
+ const geometry = new THREE.TorusGeometry(10, 3, 16, 100);
+ const material = new THREE.MeshBasicMaterial({ color: 0xF7931A, wireframe: true });
+ const torus = new THREE.Mesh(geometry, material);
+
+ scene.add(torus);
+ camera.position.z = 30;
+
+ const animate = () => {
+ animationFrameId = requestAnimationFrame(animate);
+ torus.rotation.x += 0.01;
+ torus.rotation.y += 0.005;
+ renderer.render(scene, camera);
+ };
+
+ animate();
+
+ window.addEventListener('resize', updateSize);
+
+ return () => {
+ cancelAnimationFrame(animationFrameId);
+ window.removeEventListener('resize', updateSize);
+ };
+ }
+ }, [videoReady, videoError]);
+
+ useEffect(() => {
+ if (videoRef.current) {
+ videoRef.current.addEventListener('canplay', () => setVideoReady(true));
+ videoRef.current.addEventListener('error', () => setVideoError(true));
+ }
+ }, []);
+
+ return (
+
+
+
+
+
+ An Island Bitcoin Retreat
+
+
+
+
+
+ Friday, October 10th β Monday, October 13th 2025
+
+
+
+ Buy Tickets
+
+
+
+
+ Welcome to Camp Nakamoto: Where a Honey Badger can find peace
+
+ ποΈ Your Cabin Awaits : Arrive to find your assigned cabin ready, with your luggage waiting for you like a blockchain waiting for its next block. Your home away from home, already set up for your adventure!βοΈπ₯ Nature's Climate Control : Experience weather as Satoshi intended β unfiltered. Our cabins come with natural AC (that's Air Conditioning or Actual Cold, depending on the night). No thermostat, just the sweet, unpredictable whims of Mother Nature.π Unfinished, Yet Electrifying : Our cabins might be rustic, but they've got electricity β perfect for charging your devices or lighting up those late-night power law vs. stock-to-flow discussions. Think of it as 'unfinished luxury'.π§ Waterfront Living : Just steps from your cabin, you'll find yourself at the water's edge. Here, the only thing more refreshing than a dip in the lake is the genuine summer camp vibe.π» Communal Commodes : Embrace the community spirit with our common lavatories. Here, you'll share more than just tips on Bitcoin; you'll share the true camp experience.
+ Accommodation Tiers:
+
+ π Public Keys Tier β Embrace the Communal Spirit: :
+
+ Shared Cabins: Experience life in a bustling six-person cabin, complete with 2 bunk beds and 2 single beds.
+ Itβs not just a place to sleep; it's where friendships are minted daily.
+ Think of it as a public ledger, where every interaction is a transaction of camaraderie.
+ π Private Keys Tier β Your Personal Retreat: :
+
+ Customized Comfort: Craving a bit more solitude or arriving with your own group?
+ The Private Keys Tier is where your stay becomes as unique as your crypto strategy.
+ Our housing desk will reach out to discuss your preferences, offering tailored accommodations to suit your quest for privacy or space.Upgrade Your Experience: Be prepared for a personal consultation once you purchase your ticket.
+ When we reach out, you can discuss options to enhance your stay, ensuring that your private space is as secure and secluded as your private keys security protocol.
+
+ Dive into the rustic charm of Camp Nakamoto where every cabin is a node in our network, and every camper, a potential partner in the next big Bitcoin venture. Book your spot in this blockchain of life experiences. Remember, in the world of Camp Nakamoto, your comfort zone might be off the grid, but your experience will be fully connected.
+
+ );
+};
+
+export default Housing;
diff --git a/src/app/components/location/location.tsx b/src/app/components/location/location.tsx
new file mode 100644
index 0000000..87da8f1
--- /dev/null
+++ b/src/app/components/location/location.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import SectionWrapper from '../section-wrapper';
+
+const Location: React.FC = () => {
+ return (
+
+ Your Bitcoin Oasis Awaits at Sandy Island
+ Experience the beauty of New Hampshire's largest lake - where the tranquil charm of Lake Winnipesaukee at sunset mirrors the golden hues of Bitcoin's promise and every moment is infused with the beauty of fall foliage. Our retreat is located in a serene environment perfect for relaxation and networking.
+ Since 1899, Sandy Island has been the backdrop for extraordinary experiences, spread across 66 wooded acres in the heart of Lake Winnipesaukee, New Hampshire. Whether your family is by blood or by bitcoin's blockchain, Sandy Island is the perfect place for you and yours to grow in spirit, body, and mind amidst nature's splendor.
+ Your Journey to Camp Nakamoto
+ To reach this secluded haven, drive to Harilla Landing in Moultonborough, NH , where the road ends and your adventure begins. From there, hop aboard a ferry for a scenic ride to Sandy Island β your gateway to a world where the digital meets the serene waters of Lake Winnipesaukee.
+ At Camp Nakamoto, get ready to disconnect from the digital noise and reconnect with nature, while still diving deep into the world of bitcoin and its remnant community. Here, every byte of data and bite of food is served with a view of one of New Hampshire's most beautiful lakes.
+
+ );
+};
+
+export default Location;
diff --git a/src/app/components/navbar/_navbar.scss b/src/app/components/navbar/_navbar.scss
new file mode 100644
index 0000000..02e28ef
--- /dev/null
+++ b/src/app/components/navbar/_navbar.scss
@@ -0,0 +1,142 @@
+.nav-wrapper {
+ position: fixed;
+ z-index: 100;
+ width: 100%;
+ height: 64px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 32px;
+ color: var(--neutral-light);
+ background-color: var(--warmest);
+ box-shadow: 0 -15px 35px 25px rgba(0, 0, 0, 0.2);
+
+ .mass-adoption-badge {
+ color: var(--neutral-light);
+ border-color: var(--neutral-light);
+ }
+
+ .mass-adoption-badge:hover {
+ color: var(--warm);
+ border-color: var(--warm);
+ }
+
+ .mass-adoption {
+ position: absolute;
+ left: 0;
+ bottom: -28px;
+ width: 284px;
+ height: 42px;
+ display: flex;
+ justify-content: flex-end;
+ border-bottom-right-radius: 16px;
+ padding: 10px 4px 0 0;
+ background-color: var(--warmest);
+
+ a {
+ display: flex;
+ }
+
+ span {
+ height: 28px;
+ }
+
+ span:first-child {
+ border-radius: 16px 0 0 16px;
+ border: 1px solid;
+ border-right: none;
+ padding: 1px 6px 0 12px;
+ font-size: 14px;
+ font-style: italic;
+ }
+
+ span:last-child {
+ border-radius: 0 16px 16px 0;
+ border: 1px solid;
+ border-left: none;
+ }
+
+ span:last-child > img {
+ position: relative;
+ top: -1px;
+ right: -1px;
+ width: 28px;
+ height: 28px;
+ }
+ }
+
+ .nav-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ }
+
+ .site-title {
+ margin-top: 5px;
+ font-family: 'Vollkorn SC', serif;
+ font-size: 24px;
+ font-weight: 900;
+ letter-spacing: 2px;
+ line-height: 20px;
+ text-transform: uppercase;
+ }
+
+ .nav-link {
+ display: flex;
+ align-items: center;
+ margin-bottom: 2px;
+ text-align: center;
+ font-family: 'Fredoka', cursive;
+ padding-left: 20px;
+ font-size: 15px;
+ line-height: 20px;
+ }
+
+ .nav-link a:hover {
+ color: var(--warm);
+ }
+
+ li.nav-link:last-child {
+ a {
+ min-width: 78px;
+ }
+ }
+
+ .nav-mobile {
+ position: absolute;
+ top: 64px;
+ right: 0;
+ width: 70%;
+ padding-top: 20px;
+ font-family: "Fredoka", cursive;
+ font-size: 18px;
+ border-bottom-left-radius: 16px;
+ background-color: var(--coolest);
+ }
+
+ .nav-mobile::before {
+ content: '';
+ width: 100%;
+ height: 12px;
+ background-color: var(--warmest);
+ position: absolute;
+ top: -12px;
+ }
+
+ .nav-mobile li {
+ display: flex;
+ height: auto;
+ min-height: 42px;
+ }
+
+ .nav-mobile li a {
+ display: block;
+ width: 100%;
+ height: 100%;
+ }
+
+ .nav-mobile li a:hover {
+ opacity: 0.75;
+ }
+}
diff --git a/src/app/components/navbar/navbar.tsx b/src/app/components/navbar/navbar.tsx
new file mode 100644
index 0000000..b042e31
--- /dev/null
+++ b/src/app/components/navbar/navbar.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import React, {useState} from 'react';
+import Image from 'next/image'
+import Link from 'next/link';
+
+// const NavLink = (label: string) => {label} ;
+
+const Navbar: React.FC = () => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const toggleMenu = () => setIsOpen(!isOpen);
+
+ const navItems = [
+ {href: "#location", label: "Location"},
+ {href: "#speakers", label: "Participants & Panelists"},
+ {href: "#activities", label: "Activities"},
+ {href: "#housing", label: "Housing"},
+ {href: "#dining", label: "Dining"},
+ {href: "#faqs", label: "FAQs"},
+ {href: "#sponsors", label: "Sponsors / Partners"}
+ ];
+
+ return (
+
+
+
Camp Nakamoto
+
+ {navItems.map((item) => (
+
+
+ ))}
+
+
+
+
+
+
+
+ {navItems.map((item) => (
+
+
+ ))}
+ )}
+
+ );
+};
+
+export default Navbar;
diff --git a/src/app/components/SectionWrapper.tsx b/src/app/components/section-wrapper.tsx
similarity index 63%
rename from src/app/components/SectionWrapper.tsx
rename to src/app/components/section-wrapper.tsx
index 4ec3e22..fdc7cdb 100644
--- a/src/app/components/SectionWrapper.tsx
+++ b/src/app/components/section-wrapper.tsx
@@ -8,10 +8,13 @@ interface SectionWrapperProps {
const SectionWrapper: React.FC = ({ id, title, children }) => {
return (
-
+ <>
+
+
+
);
};
diff --git a/src/app/components/speakers/_speakers.scss b/src/app/components/speakers/_speakers.scss
new file mode 100644
index 0000000..50a4c5b
--- /dev/null
+++ b/src/app/components/speakers/_speakers.scss
@@ -0,0 +1,113 @@
+.speaker-card-container h3 {
+ padding-left: 4px;
+ margin-bottom: 4px;
+ margin-top: 0;
+ font-size: 22px;
+ line-height: 24px;
+}
+.speaker-card-body {
+ position: relative;
+ height: 100%;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ border-radius: 0.75rem;
+ border: 2px solid var(--warmest);
+ overflow: hidden;
+}
+.speaker-card-body h4 {
+ padding: 4px 13px;
+ border-bottom-right-radius: 12px;
+ font-size: 20px;
+ line-height: 22px;
+ letter-spacing: 0.05em;
+ color: var(--coolest);
+ background-color: var(--warmer);
+}
+.speaker-more-info-button {
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: flex-end;
+ text-align: right;
+ justify-content: flex-end;
+ background-color: transparent;
+ cursor: pointer;
+ z-index: 100;
+}
+.speaker-more-info-button span {
+ border-top-left-radius: 12px;
+ padding: 8px;
+ font-family: "Fredoka", sans-serif;
+ font-size: 16px;
+ line-height: 22px;
+ font-weight: bold;
+ letter-spacing: 0.05em;
+ color: var(--coolest);
+ background-color: var(--warmer);
+}
+.speaker-more-info-modal {
+ a {
+ text-decoration: underline;
+ }
+ a:hover {
+ opacity: 0.85;
+ }
+ background-color: var(--coolest);
+}
+.speaker-stay-tuned {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ p {
+ padding: 0 8px;
+ font-size: 420%;
+ opacity: 0.5;
+ }
+}
+
+@media (min-width: 350px) {
+ .speaker-stay-tuned {
+ p {
+ font-size: 500%;
+ }
+ }
+}
+
+@media (min-width: 370px) {
+ .speaker-stay-tuned {
+ p {
+ font-size: 600%;
+ }
+ }
+}
+
+@media (min-width: 380px) {
+ .speaker-stay-tuned {
+ p {
+ font-size: 720%;
+ }
+ }
+}
+
+@media (min-width: 480px) {
+ .speaker-stay-tuned {
+ p {
+ padding: 0 10%;
+ font-size: 800%;
+ }
+ }
+}
+
+@media (min-width: 540px) {
+ .speaker-stay-tuned {
+ p {
+ font-size: 1000%;
+ line-height: 32px;
+ }
+ }
+}
diff --git a/src/app/components/Modal.tsx b/src/app/components/speakers/modal.tsx
similarity index 94%
rename from src/app/components/Modal.tsx
rename to src/app/components/speakers/modal.tsx
index 6c0e7d5..6eae021 100644
--- a/src/app/components/Modal.tsx
+++ b/src/app/components/speakers/modal.tsx
@@ -43,7 +43,7 @@ const Modal: React.FC = ({ isOpen, onClose, children }) => {
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.9, opacity: 0 }}
transition={{ type: "spring", damping: 20, stiffness: 300 }}
- className="bg-white dark:bg-gray-800 rounded-lg p-8 w-full max-w-md relative shadow-2xl"
+ className="rounded-lg p-8 w-full max-w-md relative shadow-2xl speaker-more-info-modal "
>
= ({ isOpen, onClose, children }) => {
);
};
-export default Modal;
\ No newline at end of file
+export default Modal;
diff --git a/src/app/components/speakers/speaker-card.tsx b/src/app/components/speakers/speaker-card.tsx
new file mode 100644
index 0000000..cc40a9c
--- /dev/null
+++ b/src/app/components/speakers/speaker-card.tsx
@@ -0,0 +1,50 @@
+"use client";
+import Image from "next/image";
+import React from "react";
+import {CardBody, CardContainer, CardItem} from "../ui/3d-card";
+
+interface SpeakerCardProps {
+ name?: string;
+ title: string;
+ imageUrl?: string;
+ description: string;
+ onLearnMore: () => void;
+}
+
+const SpeakerCard: React.FC = ({name, title, imageUrl, onLearnMore}) => {
+ return (
+
+ {name}
+
+
+
+ {(imageUrl && name) ?
:
}
+
+
+
+
+ {title}
+
+
+
+ {name &&
+ Learn More
+ }
+
+
+
+ );
+};
+
+export default SpeakerCard;
diff --git a/src/app/components/speakers/speakers.tsx b/src/app/components/speakers/speakers.tsx
new file mode 100644
index 0000000..aac0021
--- /dev/null
+++ b/src/app/components/speakers/speakers.tsx
@@ -0,0 +1,207 @@
+"use client";
+import React, {useState} from "react";
+import {motion, AnimatePresence} from "framer-motion";
+import SpeakerCard from "./speaker-card";
+import Modal from "./modal";
+import SectionWrapper from '../section-wrapper';
+
+interface Speaker {
+ name: string;
+ title: string;
+ twitterHandle: string;
+ imageUrl: string;
+ description: string;
+ stats: string;
+ active: boolean;
+}
+
+const speakers: Speaker[] = [
+ {
+ name: "Larry Lepard",
+ title: "",
+ twitterHandle: "@LawrenceLepard",
+ imageUrl: "/images/speakers/larry_lepard.jpg",
+ description: "With over 38 years in investment management, Larry has pivoted from traditional venture capital to become a stalwart advocate for gold and Bitcoin. His firm, Equity Management Associates, stands as a beacon for those seeking refuge from inflation through investments in precious metals and bitcoin related investments. Larry's experience spans from the early days of the internet boom to now, where he's a vocal proponent of Bitcoin's role in a sound money future.",
+ stats: "",
+ active: true
+ },
+ {
+ name: "Dave Foley",
+ title: "",
+ twitterHandle: "@DAAF17",
+ imageUrl: "/images/speakers/dave_foley.jpg",
+ description: "An investment partner with Lawrence Lepard at Equity Management Associates, David Foley is deeply involved in strategies focusing on Bitcoin and precious metals. Alongside James Lavish, David co-manages the Bitcoin Opportunity Fund, navigating both public and private sectors of Bitcoin investment. His approach combines a keen understanding of market trends with a strategic investment mindset, pioneering the future of money through Bitcoin.",
+ stats: "",
+ active: true
+ },
+ {
+ name: "Mark Moss",
+ title: "",
+ twitterHandle: "@1MarkMoss",
+ imageUrl: "/images/speakers/mark_moss.jpg",
+ description: "Mark Moss is your go-to guide in the wild world of finance, with a special twist of Bitcoin advocacy. From his home base in San Clemente, California, Mark has navigated the dot-com bubble, real estate, and now rides the Bitcoin wave, sharing his journey through \"The Mark Moss Show\" and Market Disruptors on YouTube. He's not just about understanding the crypto-verse; he's about changing how you think about money.",
+ stats: "",
+ active: true
+ },
+ {
+ name: "Luke Broyles",
+ title: "",
+ twitterHandle: "@luke_broyles",
+ imageUrl: "/images/speakers/luke_broyels.jpg",
+ description: "Luke has carved a niche in the Bitcoin community not just as an enthusiast but as a marketing maestro. His ability to articulate Bitcoin's value proposition in a way that resonates with both newcomers and seasoned investors showcases his marketing acumen. Luke uses his platform to demystify Bitcoin, making it not just a financial asset but a cultural phenomenon, driving adoption through compelling narratives and insights.",
+ stats: "",
+ active: true
+ },
+ {
+ name: "James Lavish",
+ title: "",
+ twitterHandle: "@jameslavish",
+ imageUrl: "/images/speakers/james_lavish.jpg",
+ description: "James Lavish, CFA, isn't your average financial guru; he's a reformed hedge-fund manager, an ex-Yale hockey player, and now, a beacon of financial wisdom in a world where money seems to evaporate faster than ice in a microwave. With over 25 years navigating the shark-infested waters of institutional investing, James has dodged more financial icebergs than the Titanic.",
+ stats: "",
+ active: true
+ },
+ {
+ name: "Michelle Weekley",
+ title: "",
+ twitterHandle: "@michelleweekley",
+ imageUrl: "/images/speakers/michelle_weekley.jpg",
+ description: "Michelle has navigated a life trajectory that's as colorful as it is profound. With a background in computer science, Michelle spent over 15 years diving deep into the world of early-stage tech startups. Her adventures took her across the globe, from living in the UAE to working in China, where she dipped her toes in Foreign Direct Investment. It was there, amidst the global landscape, she encountered firsthand the corruption that eventually steered her towards the liberating world of Bitcoin in 2016.",
+ stats: "",
+ active: true
+ },
+ {
+ name: "Fred Kreuger",
+ title: "",
+ twitterHandle: "@dotkrueger",
+ imageUrl: "/images/speakers/fred_krueger.jpg",
+ description: "Fred Kreuger's familiarity with the Power Law in Bitcoin's price movements has made him a notable figure among traders and analysts. His understanding of this mathematical principle, which suggests Bitcoin's price follows a predictable pattern over time, has provided traders with a tool to anticipate market trends. Kreuger's insights into Bitcoin's market behavior are sought after for their precision and foresight.",
+ stats: "",
+ active: true
+ },
+ {
+ name: "BJ Dichter",
+ title: "",
+ twitterHandle: "@BJdichter",
+ imageUrl: "/images/speakers/bj_dichter.jpg",
+ description: "BJ Dichter, known for his leadership in the Canadian Truckers Convoy, brings a perspective on freedom and activism to the Bitcoin space. His involvement in one of the most significant protests against government overreach highlights his commitment to individual liberties. BJ sees Bitcoin not just as a financial tool but as a means for economic freedom, aligning with his activism for personal rights.",
+ stats: "",
+ active: true
+ },
+ {
+ name: "Adam O'Brien",
+ title: "",
+ twitterHandle: "@adamobrien_",
+ imageUrl: "/images/speakers/adam_obrien.jpg",
+ description: "Adam is the visionary behind @TheBitcoinWell, where he's not just banking on Bitcoin but also on making it accessible to everyone, kind of like a digital Johnny Appleseed for a new generation and a new economy. He's been navigating the choppy waters of digital currency since 2013, turning his passion for tech and finance into a mission to re-bank the de-banked.",
+ stats: "",
+ active: true
+ },
+ {
+ name: "Texas Slim",
+ title: "",
+ twitterHandle: "@modernTman",
+ imageUrl: "/images/speakers/texas_slim.jpg",
+ description: "Here comes Texas Slim, a man who's as Texan as they come, with a name that sounds like he could've been a character in a spaghetti western, but instead, he's riding the wild plains of the modern food industry. Born and bred in the Lone Star State, Texas Slim has taken the cowboy ethos into the 21st century, lassoing the world of nutrition, agriculture, and Bitcoin with the finesse of a rodeo champion.",
+ stats: "",
+ active: true
+ },
+ {
+ name: "Anders Jensen",
+ title: "",
+ twitterHandle: "@Anders_",
+ imageUrl: "/images/speakers/anders_jensen.jpg",
+ description: "Anders Jensen has made a name for himself through successfully organizing and hosting Bitcoin events. His events are not just gatherings but platforms for education, networking, and advocacy within the Bitcoin community. His ability to bring together diverse groups of Bitcoin enthusiasts and professionals has made him a pivotal figure in expanding Bitcoin's reach and understanding.",
+ stats: "",
+ active: true
+ },
+ {
+ name: "Matthew Lysiak",
+ title: "",
+ twitterHandle: "@Matthewlysiak",
+ imageUrl: "/images/speakers/matthew_lysiak.jpg",
+ description: "Matthew's knack for uncovering the quirky side of life occasionally touches on Bitcoin's impact on culture, health, and those weird historical facts you share at parties. His book \"Fiat Food\" explores how the poor incentives of our financial system have made food both more expensive and less healthy, negitively effecting the way we eat. If there's an unconventional angle, Matthew's tweeting about it, probably with a bit of conspiracy for zest and a chuckle for good measure.",
+ stats: "",
+ active: true
+ },
+ {
+ name: "Joe Consorti",
+ title: "",
+ twitterHandle: "@JoeConsorti",
+ imageUrl: "/images/speakers/joe_consorti.jpg",
+ description: "A young financial whiz, known for his Bitcoin market analysis as the Institutional Lead at The Bitcoin Layer. He graduated with a BSBA in Finance from UVM in 2022. His insights are often featured in Bitcoin Magazine, where he simplifies the complex world of crypto with a touch of humor. As he is an Eagle Scout, Joe combines traditional values with cutting-edge financial acumen.",
+ stats: "",
+ active: true
+ },
+ {
+ name: "",
+ title: "",
+ twitterHandle: "",
+ imageUrl: "",
+ description: "",
+ stats: "",
+ active: false
+ }
+];
+
+const Speakers: React.FC = () => {
+ const [selectedSpeaker, setSelectedSpeaker] = useState(null);
+
+ return (
+
+
+ {speakers.map((speaker, index) => {
+ if (speaker.active) {
+ return (
+
+ setSelectedSpeaker(speaker)}/>
+
+ );
+ } else {
+ return (
+
+ {
+ }}/>
+
+ );
+ }
+ })}
+
+ ...stay tuned for the reveal of more names that will sweeten your journey down the rabbit hole!
+
+ {selectedSpeaker && (
+ setSelectedSpeaker(null)}>
+ {selectedSpeaker.name}
+
+ {selectedSpeaker.twitterHandle}
+
+ {selectedSpeaker.description}
+
+ )}
+
+
+ );
+};
+
+export default Speakers;
\ No newline at end of file
diff --git a/src/app/components/sponsors/_sponsors.scss b/src/app/components/sponsors/_sponsors.scss
new file mode 100644
index 0000000..57011dc
--- /dev/null
+++ b/src/app/components/sponsors/_sponsors.scss
@@ -0,0 +1,36 @@
+.sponsors {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+}
+.sponsors li {
+ padding: 0;
+ width: 100%;
+ background-color: white;
+}
+.sponsor {
+ position: relative;
+ display: block;
+ padding: 36px;
+ border: 1px solid var(--coolest);
+ border-radius: 4px;
+}
+.sponsor img {
+ cursor: pointer;
+}
+.sponsor img:hover {
+ opacity: 0.7;
+}
+.sponsor a {
+ position: absolute;
+ bottom: 6px;
+ right: 6px;
+ width: 24px;
+ height: 24px;
+}
+.sponsor a:hover {
+ bottom: 4px;
+ right: 4px;
+ width: 28px;
+ height: 28px;
+}
diff --git a/src/app/components/sponsors/sponsors.tsx b/src/app/components/sponsors/sponsors.tsx
new file mode 100644
index 0000000..d64154e
--- /dev/null
+++ b/src/app/components/sponsors/sponsors.tsx
@@ -0,0 +1,108 @@
+"use client";
+import React, {FC} from 'react';
+import Image from 'next/image'
+import SectionWrapper from '../section-wrapper';
+//
+interface Sponsor {
+ name: string;
+ imageUrl: string;
+ twitterUrl: string;
+ websiteUrl: string;
+}
+//
+const sponsors: Sponsor[] = [
+ {
+ name: 'Theya',
+ imageUrl: '/images/sponsors/logo-theya.png',
+ twitterUrl: 'https://x.com/TheyaBitcoin',
+ websiteUrl: 'https://www.theya.us/'
+ },
+ {
+ name: 'Bitcoin Opportunity Fund',
+ imageUrl: '/images/sponsors/logo-bitcoin_opportunity_fund.png',
+ twitterUrl: 'https://x.com/BTCOppFund',
+ websiteUrl: 'https://www.bitcoinopportunity.fund/'
+ },
+ {
+ name: 'Unchained',
+ imageUrl: '/images/sponsors/logo-unchained.png',
+ twitterUrl: 'https://x.com/unchainedcom',
+ websiteUrl: 'https://unchained.com/'
+ },
+ {
+ name: 'Bitcoin Well',
+ imageUrl: '/images/sponsors/logo-bitcoin_well.png',
+ twitterUrl: 'https://x.com/TheBitcoinWell',
+ websiteUrl: 'https://bitcoinwell.com/'
+ },
+ {
+ name: 'Bitcoin News',
+ imageUrl: '/images/sponsors/logo-bitcoin_news.png',
+ twitterUrl: 'https://x.com/BitcoinNewsCom',
+ websiteUrl: 'https://bitcoinnews.com/'
+ },
+ {
+ name: 'The Beef Initiative',
+ imageUrl: '/images/sponsors/logo-the_beef_initiative.png',
+ twitterUrl: 'https://x.com/beefinitiative',
+ websiteUrl: 'https://beefinitiative.com/'
+ },
+ {
+ name: 'Satoshi%apos;s Journal',
+ imageUrl: '/images/sponsors/logo-satoshis_journal.png',
+ twitterUrl: 'https://x.com/SatoshisJournal',
+ websiteUrl: 'https://satoshisjournal.com/'
+ },
+ {
+ name: 'Proof of Ink',
+ imageUrl: '/images/sponsors/logo-proof_of_ink.png',
+ twitterUrl: 'https://x.com/ProofofInk',
+ websiteUrl: 'https://proofofink.com/'
+ },
+ {
+ name: 'Panties For Bitcoin',
+ imageUrl: '/images/sponsors/logo-panties_for_bitcoin.png',
+ twitterUrl: 'https://x.com/PantiesBitcoin',
+ websiteUrl: 'https://www.pantiesforbitcoin.com/'
+ },
+ {
+ name: 'Market Disruptors',
+ imageUrl: '/images/sponsors/logo-market_disruptors.png',
+ twitterUrl: 'https://x.com/MDisruptors',
+ websiteUrl: 'https://www.1markmoss.com/optin-615411121709722339494'
+ },
+ {
+ name: 'Events By Anders',
+ imageUrl: '/images/sponsors/logo-events_by_anders.png',
+ twitterUrl: 'https://x.com/Anders_',
+ websiteUrl: 'https://eventsbyanders.com/'
+ }
+];
+
+const TwitterX = () => (
- ({ children, className, as: Component = "div", onMouseEnter, onMouseLeave, ...props }, ref) => (
+ ({ children, className, as: Component = "div", onMouseEnter, onMouseLeave }, ref) => (
{children}
@@ -35,15 +34,15 @@ export const CardContainer = forwardRef(
);
export const CardBody = forwardRef(
- ({ children, className, as: Component = "div", ...props }, ref) => (
-
+ ({ children, className, as: Component = "div" }, ref) => (
+
{children}
)
);
export const CardItem = forwardRef(
- ({ children, className, as: Component = "div", translateZ, rotateX, rotateZ, translateX, onClick, ...props }, ref) => {
+ ({ children, className, as: Component = "div", translateZ, rotateX, rotateZ, translateX, onClick }, ref) => {
const style = {
transform: `
translateZ(${translateZ || 0}px)
@@ -54,7 +53,7 @@ export const CardItem = forwardRef(
};
return (
-
+
{children}
);
diff --git a/src/app/components/ui/accordion-menu/_accordion-menu.scss b/src/app/components/ui/accordion-menu/_accordion-menu.scss
new file mode 100644
index 0000000..dc9d586
--- /dev/null
+++ b/src/app/components/ui/accordion-menu/_accordion-menu.scss
@@ -0,0 +1,32 @@
+.accordion {
+ margin-bottom: 28px;
+ border: 1px solid var(--coolest);
+ border-radius: 4px;
+ overflow: hidden;
+}
+.accordion ul li {
+ margin-bottom: 2px;
+}
+.accordion ul li b {
+ margin-right: 6px;
+}
+.accordion-title {
+ display: flex;
+ padding: 10px;
+ border-bottom: 1px solid var(--coolest);
+ cursor: pointer;
+}
+div.accordion-item:last-child .accordion-title {
+ border-bottom: none;
+}
+.accordion-title div:first-child {
+ margin-right: 8px;
+ text-decoration: underline;
+}
+.accordion-title div:first-child:hover {
+ color: var(--warm);
+}
+.accordion-content {
+ padding: 10px;
+ border-bottom: 1px solid var(--coolest);
+}
diff --git a/src/app/components/ui/accordion-menu/accordion-menu.tsx b/src/app/components/ui/accordion-menu/accordion-menu.tsx
new file mode 100644
index 0000000..2ab980b
--- /dev/null
+++ b/src/app/components/ui/accordion-menu/accordion-menu.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import React, {useState, ReactElement, JSX} from 'react';
+
+interface AccordionItem {
+ title: string;
+ content: string | ReactElement | JSX.Element;
+}
+interface AccordionProps {
+ items: AccordionItem[];
+}
+
+const Accordion: React.FC = ({items}) => {
+ const [activeIndex, setActiveIndex] = useState(null);
+ const onTitleClick = (index: number) => {
+ setActiveIndex(index === activeIndex ? null : index);
+ };
+ return (
+
+ {items.map((item, index) => (
+
+
onTitleClick(index)}>
+
{item.title}
+
{activeIndex === index ? '-' : '+'}
+
+ {activeIndex === index && (
{item.content}
)}
+
+ ))}
+
- {children}
-
+
+
+ Camp Nakamoto
+
+ {children}
+
+
-
+
-
-
-
-
-
-
+
);
}
-export default Home;
\ No newline at end of file
+export default Home;
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
new file mode 100644
index 0000000..13a9505
--- /dev/null
+++ b/src/styles/_base.scss
@@ -0,0 +1,81 @@
+html, main {
+ background-color: var(--coolest);
+}
+body {
+ font-family: 'Fredoka', sans-serif;
+ scroll-behavior: smooth;
+ color: var(--coolest);
+}
+nav {
+ border-bottom-left-radius: 16px;
+ border-bottom-right-radius: 16px;
+}
+nav ul {
+ display: block;
+}
+
+nav button {
+ display: block;
+}
+
+main {
+ position: relative;
+ background: transparent;
+}
+
+section{
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 24px 16px;
+ font-family: "Fredoka", cursive;
+ font-size: 18px;
+ border-radius: 16px;
+ background-color: var(--neutral-light);
+ box-shadow: 5px 5px 25px -2px rgba(0, 0, 0, 0.5);
+}
+
+li {
+ margin-bottom: 16px;
+ padding-left: 20px;
+}
+
+h2 {
+ width: fit-content;
+ padding: 8px 16px 0 16px;
+ margin-top: 8px;
+ margin-bottom: 26px;
+ color: var(--warmest);
+ border: 2px solid var(--warmest);
+ border-radius: 50px;
+ box-shadow:
+ 0 0 0 3px var(--neutral-light),
+ 0 0 0 5px var(--warmest);
+ font-family: "Luckiest Guy", cursive;
+ font-size: 28px;
+ font-weight: bold;
+ line-height: 28px;
+}
+
+h3 {
+ font-family: "Fredoka", cursive;
+ font-weight: bold;
+ font-style: normal;
+ font-size: 24px;
+ margin-top: 24px;
+ margin-bottom: 8px;
+ line-height: 24px;
+}
+
+h4 {
+ font-weight: bold;
+ font-style: italic;
+}
+
+p {
+ margin-top: 12px;
+ margin-bottom: 12px;
+}
+
+sup {
+ font-size: 0.5em;
+}
diff --git a/src/styles/_media-queries.scss b/src/styles/_media-queries.scss
new file mode 100644
index 0000000..4b83a3b
--- /dev/null
+++ b/src/styles/_media-queries.scss
@@ -0,0 +1,52 @@
+@media (min-width: 480px) {
+ .hero-logo {
+ width: 50%;
+ }
+ .hero-copy {
+ top: -32px;
+ }
+ .sponsors li {
+ width: 48.66%;
+ }
+ .camp-nakamoto-bg {
+ padding: 0 24px 24px 24px;
+ }
+}
+
+@media (min-width: 768px) {
+ h2 {
+ margin-bottom: 48px;
+ }
+ nav button {
+ display: none;
+ }
+ section{
+ padding: 60px 48px 48px 48px;
+ }
+ footer .footer-left {
+ justify-content: flex-start;
+ a {
+ width: 48px;
+ }
+ }
+ .hero-logo {
+ width: 40%;
+ }
+ .sponsors li {
+ width: 32.3%;
+ }
+ .camp-nakamoto-bg {
+ padding: 0 48px 48px 48px;
+ }
+ .section-divider {
+ height: 18px;
+ }
+}
+
+@media (min-width: 920px) {
+ .nav-wrapper .nav-link {
+ font-size: 18px;
+ line-height: 22px;
+ padding-left: 24px;
+ }
+}
diff --git a/src/styles/_stars-background.scss b/src/styles/_stars-background.scss
new file mode 100644
index 0000000..3444dc4
--- /dev/null
+++ b/src/styles/_stars-background.scss
@@ -0,0 +1,90 @@
+.background-container {
+ position: fixed;
+ top: 0;
+ left:0;
+ bottom: 0;
+ right: 0;
+}
+
+.background-container .stars {
+ background: black url(/images/stars.png) repeat;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ display: block;
+ z-index: 0;
+}
+
+.background-container .twinkling{
+ width:10000px;
+ height: 100%;
+ background: transparent url("/images/twinkling.png") repeat;
+ background-size: 1000px 1000px;
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ z-index: 2;
+
+ -moz-animation:move-background 70s linear infinite;
+ -ms-animation:move-background 70s linear infinite;
+ -o-animation:move-background 70s linear infinite;
+ -webkit-animation:move-background 70s linear infinite;
+ animation:move-background 70s linear infinite;
+
+}
+
+.background-container .clouds{
+ width:10000px;
+ height: 100%;
+ background: transparent url("/images/clouds_repeat.png") repeat;
+ background-size: 1000px 1000px;
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ z-index: 3;
+
+ -moz-animation:move-background 150s linear infinite;
+ -ms-animation:move-background 150s linear infinite;
+ -o-animation:move-background 150s linear infinite;
+ -webkit-animation:move-background 150s linear infinite;
+ animation:move-background 150s linear infinite;
+}
+
+keyframes move-background {
+ from {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+ to {
+ -webkit-transform: translate3d(1000px, 0px, 0px);
+ }
+}
+@-webkit-keyframes move-background {
+ from {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+ to {
+ -webkit-transform: translate3d(1000px, 0px, 0px);
+ }
+}
+
+@-moz-keyframes move-background {
+ from {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+ to {
+ -webkit-transform: translate3d(1000px, 0px, 0px);
+ }
+}
+
+@-webkit-keyframes move-background {
+ from {
+ -webkit-transform: translate3d(0px, 0px, 0px);
+ }
+ to {
+ -webkit-transform: translate3d(1000px, 0px, 0px);
+ }
+}
diff --git a/src/styles/_tailwind.scss b/src/styles/_tailwind.scss
new file mode 100644
index 0000000..a31e444
--- /dev/null
+++ b/src/styles/_tailwind.scss
@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
new file mode 100644
index 0000000..1b9c9ab
--- /dev/null
+++ b/src/styles/_variables.scss
@@ -0,0 +1,10 @@
+:root {
+ --coolest: #1A3A4A;
+ --cooler: #4A90E2;
+ --cool: #228B22;
+ --warm: #DAA520;
+ --warmer: #F97316;
+ --warmest: #8B0000;
+ --neutral-dark: #708090;
+ --neutral-light: #F5F5F5;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
new file mode 100644
index 0000000..ac166e7
--- /dev/null
+++ b/src/styles/index.scss
@@ -0,0 +1,31 @@
+@import "./tailwind";
+@import "./variables";
+@import "./base";
+
+.camp-nakamoto{
+ padding: 12px 12px 18px 12px;
+}
+
+.site-wrapper {
+ background-color: var(--neutral-light);
+}
+.site-wrapper i {
+ display: inline-block;
+ margin-right: 12px;
+}
+
+.section-divider {
+ height: 52px;
+}
+
+@import "../app/components/ui/accordion-menu/accordion-menu";
+
+@import "../app/components/navbar/navbar";
+@import "../app/components/hero/hero";
+@import "../app/components/speakers/speakers";
+@import "../app/components/faqs/faqs";
+@import "../app/components/sponsors/sponsors";
+@import "../app/components/footer/footer";
+
+@import "./media-queries";
+@import "./stars-background";
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index bfcfc2f..e36c5d5 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -9,23 +9,14 @@ const config: Config = {
theme: {
extend: {
colors: {
- primary: '#FF8225',
- secondary: '#B43F3F',
- accent: '#173B45',
- background: '#F8EDED',
- text: '#333333',
- bitcoin: '#F7931A',
- gray: {
- 100: '#F7FAFC',
- 200: '#EDF2F7',
- 300: '#E2E8F0',
- 400: '#CBD5E0',
- 500: '#A0AEC0',
- 600: '#718096',
- 700: '#4A5568',
- 800: '#2D3748',
- 900: '#1A202C',
- },
+ coolest: "#1A3A4A",
+ cooler: "#4A90E2",
+ cool: "#228B22",
+ warm: "#DAA520",
+ warmer: "#F97316",
+ warmest: "#8B0000",
+ neutraldark: "#708090",
+ neutrallight: "#F5F5F5"
},
},
},
+