import React from "react";

import { Heart, Sparkles, Calendar, BookOpen, Music, Mail, Star, Feather, Sun, Gem, Moon } from "lucide-react";

import { Card, CardContent } from "@/components/ui/card";

import { Button } from "@/components/ui/button";

export default function ByDivineGraceWebsite() {

const bookingLink = "https://www.bydivinegrace.com/book-a-session";

const freeMessageLink = "https://www.bydivinegrace.com/angelic-messages";

const youtubeLink = "https://www.youtube.com/@PetaLynne";

const mailchimpSignupLink = "https://www.bydivinegrace.com/newsletter";

const angelicMessages = [

"All is well at the deepest level. Let your heart rest in that truth for one breath, and then another.",

"Guilt is not the tool of God. Love teaches gently, restores kindly, and calls you forward without shame.",

"Choose love over fear, not because fear is wrong, but because love is the greater intelligence within you.",

];

return (

</div>

<span className="text-xl tracking-wide font-serif text-[#fffdf8]">By Divine Grace</span>

</div>

<a href="#sessions" className="hover:text-[#ffeebf]">Sessions</a>

<a href="#messages" className="hover:text-[#ffeebf]">Messages</a>

<a href="#books" className="hover:text-[#ffeebf]">Books</a>

<a href="#contact" className="hover:text-[#ffeebf]">Contact</a>

</nav>

</div>

</header>

<div>

<p className="uppercase tracking-[0.35em] text-xs text-[#ffe2a8] mb-5">Angelic Guidance • Comfort • Clarity</p>

Come home to the wisdom already within you.

</h1>

By Divine Grace offers heart-centered channeled guidance, gentle spiritual support, and messages of love for those seeking peace, courage, and a deeper trust in life.

</p>

Book a Guidance Session

</Button>

</a>

Receive a Free Message

</Button>

</a>

</div>

</div>

“Beloved one, you are not alone. You are held, guided, loved, and invited again and again into peace.”

</p>

<p className="mt-5 text-center text-sm uppercase tracking-[0.25em] text-[#ffe2a8]">A message of Divine Grace</p>

</CardContent>

</Card>

</div>

</section>

<h2 className="font-serif text-4xl md:text-5xl text-[#fffdf8]">A sanctuary for the soul</h2>

In a world that often feels hurried and uncertain, this is a quiet place to remember what is eternal: love, presence, forgiveness, courage, and the living intelligence of the heart.

</p>

</div>

{[

{ icon: Calendar, title: "Private Sessions", text: "Receive personal channeled guidance by phone, with warmth, clarity, and deep respect for your path.", link: bookingLink },

{ icon: Feather, title: "Angelic Messages", text: "Read comforting messages that help you choose love over fear and return to the peace of now.", link: freeMessageLink },

{ icon: Music, title: "Meditations & Songs", text: "Rest with soothing spiritual audio, sleep meditations, and music created to calm the heart.", link: youtubeLink },

].map((item, index) => (

<item.icon className="w-9 h-9 text-[#ffeebf] mb-5" />

<h3 className="font-serif text-2xl mb-3 text-[#fffdf8] drop-shadow-sm">{item.title}</h3>

</CardContent>

</Card>

</a>

))}

</div>

</section>

<div>

<p className="uppercase tracking-[0.3em] text-xs text-[#fff0c8] mb-4">Guidance Sessions</p>

<h2 className="font-serif text-4xl md:text-5xl text-[#fffdf8]">A loving conversation with Divine Grace</h2>

Sessions are offered as a sacred space for questions, healing, perspective, and remembrance. Many people come when they are facing a transition, seeking reassurance, or longing to feel connected to guidance again.

</p>

You do not have to be perfect, prepared, or spiritually advanced. You only need to arrive with sincerity and an open heart.

</p>

Schedule a Session

</Button>

</a>

</div>

{["Clarity during life transitions", "Comfort when your heart feels heavy", "Spiritual perspective without judgment", "A reminder that all is well at the deepest level"].map((text, i) => (

</div>

))}

</div>

</section>

“Peace is not far away. It is the soft return of your attention to love.”

</p>

<p className="mt-6 text-[#fff1dd]">Receive gentle messages for courage, gratitude, forgiveness, and trust.</p>

</CardContent>

</Card>

<div>

<p className="uppercase tracking-[0.3em] text-xs text-[#ffeebf] mb-4">Daily Nourishment</p>

<h2 className="font-serif text-4xl md:text-5xl text-[#fffdf8]">Messages for your heart</h2>

Explore a growing library of channeled messages, prayers, affirmations, and reflections. Let each message become a doorway back to stillness, compassion, and the quiet authority of your own soul.

</p>

Read the Messages

</Button>

</a>

</div>

{angelicMessages.map((message, index) => (

<p className="font-serif text-xl leading-8 text-[#fffdf8]">“{message}”</p>

</CardContent>

</Card>

))}

</div>

</section>

<h2 className="font-serif text-4xl md:text-5xl text-[#fffdf8]">Books, teachings, and sacred companions</h2>

Discover writings created to uplift, steady, and expand the reader — from channeled books to practical guides for courageous living.

</p>

</div>

{["A Summons to Courage", "The Miracle of Gratitude", "Angelic Messages for You"].map((title, i) => (

</div>

<h3 className="font-serif text-2xl mb-3 text-[#fffdf8] drop-shadow-sm">{title}</h3>

<p className="text-[#fff5eb] leading-7">A companion for reflection, healing, and the remembrance of love.</p>

</CardContent>

</Card>

))}

</div>

</section>

<h2 className="font-serif text-4xl md:text-5xl text-[#fffdf8]">Receive comfort in your inbox</h2>

Join the By Divine Grace mailing list for gentle messages, session invitations, meditations, and reminders that you are loved.

</p>

<input

className="flex-1 rounded-full px-6 py-4 border border-[#ffd98a]/40 bg-white/22 text-[#fff7ec] placeholder:text-[#fff1dd]/70 focus:outline-none focus:ring-2 focus:ring-[#ffd98a] backdrop-blur"

placeholder="Your email address"

Join the List

</Button>

</a>

</div>

</section>

<p className="font-serif text-xl">By Divine Grace</p>

Spiritual guidance, comfort, and messages of love.<br />www.bydivinegrace.com

</p>

</div>

</footer>

</div>

);

}