diff --git a/public/app_store_button.svg b/public/app_store_button.svg new file mode 100755 index 0000000..072b425 --- /dev/null +++ b/public/app_store_button.svg @@ -0,0 +1,46 @@ + + Download_on_the_App_Store_Badge_US-UK_RGB_blk_4SVG_092917 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/landing/happy-dog.avif b/public/landing/happy-dog.avif new file mode 100644 index 0000000..482187e Binary files /dev/null and b/public/landing/happy-dog.avif differ diff --git a/public/landing/sad-dog.avif b/public/landing/sad-dog.avif new file mode 100644 index 0000000..cfa5e3e Binary files /dev/null and b/public/landing/sad-dog.avif differ diff --git a/src/components/landing/CTA.tsx b/src/components/landing/CTA.tsx index b690e98..7db817a 100644 --- a/src/components/landing/CTA.tsx +++ b/src/components/landing/CTA.tsx @@ -4,7 +4,7 @@ const CTA = () => { return (
-
+
@@ -12,18 +12,60 @@ const CTA = () => { initial={{ opacity: 0, scale: 0.95 }} whileInView={{ opacity: 1, scale: 1 }} viewport={{ once: true }} + transition={{ type: "spring", stiffness: 100, damping: 20 }} > -

+

Ready to Start Your
Walking Journey?

-

- Join thousands of dog owners who are making every walk count. It's free to get started! +

+ Join thousands of dog owners who are making every walk count. Download the app today!

- - Join Waitlist - + {/* Download Buttons Container */} +
+ + {/* App Store Active Link */} + + {/* Apple SVG Icon */} + + + +
+

Download on the

+

App Store

+
+ + + {/* Play Store Disabled / Coming Soon Button */} +
+ {/* Play Store SVG Icon */} + + + + + +
+

Get it on

+

Google Play

+
+ {/* Absolute overlay badge indicating "Coming Soon" */} + + Soon + +
+ +
@@ -32,4 +74,4 @@ const CTA = () => { ); }; -export default CTA; +export default CTA; \ No newline at end of file diff --git a/src/components/landing/Features.tsx b/src/components/landing/Features.tsx index 593115a..78dabd5 100644 --- a/src/components/landing/Features.tsx +++ b/src/components/landing/Features.tsx @@ -1,5 +1,5 @@ import { motion } from 'motion/react'; -import { MapPin, Share2, Bookmark, Tag, Users, TrendingUp } from 'lucide-react'; +import { MapPin, Share2, Bookmark, Tag, Users, TrendingUp, Compass, Route } from 'lucide-react'; const Features = () => { const features = [ @@ -28,8 +28,8 @@ const Features = () => { iconColor: "text-brand" }, { - title: "Smart Labels", - desc: "Tag walks with helpful info like 'good for older dogs', 'off-leash friendly', or 'water access'.", + title: "Smart Marching", + desc: "You tell us about your dog. Our community tags every trail. Then we combine this information - so you can choose where to go with confidence.", icon: Tag, size: "md:col-span-8", color: "bg-brand/20", @@ -39,7 +39,7 @@ const Features = () => { title: "Community Driven", desc: "Connect with local dog walkers, share tips, and discover hidden gems in your area.", icon: Users, - size: "md:col-span-6", + size: "md:col-span-8", color: "bg-brand/20", iconColor: "text-brand" }, @@ -47,7 +47,23 @@ const Features = () => { title: "Track Progress", desc: "Monitor your walking stats over time and celebrate milestones with your four-legged companion.", icon: TrendingUp, - size: "md:col-span-6", + size: "md:col-span-4", + color: "bg-brand/20", + iconColor: "text-brand" + }, + { + title: "Discover new places", + desc: "Find trails you didn't know existed - that bring out the best in your dog.", + icon: Compass, + size: "md:col-span-5", + color: "bg-brand/20", + iconColor: "text-brand" + }, + { + title: "Break the routine", + desc: "No more defaulting to the same path. Open the app. Go somewhere new.", + icon: Route, + size: "md:col-span-7", color: "bg-brand/20", iconColor: "text-brand" } diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx index ed4a829..142846b 100644 --- a/src/components/landing/Hero.tsx +++ b/src/components/landing/Hero.tsx @@ -15,7 +15,7 @@ const Hero = () => { className="text-left" >
- Simple and effective dog walking + Life Unleashed

@@ -25,12 +25,12 @@ const Hero = () => {

- Record your dog walks, discover new routes, and connect with fellow dog owners. Track every tail wag, share your favorite trails, and build a community of happy pups. + Discover new trails that match your dog's needs, and turn everyday walks into real adventures.

diff --git a/src/components/landing/ProblemSolution.tsx b/src/components/landing/ProblemSolution.tsx new file mode 100644 index 0000000..6b146a5 --- /dev/null +++ b/src/components/landing/ProblemSolution.tsx @@ -0,0 +1,170 @@ +import React from 'react'; +import { motion } from 'motion/react'; + +const ProblemSolution = () => { + // Animation variants for the parent container (triggers cascading/staggered effects) + const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.2, // Time gap between card animations + }, + }, + }; + + // Animation variants for individual cards + const cardVariants = { + hidden: { opacity: 0, y: 40 }, + visible: { + opacity: 1, + y: 0, + transition: { type: "spring", stiffness: 100, damping: 15 }, + }, + }; + + return ( +
+
+ + {/* Animated Header Section */} + +

+ Finding the Right Walk for Your Dog +

+

+ Understanding the challenge and how TailTrails solves it +

+ + + {/* Grid Container coordinating the card entries */} + + + {/* Problem Card */} + +
+
+ +
+ +
+
+ ! +
+

The Problem

+
+ +

+ Most "dog-friendly" places aren't actually right for your dog. +

+ +
    +
  • + • + Too busy. Too unpredictable. Too many dogs. Not enough space. +
    • +
  • + • + Or the opposite; too quiet, too short, too much of the same thing. +
    • +
+ +

+ So you either: +

+ +
    +
  • + • + Play it safe and stick to the same walk +
    • +
  • + • + Or take a risk and hope it works out +
    • +
+
+ +

+ Neither feels great. +

+ + + {/* Solution Card */} + +
+
+ +
+ +
+
+ ✓ +
+

The Solution

+
+ +

+ TailTrails filters the world around your dog. +

+ +
    +
  • + • + Every trail is tagged - environment, terrain, traffic, exposure. +
    • +
  • + • + Every dog is different - energy, behaviour, needs. +
    • +
+ +

+ We bring the two together. +

+
+ +

+ So you can choose walks that bring out the best in your dog. +

+ + + +
+
+ ); +}; + +export default ProblemSolution; \ No newline at end of file diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index b1a2398..b2a2f32 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -2,6 +2,7 @@ import Header from "@/components/landing/Header"; import Hero from "@/components/landing/Hero"; import Features from "@/components/landing/Features"; import HowItWorks from "@/components/landing/HowItWorks"; +import ProblemSolution from "@/components/landing/ProblemSolution"; import CTA from "@/components/landing/CTA"; import Footer from "@/components/landing/Footer"; @@ -11,7 +12,8 @@ const Index = () => {
- + + {/* */}